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,

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

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()"

test/cypress/integration/route/routeExtendedList.spec.js

@@ -0,0 +1,205 @@
+describe('Route extended list', () => {
+    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',
+        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 = {
+        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(url);
+        cy.typeSearchbar('{enter}');
+    });
+
+    after(() => {
+        cy.visit(url);
+        cy.typeSearchbar('{enter}');
+        cy.get(selectors.lastRowSelectCheckBox).click();
+
+        cy.get(selectors.removeBtn).click();
+        cy.dataCy(selectors.confirmBtn).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(selectors.saveFormBtn).click();
+        cy.checkNotification(dataCreated);
+        cy.url().should('include', '/summary');
+    });
+
+    it('Should reset changed values when click reset button', () => {
+        updateFields.forEach(({ selector, type, value }) => {
+            fillField(selector, type, value);
+        });
+
+        cy.get('[title="Reset"]').click();
+
+        originalFields.forEach(({ selector, value }) => {
+            cy.validateContent(selector, value);
+        });
+    });
+
+    it('Should clone selected route', () => {
+        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(selectors.date, '05/10/2001');
+    });
+
+    it('Should download selected route', () => {
+        const downloadsFolder = Cypress.config('downloadsFolder');
+        cy.get(selectors.lastRowSelectCheckBox).click();
+        cy.get(selectors.downloadBtn).click();
+        cy.wait(5000);
+
+        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(selectors.lastRowSelectCheckBox).click();
+        cy.get(selectors.markServedBtn).click();
+
+        cy.typeSearchbar('{enter}');
+        cy.validateContent(selectors.served, checkboxState.check);
+    });
+
+    it('Should delete the selected route', () => {
+        cy.get(selectors.lastRowSelectCheckBox).click();
+
+        cy.get(selectors.removeBtn).click();
+        cy.dataCy(selectors.confirmBtn).click();
+
+        cy.checkNotification(dataSaved);
+    });
+
+    it('Should save changes in route', () => {
+        updateFields.forEach(({ selector, type, value }) => {
+            fillField(selector, type, value);
+        });
+
+        cy.dataCy(selectors.saveBtn).should('not.be.disabled').click();
+        cy.checkNotification(dataSaved);
+
+        cy.typeSearchbar('{enter}');
+
+        updateFields.forEach(({ selector, value }) => {
+            cy.validateContent(selector, value);
+        });
+    });
+
+    it('Should add ticket to route', () => {
+        cy.dataCy('tableAction-0').last().click();
+        cy.get(selectors.firstTicketsRowSelectCheckBox).click();
+        cy.get('.q-card__actions > .q-btn--standard > .q-btn__content').click();
+        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', updateFields[4].value);
+    });
+
+    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');
+    });
+});