feat: refs #6893 improve VnSearchbar & create tests

CHANGELOG.md

@@ -10,11 +10,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 -   (Tickets) => Se añade la opción de clonar ticket. #6951
+-   (Parking) => Se añade la sección Parking. #5186
 
 ### Changed
 
 ### Fixed
 
+-   (General) => Se corrige la redirección cuando hay 1 solo registro y cuando se aplica un filtro diferente al id al hacer una búsqueda general. #6893
+
 ## [2400.01] - 2024-01-04
 
 ### Added

src/components/ui/VnSearchbar.vue

@@ -65,9 +65,9 @@ const props = defineProps({
     },
 });
 
-const { currentRoute, push } = useRouter();
+const router = useRouter();
 const arrayData = useArrayData(props.dataKey, { ...props });
-const store = arrayData.store;
+const { store } = arrayData;
 const searchText = ref('');
 
 onMounted(() => {
@@ -90,17 +90,17 @@ async function search() {
     if (!props.redirect) return;
 
     if (props.customRouteRedirectName)
-        return push({
+        return router.push({
             name: props.customRouteRedirectName,
             params: { id: searchText.value },
         });
 
-    const { matched: matches } = currentRoute.value;
+    const { matched: matches } = router.currentRoute.value;
     const { path } = matches.at(-1);
     const [, moduleName] = path.split('/');
 
     if (!store.data.length || store.data.length > 1)
-        return push({ path: `/${moduleName}/list` });
+        return router.push({ path: `/${moduleName}/list` });
 
     const targetId = store.data[0].id;
     let targetUrl;
@@ -108,7 +108,7 @@ async function search() {
     if (path.endsWith('/list')) targetUrl = path.replace('/list', `/${targetId}/summary`);
     else if (path.includes(':id')) targetUrl = path.replace(':id', targetId);
 
-    await push({ path: targetUrl });
+    await router.push({ path: targetUrl });
 }
 </script>
 

test/cypress/integration/vnSearchBar.spec.js

@@ -1,19 +1,42 @@
 /// <reference types="cypress" />
 describe('VnSearchBar', () => {
+    const employeeId = ' #1';
+    const salesPersonId = ' #18';
+    const idGap = '.q-item > .q-item__label';
+    const cardList = '.vn-card-list';
+
+    let url;
     beforeEach(() => {
         cy.login('developer');
-        cy.visit('/');
+        cy.visit('#/customer/list');
+        cy.url().then((currentUrl) => (url = currentUrl));
     });
 
-        it('should redirect to new customer', () => {
+    it('should redirect to customer summary page', () => {
-            cy.visit('#/customer/1112/basic-data')
+        searchAndCheck('1', employeeId);
-            cy.openLeftMenu();
+        searchAndCheck('salesPerson', salesPersonId);
-            cy.get('.q-item > .q-item__label').should('have.text',' #1112')
+    });
-            cy.closeLeftMenu();
+
-            cy.clearSearchbar();
+    it('should stay on the list page if there are several results or none', () => {
-            cy.writeSearchbar('1{enter}');
+        cy.writeSearchbar('salesA{enter}');
-            cy.openLeftMenu();
+        checkCardListAndUrl(2);
-            cy.get('.q-item > .q-item__label').should('have.text',' #1')
+
-            cy.closeLeftMenu();
+        cy.clearSearchbar();
+
+        cy.writeSearchbar('0{enter}');
+        checkCardListAndUrl(0);
+    });
+
+    const searchAndCheck = (searchTerm, expectedText) => {
+        cy.clearSearchbar();
+        cy.writeSearchbar(`${searchTerm}{enter}`);
+        cy.get(idGap).should('have.text', expectedText);
+    };
+
+    const checkCardListAndUrl = (expectedLength) => {
+        cy.get(cardList).then(($cardList) => {
+            expect($cardList.find('.q-card').length).to.equal(expectedLength);
+            cy.url().then((currentUrl) => expect(currentUrl).to.equal(url));
         });
+    };
 });

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

@@ -1,11 +1,11 @@
-import { vi, describe, expect, it, beforeAll, beforeEach, afterEach } from 'vitest';
+import { vi, describe, expect, it, beforeAll, afterEach, beforeEach } from 'vitest';
-import { createWrapper, axios } from 'app/test/vitest/helper';
+import { createWrapper } from 'app/test/vitest/helper';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
-
+// Probar a importar como plugin vue-router en archivo helper
-
 describe('VnSearchBar', () => {
     let vm;
     let wrapper;
+    let pushSpy;
 
     beforeAll(() => {
         wrapper = createWrapper(VnSearchbar, {
@@ -16,7 +16,7 @@ describe('VnSearchBar', () => {
             },
         });
         vm = wrapper.vm;
-        vm.route.matched = [
+        vm.router.currentRoute.value.matched = [
             {
                 path: '/',
             },
@@ -30,24 +30,33 @@ describe('VnSearchBar', () => {
                 path: '/customer/:id/basic-data',
             },
         ];
+
+        pushSpy = vi.spyOn(vm.router, 'push');
+        vi.spyOn(vm.arrayData, 'applyFilter');
     });
 
-    afterEach(() => {
+    beforeEach(() => (vm.store.data = [{ id: 1112, name: 'Trash' }]));
-        vi.clearAllMocks();
+    afterEach(() => vi.clearAllMocks());
-    });
+
     it('should be defined', async () => {
         expect(vm.searchText).toBeDefined();
         expect(vm.searchText).toEqual('');
     });
-    it('should redirect', async () => {
+
-        vi.spyOn(vm.router,'push');
+    it('should redirect to list page if there are several results', async () => {
-        vm.searchText = '1';
+        vm.store.data.push({ id: 1, name: 'employee' });
         await vm.search();
-        expect(vm.router.push).toHaveBeenCalledWith('/customer/1/basic-data');
+        expect(pushSpy).toHaveBeenCalledWith({ path: '/customer/list' });
-        vm.searchText = '1112';
+    });
-        expect(vm.searchText).toEqual('1112');
+
-        vi.spyOn(vm.router,'push');
+    it('should redirect to list page if there is no results', async () => {
+        vm.store.data.pop();
         await vm.search();
-        expect(vm.router.push).toHaveBeenCalledWith('/customer/1112/basic-data');
+        expect(pushSpy).toHaveBeenCalledWith({ path: '/customer/list' });
-     });
+    });
+
+    it('should redirect to basic-data page if there is only one result', async () => {
+        await vm.search();
+        expect(pushSpy).toHaveBeenCalledWith({ path: '/customer/1112/basic-data' });
+    });
 });