feat: refs #7056 update route meta information and add FormModel tests

test/vitest/__tests__/components/FormModel.spec.js

@@ -0,0 +1,145 @@
+import { describe, expect, it, beforeAll, vi, afterAll } from 'vitest';
+import { createWrapper, axios } from 'app/test/vitest/helper';
+import FormModel from 'src/components/FormModel.vue';
+
+describe('FormModel', () => {
+    const model = 'mockModel';
+    const url = 'mockUrl';
+    const formInitialData = { mockKey: 'mockVal' };
+
+    describe('modelValue', () => {
+        it('should use the provided model', () => {
+            const { vm } = mount({ propsData: { model: 'mockModel' } });
+            expect(vm.modelValue).toBe('mockModel');
+        });
+
+        it('should use the route meta title when model is not provided', () => {
+            const { vm } = mount({});
+            expect(vm.modelValue).toBe('formModel_mockTitle');
+        });
+    });
+
+    describe('onMounted()', () => {
+        let mockGet;
+
+        beforeAll(() => {
+            mockGet = vi.spyOn(axios, 'get').mockResolvedValue({ data: {} });
+        });
+
+        afterAll(() => {
+            mockGet.mockRestore();
+        });
+
+        it('should not fetch when has formInitialData', () => {
+            mount({ propsData: { url, model, autoLoad: true, formInitialData } });
+            expect(mockGet).not.toHaveBeenCalled();
+        });
+
+        it('should fetch when there is url and auto-load', () => {
+            mount({ propsData: { url, model, autoLoad: true } });
+            expect(mockGet).toHaveBeenCalled();
+        });
+
+        it('should not observe changes', () => {
+            const { vm } = mount({
+                propsData: { url, model, observeFormChanges: false, formInitialData },
+            });
+
+            expect(vm.hasChanges).toBe(true);
+            vm.reset();
+            expect(vm.hasChanges).toBe(true);
+        });
+
+        it('should observe changes', async () => {
+            const { vm } = mount({
+                propsData: { url, model, formInitialData },
+            });
+            vm.state.set(model, { mockKey: 'mockVal' });
+            expect(vm.hasChanges).toBe(false);
+
+            vm.formData.mockKey = 'newVal';
+            await vm.$nextTick();
+            expect(vm.hasChanges).toBe(true);
+        });
+    });
+
+    describe.skip('watch()', () => {
+        let wrapper;
+        let vm;
+
+        beforeAll(() => {
+            wrapper = mount({
+                propsData: { url, model, formInitialData },
+            });
+            vm = wrapper.vm;
+        });
+
+        it('should call updateAndEmit when arrayData.store.data changes', async () => {
+            const updateAndEmitSpy = vi.spyOn(vm, 'updateAndEmit');
+            await vm.$nextTick();
+            console.log('vm.arrayData.store.data', vm.arrayData.store.data);
+            vm.arrayData.store.data = { newData: 'newValue' };
+            await vm.$nextTick();
+            vm.arrayData.store.data = { newData: 'anotherVal' };
+            await vm.$nextTick();
+
+            expect(updateAndEmitSpy).toHaveBeenCalled();
+        });
+
+        it('should call reset and fetch when $props.url or $props.filter changes', async () => {
+            const resetSpy = vi.spyOn(vm, 'reset');
+            const fetchSpy = vi.spyOn(vm, 'fetch');
+
+            wrapper.setProps({ url: 'newMockUrl' });
+            await wrapper.vm.$nextTick();
+            expect(resetSpy).toHaveBeenCalled();
+            expect(fetchSpy).toHaveBeenCalled();
+        });
+    });
+
+    describe('trimData()', () => {
+        let vm;
+        beforeAll(() => {
+            vm = mount({}).vm;
+        });
+
+        it('should trim whitespace from string values', () => {
+            const data = { key1: '  value1  ', key2: '  value2  ' };
+            const trimmedData = vm.trimData(data);
+            expect(trimmedData).toEqual({ key1: 'value1', key2: 'value2' });
+        });
+
+        it('should not modify non-string values', () => {
+            const data = { key1: 123, key2: true, key3: null, key4: undefined };
+            const trimmedData = vm.trimData(data);
+            expect(trimmedData).toEqual(data);
+        });
+    });
+
+    describe('onUnmounted()', () => {
+        it('should restore original data in the store if changes were made but not saved', async () => {
+            const wrapper = mount({ propsData: { model, formInitialData } });
+            const vm = wrapper.vm;
+            vm.formData.mockKey = 'newVal';
+            await vm.$nextTick();
+            await wrapper.unmount();
+            expect(vm.state.get(model)).toEqual(formInitialData);
+        });
+
+        it('should clear the store on unmount if clearStoreOnUnmount is true', async () => {
+            const wrapper = mount({
+                propsData: { model, formInitialData, clearStoreOnUnmount: true },
+            });
+            const vm = wrapper.vm;
+            vm.hasChanges = false;
+            await wrapper.unmount();
+            expect(vm.state.get(model)).toBeUndefined();
+        });
+    });
+});
+
+function mount({ propsData = {} }) {
+    return createWrapper(FormModel, {
+        propsData,
+    });
+}

test/vitest/helper.js

@@ -26,7 +26,7 @@ vi.mock('vue-router', () => ({
                 params: {
                     id: 1,
                 },
-                meta: { moduleName: 'mockName' },
+                meta: { moduleName: 'mockModuleName' },
                 matched: [{ path: 'mockName/list' }],
             },
         },
@@ -35,7 +35,7 @@ vi.mock('vue-router', () => ({
         matched: [],
         query: {},
         params: {},
-        meta: { moduleName: 'mockName' },
+        meta: { moduleName: 'mockModuleName', title: 'mockTitle', name: 'mockName' },
         path: 'mockSection/list',
     }),
     onBeforeRouteLeave: () => {},