Testcafe provides fixtures and tests to organize the tests. How can I use fixture and test to accomplish the test structure like below mocha structure
Here is the example test structure in mocha
describe('test', () => {
beforeEach(() => {
....
}
describe('test suite 1', () => {
beforeEach(() => {
...
}
it('test1', () => {
...
}
it('test2', () => {
...
}
}
describe('test suite 2', () => {
beforeEach(() => {
...
}
it('test3', () => {
...
}
it('test4', () => {
...
}
}
}
At present, TestCafe doesn't allow creating nested tests, but we may implement this feature in the future. I suggest you track the https://github.com/DevExpress/testcafe/issues/792 issue in the TestCafe repository to be informed about our progress in this regard.
Related
I am doing unit test of vue component methods through vue-test-utils and facing an weird issue. wrapper.vm.somemthod() is executing old code that was written earlier inside the method. It's printing old console.log statements. If I put new console.log statement, it's not printing that at all. Am I missing something?
import { mount, shallowMount } from '#vue/test-utils'
import TestComponent from '#/components/TestComponent.vue'
const mockMixin = {
methods: {
InnerMethod() {
return 2;
},
}
}
describe('Test Screen', () => {
let wrapper;
let mock;
beforeAll(() => {
mock = new MockAdapter(api);
})
beforeEach(() => {
jest.resetModules();
wrapper = mount(TestComponent, {
i18n,
vuetify,
mixins: [mockMixin],
data() {
},
mocks: {
$t: (msg) => msg,
$config: (value) => value,
$store: (value) => value,
$route: (value) => value,
}
});
})
afterEach(() => {
mock.reset();
wrapper.destroy();
wrapper = null;
});
describe('Component Test', () => {
it('getdata', async () => {
expect(wrapper.vm.somedata.length).toBe(0);
const spy = jest.spyOn(wrapper.vm, 'InnerMethod');
wrapper.vm.someMethod();
expect(spy).toBeCalledTimes(1);
expect(wrapper.vm.somedata.length).toBe(2);
});
});
});
I'm working on a vueJS component that allows to display a modal after 5 seconds. the component works well as expected.
<template>
<vue-modal v-if="showModal" data-testid="modal-testid" />
</template>
<script>
export default {
name: "TimeoutExample",
data() {
return {
showModal: false,
}
},
mounted() {
setTimeout(() => this.displayModal(), 5000)
},
methods: {
displayModal: function() {
this.showModal = true;
}
}
};
</script>
I implemented the unit tests using jest, testing-library and I wanted to use jest.useFakeTimers to simulate the timeout, but the test is KO.
// testing file
describe.only('Vue Component (mobile) 2', () => {
beforeAll(() => {
isMobile.mockImplementation(() => true)
})
beforeEach(() => {
jest.useFakeTimers()
})
afterEach(() => {
jest.runOnlyPendingTimers()
jest.useRealTimers()
})
it('should render title after `props.delay` milliseconds', () => {
const { queryByTestId } = myRender({
localVue: myMakeLocalVue(),
})
jest.advanceTimersByTime(5001)
expect(queryByTestId('modal-testid')).toBeVisible()
})
})
do you have any idea how i can test this behavior?
remove this jest.spyOn(global, 'setTimeout'). jest will do it's own magic with for this with useFakeTimers
I suppose you can not use async and done callback in one test case. Which version of jest do you use?
Add await localVue.$nextTick() after advanceTimersByTime to wait until Vue apply all the changes
It works for me after calling advanceTimersByTime inside waitFor.
describe.only('Vue Component (mobile) 2', () => {
beforeAll(() => {
isMobile.mockImplementation(() => true)
})
beforeEach(() => {
jest.useFakeTimers()
})
afterEach(() => {
jest.runOnlyPendingTimers()
jest.useRealTimers()
})
it('should render title after `props.delay` milliseconds', async () => {
const { queryByTestId } = myRender({
localVue: myMakeLocalVue(),
})
await waitFor(() => {
jest.advanceTimersByTime(5001)
})
expect(queryByTestId('modal-testid')).toBeVisible()
})
})
I need to implement a test that checks if the function has been called on the button click
onSave (e) {
this.$qiwaApi.createDimension()
.then(() => {})
.catch(err => this.showSnackbar(err.message))}
I need to test the function createDimension. In my test i mocked it
const createComponent = () => {
wrapper = mount(dimensions, {
store,
localVue,
mocks: {
$qiwaApi: {
createDimension: function (e) {
return new Promise((resolve) => { resolve({}) })
}
}
},
router
})
}
In the project, the function exported this way
export default $axios => ({
createDimension (data, surveyId) {
return $axios.post(`/lmi-admin/surveys/${surveyId}/dimension`, {
data: {
attributes: {
...data
}
}
})
}
})
I expect this test to work. But for some reason wrapper.qiwaApi or wrapper.createDimension return undefined
expect(wrapper.$qiwaApi.createDimension).toHaveBeenCalled()
The wrapper doesn't provide access to your mocks that way.
You would have to hold a reference to a jest.fn(), and then verify the calls on that reference directly instead of trying to pull it out of the wrapper:
it('calls createDimension on button click', async () => {
const createDimension = jest.fn(() => Promise.resolve())
const wrapper = mount(dimensions, {
mocks: {
$qiwaApi: {
createDimension
}
}
})
await wrapper.find('[data-testid="save"]').trigger('click')
expect(createDimension).toHaveBeenCalled()
})
demo
I am struggling to write JEST test cases for below method
getStudentList (studentList:}[]) {
if (studentList.length < 1) {
Promise.resolve()
}
let promises = []
for (const student of StudentList) {
if (!student.name) {
Promise.resolve()
}
var url = `${API_URL}/${student.name}/`
promises.push(Axios.get(url}))
}
return Axios.all(promises)
.then(Axios.spread((...args) => {
// customise the response here
return args
.map(response => response.data)
.map(data => {
//do something with data
return data
})
}))
It uses axios.all and axios.spread to get the data back..i have written simple test cases for Axios.get..but how to write test case for this? This method is in a vue project in a service class
This is a short example of how you can write your expectations (with 100% coverage) for the code above:
import myService from './myService';
import Axios from 'axios';
jest.mock('axios');
global.API_URL = 'http://example.com/mock_api';
describe('myService', () => {
describe('getStudentList', () => {
describe('without students in the list', () => {
it('should result undefined', () => {
const result = myService.getStudentList();
expect(result).resolves.toEqual( undefined );
});
});
describe('with students in the list', () => {
const mockStudentList = [{
name: 'student1',
}, {
someProp: 'some value',
}, {
name: 'student3',
}];
const results = [];
const mockAxiosSpreadResult = jest.fn();
beforeAll(() => {
Axios.get.mockClear();
Axios.all.mockResolvedValue(results);
Axios.spread.mockReturnValue(mockAxiosSpreadResult);
myService.getStudentList( mockStudentList );
});
it('should call Axios.get once for each student with name', () => {
expect(Axios.get).toHaveBeenCalledWith(`${API_URL}/student1/`);
expect(Axios.get).toHaveBeenCalledWith(`${API_URL}/student3/`);
});
it('should call Axios.spread with a callback', () => {
expect(Axios.spread).toHaveBeenCalledWith(expect.any(Function));
});
it('should call the result of Axios.spread with the resolved value of Axios.all', () => {
expect(mockAxiosSpreadResult).toHaveBeenCalledWith(results);
});
describe('Axios.spread callback', () => {
let callback;
beforeAll(() => {
callback = Axios.spread.mock.calls[0][0];
});
describe('called with parameters', () => {
let result;
beforeAll(() => {
result = callback({
data: 1
},{
data: 2
},{
data: 3
},{
data: 4
});
});
it('should do something with the data', () => {
expect(result).toEqual([1,2,3,4]);
});
});
});
});
});
});
working example
in Vue , I have a util class where i abstracted the axios invocation and bit of logic..
import Axios from 'axios'..the code almost looks like this
export default {
getStudentNumber (name) {
Axios.post('myurl', { studentName: name }).then({
//some logic
//return
})
}
}
This is being invoked from my Vue class... I wrote jest test cases for Vue and I mocked the Axios in that...But is there a way to write separate test cases for this service class ? How to write it? Becuase I have a lot of logic in this... I am using jest
You can write the test for your service like this:
import Axios from 'axios';
import myService from './myService';
jest.mock('axios');
describe('my service', () => {
describe('getStudentNumber', () => {
it('should call Axios.post with myurl and studentName', () => {
myService.getStudentNumber('mock name');
expect(Axios.post).toHaveBeenCalledWith('myurl', { studentName: 'mock name' })
});
describe('given a successful response', () => {
beforeAll(() => {
// setup mock for successful flow
Axios.post.mockResolvedValue({ responseMock });
});
it('should do this', () => {
const result = myService.getStudentNumber();
// describe the expected result
expect(result).toEqual({ ...... });
});
});
describe('given an error', () => {
beforeAll(() => {
// setup mock for non-successful flow
Axios.post.mockRejectedValue(new Error('some mock error'));
});
it('should do that', () => {
const result = myService.getStudentNumber();
// describe the expected result
expect(result).toEqual({ ...... });
});
});
});
});