test: front test for arrayData

test/vitest/__tests__/composables/useArrayData.spec.js

@@ -1,31 +1,81 @@
-import { describe, expect, it, beforeAll } from 'vitest';
-import { axios } from 'app/test/vitest/helper';
+import { describe, expect, it, beforeAll, afterEach, vi } from 'vitest';
+import { axios, flushPromises } from 'app/test/vitest/helper';
 import { useArrayData } from 'composables/useArrayData';
+import { useRouter } from 'vue-router';
 
 describe('useArrayData', () => {
-    let arrayData;
     beforeAll(() => {
-        axios.get.mockResolvedValue({ data: [] });
-        arrayData = useArrayData('InvoiceIn', { url: 'invoice-in/list' });
-        Object.defineProperty(window.location, 'href', {
-            writable: true,
-            value: 'localhost:9000/invoice-in/list',
+        vi.spyOn(useRouter(), 'replace');
+        vi.spyOn(useRouter(), 'push');
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('should fetch and repalce url with new params', async () => {
+        vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [] });
+
+        const arrayData = useArrayData('ArrayData', { url: 'mockUrl' });
+
+        const filter = '{"order":"","limit":10,"skip":0}';
+        const params = { supplierFk: 2 };
+        arrayData.store.userParams = params;
+        arrayData.fetch({});
+
+        await flushPromises();
+        const routerReplace = useRouter().replace.mock.calls[0][0];
+
+        expect(axios.get.mock.calls[0][1].params).toEqual({
+            filter,
+            supplierFk: 2,
         });
-
-        // Mock the window.history.pushState method within useArrayData
-        window.history.pushState = (data, title, url) => (window.location.href = url);
-
-        //  Mock the URL constructor within useArrayData
-        global.URL = class URL {
-            constructor(url) {
-                this.hash = url.split('localhost:9000/')[1];
-            }
-        };
+        expect(routerReplace.path).toEqual('mockSection/list');
+        expect(JSON.parse(routerReplace.query.params)).toEqual(
+            expect.objectContaining(params)
+        );
     });
 
-    it('should add the params to the url', async () => {
-        arrayData.store.userParams = { supplierFk: 2 };
-        arrayData.updateStateParams();
-        expect(window.location.href).contain('params=%7B%22supplierFk%22%3A2%7D');
+    it('Should get data and send new URL without keeping parameters, if there is only one record', async () => {
+        vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [{ id: 1 }] });
+
+        const arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
+
+        const filter = '{"order":"","limit":10,"skip":0}';
+        const params = { supplierFk: 2 };
+        arrayData.store.userParams = params;
+        arrayData.fetch({});
+
+        await flushPromises();
+        const routerPush = useRouter().push.mock.calls[0][0];
+
+        expect(axios.get.mock.calls[0][1].params).toEqual({
+            filter,
+            supplierFk: 2,
+        });
+        expect(routerPush.path).toEqual('mockName/1');
+        expect(routerPush.query).toBeUndefined();
     });
+
+    // it('Should get data and send new URL keeping parameters, if you have more than one record', async () => {
+    //     vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [{ id: 1 }, { id: 2 }] });
+
+    //     const arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
+
+    //     const filter = '{"order":"","limit":10,"skip":0}';
+    //     const params = { supplierFk: 2 };
+    //     arrayData.store.userParams = params;
+    //     arrayData.fetch({});
+
+    //     await flushPromises();
+    //     const routerPush = useRouter().push.mock.calls[0][0];
+    //     console.log('routerPush: ', routerPush);
+
+    //     expect(axios.get.mock.calls[0][1].params).toEqual({
+    //         filter,
+    //         supplierFk: 2,
+    //     });
+    //     expect(routerPush.path).toEqual('mockName/1');
+    //     expect(routerPush.query).toBeUndefined();
+    // });
 });

test/vitest/helper.js

@@ -15,16 +15,19 @@ installQuasarPlugin({
 });
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false });
 const mockPush = vi.fn();
+const mockReplace = vi.fn();
 
 vi.mock('vue-router', () => ({
     useRouter: () => ({
         push: mockPush,
+        replace: mockReplace,
         currentRoute: {
             value: {
                 params: {
                     id: 1,
                 },
                 meta: { moduleName: 'mockName' },
+                matched: [{ path: 'mockName/list' }],
             },
         },
     }),
@@ -33,6 +36,7 @@ vi.mock('vue-router', () => ({
         query: {},
         params: {},
         meta: { moduleName: 'mockName' },
+        path: 'mockSection/list',
     }),
 }));