All files / tests/views/bank update.spec.ts

100% Statements 128/128
100% Branches 5/5
100% Functions 0/0
100% Lines 128/128

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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 1291x 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 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, flushPromises } from '@vue/test-utils';
import { expect, describe, it, vi, beforeEach } from 'vitest';
import { installQuasar } from '@quasar/quasar-app-extension-testing-unit-vitest';
import { deleteBank, getBank, putBanks } from '@/common/api/api';
import Update from '@/views/bank/Update.vue';
import axios from 'axios';
import { axiosInstance } from '@/common/api/axios';
 
/* 
 * 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/update', () => {
    it('Update.vue should exists', () => {
        expect(Update).toBeTruthy();
    })
 
    // it('Update.vue should contain input bank code', async () => {
    //     const wrapper = mount(Update);
    //     const valueSelector = '[data-test="bank-code"]'
    //     await wrapper.get(valueSelector).setValue('123')
 
    //     expect(wrapper.find(valueSelector).element.value).toBe('123')
    // })
 
    // it('Update.vue should contain input bank logo', async () => {
    //     const wrapper = mount(Update);
    //     const input = wrapper.find('[data-test="bank-logo"]')
    //     const file = new File(['test'], 'test.jpg', { type: 'image/jpg' })
    //     // const dT = new ClipboardEvent('').clipboardData || new DataTransfer()
    //     // dT.items.add(file)
    //     // input.element.files = dT.files
    //     input.trigger('change')
    //     expect(input).toBeDefined()
    // })
 
    // it('Update.vue, set value', async () => {
    //     const wrapper = mount(Update, {
    //         global: {
    //             mocks: { putBanks },
    //         }
    //     });
    //     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' })
    //     // const dT = new ClipboardEvent('').clipboardData || new DataTransfer()
    //     // dT.items.add(file)
    //     // input.element.files = dT.files
    //     input.trigger('change')
    //     expect(input).toBeDefined()
 
    //     wrapper.find('form').trigger('submit')
    // })
 
    it('Update.vue mocking axios and get one data', async () => {
        const client = await import('@/common/api/axios')
        const code = "ALLO"
        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.get = vi.fn().mockResolvedValue(res)
        const bank = await getBank(code)
        expect(client.axiosInstance.get).toHaveBeenCalled()
        expect(bank).toEqual(res)
    })
 
    it('Update.vue mocking axios and delete', 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
            }]
        }
 
        const mockResponse = { data: "", status: 204, statusText: 'No Content', headers: {}, config: {}, request: {} };
        client.axiosInstance.delete = vi.fn().mockResolvedValue(mockResponse)
        const bank = await deleteBank(res.data)
        expect(client.axiosInstance.delete).toHaveBeenCalled()
        expect(bank).toEqual(mockResponse)
    })
})