src/components/CrudModel.vue

@@ -149,17 +149,6 @@ async function insert() {
     hasChanges.value = true;
 }
 
-// function addRemove(ids) {
-//     for (let id of ids) {
-//         const index = removed.value.indexOf(id);
-//         if (index > -1) {
-//             removed.value = removed.value.slice(index, 1);
-//             continue;
-//         }
-//         removed.value.push(id);
-//     }
-// }
-
 async function remove(data) {
     if (!data.length)
         return quasar.notify({
@@ -172,7 +161,6 @@ async function remove(data) {
     let preRemove = data.map((d) => (d[pk] ? null : d.$index)).filter(Boolean);
     let newData = formData.value;
 
-    // addRemove(ids);
     if (preRemove.length) {
         newData = newData.filter(
             (form) => !preRemove.some((index) => index == form.$index)
@@ -202,12 +190,6 @@ async function remove(data) {
     emit('update:selected', []);
 }
 
-watch(formUrl, async () => {
-    originalData.value = null;
-    reset();
-    fetch();
-});
-
 function getChanges() {
     const updates = [];
     const creates = [];
@@ -258,6 +240,12 @@ function isEmpty(obj) {
 
     if (obj.length > 0) return false;
 }
+
+watch(formUrl, async () => {
+    originalData.value = null;
+    reset();
+    fetch();
+});
 </script>
 <template>
     <VnPaginate

test/vitest/__tests__/components/common/CrudModel.spec.js

@@ -1,6 +1,6 @@
 import { createWrapper, axios } from 'app/test/vitest/helper';
 import CrudModel from 'components/CrudModel.vue';
-import { vi, afterEach, beforeAll, describe, expect, it } from 'vitest';
+import { vi, afterEach, beforeEach, beforeAll, describe, expect, it } from 'vitest';
 
 describe.only('CrudModel', () => {
     let vm;
@@ -21,43 +21,121 @@ describe.only('CrudModel', () => {
             },
             propsData: {
                 dataRequired: {
-                    id: 1,
-                    name: 'name',
-                    autoLoad: true,
+                    fk: 1,
                 },
                 dataKey: 'crudModelKey',
                 model: 'crudModel',
                 url: 'crudModelUrl',
             },
-            attrs: {
-                url: 'crudModelUrl',
-                dataKey: 'CustomerList',
-                order: 'id DESC',
-                limit: 3,
-            },
         }).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', () => {
-            vi.spyOn(axios, 'get').mockResolvedValue({
-                data: [
-                    { id: 1, name: 'Tony Stark' },
-                    { id: 2, name: 'Jessica Jones' },
-                    { id: 3, name: 'Bruce Wayne' },
-                ],
-            });
-            vm.state.set('crudModel', []);
-
             vm.insert();
 
             expect(vm.formData.length).toEqual(1);
-            expect(vm.formData[0].id).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('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,
+            });
+        });
+    });
 });