salix-front/test/cypress/integration/route/routeExtendedList.spec.js

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');
    });
});