src/components/CrudModel.vue

@@ -127,7 +127,7 @@ function resetData(data) {
     originalData.value = JSON.parse(JSON.stringify(data));
     formData.value = JSON.parse(JSON.stringify(data));
 
-    if (watchChanges.value) watchChanges.value(); //destoy watcher
+    if (watchChanges.value) watchChanges.value(); //destroy watcher
     watchChanges.value = watch(formData, () => (hasChanges.value = true), { deep: true });
 }
 
@@ -270,10 +270,8 @@ function getChanges() {
 
 function isEmpty(obj) {
     if (obj == null) return true;
-    if (obj === undefined) return true;
-    if (Object.keys(obj).length === 0) return true;
-
-    if (obj.length > 0) return false;
+    if (Array.isArray(obj)) return !obj.length;
+    return !Object.keys(obj).length;
 }
 
 async function reload(params) {

src/components/__tests__/CrudModel.spec.js

@@ -1,11 +1,13 @@
-import { createWrapper } from 'app/test/vitest/helper';
+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 wrapper;
     let vm;
+    let data;
     beforeAll(() => {
-        vm = createWrapper(CrudModel, {
+        wrapper = createWrapper(CrudModel, {
             global: {
                 stubs: [
                     'vnPaginate',
@@ -25,12 +27,16 @@ describe('CrudModel', () => {
                 dataKey: 'crudModelKey',
                 model: 'crudModel',
                 url: 'crudModelUrl',
+                saveFn: '',
             },
-        }).vm;
+        });
+        wrapper=wrapper.wrapper;
+        vm=wrapper.vm;
     });
 
     beforeEach(() => {
         vm.fetch([]);
+        vm.watchChanges = null;
     });
 
     afterEach(() => {
@@ -117,4 +123,126 @@ describe('CrudModel', () => {
             });
         });
     });
+
+    describe('isEmpty()', () => {
+        let dummyObj;
+        let dummyArray;
+        let result;
+        it('should return true if object si null', async () => {
+            dummyObj = null;
+            result = vm.isEmpty(dummyObj);
+
+            expect(result).toBe(true);
+        });
+
+        it('should return true if object si undefined', async () => {
+            dummyObj = undefined;
+            result = vm.isEmpty(dummyObj);
+
+            expect(result).toBe(true);
+        });
+
+        it('should return true if object is empty', async () => {
+            dummyObj ={};
+            result = vm.isEmpty(dummyObj);    
+
+            expect(result).toBe(true);
+        });
+
+        it('should return false if object is not empty', async () => {
+            dummyObj = {a:1, b:2, c:3};
+            result = vm.isEmpty(dummyObj);
+
+            expect(result).toBe(false);
+        });
+
+        it('should return true if array is empty', async () => {
+            dummyArray = [];
+            result = vm.isEmpty(dummyArray); 
+
+            expect(result).toBe(true);
+        });
+        
+        it('should return false if array is not empty', async () => {
+            dummyArray = [1,2,3];
+            result = vm.isEmpty(dummyArray);
+
+            expect(result).toBe(false);
+        })
+    });
+
+    describe('resetData()', () => {
+        it('should add $index to elements in data[] and sets originalData and formData with data', async () => {
+            data = [{
+                name: 'Tony',
+                lastName: 'Stark',
+                age: 42,
+            }];
+
+            vm.resetData(data);
+            
+            expect(vm.originalData).toEqual(data);
+            expect(vm.originalData[0].$index).toEqual(0);
+            expect(vm.formData).toEqual(data);
+            expect(vm.formData[0].$index).toEqual(0);
+            expect(vm.watchChanges).not.toBeNull();
+        });
+
+        it('should dont do nothing if data is null', async () => {
+            vm.resetData(null);
+
+            expect(vm.watchChanges).toBeNull();
+        });
+
+        it('should set originalData and formatData with data and generate watchChanges', async () => {
+            data = {
+                name: 'Tony',
+                lastName: 'Stark',
+                age: 42,
+            };
+            
+            vm.resetData(data);
+
+            expect(vm.originalData).toEqual(data);
+            expect(vm.formData).toEqual(data);
+            expect(vm.watchChanges).not.toBeNull();
+        });
+    });
+
+    describe('saveChanges()', () => {
+        data = [{
+            name: 'Tony',
+            lastName: 'Stark',
+            age: 42,
+        }];
+
+        it('should call saveFn if exists', async () => {
+            await wrapper.setProps({ saveFn: vi.fn() });
+
+            vm.saveChanges(data);
+            
+            expect(vm.saveFn).toHaveBeenCalledOnce();
+            expect(vm.isLoading).toBe(false);
+            expect(vm.hasChanges).toBe(false);
+
+            await wrapper.setProps({ saveFn: '' });
+        });
+
+        it("should use default url if there's not saveFn", async () => {
+            const postMock =vi.spyOn(axios, 'post');
+            
+            vm.formData = [{
+                name: 'Bruce',
+                lastName: 'Wayne',
+                age: 45,
+            }]
+
+            await vm.saveChanges(data);
+
+            expect(postMock).toHaveBeenCalledWith(vm.url + '/crud', data);
+            expect(vm.isLoading).toBe(false);
+            expect(vm.hasChanges).toBe(false);
+            expect(vm.originalData).toEqual(JSON.parse(JSON.stringify(vm.formData)));
+        });
+    });
 });

src/components/__tests__/FormModel.spec.js

@@ -0,0 +1,149 @@
+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 } });
+            expect(vm.modelValue).toBe(model);
+        });
+
+        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, formInitialData);
+            expect(vm.hasChanges).toBe(false);
+
+            vm.formData.mockKey = 'newVal';
+            await vm.$nextTick();
+            expect(vm.hasChanges).toBe(true);
+            vm.formData.mockKey = 'mockVal';
+        });
+    });
+
+    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('save()', async () => {
+        it('should not call if there are not changes', async () => {
+            const { vm } = mount({ propsData: { url, model } });
+
+            await vm.save();
+            expect(vm.hasChanges).toBe(false);
+        });
+
+        it('should call axios.patch with the right data', async () => {
+            const spy = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} });
+            const { vm } = mount({ propsData: { url, model, formInitialData } });
+            vm.formData.mockKey = 'newVal';
+            await vm.$nextTick();
+            await vm.save();
+            expect(spy).toHaveBeenCalled();
+            vm.formData.mockKey = 'mockVal';
+        });
+
+        it('should call axios.post with the right data', async () => {
+            const spy = vi.spyOn(axios, 'post').mockResolvedValue({ data: {} });
+            const { vm } = mount({
+                propsData: { url, model, formInitialData, urlCreate: 'mockUrlCreate' },
+            });
+            vm.formData.mockKey = 'newVal';
+            await vm.$nextTick();
+            await vm.save();
+            expect(spy).toHaveBeenCalled();
+            vm.formData.mockKey = 'mockVal';
+        });
+
+        it('should use the saveFn', async () => {
+            const { vm } = mount({
+                propsData: { url, model, formInitialData, saveFn: () => {} },
+            });
+            const spyPatch = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} });
+            const spySaveFn = vi.spyOn(vm.$props, 'saveFn');
+
+            vm.formData.mockKey = 'newVal';
+            await vm.$nextTick();
+            await vm.save();
+            expect(spyPatch).not.toHaveBeenCalled();
+            expect(spySaveFn).toHaveBeenCalled();
+            vm.formData.mockKey = 'mockVal';
+        });
+
+        it('should reload the data after save', async () => {
+            const { vm } = mount({
+                propsData: { url, model, formInitialData, reload: true },
+            });
+            vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} });
+
+            vm.formData.mockKey = 'newVal';
+            await vm.$nextTick();
+            await vm.save();
+            vm.formData.mockKey = 'mockVal';
+        });
+    });
+});
+
+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: () => {},