Trying to test the following using jest and Enzyme. When I run npm-coverage, it shows that each case has not being tested. Not really sure how to approach a solution
Here is the code
renderColumnDropdown = () => {
if (this.props.columnIdList != undefined) {
let columnOptions = Object.keys(this.props.columnIdList).map(key => {
switch (key) {
case 'sort':
return false
case 'filters':
return false
case 'group':
return false
case 'dimensions':
return false
case 'pivot':
return false
case 'pivotanalysis':
return false
default:
return (
<option value={key} key={key}>{this.props.columnIdList[key]}</option>
)
}
})
This is how I usually set up my test cases: Using shallow
it('Test renderColumnDropdown function',() => {
wrapper.setProps({
columnIdList:[{
key:'pivotanalysis'
}],
})
wrapper.setState({
}),
wrapper.update();
expect(wrapper.instance().renderColumnDropdown({defaultData:{filters:[{ column:''}]}})).toBeDefined();
});
You can refactor your code by combining all cases in one which are returning same value to get them covered, and it should have first key to cover all branches.
switch (key) {
case 'sort':
case 'filters':
case 'group':
case 'dimensions':
case 'pivot':
case 'pivotanalysis':
return false
default:
return (
<option value={key} key={key}>{this.props.columnIdList[key]}</option>
)
Related
caps.component.ts:->
if (Acc.accOpen()) {
this.keyboardShowListener = Keyboard.addListener('keyboardDidShow', () => {
this.ngZone.run(() => {
this.isKeyboardVisible = true;
})
});
}
how can I write unit test case for this?
WebStorm works really bad with Svelte. I'm new in Svelte though may be I didn't miss smth?
I have a store:
import { writable } from 'svelte/store'
import type { IQuestion } from 'src/utils/db'
interface IQuestionStore {
activeQuestion: null | IQuestion
isQuestionShowing: boolean
isAnswered: boolean
}
const createStore = () => {
const { subscribe, update } = writable<IQuestionStore>({
activeQuestion: null,
isQuestionShowing: false,
isAnswered: false
})
return {
subscribe,
answer: () => update((state) => ({ ...state, isAnswered: true })),
show: (activeQuestion: IQuestion) =>
update((state) => ({ ...state, activeQuestion, isQuestionShowing: true })),
close: () =>
setTimeout(() => {
update((state) => ({ ...state, isQuestionShowing: false, isAnswered: false }))
}, 1000)
}
}
export const questionStore = createStore()
And then in component, when I try to get isAnswered I get an error in WebStorm "Unresolved variable isAnswered". By the way VSCode doesn't highlight it like an error.
<script lang="ts">
import { questionStore } from '../store/questionStore'
console.log($questionStore.isAnswered)
</script>
If I convert store to this it works well:
interface IQuestionStore {
activeQuestion: null | IQuestion
isQuestionShowing: boolean
isAnswered: boolean
}
export const questionStore = writable<IQuestionStore>({
activeQuestion: null,
isQuestionShowing: false,
isAnswered: false
})
And! I also have an another store which looks the same in general, just other names. And it works well too! WTF? May be I'm missing something? Or may be I need to make some fixes in WebStorm to force it work well with Svelte?
I am working on a button component that also receives a default state value.
export default {
props: {
defaultState: {
type: Boolean,
default: false
}
},
data() {
return {
currentState: this.defaultState
}
},
computed: {
isActive() {
return this.currentState;
},
}
...
}
And i can am using it like <button :defaultState="true"/>.
Now the problem is when I am trying to write a test for my component I always gets the false (which is default value) value of currentState after using the wrapper.setProps({ defaultState: true }) that should be true
it.only ('should work with dynamic state change', async () => {
wrapper.setProps({
defaultState: true
});
await wrapper.vm.$nextTick();
// shows the true
console.log( wrapper.vm.defaultState );
// should be true but i get false
console.log( wrapper.vm.currentState );
});
Can anybody please point me to the right direction and what I have missed?
a better solution for this is to create a computed property. This would eliminate the need for both the data property and the watcher:
export default {
props: {
defaultState: {
type: Boolean,
default: false
}
},
computed: {
currentState() {
return this.defaultState
}
}
}
However, if your component is this simple, the computed currentValue property is not needed at all! Because all it does it repeat the value of the defaultState prop which by itself is already reactive.
So it means you are adding complexity to a component just to make it work for the tests... and the component would work perfectly even if you didn't have this.
And I'm trying to make unit-test for redux reducer. But i'm struggling with receiving the same expected and equal results.
const initState = {};
export default function (state = initState, action) {
const newState = { ...state };
switch (action.type) {
case CREATE_TYPE:
return {
...state,
[action.customType.id]: {
...action.customType
}
};
default:
return state;
}
}
My test. Seems that problem in customType: { id: 'test-id' }
describe('reducer', () => {
it('should return the initial state', () => {
const state = reducer(undefined, { type: 'unknown' });
expect(state).toEqual({});
});
it('should handle CREATE_TYPE', () => {
expect(reducer({ test: true }, {
type: CREATE_TYPE,
customType: { id: 'test-id' },
id: 'test-id'
})).toEqual({
'test-id': 'test-type',
'test': true
});
});
});
Often it helps to spell everything out.
That way you can clearly understand what your expected outcome needs to be.
it('should handle CREATE_TYPE', () => {
const initialState = { test: true };
const customType = { id: 'test-id' };
const action = {
type: CREATE_TYPE,
customType: customType,
id: customType.id
};
const result = reducer(initialState, action);
const expectedResult = {
test: true,
[customType.id]: customType
};
expect(result).toEqual(expectedResult);
});
It then becomes easier to see exactly where the issue lies.
You are exprecting back from your reducer :
{
...state,
[action.customType.id]: {
...action.customType
}
which if you send
{
type: CREATE_TYPE,
customType: { id: 'test-id' },
id: 'test-id'
}
Will equate itself to :
{
...state,
'test-id' : { id: 'test-id' }
}
and you are evaluating it equal to
{
...state,
'test-id': 'test-type'
}
I don't know how you are expecting to format your state via your reducer - but the way your reducer is set up now will not provide the state you are expecting. I don't know what you are expecting because i don't see the node or value 'test-type' anywhere else in your provided code. It looks like you just have some syntactical errors maybe?
Is it possible to set custom url for a specific type?
For example, this is my adapter definition:
/adapters/application.js
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({
namespace: 'v1',
defaultSerializer: 'JSONSerializer',
host: 'http://api.example.com'
});
No what I want is to set a custom url for a specific adapter method. By default, each request will be sent to http://api.example.com/v1/{model} but for the store.query() method for example, I would like to tell ember to request http://api.example.com/v1/{model}/search
Thank you
Yes, you have pathForType for the JSONAPI adapter
Edit:
This is how it works by default:
pathForType: function(modelName) {
var dasherized = Ember.String.dasherize(modelName);
return Ember.String.pluralize(dasherized);
},
You receive the name of the model and you can return a different url.
But, since you want to specify a different url depending on a method, you should use buildURL:
buildURL: function(modelName, id, snapshot, requestType, query) {
switch (requestType) {
case 'findRecord':
return this.urlForFindRecord(id, modelName, snapshot);
case 'findAll':
return this.urlForFindAll(modelName);
case 'query':
return this.urlForQuery(query, modelName);
case 'queryRecord':
return this.urlForQueryRecord(query, modelName);
case 'findMany':
return this.urlForFindMany(id, modelName, snapshot);
case 'findHasMany':
return this.urlForFindHasMany(id, modelName);
case 'findBelongsTo':
return this.urlForFindBelongsTo(id, modelName);
case 'createRecord':
return this.urlForCreateRecord(modelName, snapshot);
case 'updateRecord':
return this.urlForUpdateRecord(id, modelName, snapshot);
case 'deleteRecord':
return this.urlForDeleteRecord(id, modelName, snapshot);
default:
return this._buildURL(modelName, id);
}
},