src/pages/Monitor/MonitorClientsActions.vue

@@ -8,14 +8,14 @@ import VnRow from 'src/components/ui/VnRow.vue';
         class="q-pa-md"
         :style="{ 'flex-direction': $q.screen.lt.lg ? 'column' : 'row', gap: '0px' }"
     >
-        <div style="flex: 0.3">
+        <div style="flex: 0.3" data-cy="clientsOnWebsite">
             <span
                 class="q-ml-md text-body1"
                 v-text="$t('salesMonitor.clientsOnWebsite')"
             />
             <SalesClientTable />
         </div>
-        <div style="flex: 0.7">
+        <div style="flex: 0.7" data-cy="recentOrderActions">
             <span
                 class="q-ml-md text-body1"
                 v-text="$t('salesMonitor.recentOrderActions')"

src/pages/Monitor/MonitorOrders.vue

@@ -9,6 +9,7 @@ import { toDateFormat, toDateTimeFormat } from 'src/filters/date.js';
 import { toCurrency } from 'src/filters';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import axios from 'axios';
+import VnDateBadge from 'src/components/common/VnDateBadge.vue';
 
 const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
@@ -164,29 +165,20 @@ const openTab = (id) =>
             </div>
         </template>
         <template #column-dateSend="{ row }">
-            <QTd>
-                <QBadge
-                    :color="getBadgeColor(row.date_send)"
-                    text-color="black"
-                    class="q-pa-sm"
-                    style="font-size: 14px"
-                >
-                    {{ toDateFormat(row.date_send) }}
-                </QBadge>
-            </QTd>
+            <VnDateBadge :date="row.date_send" />
         </template>
 
         <template #column-clientFk="{ row }">
-            <QTd @click.stop>
-                <span class="link" v-text="row.clientName" :title="row.clientName" />
+            <div @click.stop.prevent :title="row.clientName">
+                <span class="link" v-text="row.clientName" />
                 <CustomerDescriptorProxy :id="row.clientFk" />
-            </QTd>
+            </div>
         </template>
         <template #column-departmentFk="{ row }">
-            <QTd @click.stop>
+            <div @click.stop.prevent :title="row.departmentName">
                 <span class="link" v-text="row.departmentName" />
                 <DepartmentDescriptorProxy :id="row.departmentFk" dense />
-            </QTd>
+            </div>
         </template>
     </VnTable>
 </template>

src/pages/Worker/Department/Card/DepartmentDescriptorProxy.vue

@@ -11,7 +11,7 @@ const $props = defineProps({
 </script>
 
 <template>
-    <QPopupProxy>
+    <QPopupProxy data-cy="DepartmentDescriptor">
         <DepartmentDescriptor
             v-if="$props.id"
             :id="$props.id"

test/cypress/integration/monitor/clientActions.spec.js

@@ -0,0 +1,53 @@
+const clientFk = `[data-cy="recentOrderActions"] [data-cy="column-filter-clientFk"]`;
+const departmentFk = `[data-cy="recentOrderActions"] [data-cy="column-filter-departmentFk"]`;
+describe('Monitor Clients actions', () => {
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit('/#/monitor/clients-actions');
+        cy.waitForElement('.q-page');
+        cy.intercept('GET', '**/SalesMonitors/ordersFilter*').as('ordersFilter');
+        cy.intercept('GET', '**/SalesMonitors/clientsFilter*').as('clientsFilter');
+    });
+    it('Should load layout', () => {
+        cy.get('.q-page').should('be.visible');
+
+        cy.dataCy('recentOrderActions').within(() => {
+            cy.firstRow('clientFk').find('span').should('have.class', 'link').click();
+        });
+        cy.dataCy('CustomerDescriptor').should('exist');
+        cy.dataCy('recentOrderActions').within(() => {
+            cy.firstRow('departmentFk', 2)
+                .find('span')
+                .should('have.class', 'link')
+                .click();
+        });
+        cy.dataCy('DepartmentDescriptor').should('exist');
+
+        cy.dataCy('clientsOnWebsite')
+            .find(' .q-ml-md')
+            .should('have.text', 'Clients on website');
+        cy.dataCy('recentOrderActions')
+            .find('.q-ml-md')
+            .should('have.text', 'Recent order actions');
+        cy.get('[data-cy="From_inputDate"]').should('have.value', '01/01/2001');
+        cy.get('[data-cy="To_inputDate"]').should('have.value', '01/01/2001');
+        cy.get(`${clientFk} [data-cy="_select"]`).click();
+        cy.clickOption();
+        cy.countTableRows('eq', 0);
+
+        cy.get(`${clientFk} .q-field .q-field__control > :nth-child(2)`).click();
+        cy.get(`${departmentFk} [data-cy="_select"]`).type('VIP').trigger('enter');
+        cy.intercept('GET', '**/Departments*').as('filterDepartment');
+        cy.wait('@filterDepartment').then(() => {
+            cy.clickOption();
+            cy.countTableRows('eq', 13);
+        });
+
+        cy.get(`${clientFk} [data-cy="_select"]`).type('Bruce Banner');
+        cy.intercept('GET', '**/Clients*').as('filterClient');
+        cy.wait('@filterClient').then(() => {
+            cy.clickOption();
+            cy.countTableRows('eq', 3);
+        });
+    });
+});

