salix-front/test/vitest/__tests__/components/common/CrudModel.spec.js

import { createWrapper, axios } from 'app/test/vitest/helper';
import CrudModel from 'components/CrudModel.vue';
import { vi, afterEach, beforeEach, beforeAll, describe, expect, it } from 'vitest';

describe('CrudModel', () => {
    let vm;
    beforeAll(() => {
        vm = createWrapper(CrudModel, {
            global: {
                stubs: [
                    'vnPaginate',
                    'useState',
                    'arrayData',
                    'useStateStore',
                    'vue-i18n',
                ],
                mocks: {
                    fetch: vi.fn(),
                    validate: vi.fn(),
                },
            },
            propsData: {
                dataRequired: {
                    fk: 1,
                },
                dataKey: 'crudModelKey',
                model: 'crudModel',
                url: 'crudModelUrl',
            },
        }).vm;
    });

    beforeEach(() => {
        vm.state.set('crudModel', []);
    });

    afterEach(() => {
        vi.clearAllMocks();
    });

    describe('insert()', () => {
        it('should new element in list with index 0 if formData not has data', () => {
            vm.insert();

            expect(vm.formData.length).toEqual(1);
            expect(vm.formData[0].fk).toEqual(1);
            expect(vm.formData[0].$index).toEqual(0);
        });
    });

    describe('getChanges()', () => {
        it('should return correct updates and creates', async () => {
            vm.originalData = [
                { id: 1, name: 'Tony Starks', $index: 1 },
                { id: 2, name: 'Jessica Jones', $index: 2 },
                { id: 3, name: 'Bruce Wayne', $index: 3 },
            ];
            vm.state.set('crudModel', [
                { id: 1, name: 'New name one', $index: 1 },
                { id: 2, name: 'New name two', $index: 2 },
                { id: 3, name: 'Bruce Wayne', $index: 3 },
            ]);

            vm.insert();
            const result = vm.getChanges();

            const expected = {
                creates: [
                    {
                        $index: 4,
                        fk: 1,
                    },
                ],
                updates: [
                    {
                        data: {
                            name: 'New name one',
                        },
                        where: {
                            id: 1,
                        },
                    },
                    {
                        data: {
                            name: 'New name two',
                        },
                        where: {
                            id: 2,
                        },
                    },
                ],
            };

            expect(result).toEqual(expected);
        });
    });

    // TODO: remove test
    describe.skip('remove()', () => {
        it('should remove', async () => {
            vi.spyOn(vm.quasar, 'dialog');

            vm.originalData = [
                { id: 1, name: 'Tony Starks', $index: 1 },
                { id: 2, name: 'Jessica Jones', $index: 2 },
                { id: 3, name: 'Bruce Wayne', $index: 3 },
            ];
            vm.state.set('crudModel', [
                { id: 1, name: 'New name one', $index: 1 },
                { id: 2, name: 'New name two', $index: 2 },
                { id: 3, name: 'Bruce Wayne', $index: 3 },
            ]);

            vm.remove([{ id: 1 }]);

            expect(vm.quasar.dialog).toHaveBeenCalled();
        });
    });

    describe('getDifferences()', () => {
        it('should return the differences between two objects', async () => {
            const obj1 = {
                a: 1,
                b: 2,
                c: 3,
            };
            const obj2 = {
                a: 1,
                b: 4,
                d: 5,
            };

            const result = vm.getDifferences(obj1, obj2);

            expect(result).toEqual({
                b: 4,
                d: 5,
            });
        });
    });
});