Added unit tests

src/components/SmartCard.vue

@@ -65,7 +65,7 @@ async function fetch() {
 
     for (const row of data) rows.value.push(row);
 
-    pagination.value.rowsNumber = totalRows();
+    pagination.value.rowsNumber = rows.value.length;
     pagination.value.page = page;
     pagination.value.rowsPerPage = rowsPerPage;
     pagination.value.sortBy = sortBy;
@@ -76,7 +76,7 @@ async function fetch() {
 
 async function onLoad(...params) {
     const done = params[1];
-    if (totalRows() === 0) return done(false);
+    if (rows.value.length === 0) return done(false);
 
     pagination.value.page = pagination.value.page + 1;
 
@@ -85,10 +85,6 @@ async function onLoad(...params) {
     const endOfPages = !hasMoreData.value;
     done(endOfPages);
 }
-
-function totalRows() {
-    return rows.value.length;
-}
 </script>
 
 <template>

src/components/__tests__/SmartCard.spec.js

@@ -1,5 +1,5 @@
 import { jest, describe, expect, it, beforeAll } from '@jest/globals';
-import { createWrapper, axios, flushPromises } from 'app/tests/jest/jestHelpers';
+import { createWrapper, axios } from 'app/tests/jest/jestHelpers';
 import SmartCard from '../SmartCard.vue';
 
 const mockPush = jest.fn();
@@ -11,20 +11,19 @@ jest.mock('vue-router', () => ({
     }),
 }));
 
-
 describe('SmartCard', () => {
+    const expectedUrl = '/api/customers';
     let vm;
     beforeAll(() => {
         const options = {
             attrs: {
-                url: '/api/customers',
+                url: expectedUrl,
-                sortBy: 'id DESC'
+                sortBy: 'id DESC',
+                rowsPerPage: 3
             }
         };
         vm = createWrapper(SmartCard, options).vm;
-    });
 
-    it('should call to the fetch() method and set the data on the rows property', async () => {
         jest.spyOn(axios, 'get').mockResolvedValue({
             data: [
                 { id: 1, name: 'Tony Stark' },
@@ -32,70 +31,121 @@ describe('SmartCard', () => {
                 { id: 3, name: 'Bruce Wayne' },
             ]
         });
-
-        const expectedPath = '/api/customers';
-        const expectedOptions = {
-            params: {
-                filter: {
-                    order: 'id DESC',
-                    limit: 10,
-                    skip: 0
-                }
-            }
-        }
-
-        //vm.pagination.page = 2;
-
-        await vm.fetch();
-
-        await flushPromises();
-
-        expect(axios.get).toHaveBeenCalledWith(expectedPath, expectedOptions);
-        expect(vm.rows.length).toEqual(3);
-
-        vm.rows = []; // Clear
     });
 
-    it('should test', async () => {
+    afterEach(() => {
-        jest.spyOn(axios, 'get').mockResolvedValue({
+        vm.rows = [];
-            data: [
+        vm.pagination.page = 1;
+        vm.hasMoreData = true;
+    })
+
+    describe('fetch()', () => {
+        it('should call to the fetch() method and set the data on the rows property', async () => {
+            const expectedOptions = {
+                params: {
+                    filter: {
+                        order: 'id DESC',
+                        limit: 3,
+                        skip: 0
+                    }
+                }
+            };
+
+            await vm.fetch();
+
+            expect(axios.get).toHaveBeenCalledWith(expectedUrl, expectedOptions);
+            expect(vm.rows.length).toEqual(3);
+        });
+
+        it('should call to the fetch() method and then call it again to paginate', async () => {
+            const expectedOptions = {
+                params: {
+                    filter: {
+                        order: 'id DESC',
+                        limit: 3,
+                        skip: 0
+                    }
+                }
+            };
+
+            await vm.fetch();
+
+            expect(axios.get).toHaveBeenCalledWith(expectedUrl, expectedOptions);
+            expect(vm.rows.length).toEqual(3);
+
+            const expectedOptionsPaginated = {
+                params: {
+                    filter: {
+                        order: 'id DESC',
+                        limit: 3,
+                        skip: 3
+                    }
+                }
+            };
+
+            vm.pagination.page = 2;
+
+            await vm.fetch();
+
+            expect(axios.get).toHaveBeenCalledWith(expectedUrl, expectedOptionsPaginated);
+            expect(vm.rows.length).toEqual(6);
+        });
+    });
+
+    describe('onLoad()', () => {
+        it('should call to the done() callback and not increment the pagination', async () => {
+            const index = 1;
+            const done = jest.fn();
+
+            await vm.onLoad(index, done);
+
+            expect(vm.pagination.page).toEqual(1);
+            expect(done).toHaveBeenCalledWith(false);
+        });
+
+        it('should increment the pagination and then call to the done() callback', async () => {
+            vm.rows = [
                 { id: 1, name: 'Tony Stark' },
                 { id: 2, name: 'Jessica Jones' },
                 { id: 3, name: 'Bruce Wayne' },
-            ]
+            ];
+
+            expect(vm.pagination.page).toEqual(1);
+
+            const index = 1;
+            const done = jest.fn();
+
+            await vm.onLoad(index, done);
+
+            expect(vm.pagination.page).toEqual(2);
+            expect(done).toHaveBeenCalledWith(false);
         });
 
-        const expectedPath = '/api/customers';
+        it('should call to the done() callback with true as argument to finish pagination', async () => {
-        const expectedOptions = {
+            jest.spyOn(axios, 'get').mockResolvedValue({
-            params: {
+                data: [
-                filter: {
+                    { id: 1, name: 'Tony Stark' },
-                    order: 'id DESC',
+                    { id: 2, name: 'Jessica Jones' }
-                    limit: 10,
+                ]
-                    skip: 10
+            });
-                }
-            }
-        }
 
-        //await vm.fetch();
+            vm.rows = [
-        //await flushPromises();
+                { id: 1, name: 'Tony Stark' },
+                { id: 2, name: 'Jessica Jones' },
+                { id: 3, name: 'Bruce Wayne' },
+            ];
 
+            expect(vm.pagination.page).toEqual(1);
 
-        //expect(axios.get).toHaveBeenCalledWith(expectedPath, expectedOptions);
+            const index = 1;
-        //expect(vm.rows.length).toEqual(3);
+            const done = jest.fn();
 
+            vm.hasMoreData = false;
 
+            await vm.onLoad(index, done);
 
-
+            expect(vm.pagination.page).toEqual(2);
-
+            expect(done).toHaveBeenCalledWith(true);
-        vm.pagination.page = 2;
+        });
-
-        await vm.fetch();
-
-        await flushPromises();
-
-        expect(axios.get).toHaveBeenCalledWith(expectedPath, expectedOptions);
-        expect(vm.rows.length).toEqual(3);
-
-
     });
 });

src/pages/Customer/Card/CustomerCard.vue

@@ -90,7 +90,7 @@ async function fetch() {
             <q-separator />
 
             <q-list>
-                <q-item :to="{ name: 'CustomerBasicData' }" clickable v-ripple>
+                <q-item :to="{ name: 'CustomerBasicData' }" clickable v-ripple active-class="text-orange">
                     <q-item-section avatar>
                         <q-icon name="person" />
                     </q-item-section>