feat: refs #7220 #7720 remove reference on top

test/cypress/components/CreateBankEntityForm.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import { createTestingPinia } from '@pinia/testing';
 import axios from 'axios';
 import { setActivePinia } from 'pinia';

test/cypress/components/CreateManualInvoiceForm.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import CreateManualInvoiceForm from 'src/components/CreateManualInvoiceForm.vue';
 
 describe.skip('<CreateManualInvoiceForm />', () => {

test/cypress/components/CreateNewCityForm.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import CreateNewCityForm from 'src/components/CreateNewCityForm.vue';
 
 describe.skip('<CreateNewCityForm />', () => {

test/cypress/components/CreateNewExpenseForm.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import CreateNewExpenseForm from 'src/components/CreateNewExpenseForm.vue';
 
 describe.skip('<CreateNewExpenseForm />', () => {

test/cypress/components/CreateNewPostcodeForm.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import CreateNewPostcodeForm from 'src/components/CreateNewPostcodeForm.vue';
 
 describe.skip('<CreateNewPostcodeForm />', () => {

test/cypress/components/CreateNewProvinceForm.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import CreateNewProvinceForm from 'src/components/CreateNewProvinceForm.vue';
 
 describe.skip('<CreateNewProvinceForm />', () => {

test/cypress/components/CreateThermographForm.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import CreateThermographForm from 'src/components/CreateThermographForm.vue';
 
 describe.skip('<CreateThermographForm />', () => {

test/cypress/components/CrudModel.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import CrudModel from 'src/components/CrudModel.vue';
 
 describe.skip('<CrudModel />', () => {

test/cypress/components/EditPictureForm.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import EditPictureForm from 'src/components/EditPictureForm.vue';
 
 describe.skip('<EditPictureForm />', () => {

test/cypress/components/EditTableCellValueForm.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
 
 describe.skip('<EditTableCellValueForm />', () => {

test/cypress/components/FetchData.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import axios from 'axios';
 import FetchData from 'src/components/FetchData.vue';
 

test/cypress/components/FilterItemForm.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import FilterItemForm from 'src/components/FilterItemForm.vue';
 
 describe.skip('<FilterItemForm />', () => {

test/cypress/components/FilterTravelForm.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import FilterTravelForm from 'src/components/FilterTravelForm.vue';
 
 describe.skip('<FilterTravelForm />', () => {

test/cypress/components/FormModel.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import { Notify } from 'quasar';
 import FormModel from 'src/components/FormModel.vue';
 import { useState } from 'src/composables/useState';

test/cypress/components/FormModelPopup.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import FormModelPopup from 'src/components/FormModelPopup.vue';
 
 describe.skip('<FormModelPopup />', () => {

test/cypress/components/FormPopup.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import FormPopup from 'src/components/FormPopup.vue';
 
 describe.skip('<FormPopup />', () => {

test/cypress/components/ItemsFilterPanel.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import ItemsFilterPanel from 'src/components/ItemsFilterPanel.vue';
 
 describe.skip('<ItemsFilterPanel />', () => {

test/cypress/components/LeftMenu.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import LeftMenu from 'src/components/LeftMenu.vue';
 
 describe.skip('<LeftMenu />', () => {

test/cypress/components/LeftMenuItem.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import LeftMenuItem from 'src/components/LeftMenuItem.vue';
 
 describe.skip('<LeftMenuItem />', () => {

test/cypress/components/LeftMenuItemGroup.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import LeftMenuItemGroup from 'src/components/LeftMenuItemGroup.vue';
 
 describe.skip('<LeftMenuItemGroup />', () => {

test/cypress/components/NavBar.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import NavBar from 'src/components/NavBar.vue';
 
 describe.skip('<NavBar />', () => {

test/cypress/components/PinnedModules.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import PinnedModules from 'src/components/PinnedModules.vue';
 
 describe.skip('<PinnedModules />', () => {

test/cypress/components/RefundInvoiceForm.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import RefundInvoiceForm from 'src/components/RefundInvoiceForm.vue';
 
 describe.skip('<RefundInvoiceForm />', () => {

test/cypress/components/RegularizeStockForm.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import RegularizeStockForm from 'src/components/RegularizeStockForm.vue';
 
 describe.skip('<RegularizeStockForm />', () => {

test/cypress/components/TransferInvoiceForm.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import TransferInvoiceForm from 'src/components/TransferInvoiceForm.vue';
 
 describe.skip('<TransferInvoiceForm />', () => {

test/cypress/components/UserPanel.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import UserPanel from 'src/components/UserPanel.vue';
 
 describe.skip('<UserPanel />', () => {

test/cypress/components/common/RightMenu.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import RightMenu from 'src/components/common/RightMenu.vue';
 
 describe.skip('<RightMenu />', () => {

test/cypress/components/common/SendEmailDialog.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import SendEmailDialog from 'src/components/common/SendEmailDialog.vue';
 
 describe('<SendEmailDialog />', () => {

test/cypress/components/common/SendSmsDialog.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import SendSmsDialog from 'src/components/common/SendSmsDialog.vue';
 
 describe.skip('<SendSmsDialog />', () => {

test/cypress/components/common/TableVisibleColumns.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
 
 describe.skip('<TableVisibleColumns />', () => {

test/cypress/components/common/VnAccountNumber.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import VnAccountNumber from 'src/components/common/VnAccountNumber.vue';
 
 describe.skip('<VnAccountNumber />', () => {

test/cypress/components/common/VnBreadcrumbs.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import VnBreadcrumbs from 'src/components/common/VnBreadcrumbs.vue';
 
 describe.skip('<VnBreadcrumbs />', () => {

test/cypress/components/common/VnCard.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import VnCard from 'src/components/common/VnCard.vue';
 
 describe.skip('<VnCard />', () => {

test/cypress/components/common/VnComponent.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import VnComponent from 'src/components/common/VnComponent.vue';
 
 describe.skip('<VnComponent />', () => {

test/cypress/components/common/VnDms.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import VnDms from 'src/components/common/VnDms.vue';
 
 describe.skip('<VnDms />', () => {

test/cypress/components/common/VnDmsList.spec.js

@@ -1,6 +1,5 @@
 import VnDmsList from 'src/components/common/VnDmsList.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnDmsList />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/common/VnInput.spec.js

@@ -1,6 +1,5 @@
 import VnInput from 'src/components/common/VnInput.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnInput />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/common/VnInputDate.spec.js

@@ -1,6 +1,5 @@
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnInputDate />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/common/VnInputNumber.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import VnInputNumber from 'src/components/common/VnInputNumber.vue';
 
 describe.skip('<VnInputNumber />', () => {

test/cypress/components/common/VnInputTime.spec.js

@@ -1,6 +1,5 @@
 import VnInputTime from 'src/components/common/VnInputTime.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnInputTime />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/common/VnJsonValue.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import VnJsonValue from 'src/components/common/VnJsonValue.vue';
 
 describe('<VnJsonValue />', () => {

test/cypress/components/common/VnLocation.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import VnLocation from 'src/components/common/VnLocation.vue';
 describe.skip('<VnLocation />', () => {
     const location = {

test/cypress/components/common/VnLog.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import VnLog from 'src/components/common/VnLog.vue';
 
 describe('<VnLog />', () => {

test/cypress/components/common/VnLogFilter.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import VnLogFilter from 'src/components/common/VnLogFilter.vue';
 
 describe.skip('<VnLogFilter />', () => {

test/cypress/components/common/VnPopup.spec.js

@@ -1,6 +1,5 @@
 import VnPopup from 'src/components/common/VnPopup.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnPopup />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/common/VnProgressModal.spec.js

@@ -1,9 +1,94 @@
-/// <reference types="cypress" />
 import VnProgressModal from 'src/components/common/VnProgressModal.vue';
 
 describe.skip('<VnProgressModal />', () => {
-    it('TODO: boilerplate', () => {
-        // see: https://on.cypress.io/mounting-vue
-        cy.createWrapper(VnProgressModal);
+    const mountComponent = (opt) => {
+        cy.createWrapper(VnProgressModal, opt);
+    };
+
+    it('should display progress and close button', () => {
+        mountComponent({
+            props: {
+                progress: 0.5,
+                showDialog: true,
+                cancelled: false,
+            },
+        });
+        // Verifica que el diálogo esté visible
+        cy.get('.q-dialog').should('be.visible');
+
+        // Verifica el texto de progreso en el componente
+        cy.contains('50%');
+
+        // Verifica que el botón de cerrar esté presente
+        cy.get('.q-btn[icon="close"]').should('exist');
+    });
+
+    it('should emit close event when close button is clicked', () => {
+        // Espía el evento de cierre
+        const onClose = cy.spy().as('closeEvent');
+        mountComponent({
+            props: {
+                progress: 0.5,
+                showDialog: true,
+            },
+            listeners: {
+                close: onClose,
+            },
+        });
+
+        // Clic en el botón de cerrar
+        cy.get('.q-btn[icon="close"]').click();
+
+        // Asegúrate de que el evento se haya emitido
+        cy.get('@closeEvent').should('have.been.calledOnce');
+    });
+
+    it('should display cancelled badge if cancelled prop is true', () => {
+        // Montar el componente con `cancelled` en `true`
+        mountComponent({
+            props: {
+                progress: 0.5,
+                showDialog: true,
+                cancelled: true,
+            },
+        });
+
+        // Verifica que la etiqueta de cancelación esté visible
+        cy.contains('Cancelado').should('be.visible');
+    });
+
+    it('should emit cancel event when cancel button is clicked', () => {
+        // Espía el evento de cancelación
+        const onCancel = cy.spy().as('cancelEvent');
+        mountComponent({
+            props: {
+                progress: 0.5,
+                showDialog: true,
+                cancelled: false,
+            },
+            listeners: {
+                cancel: onCancel,
+            },
+        });
+
+        // Clic en el botón de cancelar
+        cy.contains('Cancelar').click();
+
+        // Asegúrate de que el evento se haya emitido
+        cy.get('@cancelEvent').should('have.been.calledOnce');
+    });
+
+    it('should hide cancel button when progress is 100%', () => {
+        // Montar el componente con `progress` en `1` (100%)
+        mountComponent({
+            props: {
+                progress: 1,
+                showDialog: true,
+                cancelled: false,
+            },
+        });
+
+        // Verificar que el botón de cancelar no esté presente
+        cy.contains('Cancelar').should('not.exist');
     });
 });

test/cypress/components/common/VnRadio.spec.js

@@ -1,6 +1,5 @@
 import VnRadio from 'src/components/common/VnRadio.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnRadio />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/common/VnSectionMain.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import VnSectionMain from 'src/components/common/VnSectionMain.vue';
 
 describe.skip('<VnSectionMain />', () => {

test/cypress/components/common/VnSelect.spec.js

@@ -1,6 +1,5 @@
 import VnSelect from 'src/components/common/VnSelect.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnSelect />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/common/VnSelectCache.spec.js

@@ -1,6 +1,5 @@
 import VnSelectCache from 'src/components/common/VnSelectCache.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnSelectCache />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/common/VnSelectDialog.spec.js

@@ -1,6 +1,5 @@
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnSelectDialog />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/common/VnSelectEnum.spec.js

@@ -1,6 +1,5 @@
 import VnSelectEnum from 'src/components/common/VnSelectEnum.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnSelectEnum />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/common/VnSmsDialog.spec.js

@@ -1,9 +1,79 @@
+/* eslint-disable cypress/unsafe-to-chain-command */
+/* eslint-disable cypress/no-assigning-return-values */
 import VnSmsDialog from 'src/components/common/VnSmsDialog.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnSmsDialog />', () => {
-    it('TODO: boilerplate', () => {
-        // see: https://on.cypress.io/mounting-vue
-        cy.createWrapper(VnSmsDialog);
+    const defaultProps = {
+        phone: '123456789',
+        subject: 'Test Subject',
+        template: 'pendingPayment',
+        locale: 'es',
+        promise: cy.stub().resolves(),
+    };
+
+    const mountComponent = (opt) => {
+        cy.mount(VnSmsDialog, {
+            props: defaultProps,
+            ...opt,
+        });
+    };
+
+    it('renders dialog with all elements', () => {
+        mountComponent();
+        cy.get('.text-h6').should('contain', 'Send SMS');
+        cy.get('.q-select').should('exist');
+        cy.get('input[type="text"]').should('have.length', 2);
+        cy.get('textarea').should('exist');
+    });
+
+    it('shows character counter and updates color based on length', () => {
+        mountComponent();
+        const longMessage = 'a'.repeat(150);
+        cy.get('textarea').clear().type(longMessage);
+        cy.get('.q-chip').should('have.class', 'bg-warning');
+        cy.get('.q-chip').should('contain', '150/160');
+
+        const maxMessage = 'a'.repeat(160);
+        cy.get('textarea').clear().type(maxMessage);
+        cy.get('.q-chip').should('have.class', 'bg-negative');
+    });
+
+    it('updates message when changing language', () => {
+        mountComponent();
+        const initialMessage = cy.get('textarea').invoke('val');
+        cy.get('.q-select').click();
+        cy.get('.q-item').contains('English').click();
+        cy.get('textarea').invoke('val').should('not.equal', initialMessage);
+    });
+
+    it('handles SMS sending', () => {
+        const promiseSpy = cy.spy(defaultProps.promise);
+        mountComponent({
+            props: { ...defaultProps, promise: promiseSpy },
+        });
+
+        cy.get('button').contains('confirm').click();
+        cy.wrap(promiseSpy).should('have.been.calledOnce');
+        cy.get('button').contains('confirm').should('have.class', 'loading');
+    });
+
+    it('clears message with clear icon', () => {
+        mountComponent();
+        cy.get('textarea').type('Test message');
+        cy.get('.q-icon').contains('close').click();
+        cy.get('textarea').should('have.value', '');
+    });
+
+    it('shows tooltip on info icon hover', () => {
+        mountComponent();
+        cy.get('.q-icon').contains('info').trigger('mouseover');
+        cy.get('.q-tooltip').should('be.visible');
+    });
+
+    it('validates message length', () => {
+        mountComponent();
+        const tooLongMessage = 'a'.repeat(161);
+        cy.get('textarea').type(tooLongMessage);
+        cy.get('.q-field').should('have.class', 'q-field--error');
     });
 });

test/cypress/components/common/VnSummaryDialog.spec.js

@@ -1,6 +1,5 @@
 import VnSummaryDialog from 'src/components/common/VnSummaryDialog.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnSummaryDialog />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/common/VnTitle.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import VnTitle from 'src/components/common/VnTitle.vue';
 
 describe('<VnTitle />', () => {

test/cypress/components/common/VnWeekdayPicker.spec.js

@@ -1,6 +1,5 @@
 import VnWeekdayPicker from 'src/components/common/VnWeekdayPicker.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnWeekdayPicker />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/common/vnDiscount.spec.js

@@ -1,6 +1,5 @@
 import vnDiscount from 'src/components/common/vnDiscount.vue';
 
-/// <reference types="cypress" />
 describe.skip('<vnDiscount />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/CardDescriptor.spec.js

@@ -1,6 +1,5 @@
 import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 
-/// <reference types="cypress" />
 describe.skip('<CardDescriptor />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/CardList.spec.js

@@ -1,9 +1,92 @@
 import CardList from 'src/components/ui/CardList.vue';
 
-/// <reference types="cypress" />
-describe.skip('<CardList />', () => {
-    it('TODO: boilerplate', () => {
-        // see: https://on.cypress.io/mounting-vue
-        cy.createWrapper(CardList);
+describe('<CardList />', () => {
+    const mountComponent = (opt) => {
+        const defaultProps = {
+            element: { name: 'Item' },
+            id: 1,
+            isSelected: false,
+            title: 'Card Title',
+            showCheckbox: true,
+            hasInfoIcons: true,
+        };
+        cy.createWrapper(CardList, {
+            props: defaultProps,
+            ...opt,
+        });
+    };
+
+    it('should display title and ID chip', () => {
+        mountComponent();
+        // Verificar que el título esté presente
+        cy.contains('Card Title').should('be.visible');
+
+        // Verificar que la etiqueta ID esté presente y visible
+        cy.contains('ID: 1').should('be.visible');
+    });
+
+    it('should display checkbox when showCheckbox is true', () => {
+        mountComponent();
+        // Verificar que el checkbox esté visible cuando showCheckbox es verdadero
+        cy.get('.q-checkbox').should('exist');
+    });
+
+    it('should emit toggleCardCheck event when checkbox is clicked', () => {
+        mountComponent(); // Espiar el evento `toggleCardCheck`
+        const onToggleCardCheck = cy.spy().as('toggleCardCheckEvent');
+        mountComponent({
+            props: {
+                element: { name: 'Item' },
+                showCheckbox: true,
+            },
+            listeners: {
+                toggleCardCheck: onToggleCardCheck,
+            },
+        });
+
+        // Hacer clic en el checkbox
+        cy.get('.q-checkbox').click();
+
+        // Asegurarse de que el evento `toggleCardCheck` se emitió
+        cy.get('@toggleCardCheckEvent').should('have.been.calledOnce');
+    });
+
+    it('should display info-icons slot content when hasInfoIcons is true', () => {
+        // Montar el componente con el slot info-icons
+        mountComponent({
+            props: {
+                hasInfoIcons: true,
+            },
+            slots: {
+                'info-icons': `<div class="info-icon-slot">Info Icon</div>`,
+            },
+        });
+
+        // Verificar que el contenido del slot `info-icons` esté visible
+        cy.get('.info-icon-slot').should('be.visible');
+    });
+
+    it('should display list-items slot content', () => {
+        // Montar el componente con el slot `list-items`
+        mountComponent({
+            slots: {
+                'list-items': `<div class="list-item-slot">List Item</div>`,
+            },
+        });
+
+        // Verificar que el contenido del slot `list-items` esté visible
+        cy.get('.list-item-slot').should('be.visible');
+    });
+
+    it('should display actions slot content', () => {
+        // Montar el componente con el slot `actions`
+        mountComponent({
+            slots: {
+                actions: `<button class="action-button">Action</button>`,
+            },
+        });
+
+        // Verificar que el contenido del slot `actions` esté visible
+        cy.get('.action-button').should('be.visible');
     });
 });

test/cypress/components/ui/CardSummary.spec.js

@@ -1,9 +1,98 @@
 import CardSummary from 'src/components/ui/CardSummary.vue';
-
-/// <reference types="cypress" />
+import { createRouter, createWebHistory } from 'vue-router';
 describe.skip('<CardSummary />', () => {
-    it('TODO: boilerplate', () => {
-        // see: https://on.cypress.io/mounting-vue
-        cy.createWrapper(CardSummary);
+    let router, wrapper;
+
+    beforeEach(() => {
+        router = createRouter({
+            history: createWebHistory(),
+            routes: [
+                {
+                    path: '/test',
+                    name: 'test',
+                    meta: { moduleName: 'test' },
+                },
+                {
+                    path: '/test/summary',
+                    name: 'testSummary',
+                },
+            ],
+        });
+    });
+
+    const mountComponent = (opt) => {
+        opt = {
+            props: {
+                url: 'test-url',
+                dataKey: 'test-key',
+                ...opt,
+            },
+        };
+        cy.createWrapper(CardSummary, opt);
+    };
+
+    it('shows skeleton while loading', () => {
+        mountComponent();
+        cy.get('.cardSummary').find('SkeletonSummary').should('exist');
+    });
+
+    it('displays entity data correctly', () => {
+        const mockEntity = {
+            id: 1,
+            name: 'Test Entity',
+        };
+
+        mountComponent();
+        // Intercept API call
+        cy.intercept('GET', 'test-url*', {
+            body: mockEntity,
+        }).as('fetchData');
+
+        cy.wait('@fetchData');
+        cy.get('.summaryHeader').find('VnLv').should('have.prop', 'label', '1 -');
+        cy.get('.summaryHeader').find('VnLv').should('have.prop', 'value', 'Test Entity');
+    });
+
+    it('shows redirect icon when not in summary route', () => {
+        router.push('/test');
+        mountComponent({
+            entityId: 1,
+            moduleName: 'test',
+        });
+
+        cy.get('.header.link')
+            .should('exist')
+            .should('have.attr', 'href')
+            .and('include', '/test/summary');
+    });
+
+    it('emits onFetch event after data fetch', () => {
+        const mockEntity = { id: 1, name: 'Test' };
+        const onFetchSpy = cy.spy().as('onFetchSpy');
+
+        mountComponent({
+            onFetch: onFetchSpy,
+        });
+
+        cy.intercept('GET', 'test-url*', {
+            body: mockEntity,
+        }).as('fetchData');
+
+        cy.wait('@fetchData');
+        cy.get('@onFetchSpy').should('have.been.calledWith', mockEntity);
+    });
+
+    it('updates when props change', () => {
+        mountComponent();
+
+        cy.intercept('GET', 'new-url*').as('newFetch');
+
+        // Change props
+        cy.get('@wrapper').invoke('setProps', {
+            url: 'new-url',
+            filter: { test: true },
+        });
+
+        cy.wait('@newFetch');
     });
 });

test/cypress/components/ui/CatalogItem.spec.js

@@ -1,6 +1,5 @@
 import CatalogItem from 'src/components/ui/CatalogItem.vue';
 
-/// <reference types="cypress" />
 describe.skip('<CatalogItem />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/FetchedTags.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import FetchedTags from 'src/components/ui/FetchedTags.vue'; // Ajusta la ruta según tu estructura de proyecto
 
 describe('FetchedTags', () => {

test/cypress/components/ui/QCalendarMonthWrapper.spec.js

@@ -1,6 +1,5 @@
 import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
 
-/// <reference types="cypress" />
 describe.skip('<QCalendarMonthWrapper />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/SkeletonDescriptor.spec.js

@@ -1,6 +1,6 @@
+/// <reference types='cypress' />
 import SkeletonDescriptor from 'src/components/ui/SkeletonDescriptor.vue';
 
-/// <reference types="cypress" />
 describe.skip('<SkeletonDescriptor />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/SkeletonForm.spec.js

@@ -1,6 +1,5 @@
 import SkeletonForm from 'src/components/ui/SkeletonForm.vue';
 
-/// <reference types="cypress" />
 describe.skip('<SkeletonForm />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/SkeletonSummary.spec.js

@@ -1,6 +1,5 @@
 import SkeletonSummary from 'src/components/ui/SkeletonSummary.vue';
 
-/// <reference types="cypress" />
 describe.skip('<SkeletonSummary />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/SkeletonTable.spec.js

@@ -1,6 +1,5 @@
 import SkeletonTable from 'src/components/ui/SkeletonTable.vue';
 
-/// <reference types="cypress" />
 describe.skip('<SkeletonTable />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/VnAvatar.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import VnAvatar from 'src/components/ui/VnAvatar.vue'; // Ajusta la ruta según tu estructura de proyecto
 
 describe('VnAvatar', () => {

test/cypress/components/ui/VnConfirm.spec.js

@@ -1,6 +1,5 @@
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnConfirm />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/VnFilterPanel.spec.js

@@ -1,6 +1,5 @@
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnFilterPanel />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/VnFilterPanelChip.spec.js

@@ -1,6 +1,5 @@
 import VnFilterPanelChip from 'src/components/ui/VnFilterPanelChip.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnFilterPanelChip />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/VnImg.spec.js

@@ -1,6 +1,5 @@
 import VnImg from 'src/components/ui/VnImg.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnImg />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/VnLinkPhone.spec.js

@@ -1,6 +1,5 @@
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnLinkPhone />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/VnLogo.spec.js

@@ -1,7 +1,6 @@
 import { Dark } from 'quasar';
 import VnLogo from 'src/components/ui/VnLogo.vue';
 
-/// <reference types="cypress" />
 describe('<VnLogo />', () => {
     const mountComponent = (opt = {}) => {
         cy.createWrapper(VnLogo, { props: { ...opt } });

test/cypress/components/ui/VnLv.spec.js

@@ -1,7 +1,6 @@
 import VnLv from 'src/components/ui/VnLv.vue';
 import { useClipboard } from 'src/composables/useClipboard';
 
-/// <reference types="cypress" />
 describe('<VnLv />', () => {
     before('login', () => {
         Cypress.on('uncaught:exception', () => false);

test/cypress/components/ui/VnNotes.spec.js

@@ -1,6 +1,5 @@
 import VnNotes from 'src/components/ui/VnNotes.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnNotes />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/VnOutForm.spec.js

@@ -1,6 +1,5 @@
 import VnOutForm from 'src/components/ui/VnOutForm.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnOutForm />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/VnPaginate.spec.js

@@ -1,6 +1,5 @@
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnPaginate />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/VnRow.spec.js

@@ -1,6 +1,5 @@
 import VnRow from 'src/components/ui/VnRow.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnRow />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/VnSearchbar.spec.js

@@ -1,6 +1,5 @@
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnSearchbar />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/VnSms.spec.js

@@ -1,6 +1,5 @@
 import VnSms from 'src/components/ui/VnSms.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnSms />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/VnSubToolbar.spec.js

@@ -1,6 +1,5 @@
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnSubToolbar />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue

test/cypress/components/ui/VnUserLink.spec.js

@@ -1,6 +1,5 @@
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
-/// <reference types="cypress" />
 describe.skip('<VnUserLink />', () => {
     it('TODO: boilerplate', () => {
         // see: https://on.cypress.io/mounting-vue