From 35253c8127fcef65564a4a6c48ad0db220a0c740 Mon Sep 17 00:00:00 2001 From: jtubau <jtubau@verdnatura.es> Date: Wed, 19 Feb 2025 12:39:30 +0100 Subject: [PATCH 1/3] test: refs #8618 added e2e test to routeExtendedList --- cypress.config.js | 11 + src/components/common/VnInputDate.vue | 1 + src/pages/Route/RouteExtendedList.vue | 5 +- .../route/routeExtendedList.spec.js | 198 ++++++++++++++++++ 4 files changed, 214 insertions(+), 1 deletion(-) create mode 100644 test/cypress/integration/route/routeExtendedList.spec.js diff --git a/cypress.config.js b/cypress.config.js index a9e27fcfd..26b7725a5 100644 --- a/cypress.config.js +++ b/cypress.config.js @@ -34,6 +34,17 @@ export default defineConfig({ const plugin = await import('cypress-mochawesome-reporter/plugin'); plugin.default(on); + const fs = await import('fs'); + on('task', { + deleteFile(filePath) { + if (fs.existsSync(filePath)) { + fs.unlinkSync(filePath); + return true; + } + return false; + }, + }); + return config; }, viewportWidth: 1280, diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue index 73c825e1e..1f4705faa 100644 --- a/src/components/common/VnInputDate.vue +++ b/src/components/common/VnInputDate.vue @@ -107,6 +107,7 @@ const manageDate = (date) => { @click="isPopupOpen = !isPopupOpen" @keydown="isPopupOpen = false" hide-bottom-space + :data-cy="$attrs.dataCy ?? $attrs.label + '_inputDate'" > <template #append> <QIcon diff --git a/src/pages/Route/RouteExtendedList.vue b/src/pages/Route/RouteExtendedList.vue index 46bc1a690..a8d847711 100644 --- a/src/pages/Route/RouteExtendedList.vue +++ b/src/pages/Route/RouteExtendedList.vue @@ -280,7 +280,7 @@ const openTicketsDialog = (id) => { </QCardSection> <QCardSection class="q-pt-none"> <VnInputDate - :label="t('route.Stating date')" + :label="t('route.Starting date')" v-model="startingDate" autofocus /> @@ -335,6 +335,7 @@ const openTicketsDialog = (id) => { <QBtn icon="vn:clone" color="primary" + flat class="q-mr-sm" :disable="!selectedRows?.length" @click="confirmationDialog = true" @@ -344,6 +345,7 @@ const openTicketsDialog = (id) => { <QBtn icon="cloud_download" color="primary" + flat class="q-mr-sm" :disable="!selectedRows?.length" @click="showRouteReport" @@ -353,6 +355,7 @@ const openTicketsDialog = (id) => { <QBtn icon="check" color="primary" + flat class="q-mr-sm" :disable="!selectedRows?.length" @click="markAsServed()" diff --git a/test/cypress/integration/route/routeExtendedList.spec.js b/test/cypress/integration/route/routeExtendedList.spec.js new file mode 100644 index 000000000..9e2c23bb4 --- /dev/null +++ b/test/cypress/integration/route/routeExtendedList.spec.js @@ -0,0 +1,198 @@ +describe('Route extended list', () => { + const worker = 'tr:last-child > [data-col-field="workerFk"]'; + const agency = 'tr:last-child > [data-col-field="agencyModeFk"]'; + const vehicle = 'tr:last-child > [data-col-field="vehicleFk"]'; + const date = 'tr:last-child > [data-col-field="dated"]'; + const description = 'tr:last-child > [data-col-field="description"]'; + const served = 'tr:last-child > [data-col-field="isOk"]'; + + beforeEach(() => { + cy.viewport(1920, 1080); + cy.login('developer'); + cy.visit('/#/route/extended-list'); + cy.typeSearchbar('{enter}'); + }); + + after(() => { + cy.visit('/#/route/extended-list'); + cy.typeSearchbar('{enter}'); + cy.get( + 'tbody > tr:last-child > :nth-child(1) > .q-checkbox > .q-checkbox__inner', + ).click(); + + cy.get('[title="Remove"]').click(); + cy.dataCy('VnConfirm_confirm').click(); + }); + + it('Should list routes', () => { + cy.get('.q-table') + .children() + .should('be.visible') + .should('have.length.greaterThan', 0); + }); + + it('Should create new route', () => { + cy.addBtnClick(); + + const data = { + Worker: { val: 'logistic', type: 'select' }, + Agency: { val: 'Super-Man delivery', type: 'select' }, + Vehicle: { val: '3333-IMK', type: 'select' }, + Date: { val: '02-01-2024', type: 'date' }, + From: { val: '01-01-2024', type: 'date' }, + To: { val: '10-01-2024', type: 'date' }, + 'Km start': { val: 1000 }, + 'Km end': { val: 1200 }, + Description: { val: 'Test route' }, + }; + + cy.fillInForm(data); + + cy.dataCy('FormModelPopup_save').click(); + cy.checkNotification('Data created'); + cy.url().should('include', '/summary'); + }); + + it('Should reset changed values when click reset button', () => { + cy.get(worker).should('be.visible').click(); + cy.dataCy('null_select').clear().type('salesperson'); + cy.get('.q-item').contains('salesperson').click(); + + cy.get(agency).should('be.visible').click(); + cy.dataCy('null_select').clear().type('inhouse pickup'); + cy.get('.q-item').contains('inhouse pickup').click(); + + cy.get(vehicle).should('be.visible').click(); + cy.dataCy('null_select').clear().type('1111-IMK'); + cy.get('.q-item').contains('1111-IMK').click(); + + cy.get(date).should('be.visible').click(); + cy.dataCy('null_inputDate').clear().type('01-01-2001{enter}'); + + cy.get(description).should('be.visible').click(); + cy.dataCy('null_input').clear().type('DescriptionUpdated{enter}'); + + cy.get(served).should('be.visible').click().click(); + + cy.get('[title="Reset"]').click(); + + cy.validateContent(worker, 'logistic'); + cy.validateContent(agency, 'Super-Man delivery'); + cy.validateContent(vehicle, '3333-IMK'); + cy.validateContent(date, '01/02/2024'); + cy.validateContent(description, 'Test route'); + cy.validateContent(served, 'close'); + }); + + it('Should clone selected route', () => { + cy.get( + 'tbody > tr:last-child > :nth-child(1) > .q-checkbox > .q-checkbox__inner', + ).click(); + cy.get( + '#st-actions > .q-btn-group > :nth-child(1) > .q-btn__content > .q-icon', + ).click(); + cy.dataCy('route.Starting date_inputDate').type('10-05-2001{enter}'); + cy.get('.q-card__actions > .q-btn--standard > .q-btn__content').click(); + cy.validateContent('tr:last-child > [data-col-field="dated"]', '05/10/2001'); + }); + + it('Should download selected route', () => { + const downloadsFolder = Cypress.config('downloadsFolder'); + cy.get( + 'tbody > tr:last-child > :nth-child(1) > .q-checkbox > .q-checkbox__inner', + ).click(); + cy.get( + '#st-actions > .q-btn-group > :nth-child(2) > .q-btn__content > .q-icon', + ).click(); + cy.wait(5000); //necesario para dar tiempo a que descargue el documento + + const fileName = 'download.zip'; + cy.readFile(`${downloadsFolder}/${fileName}`).should('exist'); + + cy.task('deleteFile', `${downloadsFolder}/${fileName}`).then((deleted) => { + expect(deleted).to.be.true; + }); + }); + + it('Should mark as served the selected route', () => { + cy.get( + 'tbody > tr:last-child > :nth-child(1) > .q-checkbox > .q-checkbox__inner', + ).click(); + cy.get( + '#st-actions > .q-btn-group > :nth-child(3) > .q-btn__content > .q-icon', + ).click(); + + cy.typeSearchbar('{enter}'); + cy.validateContent('tr:last-child > [data-col-field="isOk"]', 'check'); + }); + + it('Should delete the selected route', () => { + cy.get( + 'tbody > tr:last-child > :nth-child(1) > .q-checkbox > .q-checkbox__inner', + ).click(); + + cy.get('[title="Remove"]').click(); + cy.dataCy('VnConfirm_confirm').click(); + + cy.checkNotification('Data saved'); + }); + + it('Should save changes in route', () => { + cy.get(worker).should('be.visible').click(); + cy.dataCy('null_select').clear().type('salesperson'); + cy.get('.q-item').contains('salesperson').click(); + + cy.get(agency).should('be.visible').click(); + cy.dataCy('null_select').clear().type('inhouse pickup'); + cy.get('.q-item').contains('inhouse pickup').click(); + + cy.get(vehicle).should('be.visible').click(); + cy.dataCy('null_select').clear().type('1111-IMK'); + cy.get('.q-item').contains('1111-IMK').click(); + + cy.get(date).should('be.visible').click(); + cy.dataCy('null_inputDate').clear().type('01-01-2001{enter}'); + + cy.get(description).should('be.visible').click(); + cy.dataCy('null_input').clear().type('DescriptionUpdated{enter}'); + + cy.get(served).should('be.visible').click().click(); + + cy.dataCy('crudModelDefaultSaveBtn').should('not.be.disabled').click(); + cy.checkNotification('Data saved'); + + cy.typeSearchbar('{enter}'); + + cy.validateContent(worker, 'salesperson'); + cy.validateContent(agency, 'inhouse pickup'); + cy.validateContent(vehicle, '1111-IMK'); + cy.validateContent(date, '01/01/2001'); + cy.validateContent(description, 'DescriptionUpdated'); + cy.validateContent(served, 'check'); + }); + + it('Should add ticket to route', () => { + cy.dataCy('tableAction-0').last().click(); + cy.get( + '.q-card > :nth-child(2) > .q-table__container > .q-table__middle > .q-table > tbody > :nth-child(1) > .q-table--col-auto-width > .q-checkbox > .q-checkbox__inner > .q-checkbox__bg > .q-checkbox__svg', + ).click(); + cy.get('.q-card__actions > .q-btn--standard > .q-btn__content').click(); + cy.get('.q-notification__message').should('have.text', 'Data saved'); + }); + + it('Should open summary pop-up when click summuary icon', () => { + cy.dataCy('tableAction-1').last().click(); + cy.get('.summaryHeader > :nth-child(2').should('contain', '- DescriptionUpdated'); + }); + + it('Should redirect to the summary from the route summary pop-up', () => { + cy.dataCy('tableAction-1').last().click(); + cy.get('.header > .q-icon').should('be.visible').click(); + cy.url().should('include', '/summary'); + }); + + it('Should redirect to the summary when click go to summary icon', () => { + cy.dataCy('tableAction-2').last().click(); + cy.url().should('include', '/summary'); + }); +}); From 6a3d13144ca4f475d1a45f48a7b8ec394b4640b3 Mon Sep 17 00:00:00 2001 From: jtubau <jtubau@verdnatura.es> Date: Wed, 19 Feb 2025 14:38:13 +0100 Subject: [PATCH 2/3] refactor: refs #8618 simplify selectors and improve test readability in routeExtendedList.spec.js --- .../route/routeExtendedList.spec.js | 197 +++++++++--------- 1 file changed, 102 insertions(+), 95 deletions(-) diff --git a/test/cypress/integration/route/routeExtendedList.spec.js b/test/cypress/integration/route/routeExtendedList.spec.js index 9e2c23bb4..8470fecff 100644 --- a/test/cypress/integration/route/routeExtendedList.spec.js +++ b/test/cypress/integration/route/routeExtendedList.spec.js @@ -1,27 +1,86 @@ describe('Route extended list', () => { - const worker = 'tr:last-child > [data-col-field="workerFk"]'; - const agency = 'tr:last-child > [data-col-field="agencyModeFk"]'; - const vehicle = 'tr:last-child > [data-col-field="vehicleFk"]'; - const date = 'tr:last-child > [data-col-field="dated"]'; - const description = 'tr:last-child > [data-col-field="description"]'; - const served = 'tr:last-child > [data-col-field="isOk"]'; + const getSelector = (colField) => `tr:last-child > [data-col-field="${colField}"]`; + + const selectors = { + worker: getSelector('workerFk'), + agency: getSelector('agencyModeFk'), + vehicle: getSelector('vehicleFk'), + date: getSelector('dated'), + description: getSelector('description'), + served: getSelector('isOk'), + lastRowSelectCheckBox: 'tbody > tr:last-child > :nth-child(1) .q-checkbox__inner', + removeBtn: '[title="Remove"]', + resetBtn: '[title="Reset"]', + confirmBtn: 'VnConfirm_confirm', + saveBtn: 'crudModelDefaultSaveBtn', + saveFormBtn: 'FormModelPopup_save', + cloneBtn: '#st-actions > .q-btn-group > :nth-child(1)', + downloadBtn: '#st-actions > .q-btn-group > :nth-child(2)', + markServedBtn: '#st-actions > .q-btn-group > :nth-child(3)', + searchbar: 'searchbar', + }; + + const checkboxState = { + check: 'check', + uncheck: 'close', + }; + const url = '/#/route/extended-list'; + const dataCreated = 'Data created'; + const dataSaved = 'Data saved'; + + const originalFields = [ + { selector: selectors.worker, type: 'select', value: 'logistic' }, + { selector: selectors.agency, type: 'select', value: 'Super-Man delivery' }, + { selector: selectors.vehicle, type: 'select', value: '3333-IMK' }, + { selector: selectors.date, type: 'date', value: '01/02/2024' }, + { selector: selectors.description, type: 'input', value: 'Test route' }, + { selector: selectors.served, type: 'checkbox', value: checkboxState.uncheck }, + ]; + + const updateFields = [ + { selector: selectors.worker, type: 'select', value: 'salesperson' }, + { selector: selectors.agency, type: 'select', value: 'inhouse pickup' }, + { selector: selectors.vehicle, type: 'select', value: '1111-IMK' }, + { selector: selectors.date, type: 'date', value: '01/01/2001' }, + { selector: selectors.description, type: 'input', value: 'Description updated' }, + { selector: selectors.served, type: 'checkbox', value: checkboxState.check }, + ]; + + function fillField(selector, type, value) { + switch (type) { + case 'select': + cy.get(selector).should('be.visible').click(); + cy.dataCy('null_select').clear().type(value); + cy.get('.q-item').contains(value).click(); + break; + case 'input': + cy.get(selector).should('be.visible').click(); + cy.dataCy('null_input').clear().type(`${value}{enter}`); + break; + case 'date': + cy.get(selector).should('be.visible').click(); + cy.dataCy('null_inputDate').clear().type(`${value}{enter}`); + break; + case 'checkbox': + cy.get(selector).should('be.visible').click().click(); + break; + } + } beforeEach(() => { cy.viewport(1920, 1080); cy.login('developer'); - cy.visit('/#/route/extended-list'); + cy.visit(url); cy.typeSearchbar('{enter}'); }); after(() => { - cy.visit('/#/route/extended-list'); + cy.visit(url); cy.typeSearchbar('{enter}'); - cy.get( - 'tbody > tr:last-child > :nth-child(1) > .q-checkbox > .q-checkbox__inner', - ).click(); + cy.get(selectors.lastRowSelectCheckBox).click(); - cy.get('[title="Remove"]').click(); - cy.dataCy('VnConfirm_confirm').click(); + cy.get(selectors.removeBtn).click(); + cy.dataCy(selectors.confirmBtn).click(); }); it('Should list routes', () => { @@ -48,62 +107,35 @@ describe('Route extended list', () => { cy.fillInForm(data); - cy.dataCy('FormModelPopup_save').click(); - cy.checkNotification('Data created'); + cy.dataCy(selectors.saveFormBtn).click(); + cy.checkNotification(dataCreated); cy.url().should('include', '/summary'); }); it('Should reset changed values when click reset button', () => { - cy.get(worker).should('be.visible').click(); - cy.dataCy('null_select').clear().type('salesperson'); - cy.get('.q-item').contains('salesperson').click(); - - cy.get(agency).should('be.visible').click(); - cy.dataCy('null_select').clear().type('inhouse pickup'); - cy.get('.q-item').contains('inhouse pickup').click(); - - cy.get(vehicle).should('be.visible').click(); - cy.dataCy('null_select').clear().type('1111-IMK'); - cy.get('.q-item').contains('1111-IMK').click(); - - cy.get(date).should('be.visible').click(); - cy.dataCy('null_inputDate').clear().type('01-01-2001{enter}'); - - cy.get(description).should('be.visible').click(); - cy.dataCy('null_input').clear().type('DescriptionUpdated{enter}'); - - cy.get(served).should('be.visible').click().click(); + updateFields.forEach(({ selector, type, value }) => { + fillField(selector, type, value); + }); cy.get('[title="Reset"]').click(); - cy.validateContent(worker, 'logistic'); - cy.validateContent(agency, 'Super-Man delivery'); - cy.validateContent(vehicle, '3333-IMK'); - cy.validateContent(date, '01/02/2024'); - cy.validateContent(description, 'Test route'); - cy.validateContent(served, 'close'); + originalFields.forEach(({ selector, value }) => { + cy.validateContent(selector, value); + }); }); it('Should clone selected route', () => { - cy.get( - 'tbody > tr:last-child > :nth-child(1) > .q-checkbox > .q-checkbox__inner', - ).click(); - cy.get( - '#st-actions > .q-btn-group > :nth-child(1) > .q-btn__content > .q-icon', - ).click(); + cy.get(selectors.lastRowSelectCheckBox).click(); + cy.get(selectors.cloneBtn).click(); cy.dataCy('route.Starting date_inputDate').type('10-05-2001{enter}'); cy.get('.q-card__actions > .q-btn--standard > .q-btn__content').click(); - cy.validateContent('tr:last-child > [data-col-field="dated"]', '05/10/2001'); + cy.validateContent(selectors.date, '05/10/2001'); }); it('Should download selected route', () => { const downloadsFolder = Cypress.config('downloadsFolder'); - cy.get( - 'tbody > tr:last-child > :nth-child(1) > .q-checkbox > .q-checkbox__inner', - ).click(); - cy.get( - '#st-actions > .q-btn-group > :nth-child(2) > .q-btn__content > .q-icon', - ).click(); + cy.get(selectors.lastRowSelectCheckBox).click(); + cy.get(selectors.downloadBtn).click(); cy.wait(5000); //necesario para dar tiempo a que descargue el documento const fileName = 'download.zip'; @@ -115,60 +147,35 @@ describe('Route extended list', () => { }); it('Should mark as served the selected route', () => { - cy.get( - 'tbody > tr:last-child > :nth-child(1) > .q-checkbox > .q-checkbox__inner', - ).click(); - cy.get( - '#st-actions > .q-btn-group > :nth-child(3) > .q-btn__content > .q-icon', - ).click(); + cy.get(selectors.lastRowSelectCheckBox).click(); + cy.get(selectors.markServedBtn).click(); cy.typeSearchbar('{enter}'); - cy.validateContent('tr:last-child > [data-col-field="isOk"]', 'check'); + cy.validateContent(selectors.served, checkboxState.check); }); it('Should delete the selected route', () => { - cy.get( - 'tbody > tr:last-child > :nth-child(1) > .q-checkbox > .q-checkbox__inner', - ).click(); + cy.get(selectors.lastRowSelectCheckBox).click(); - cy.get('[title="Remove"]').click(); - cy.dataCy('VnConfirm_confirm').click(); + cy.get(selectors.removeBtn).click(); + cy.dataCy(selectors.confirmBtn).click(); - cy.checkNotification('Data saved'); + cy.checkNotification(dataSaved); }); it('Should save changes in route', () => { - cy.get(worker).should('be.visible').click(); - cy.dataCy('null_select').clear().type('salesperson'); - cy.get('.q-item').contains('salesperson').click(); + updateFields.forEach(({ selector, type, value }) => { + fillField(selector, type, value); + }); - cy.get(agency).should('be.visible').click(); - cy.dataCy('null_select').clear().type('inhouse pickup'); - cy.get('.q-item').contains('inhouse pickup').click(); - - cy.get(vehicle).should('be.visible').click(); - cy.dataCy('null_select').clear().type('1111-IMK'); - cy.get('.q-item').contains('1111-IMK').click(); - - cy.get(date).should('be.visible').click(); - cy.dataCy('null_inputDate').clear().type('01-01-2001{enter}'); - - cy.get(description).should('be.visible').click(); - cy.dataCy('null_input').clear().type('DescriptionUpdated{enter}'); - - cy.get(served).should('be.visible').click().click(); - - cy.dataCy('crudModelDefaultSaveBtn').should('not.be.disabled').click(); - cy.checkNotification('Data saved'); + cy.dataCy(selectors.saveBtn).should('not.be.disabled').click(); + cy.checkNotification(dataSaved); cy.typeSearchbar('{enter}'); - cy.validateContent(worker, 'salesperson'); - cy.validateContent(agency, 'inhouse pickup'); - cy.validateContent(vehicle, '1111-IMK'); - cy.validateContent(date, '01/01/2001'); - cy.validateContent(description, 'DescriptionUpdated'); - cy.validateContent(served, 'check'); + updateFields.forEach(({ selector, value }) => { + cy.validateContent(selector, value); + }); }); it('Should add ticket to route', () => { @@ -177,12 +184,12 @@ describe('Route extended list', () => { '.q-card > :nth-child(2) > .q-table__container > .q-table__middle > .q-table > tbody > :nth-child(1) > .q-table--col-auto-width > .q-checkbox > .q-checkbox__inner > .q-checkbox__bg > .q-checkbox__svg', ).click(); cy.get('.q-card__actions > .q-btn--standard > .q-btn__content').click(); - cy.get('.q-notification__message').should('have.text', 'Data saved'); + cy.checkNotification(dataSaved); }); it('Should open summary pop-up when click summuary icon', () => { cy.dataCy('tableAction-1').last().click(); - cy.get('.summaryHeader > :nth-child(2').should('contain', '- DescriptionUpdated'); + cy.get('.summaryHeader > :nth-child(2').should('contain', updateFields[4].value); }); it('Should redirect to the summary from the route summary pop-up', () => { From 523e97760e82521797d7d67dc53530b8ed14ce64 Mon Sep 17 00:00:00 2001 From: jtubau <jtubau@verdnatura.es> Date: Thu, 20 Feb 2025 07:06:44 +0100 Subject: [PATCH 3/3] test: refs #8618 add selector for first tickets row checkbox in routeExtendedList.spec.js --- test/cypress/integration/route/routeExtendedList.spec.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/cypress/integration/route/routeExtendedList.spec.js b/test/cypress/integration/route/routeExtendedList.spec.js index 8470fecff..34d3d3a29 100644 --- a/test/cypress/integration/route/routeExtendedList.spec.js +++ b/test/cypress/integration/route/routeExtendedList.spec.js @@ -18,6 +18,8 @@ describe('Route extended list', () => { downloadBtn: '#st-actions > .q-btn-group > :nth-child(2)', markServedBtn: '#st-actions > .q-btn-group > :nth-child(3)', searchbar: 'searchbar', + firstTicketsRowSelectCheckBox: + '.q-card > :nth-child(2) > .q-table__container > .q-table__middle > .q-table > tbody > :nth-child(1) > .q-table--col-auto-width > .q-checkbox > .q-checkbox__inner > .q-checkbox__bg > .q-checkbox__svg', }; const checkboxState = { @@ -136,7 +138,7 @@ describe('Route extended list', () => { const downloadsFolder = Cypress.config('downloadsFolder'); cy.get(selectors.lastRowSelectCheckBox).click(); cy.get(selectors.downloadBtn).click(); - cy.wait(5000); //necesario para dar tiempo a que descargue el documento + cy.wait(5000); const fileName = 'download.zip'; cy.readFile(`${downloadsFolder}/${fileName}`).should('exist'); @@ -180,9 +182,7 @@ describe('Route extended list', () => { it('Should add ticket to route', () => { cy.dataCy('tableAction-0').last().click(); - cy.get( - '.q-card > :nth-child(2) > .q-table__container > .q-table__middle > .q-table > tbody > :nth-child(1) > .q-table--col-auto-width > .q-checkbox > .q-checkbox__inner > .q-checkbox__bg > .q-checkbox__svg', - ).click(); + cy.get(selectors.firstTicketsRowSelectCheckBox).click(); cy.get('.q-card__actions > .q-btn--standard > .q-btn__content').click(); cy.checkNotification(dataSaved); });