From 693b309e79d569a603c99fa9a5c43b24ff3818f2 Mon Sep 17 00:00:00 2001 From: wbuezas Date: Thu, 17 Oct 2024 16:34:23 -0300 Subject: [PATCH] Several changes and more tests --- .../cypress/integration/UserFlows.spec.js | 4 +- .../catalog/CatalogView.commands.js | 22 +++++ .../integration/catalog/CatalogView.spec.js | 8 +- .../catalog/CatalogViewCommands.js | 22 ----- .../checkout/CheckoutStepper.commands.js | 91 ++++++++++++++++++ .../checkout/CheckoutStepper.spec.js | 14 +-- .../checkout/CheckoutStepperCommands.js | 95 ------------------- ...nViewCommands.js => LoginView.commands.js} | 6 +- .../integration/login/LoginView.spec.js | 86 ++++++++++++----- src/test/cypress/support/commands.js | 25 ++++- src/test/cypress/support/e2e.js | 4 +- src/test/cypress/support/index.js | 8 ++ 12 files changed, 221 insertions(+), 164 deletions(-) create mode 100644 src/test/cypress/integration/catalog/CatalogView.commands.js delete mode 100644 src/test/cypress/integration/catalog/CatalogViewCommands.js create mode 100644 src/test/cypress/integration/checkout/CheckoutStepper.commands.js delete mode 100644 src/test/cypress/integration/checkout/CheckoutStepperCommands.js rename src/test/cypress/integration/login/{LoginViewCommands.js => LoginView.commands.js} (91%) diff --git a/src/test/cypress/integration/UserFlows.spec.js b/src/test/cypress/integration/UserFlows.spec.js index e22f0359..ce12d2d5 100644 --- a/src/test/cypress/integration/UserFlows.spec.js +++ b/src/test/cypress/integration/UserFlows.spec.js @@ -3,8 +3,8 @@ describe('User flow: Login, create a new order, add item to basket', () => { // 2- Loguear como empleado cy.login('employee'); // 2- Crear una orden - cy.CreateOrderReceiveFlow(); + cy.createOrderReceiveFlow(); // 3- Filtrar items y agregar item al carrito - cy.AddItemToBasketFlow(); + cy.addItemToBasketFlow(); }); }); diff --git a/src/test/cypress/integration/catalog/CatalogView.commands.js b/src/test/cypress/integration/catalog/CatalogView.commands.js new file mode 100644 index 00000000..3b89444f --- /dev/null +++ b/src/test/cypress/integration/catalog/CatalogView.commands.js @@ -0,0 +1,22 @@ +Cypress.Commands.add('addItemToBasketFlow', () => { + // 1- Seleccionar categoría + cy.dataCy('catalogCategoryButton').should('exist'); + cy.get('[data-testid="catalogCategoryButton"]:first').click(); + // 2- Seleccionar familia + cy.dataCy('catalogFamilySelect').should('exist'); + cy.selectOption('[data-testid="catalogFamilySelect"]', 'Anthurium'); + cy.getValue('[data-testid="catalogFamilySelect"]').should( + 'equal', + 'Anthurium' + ); + cy.dataCy('catalogFamilySelect').should('exist'); + // 3- Seleccionar item + cy.dataCy('catalogCardGridBody').should('exist'); + cy.get('[data-testid="catalogCardGridBody"]:first').click(); + // 4- Añadir item al carrito + cy.dataCy('addItemQuantityButton').should('exist'); + cy.get('[data-testid="addItemQuantityButton"]:first').click(); + cy.dataCy('catalogAddToBasketButton').should('exist'); + cy.dataCy('catalogAddToBasketButton').click(); + cy.dataCy('positiveNotify').should('contain', 'Añadido'); +}); diff --git a/src/test/cypress/integration/catalog/CatalogView.spec.js b/src/test/cypress/integration/catalog/CatalogView.spec.js index c245c522..ed759a7f 100644 --- a/src/test/cypress/integration/catalog/CatalogView.spec.js +++ b/src/test/cypress/integration/catalog/CatalogView.spec.js @@ -3,14 +3,14 @@ describe('CatalogView', () => { // 1- Loguear usuario cy.login('employee'); // 2- Crear una orden - cy.CreateOrderReceiveFlow(); + cy.createOrderReceiveFlow(); }); - it('Adds item to basket', () => cy.AddItemToBasketFlow()); + it('Adds item to basket', () => cy.addItemToBasketFlow()); it('Goes to basket', () => { - cy.get('[data-testid="catalogGoToBasketButton"]').should('exist'); - cy.get('[data-testid="catalogGoToBasketButton"]').click(); + cy.dataCy('catalogGoToBasketButton').should('exist'); + cy.dataCy('catalogGoToBasketButton').click(); cy.url().should('contain', '/#/ecomerce/basket'); }); }); diff --git a/src/test/cypress/integration/catalog/CatalogViewCommands.js b/src/test/cypress/integration/catalog/CatalogViewCommands.js deleted file mode 100644 index b3ff438f..00000000 --- a/src/test/cypress/integration/catalog/CatalogViewCommands.js +++ /dev/null @@ -1,22 +0,0 @@ -Cypress.Commands.add('AddItemToBasketFlow', () => { - // 1- Seleccionar categoría - cy.get('[data-testid="catalogCategoryButton"]').should('exist'); - cy.get('[data-testid="catalogCategoryButton"]:first').click(); - // 2- Seleccionar familia - cy.get('[data-testid="catalogFamilySelect"]').should('exist'); - cy.selectOption('[data-testid="catalogFamilySelect"]', 'Anthurium'); - cy.getValue('[data-testid="catalogFamilySelect"]').should( - 'equal', - 'Anthurium' - ); - cy.get('[data-testid="catalogFamilySelect"]').should('exist'); - // 3- Seleccionar item - cy.get('[data-testid="catalogCardGridBody"]').should('exist'); - cy.get('[data-testid="catalogCardGridBody"]:first').click(); - // 4- Añadir item al carrito - cy.get('[data-testid="addItemQuantityButton"]').should('exist'); - cy.get('[data-testid="addItemQuantityButton"]:first').click(); - cy.get('[data-testid="catalogAddToBasketButton"]').should('exist'); - cy.get('[data-testid="catalogAddToBasketButton"]').click(); - cy.get('[data-testid="positiveNotify"]').should('include.text', 'Añadido'); -}); diff --git a/src/test/cypress/integration/checkout/CheckoutStepper.commands.js b/src/test/cypress/integration/checkout/CheckoutStepper.commands.js new file mode 100644 index 00000000..cb6ea823 --- /dev/null +++ b/src/test/cypress/integration/checkout/CheckoutStepper.commands.js @@ -0,0 +1,91 @@ +const checkoutNextStep = () => { + cy.dataCy('checkoutStepperRightButton').should('be.visible').click(); +}; + +Cypress.Commands.add('createOrderReceive', () => { + cy.dataCy('checkoutStepper').should('exist'); + cy.dataCy('checkoutStepper').should( + 'contain', + '¿Quieres recibir o recoger el pedido?' + ); + cy.dataCy('Recibir en mi tienda', 'aria-label').click(); + + checkoutNextStep(); + cy.dataCy('checkoutStepper').should( + 'contain', + '¿Qué día quieres recibir el pedido?' + ); + checkoutNextStep(); + cy.dataCy('checkoutStepper').should( + 'contain', + '¿Dónde quieres recibir el pedido?' + ); + cy.dataCy('checkoutAddressStep').within(() => { + cy.get('label:first').click(); + }); + checkoutNextStep(); + cy.dataCy('checkoutStepper').should( + 'contain', + '¿Cómo quieres recibir el pedido?' + ); + cy.dataCy('agencyStepSelect').should('exist'); + cy.selectOption('[data-testid="agencyStepSelect"]', 'Other agency'); + checkoutNextStep(); + checkoutNextStep(); + cy.url().should('contain', '/#/ecomerce/catalog'); +}); + +Cypress.Commands.add('createOrderReceiveFlow', () => { + cy.visit('/#/ecomerce/pending'); + cy.dataCy('pendingOrdersNewOrder').should('exist'); + cy.dataCy('pendingOrdersNewOrder').click(); + cy.createOrderReceive(); + cy.dataCy('positiveNotify').should( + 'contain', + '¡Pedido cargado en la cesta!' + ); +}); + +Cypress.Commands.add('createOrderPickup', () => { + cy.dataCy('checkoutStepper').should('exist'); + cy.dataCy('checkoutStepper').should( + 'contain', + '¿Quieres recibir o recoger el pedido?' + ); + cy.dataCy('Recoger en almacén', 'aria-label').click(); + checkoutNextStep(); + cy.dataCy('checkoutStepper').should( + 'contain', + '¿Qué día quieres recibir el pedido?' + ); + checkoutNextStep(); + cy.dataCy('checkoutStepper').should( + 'contain', + '¿A qué dirección quieres asociar el pedido? (Opcional)' + ); + cy.dataCy('checkoutAddressStep').within(() => { + cy.get('label:first').click(); + }); + checkoutNextStep(); + cy.dataCy('checkoutStepper').should( + 'contain', + '¿En qué almacén quieres recoger tu pedido?' + ); + cy.dataCy('pickupStepSelect').should('exist'); + cy.selectOption('[data-testid="pickupStepSelect"]', 'Teleportation device'); + checkoutNextStep(); + checkoutNextStep(); + cy.url().should('contain', '/#/ecomerce/catalog'); +}); + +Cypress.Commands.add('createOrderPickupFlow', (changeLanguage = false) => { + if (changeLanguage) cy.changeLanguageFlow('es'); + cy.visit('/#/ecomerce/pending'); + cy.dataCy('pendingOrdersNewOrder').should('exist'); + cy.dataCy('pendingOrdersNewOrder').click(); + cy.createOrderPickup(); + cy.dataCy('positiveNotify').should( + 'contain', + '¡Pedido cargado en la cesta!' + ); +}); diff --git a/src/test/cypress/integration/checkout/CheckoutStepper.spec.js b/src/test/cypress/integration/checkout/CheckoutStepper.spec.js index 26b54665..2dc73564 100644 --- a/src/test/cypress/integration/checkout/CheckoutStepper.spec.js +++ b/src/test/cypress/integration/checkout/CheckoutStepper.spec.js @@ -3,19 +3,19 @@ describe('CheckoutStepper', () => { cy.login('employee'); }); - it('Creates new order to receive', () => cy.CreateOrderReceiveFlow()); + it('Creates new order to receive', () => cy.createOrderReceiveFlow()); - it('Creates new pickup order', () => cy.CreateOrderPickupFlow()); + it('Creates new pickup order', () => cy.createOrderPickupFlow()); it('Modifies an order', () => { - cy.CreateOrderReceiveFlow(); - cy.get('[data-testid="orderModifyButton"]').click(); - cy.get('[data-testid="warningNotify"]').should( + cy.createOrderReceiveFlow(); + cy.dataCy('orderModifyButton').click(); + cy.dataCy('warningNotify').should( 'include.text', 'Recuerda que si vuelves a configurar el pedido los precios o cantidades de tus artículos podrían cambiar' ); - cy.CreateOrderPickup(false); - cy.get('[data-testid="positiveNotify"]').should( + cy.createOrderPickup(false); + cy.dataCy('positiveNotify').should( 'include.text', 'Pedido actualizado' ); diff --git a/src/test/cypress/integration/checkout/CheckoutStepperCommands.js b/src/test/cypress/integration/checkout/CheckoutStepperCommands.js deleted file mode 100644 index 0441b570..00000000 --- a/src/test/cypress/integration/checkout/CheckoutStepperCommands.js +++ /dev/null @@ -1,95 +0,0 @@ -const checkoutNextStep = () => { - cy.get('[data-testid="checkoutStepperRightButton"]') - .should('be.visible') - .click(); -}; - -Cypress.Commands.add('CreateOrderReceive', () => { - cy.get('[data-testid="checkoutStepper"]').should('exist'); - cy.get('[data-testid="checkoutStepper"]').should( - 'contain', - '¿Quieres recibir o recoger el pedido?' - ); - cy.get('[aria-label="Recibir en mi tienda"]').click(); - - checkoutNextStep(); - cy.get('[data-testid="checkoutStepper"]').should( - 'contain', - '¿Qué día quieres recibir el pedido?' - ); - checkoutNextStep(); - cy.get('[data-testid="checkoutStepper"]').should( - 'contain', - '¿Dónde quieres recibir el pedido?' - ); - cy.get('[data-testid="checkoutAddressStep"]').within(() => { - cy.get('label:first').click(); - }); - checkoutNextStep(); - cy.get('[data-testid="checkoutStepper"]').should( - 'contain', - '¿Cómo quieres recibir el pedido?' - ); - cy.get('[data-testid="agencyStepSelect"]').should('exist'); - cy.selectOption('[data-testid="agencyStepSelect"]', 'Other agency'); - checkoutNextStep(); - checkoutNextStep(); - cy.url().should('contain', '/#/ecomerce/catalog'); -}); - -Cypress.Commands.add('CreateOrderReceiveFlow', (changeLanguage = false) => { - if (changeLanguage) cy.changeLanguageFlow('es'); - cy.visit('/#/ecomerce/pending'); - cy.get('[data-testid="pendingOrdersNewOrder"]').should('exist'); - cy.get('[data-testid="pendingOrdersNewOrder"]').click(); - cy.CreateOrderReceive(); - cy.get('.q-notification__message:first').should( - 'have.text', - '¡Pedido cargado en la cesta!' - ); -}); - -Cypress.Commands.add('CreateOrderPickup', () => { - cy.get('[data-testid="checkoutStepper"]').should('exist'); - cy.get('[data-testid="checkoutStepper"]').should( - 'contain', - '¿Quieres recibir o recoger el pedido?' - ); - cy.get('[aria-label="Recoger en almacén"]').click(); - - checkoutNextStep(); - cy.get('[data-testid="checkoutStepper"]').should( - 'contain', - '¿Qué día quieres recibir el pedido?' - ); - checkoutNextStep(); - cy.get('[data-testid="checkoutStepper"]').should( - 'contain', - '¿A qué dirección quieres asociar el pedido? (Opcional)' - ); - cy.get('[data-testid="checkoutAddressStep"]').within(() => { - cy.get('label:first').click(); - }); - checkoutNextStep(); - cy.get('[data-testid="checkoutStepper"]').should( - 'contain', - '¿En qué almacén quieres recoger tu pedido?' - ); - cy.get('[data-testid="pickupStepSelect"]').should('exist'); - cy.selectOption('[data-testid="pickupStepSelect"]', 'Teleportation device'); - checkoutNextStep(); - checkoutNextStep(); - cy.url().should('contain', '/#/ecomerce/catalog'); -}); - -Cypress.Commands.add('CreateOrderPickupFlow', (changeLanguage = false) => { - if (changeLanguage) cy.changeLanguageFlow('es'); - cy.visit('/#/ecomerce/pending'); - cy.get('[data-testid="pendingOrdersNewOrder"]').should('exist'); - cy.get('[data-testid="pendingOrdersNewOrder"]').click(); - cy.CreateOrderPickup(); - cy.get('.q-notification__message:first').should( - 'have.text', - '¡Pedido cargado en la cesta!' - ); -}); diff --git a/src/test/cypress/integration/login/LoginViewCommands.js b/src/test/cypress/integration/login/LoginView.commands.js similarity index 91% rename from src/test/cypress/integration/login/LoginViewCommands.js rename to src/test/cypress/integration/login/LoginView.commands.js index 90ffcb0f..d8c793cd 100644 --- a/src/test/cypress/integration/login/LoginViewCommands.js +++ b/src/test/cypress/integration/login/LoginView.commands.js @@ -39,9 +39,9 @@ Cypress.Commands.add('logout', user => { Cypress.Commands.add('loginFlow', (user, visitLogin = true) => { if (visitLogin) cy.visit('/#/login'); - cy.get('[data-testid="loginUserInput"]').type(user); + cy.dataCy('loginUserInput').type(user); cy.getValue('[data-testid="loginUserInput"]').should('equal', user); - cy.get('[data-testid="loginPasswordInput"]').type('nightmare'); + cy.dataCy('loginPasswordInput').type('nightmare'); cy.getValue('[data-testid="loginPasswordInput"]').should( 'equal', 'nightmare' @@ -55,7 +55,7 @@ Cypress.Commands.add('changeLanguage', language => { const languagesOrder = ['en', 'es', 'ca', 'fr', 'pt']; const index = languagesOrder.indexOf(language); cy.waitForElement('[data-testid="switchLanguage"]'); - cy.get('[data-testid="switchLanguage"]').click(); + cy.dataCy('switchLanguage').click(); cy.get('.q-menu .q-item').eq(index).click(); // Selecciona y hace clic en el tercer elemento "index" de la lista }); diff --git a/src/test/cypress/integration/login/LoginView.spec.js b/src/test/cypress/integration/login/LoginView.spec.js index aff1c9cf..beca0ba1 100644 --- a/src/test/cypress/integration/login/LoginView.spec.js +++ b/src/test/cypress/integration/login/LoginView.spec.js @@ -1,24 +1,20 @@ describe('Login Tests', () => { + const rememberCheckbox = '[data-testid="rememberCheckbox"]'; + beforeEach(() => { cy.visit('/#/login'); }); it('should toggle password visibility', () => { - cy.get('[data-testid="showPasswordIcon"]').should('exist'); - cy.get('[data-testid="showPasswordIcon"]').click(); - cy.get('[data-testid="showPasswordIcon"]').should( - 'have.text', - 'visibility_off' - ); - cy.get('[data-testid="showPasswordIcon"]').click(); - cy.get('[data-testid="showPasswordIcon"]').should( - 'have.text', - 'visibility' - ); + cy.dataCy('showPasswordIcon').should('exist'); + cy.dataCy('showPasswordIcon').click(); + cy.dataCy('showPasswordIcon').should('have.text', 'visibility_off'); + cy.dataCy('showPasswordIcon').click(); + cy.dataCy('showPasswordIcon').should('have.text', 'visibility'); }); it('should select a language from the dropdown', () => { - cy.get('[data-testid="switchLanguage"]').should('exist'); + cy.dataCy('switchLanguage').should('exist'); cy.changeLanguage('en'); cy.get('button[type="submit"]').should('contain', 'Log in'); cy.changeLanguage('es'); @@ -26,23 +22,17 @@ describe('Login Tests', () => { }); it('should fail to log in using wrong user', () => { - cy.get('[data-testid="loginUserInput"]').type('incorrectUser'); - cy.get('[data-testid="loginPasswordInput"]').type('nightmare'); + cy.dataCy('loginUserInput').type('incorrectUser'); + cy.dataCy('loginPasswordInput').type('nightmare'); cy.get('button[type="submit"]').click(); - cy.get('.q-notification__message:first').should( - 'have.text', - 'login failed' - ); + cy.dataCy('negativeNotify').should('contain', 'login failed'); }); it('should fail to log in using wrong password', () => { - cy.get('[data-testid="loginUserInput"]').type('incorrectUser'); - cy.get('[data-testid="loginPasswordInput"]').type('nightmare'); + cy.dataCy('loginUserInput').type('incorrectUser'); + cy.dataCy('loginPasswordInput').type('nightmare'); cy.get('button[type="submit"]').click(); - cy.get('.q-notification__message:first').should( - 'have.text', - 'login failed' - ); + cy.dataCy('negativeNotify').should('contain', 'login failed'); }); it('should log in', () => { @@ -50,8 +40,52 @@ describe('Login Tests', () => { }); it('should log in as guest', () => { - cy.get('[data-testid="loginAsGuestButton"]').should('exist'); - cy.get('[data-testid="loginAsGuestButton"]').click(); + cy.dataCy('loginAsGuestButton').should('exist'); + cy.dataCy('loginAsGuestButton').click(); cy.url().should('contain', '/#/cms/home'); }); + + it('should save localStorage keepLogin true value if remember checkbox is checked', () => { + cy.dataCy('rememberCheckbox').should('exist'); + cy.dataCy('rememberCheckbox').click(); + cy.getValue(rememberCheckbox).should('equal', 'true'); + cy.loginFlow('employee', false); + cy.window().then(window => { + expect(window.localStorage.getItem('keepLogin')).to.eq('true'); + }); + }); + + it('should save localStorage keepLogin false value if remember checkbox is not checked', () => { + cy.dataCy('rememberCheckbox').should('exist'); + cy.getValue(rememberCheckbox).should('equal', 'false'); + cy.loginFlow('employee', false); + cy.window().then(window => { + expect(window.localStorage.getItem('keepLogin')).to.eq('false'); + }); + }); + + it('saves data in session storage if remember is not checked', () => { + cy.dataCy('rememberCheckbox').should('exist'); + cy.getValue(rememberCheckbox).should('equal', 'false'); + cy.loginFlow('employee', false); + cy.window().then(window => { + expect(window.sessionStorage.getItem('hederaLastUser')).to.eq( + 'employee' + ); + expect(window.localStorage.getItem('hederaLastUser')).to.eq(null); + }); + }); + + it('saves data in local storage if remember is checked', () => { + cy.dataCy('rememberCheckbox').should('exist'); + cy.dataCy('rememberCheckbox').click(); + cy.getValue(rememberCheckbox).should('equal', 'true'); + cy.loginFlow('employee', false); + cy.window().then(window => { + expect(window.localStorage.getItem('hederaLastUser')).to.eq( + 'employee' + ); + expect(window.sessionStorage.getItem('hederaLastUser')).to.eq(null); + }); + }); }); diff --git a/src/test/cypress/support/commands.js b/src/test/cypress/support/commands.js index 768ae89b..ae843b8c 100644 --- a/src/test/cypress/support/commands.js +++ b/src/test/cypress/support/commands.js @@ -24,9 +24,14 @@ // -- This will overwrite an existing command -- // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) -import '../integration/catalog/CatalogViewCommands'; // CatalogView component commands -import '../integration/login/LoginViewCommands'; // LoginView component commands -import '../integration/checkout/CheckoutStepperCommands'; // CheckoutStepper component commands +// Importar dinámicamente todos los archivos con el sufijo .commands.js dentro de la carpeta src/test/cypress/integration +const requireCommands = require.context( + '../integration', + true, + /\.commands\.js$/ +); +// Iterar sobre cada archivo y requerirlo +requireCommands.keys().forEach(requireCommands); // Common commands Cypress.Commands.add('selectOption', (selector, option) => { @@ -49,3 +54,17 @@ Cypress.Commands.add('getValue', selector => { Cypress.Commands.add('waitForElement', (element, timeout = 5000) => { cy.get(element, { timeout }).should('be.visible'); }); + +Cypress.Commands.add('dataCy', (dataTestId, attr = 'data-testid') => { + return cy.get(`[${attr}="${dataTestId}"]`); +}); + +Cypress.Commands.add('getSessionStorage', key => { + cy.window().then(window => window.sessionStorage.getItem(key)); +}); + +Cypress.Commands.add('setSessionStorage', (key, value) => { + cy.window().then(window => { + window.sessionStorage.setItem(key, value); + }); +}); diff --git a/src/test/cypress/support/e2e.js b/src/test/cypress/support/e2e.js index 0e7290a1..5df9c018 100644 --- a/src/test/cypress/support/e2e.js +++ b/src/test/cypress/support/e2e.js @@ -14,7 +14,7 @@ // *********************************************************** // Import commands.js using ES2015 syntax: -import './commands' +import './commands'; // Alternatively you can use CommonJS syntax: -// require('./commands') \ No newline at end of file +// require('./commands') diff --git a/src/test/cypress/support/index.js b/src/test/cypress/support/index.js index 32cc9faa..280313a8 100644 --- a/src/test/cypress/support/index.js +++ b/src/test/cypress/support/index.js @@ -14,3 +14,11 @@ // *********************************************************** import './commands'; + +/* eslint-disable */ +Cypress.on('uncaught:exception', (err, runnable) => { + // returning false here prevents Cypress from + // failing the test + return false; +}); +/* eslint-enable */