/// <reference types="cypress" />
describe('UserPanel', () => {
    beforeEach(() => {
        cy.viewport(1280, 720);
        cy.login('developer');
        cy.visit(`/#dashboard`);
        cy.waitForElement('.q-page', 6000);
    });

    it('should notify when update user warehouse', () => {
        const userWarehouse =
            '.q-menu .q-gutter-xs > :nth-child(3) > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native> .q-field__input';

        // Abro el panel
        cy.openUserPanel();

        // Compruebo la opcion inicial
        cy.get(userWarehouse).should('have.value', 'VNL').click();

        // Actualizo la opción
        getOption(3);

        //Compruebo la notificación
        cy.get('.q-notification').should('be.visible');
        cy.get(userWarehouse).should('have.value', 'VNH');

        //Restauro el valor
        cy.get(userWarehouse).click();
        getOption(2);
    });
    it('should notify when update user company', () => {
        const userCompany =
            '.q-menu .q-gutter-xs > :nth-child(2)  >  .q-field--float > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native> .q-field__input';

        // Abro el panel
        cy.openUserPanel();

        // Compruebo la opcion inicial
        cy.get(userCompany).should('have.value', 'Warehouse One').click();

        //Actualizo la opción
        getOption(2);

        //Compruebo la notificación
        cy.get('.q-notification').should('be.visible');
        cy.get(userCompany).should('have.value', 'Warehouse Two');

        //Restauro el valor
        cy.get(userCompany).click();
        getOption(1);
    });
});

function getOption(index) {
    cy.waitForElement('[role="listbox"]');
    const option = `[role="listbox"] .q-item:nth-child(${index})`;
    cy.get(option).click();
}