Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { mount } from '@vue/test-utils';
import { expect, describe, it, vi, beforeEach } from 'vitest';
import { installQuasar } from '@quasar/quasar-app-extension-testing-unit-vitest';
import { postBanks } from '@/common/api/api';
import Add from '@/views/bank/Add.vue';
/*
* Init and Install Quasar component as plugin test context
*/
installQuasar()
/*
* Mocking Vue Router ( useRouter() ) and this should in root.
* You can't put vi.mock() inside of describe() or test().
*/
const vueRouterMock = vi.fn();
vi.mock('vue-router', () => ({
useRouter: () => ({
push: vueRouterMock,
go: vueRouterMock,
}),
}));
/*
* Reset All mocking data for fresh context
*/
beforeEach(() => { vi.restoreAllMocks() })
vi.mock('@/common/api/axios')
describe('Test case bank/add', () => {
it('Add.vue should exists', () => {
expect(Add).toBeTruthy();
})
it('Add.vue should contain input bank code', async () => {
const wrapper = mount(Add);
const valueSelector = '[data-test="bank-code"]';
await wrapper.get(valueSelector).setValue('123');
const element = wrapper.find(valueSelector).element as any;
expect(element.value).toBe('123')
})
it('Add.vue should contain input bank logo', async () => {
const wrapper = mount(Add);
const input = wrapper.find('[data-test="bank-logo"]')
const file = new File(['test'], 'test.jpg', { type: 'image/jpg' })
// TODO Set File Value (RnD: Haven't found an effective way yet)
input.trigger('change');
expect(input).toBeDefined();
})
it('Add.vue, set value', async () => {
const wrapper = mount(Add, {
global: {
mocks: { postBanks }
}
});
await wrapper.get('[data-test="bank-code"]').setValue('JTRUST')
await wrapper.get('[data-test="bank-name"]').setValue('JTRUST')
await wrapper.get('[data-test="bank-description"]').setValue('Indonesian bank')
await wrapper.findComponent({ ref: 'bank-status' }).setValue('0')
const input = wrapper.find('[data-test="bank-logo"]')
const file = new File(['test'], 'test.jpg', { type: 'image/jpg' })
// TODO Set File Value (RnD: Haven't found an effective way yet)
input.trigger('change')
expect(input).toBeDefined()
wrapper.find('form').trigger('submit')
})
it('Add.vue mocking axios', async () => {
const client = await import('@/common/api/axios')
const res = {
data: [{
"id": -1,
"code": "ALLO",
"name": "ALLO",
"createdAt": "2022-01-01T00:00:00Z",
"logo": {
"kind": "WEBP",
"filename": "allobank.webp",
"url": "images/fixed-income-banks/allobank.webp"
},
"description": "ALLO BANK INDONESIA",
"status": 200
}]
}
client.axiosInstance.post = vi.fn().mockResolvedValue(res);
const bank = await postBanks(res.data);
expect(client.axiosInstance.post).toHaveBeenCalled();
expect(bank).toEqual(res);
expect(bank.data[0].name).toBe(res.data[0].name)
})
})
|