test: init e2e_monitorTicket

cypress.config.js

@@ -15,7 +15,6 @@ export default defineConfig({
         video: false,
         specPattern: 'test/cypress/integration/**/*.spec.js',
         experimentalRunAllSpecs: false,
-        watchForFileChanges: false,
         reporter: 'cypress-mochawesome-reporter',
         reporterOptions: {
             charts: true,

src/components/VnTable/VnTable.vue

@@ -614,6 +614,7 @@ const checkbox = ref(null);
                     />
 
                     <QBtn
+                        data-cy="vnTable_filter_btn"
                         v-if="showRightIcon"
                         icon="filter_alt"
                         class="bg-vn-section-color q-ml-sm"
@@ -651,6 +652,7 @@ const checkbox = ref(null);
                                     withFilters
                                 "
                                 :column="col"
+                                :data-cy="`column-filter-${col.name}`"
                                 :show-title="true"
                                 :data-key="$attrs['data-key']"
                                 v-model="params[columnName(col)]"

src/pages/Item/components/ItemProposal.vue

@@ -228,11 +228,15 @@ async function handleTicketConfig(data) {
         url="TicketConfigs"
         :filter="{ fields: ['lackAlertPrice'] }"
         @on-fetch="handleTicketConfig"
-        auto-load
+    ></FetchData>
+    <QInnerLoading
+        :showing="isLoading"
+        :label="t && t('globals.pleaseWait')"
+        color="primary"
     />
 
     <VnTable
-        v-if="ticketConfig"
+        v-if="!isLoading"
         auto-load
         data-cy="proposalTable"
         ref="proposalTableRef"

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

@@ -0,0 +1,210 @@
+describe('Monitor Tickets Table', () => {
+    beforeEach(() => {
+        cy.login('developer');
+        cy.viewport(1920, 720);
+        cy.visit('/#/monitor/tickets');
+        cy.domContentLoad();
+        cy.waitForElement('.q-page');
+        cy.intercept('GET', '**/SalesMonitors/salesFilter*').as('filterRequest');
+        cy.openFilterPanel();
+    });
+
+    it('should filter by column headers and update URL params', () => {
+        // Interceptar las llamadas de filtrado
+        cy.intercept('GET', '**/SalesMonitors/salesFilter*').as('filterRequest');
+
+        // Array de pruebas para diferentes columnas
+        const testCases = [
+            // {
+            //     columnName: 'id',
+            //     value: '123',
+            //     expectedParam: { id: '123' },
+            // },
+            {
+                columnName: 'clientFk',
+                value: 'cave',
+                expectedParam: { clientFk: { like: '%cave%' } },
+            },
+            // {
+            //     columnName: 'packing',
+            //     value: 'H',
+            //     expectedParam: { packing: 'H' },
+            // },
+        ];
+
+        // Probar cada columna
+        // testCases.forEach(({ columnName, value, expectedParam }) => {
+        //     // Encontrar el input del filtro y escribir el valor
+        //     cy.get(`[data-cy="column-filter-${columnName}"]`)
+        //         .click()
+        //         .type(`${value}{enter}`);
+
+        // Verificar que la URL se actualizó con el parámetro
+        // cy.url().should('include', encodeURIComponent(JSON.stringify(expectedParam)));
+
+        // Verificar que la petición HTTP incluye el parámetro correcto
+        // cy.wait('@filterRequest').then((interception) => {
+        //     expect(interception.request.url).to.include(
+        //         encodeURIComponent(JSON.stringify(expectedParam)),
+        //     );
+        // });
+
+        // Limpiar el filtro para la siguiente prueba
+        // cy.get(`[data-cy="column-filter-${columnName}"]`).clear();
+        // });
+        /* ==== Generated with Cypress Studio ==== */ 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"]',
+        ).type('13');
+        cy.get(
+            '[data-cy="column-filter-id"] > [data-v-532139db=""] > .column > [dense="true"] > .q-field > .q-field__inner > .q-field__control > .q-field__append > .q-icon',
+        ).click();
+        // 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('cave{enter}');
+        // 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"]',
+        // ).type('cave{enter}');
+        // 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('c');
+        // 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"]',
+        // ).type('Bar');
+        // 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('Ba');
+        cy.dataCy('vnTable_filter_btn').click();
+        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', { 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');
+
+        /* ==== End Cypress Studio ==== */
+        /* ==== Generated with Cypress Studio ==== */
+        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 ==== */
+    });
+
+    it.only('should filter by filter panel', () => {
+        // Client id - clientFk
+        cy.get('[data-cy="Client id_input"]').type('1101');
+        cy.searchInFilterPanel();
+        requestParams('clientFk', '1101');
+        countRows('eq', 7);
+
+        // order id
+        cy.get('[data-cy="Order id_input"]').type(7);
+        cy.searchInFilterPanel();
+        requestParams('orderFk', '7');
+        countRows('eq', 1);
+
+        // Scope days
+        cy.get('[data-cy="Days onward_input"]').type(2);
+        cy.searchInFilterPanel();
+        requestParams('scopeDays', '2');
+        countRows('eq', 1);
+
+        // 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', 1);
+
+        cy.get('.q-mt-xs > .q-item__section--side').click();
+        requestParams(null);
+        // Nickname
+        cy.get('[data-cy="Nickname_input"]').type('test');
+        cy.searchInFilterPanel();
+        requestParams('t.nickname', 'test', { inWhere: true, like: true });
+        countRows('eq', 2);
+
+        // cy.get('#f_d6f1f8d4-40b7-4e67-a7bb-5f309fe079b8_1 > .q-item__section > .q-item__label--caption').click();
+        cy.get(
+            '.q-scrollarea__content > .q-btn--standard > .q-btn__content > .q-icon',
+        ).click();
+        /* ==== End Cypress Studio ==== */
+    });
+});
+function requestParams(key, value, options = { inWhere: false, like: false }) {
+    // cy.wait(2000);
+    cy.wait('@filterRequest').then((interception) => {
+        if (!key) return;
+        const { query } = interception.request;
+        cy.log('Request query:', query, options);
+        if (!options.inWhere)
+            // Verificamos que existe la propiedad clientFk y su valor
+            expect(query).to.have.property(key, value);
+        else {
+            // Verificamos que existe la propiedad where y dentro de ella la propiedad clientFk y su valor
+            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);
+            }
+        }
+        // Verificación adicional del formato completo si es necesario
+        // expect(interception.request.query).to.deep.include({
+        //     filter: expect.any(String),
+        //     from: expect.any(String),
+        //     to: expect.any(String),
+        //     scopeDays: expect.any(String),
+        // });
+    });
+}
+function countRows(operator = 'gt', value = 0) {
+    // Obtener el último data-row-index para saber el total de filas
+    cy.get('td[data-row-index]')
+        .last()
+        .invoke('attr', 'data-row-index')
+        .then((lastIndex) => {
+            const totalRows = parseInt(lastIndex) + 1; // Sumamos 1 porque el índice empieza en 0
+            cy.log(`Total de filas: ${totalRows}`);
+            expect(totalRows).to.be[operator](value);
+            // expect(totalRows).to.be.gt(0);
+        });
+}

test/cypress/support/commands.js

@@ -286,6 +286,19 @@ Cypress.Commands.add('openRightMenu', (element) => {
     cy.get('[data-cy="toggle-right-drawer"]').click();
 });
 
+Cypress.Commands.add('searchInFilterPanel', () => {
+    const element =
+        '.q-scrollarea__content > .q-btn--standard > .q-btn__content > .q-icon';
+    if (element) cy.waitForElement(element);
+    cy.get(element).click();
+    cy.wait(1000);
+});
+
+Cypress.Commands.add('openFilterPanel', () => {
+    const element = 'vnTable_filter_btn';
+    if (element) cy.waitForElement(`[data-cy="${element}"]`);
+    cy.dataCy(element).click();
+});
 Cypress.Commands.add('openLeftMenu', (element) => {
     if (element) cy.waitForElement(element);
     cy.get('.q-toolbar > .q-btn--round.q-btn--dense > .q-btn__content > .q-icon').click();