test/cypress/integration/monitor/monitorTicket.spec.js

@@ -4,208 +4,138 @@ const firstRow = (field, index = 1) =>
 describe('Monitor Tickets Table', () => {
     beforeEach(() => {
         cy.login('developer');
-        cy.viewport(1920, 720);
         cy.visit('/#/monitor/tickets');
         cy.waitForElement('.q-page');
         cy.intercept('GET', '**/SalesMonitors/salesFilter*').as('filterRequest');
         cy.openFilterPanel();
     });
+    it('should open new tab when ctrl+click on client link', () => {
+        cy.intercept('GET', '**/SalesMonitors/salesFilter*').as('filterRequest');
 
+        cy.window().then((win) => {
+            cy.stub(win, 'open').as('windowOpen');
+        });
+
+        cy.get(firstRow('provinceFk')).click({ ctrlKey: true });
+        cy.get('@windowOpen').should('be.calledWithMatch', /\/ticket\/\d+\/sale/);
+    });
     it.only('should filter by column headers and update URL params', () => {
         cy.intercept('GET', '**/SalesMonitors/salesFilter*').as('filterRequest');
 
-        cy.dataCy('column-filter-id').find('  [data-cy="_input"]').type('13');
+        cy.dataCy('column-filter-id').find('[data-cy="_input"]').type('13');
         cy.dataCy('column-filter-id').find(' .q-icon').click();
         cy.openRightMenu();
-        cy.dataCy('column-filter-clientFk')
-            .find('[data-cy="_select"]', { timeout: 3000 })
-            .type('1101', { timeout: 3000, force: true });
-        cy.get('[role="listbox"]')
-            .find('.q-item')
-            .find('.q-item__label')
-            .contains('Bruce Wayne')
-            .click();
-
-        cy.get(
-            '[data-cy="column-filter-clientFk"] > [data-v-532139db=""] > .column > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon',
-        ).click();
-        cy.get(
-            '[data-cy="column-filter-id"] > [data-v-532139db=""] > .column > [dense="true"] > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > [data-cy="_input"]',
-        ).clear('1');
-
-        cy.get(
-            '[data-cy="column-filter-clientFk"] > [data-v-532139db=""] > .column > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native > [data-cy="_select"]',
-        ).clear('1');
-        cy.get(
-            '[data-cy="column-filter-clientFk"] > [data-v-532139db=""] > .column > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native > [data-cy="_select"]',
-            { timeout: 3000 },
-        ).type('1101');
-        cy.get('.q-item__label--caption').click();
-        cy.get(
-            '[data-cy="column-filter-salesPersonFk"] > [data-v-532139db=""] > .column > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native > [data-cy="_select"]',
-        ).click();
-        cy.get(
-            '#f_0ab28e51-61ef-42fd-98cf-5c145672132a_1 > .q-item__section > :nth-child(1)',
-        ).click();
-        cy.get(
-            '[data-cy="column-filter-provinceFk"] > [data-v-532139db=""] > .column > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native > [data-cy="_select"]',
-        ).click();
-        cy.get('#f_7e2e6ebc-5a8e-40e6-a436-b301a249090e_2 > .q-item__section').click();
-        cy.get(
-            '[data-cy="column-filter-state"] > [data-v-532139db=""] > .column > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native > [data-cy="_select"]',
-        ).click();
-        cy.get('.q-table__top').click();
-        cy.get(
-            '[data-cy="column-filter-state"] > [data-v-532139db=""] > .column > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native > [data-cy="_select"]',
-        ).click();
-        cy.get(
-            '#f_e05db3bc-1bae-4398-8e06-a9395e8f9e30_13 > .q-item__section > :nth-child(1)',
-        ).click();
-        cy.get('.q-ml-sm > .q-btn__content > .q-icon').click();
-        /* ==== End Cypress Studio ==== */
-    });
-    describe('should filter by filter panel', () => {
-        it('clientFk', () => {
-            // Client id - clientFk
-            cy.get('[data-cy="Client id_input"]').type('1101');
-            cy.searchInFilterPanel();
-            requestParams('clientFk', '1101');
-            countRows('eq', 7);
-        });
-
-        it('orderFk', () => {
-            // order id
-            cy.get('[data-cy="Order id_input"]').type(7);
-            cy.searchInFilterPanel();
-            requestParams('orderFk', '7');
-            countRows('eq', 1);
-        });
-
-        it('scopeDays', () => {
-            // Scope days
-            cy.get('[data-cy="Days onward_input"]').type(2);
-            cy.searchInFilterPanel();
-            requestParams('scopeDays', '2');
-            countRows('eq', 27);
-        });
-
-        it('salesPersonFk', () => {
-            // SalesPerson
-            cy.get('[data-cy="vnWorkerSelect"]').click();
-            cy.get('.q-item__label').contains('salesPersonNick').click();
-            cy.searchInFilterPanel();
-            requestParams('c.salesPersonFk', 18, { inWhere: true });
-            countRows('eq', 21);
-        });
-
-        //     it('', () => {
-        //         cy.get('.q-mt-xs > .q-item__section--side').click();
-        //         requestParams(null);
-        // });
-
-        it('nickname', () => {
-            // Nickname
-            cy.get('[data-cy="Nickname_input"]').type('test');
-            cy.searchInFilterPanel();
-            requestParams('t.nickname', 'test', { inWhere: true, like: true });
-            countRows('eq', 2);
-        });
-
-        it('refFk', () => {
-            // Invoice
-            cy.get('[data-cy="Invoice_input"]').type('test');
-            cy.searchInFilterPanel();
-            requestParams('refFk', 'test');
-            countRows('eq', 0);
-        });
-
-        it('agencyModeFk', () => {
-            // Agency
-            cy.get('[data-cy="Agency_select"]').click();
-            cy.get('.q-item__label').contains('inhouse pickup').click();
-            cy.searchInFilterPanel();
-            requestParams('agencyModeFk', '1');
-            countRows('eq', 6);
-        });
-
-        //     it('', () => {
-        //         cy.get('.q-mt-xs > .q-item__section--side').click();
-        //         requestParams(null);
-        // });
-
-        it('state', () => {
-            // State
-            cy.get('[data-cy="State_select"]').click();
-            cy.get('.q-item__label').contains('Libre').click();
-            cy.searchInFilterPanel();
-            requestParams('ts.stateFk', 2, { inWhere: true });
-            countRows('eq', 11);
-        });
-
-        it('alertLevel', () => {
-            // AlertLevel
-            cy.get('[data-cy="Grouped State_select"]').click();
-            cy.get('.q-item__label').contains('Free').click();
-            cy.searchInFilterPanel();
-            requestParams('alertLevel', '0');
-            countRows('eq', 16);
-        });
-
-        //     it('', () => {
-        //         cy.get('.q-mt-xs > .q-item__section--side').click();
-        //         requestParams(null);
-        // });
-
-        it('countryFk', () => {
-            // Country
-            cy.get('[data-cy="Country_select"]').click();
-            cy.get('.q-item__label').contains('España').click();
-            cy.searchInFilterPanel();
-            requestParams('countryFk', '1');
-            countRows('eq', 26);
-        });
-
-        it('warehouseFk', () => {
-            // Province
-            cy.get('[data-cy="Province_select"]').click();
-            cy.get('.q-item__label').contains('Province one').click();
-            cy.searchInFilterPanel();
-            requestParams('warehouseFk', 1);
-            countRows('eq', 2);
-        });
-
-        it('department', () => {
-            // Department
-            cy.get('[data-cy="Department_select"]').click();
-            cy.get('.q-item__label').contains('VENTAS').click();
-            cy.searchInFilterPanel();
-            requestParams('d.name', 'VENTAS', { inWhere: true });
-            countRows('eq', 24);
-        });
-
-        it('packing', () => {
-            // ITP
-            cy.get('[data-cy="ITP_select"]').click();
-            cy.get('.q-item__label').contains('H').click();
-            cy.searchInFilterPanel();
-            requestParams('packing', 'H');
-            countRows('eq', 5);
+        cy.dataCy('column-filter-clientFk').find('[data-cy="_select"]').type('1101');
+        cy.intercept('GET', '**/Clients*').as('filterClient');
+        cy.wait('@filterClient').then(() => {
+            cy.clickOption();
         });
     });
+    it('should filter by filter panel', () => {
+        // Client id - clientFk
+        cy.get('[data-cy="Client id_input"]').type('1101');
+        cy.searchInFilterPanel();
+        cy.url().should('include', 'clientFk');
+        cy.countTableRows('eq', 7);
+        //
+        cy.cleanFilterPanel();
+        cy.get('[data-cy="Order id_input"]').type(7);
+        cy.searchInFilterPanel();
+        cy.url().should('include', 'orderFk');
+        cy.countTableRows('eq', 1);
+        //
+        cy.cleanFilterPanel();
+        cy.get('[data-cy="Days onward_input"]').type(2);
+        cy.searchInFilterPanel();
+        cy.url().should('include', 'scopeDays');
+        cy.countTableRows('eq', 27);
+        //
+        cy.cleanFilterPanel();
+        // Nickname
+        cy.get('[data-cy="Nickname_input"]').type('test');
+        cy.searchInFilterPanel();
+        cy.url().should('include', 'nickname');
+        cy.countTableRows('eq', 2);
+        //
+        cy.cleanFilterPanel();
+        // Invoice
+        cy.get('[data-cy="Invoice_input"]').type('test');
+        cy.searchInFilterPanel();
+        cy.url().should('include', 'refFk');
+        cy.countTableRows('eq', 0);
+        //
+        cy.cleanFilterPanel();
+        // Agency
+        cy.get('[data-cy="Agency_select"]').click();
+        cy.get('.q-item__label').contains('inhouse pickup').click();
+        cy.searchInFilterPanel();
+        cy.url().should('include', 'agencyModeFk');
+        cy.countTableRows('eq', 6);
+        //
+        cy.cleanFilterPanel();
+        // State
+        cy.get('[data-cy="State_select"]').click();
+        cy.get('.q-item__label').contains('Libre').click();
+        cy.searchInFilterPanel();
+        cy.url().should('include', 'stateFk');
+        cy.countTableRows('eq', 13);
+        //
+        cy.cleanFilterPanel();
+        // AlertLevel
+        cy.get('[data-cy="Grouped State_select"]').click();
+        cy.get('.q-item__label').contains('Free').click();
+        cy.searchInFilterPanel();
+        cy.url().should('include', 'alertLevel');
+        cy.countTableRows('eq', 18);
+        //
+        cy.cleanFilterPanel();
+        // Country
+        cy.get('[data-cy="Country_select"]').click();
+        cy.get('.q-item__label').contains('España').click();
+        cy.searchInFilterPanel();
+        cy.url().should('include', 'countryFk');
+        cy.countTableRows('eq', 28);
+        //
+        cy.cleanFilterPanel();
+        // Province
+        cy.get('[data-cy="Warehouse_select"]').click();
+        cy.get('.q-item__label').contains('Warehouse Two').click();
+        cy.searchInFilterPanel();
+        cy.url().should('include', 'warehouseFk');
+        cy.countTableRows('eq', 1);
+        //
+        cy.cleanFilterPanel();
+        // Department
+        cy.selectOption('[data-cy="Department_select"]', 'EQUIPO ESPAÑA LEVANTE');
+        cy.searchInFilterPanel();
+        cy.url().should('include', 'departmentFk');
+        //
+        cy.cleanFilterPanel();
+        // ITP
+        cy.get('[data-cy="ITP_select"]').click();
+        cy.get('.q-item__label').contains('H').click();
+        cy.searchInFilterPanel();
+        cy.url().should('include', 'packing');
+        cy.countTableRows('eq', 5);
+    });
+
     it('Cols', () => {
         cy.get(firstRow('totalProblems'));
+
         cy.get(firstRow('id')).find('span').should('have.class', 'link').click();
         cy.dataCy('TicketDescriptor').should('exist');
+
+        cy.get(firstRow('zoneFk')).find('span').should('have.class', 'link').click();
+        cy.dataCy('ZoneDescriptor').should('exist');
+
         cy.get(firstRow('clientFk')).find('span').should('have.class', 'link').click();
         cy.dataCy('CustomerDescriptor').should('exist');
 
-        cy.get(firstRow('salesPersonFk'))
+        cy.get(firstRow('departmentFk'))
             .find('span')
             .should('have.class', 'link')
             .click();
-        cy.dataCy('WorkerDescriptor').should('exist');
-        cy.get(firstRow('zoneFk')).find('span').should('have.class', 'link').click();
-        cy.dataCy('ZoneDescriptor').should('exist');
+        cy.dataCy('DepartmentDescriptor').should('exist');
         cy.get(firstRow('shippedDate')).find('.q-badge');
         cy.get(
             ':nth-child(1) > .q-table--col-auto-width > [data-cy="tableAction-0"] > .q-btn__content > .q-icon',
@@ -215,37 +145,32 @@ describe('Monitor Tickets Table', () => {
         ).click();
         cy.get('.summaryHeader').should('exist');
     });
+
+    it('clear scopeDays', function () {
+        cy.get('[data-cy="Days onward_input"]').clear().type('2');
+        cy.searchInFilterPanel();
+        cy.get('.q-chip__content > span').should('have.text', '"2"');
+        cy.waitSpinner();
+        checkScopeDays(2);
+        cy.get('[data-cy="Days onward_input"]').clear();
+        cy.searchInFilterPanel();
+        cy.get('.q-chip__content > span').should('have.text', '"0"');
+        cy.waitSpinner();
+        checkScopeDays(0);
+    });
 });
-function requestParams(key, value, options = { inWhere: false, like: false }) {
-    cy.wait('@filterRequest').then((interception) => {
-        if (!key) return;
-        const { query } = interception.request;
-        if (!options.inWhere) expect(query).to.have.property(key, value);
-        else {
-            const filter = JSON.parse(query.filter);
-            if (options.like)
-                expect(filter.where).to.have.deep.property(key, {
-                    like: `%${value}%`,
-                });
-            else {
-                expect(filter).to.have.property('where');
-                expect(filter.where).to.have.property(key, value);
-            }
-        }
-    });
-}
-function countRows(operator = 'gt', value = 0) {
-    const element = 'data-row-index';
-    cy.get('body').then(($body) => {
-        const hasRows = $body.find(`td[${element}]`).length > 0;
-        if (!hasRows) expect(0).to.be[operator](value);
-        else
-            cy.get(`td[${element}]`)
-                .last()
-                .invoke('attr', element)
-                .then((lastIndex) => {
-                    const totalRows = parseInt(lastIndex) + 1;
-                    expect(totalRows).to.be[operator](value);
-                });
+
+function checkScopeDays(scopeDays) {
+    cy.url().then((url) => {
+        const urlParams = new URLSearchParams(url.split('?')[1]);
+        const saleMonitorTickets = JSON.parse(
+            decodeURIComponent(urlParams.get('saleMonitorTickets')),
+        );
+        expect(saleMonitorTickets.scopeDays).to.equal(scopeDays);
+        const fromDate = new Date(saleMonitorTickets.from);
+        const toDate = new Date(saleMonitorTickets.to);
+        expect(toDate.getDate() - fromDate.getDate()).to.equal(
+            saleMonitorTickets.scopeDays,
+        );
     });
 }

test/cypress/integration/vnComponent/vnSelect.commands.js

@@ -0,0 +1,3 @@
+Cypress.Commands.add('clickOption', (index = 1) =>
+    cy.get(`.q-menu :nth-child(${index}) >.q-item__section`).click(),
+);

test/cypress/integration/vnComponent/vnTable.commands.js

@@ -0,0 +1,3 @@
+Cypress.Commands.add('firstRow', (field, index = 1) =>
+    cy.get(`:nth-child(${index}) > [data-col-field="${field}"]`),
+);

test/cypress/support/commands.js

@@ -29,7 +29,12 @@
 // import { registerCommands } from '@quasar/quasar-app-extension-testing-e2e-cypress';
 import moment from 'moment';
 import waitUntil from './waitUntil';
+// Importar dinámicamente todos los archivos con el sufijo .commands.js dentro de la carpeta src/test/cypress/integration
+const requireCommands = require.context('../integration', true, /\.commands\.js$/);
+// Iterar sobre cada archivo y requerirlo
+requireCommands.keys().forEach(requireCommands);
 
+// Common comma
 Cypress.Commands.add('waitUntil', { prevSubject: 'optional' }, waitUntil);
 
 Cypress.Commands.add('resetDB', () => {
@@ -102,6 +107,13 @@ Cypress.Commands.add('waitSpinner', () => {
         }
     });
 });
+// Cypress.Commands.add('waitRightSpinner', () => {
+//     cy.get('body').then(($body) => {
+//         if ($body.find('.q-inner-loading').length) {
+//             cy.get('.q-inner-loading').should('not.be.visible');
+//         }
+//     });
+// });
 
 // Fill Inputs
 Cypress.Commands.add('selectOption', (selector, option, timeout = 2500) => {
@@ -354,6 +366,7 @@ Cypress.Commands.add('openRightMenu', (element) => {
 
 Cypress.Commands.add('cleanFilterPanel', () => {
     const element = 'clearFilters';
+    cy.get('#filterPanelForm').scrollIntoView();
     if (element) cy.waitForElement(`[data-cy="${element}"]`);
     cy.dataCy(element).click();
 });
@@ -625,3 +638,18 @@ Cypress.Commands.add('checkQueryParams', (expectedParams = {}) => {
 Cypress.Commands.add('waitTableScrollLoad', () =>
     cy.waitForElement('[data-q-vs-anchor]'),
 );
+Cypress.Commands.add('countTableRows', (operator = 'gt', value = 0) => {
+    const element = 'data-row-index';
+    cy.get('body').then(($body) => {
+        const hasRows = $body.find(`td[${element}]`).length > 0;
+        if (!hasRows) expect(0).to.be[operator](value);
+        else
+            cy.get(`td[${element}]`)
+                .last()
+                .invoke('attr', element)
+                .then((lastIndex) => {
+                    const totalRows = parseInt(lastIndex) + 1;
+                    expect(totalRows).to.be[operator](value);
+                });
+    });
+});

test/cypress/support/index.js

@@ -68,6 +68,7 @@ const waitForApiReady = (url, maxRetries = 20, delay = 1000) => {
 };
 
 before(() => {
+    cy.viewport(1920, 720);
     waitForApiReady('/api/Applications/status');
 });