From 2d9225f05fb240e61f4671bdbb5111112d034f57 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 10 Oct 2024 16:34:39 -0300
Subject: [PATCH] New tests changes

---
 src/layouts/MainLayout.vue                    |  7 ++-
 src/pages/Ecomerce/PendingOrders.vue          |  8 ++-
 .../cypress/integration/UserFlows.spec.js     | 31 ++++++++++
 .../{login.spec.js => LoginView.spec.js}      | 12 ++--
 src/test/cypress/support/commands.js          | 58 ++++++++++++++++++-
 5 files changed, 106 insertions(+), 10 deletions(-)
 create mode 100644 src/test/cypress/integration/UserFlows.spec.js
 rename src/test/cypress/integration/login/{login.spec.js => LoginView.spec.js} (80%)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index ef2f762e..d3262f91 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -76,7 +76,12 @@ const logoutSupplantedUser = async () => {
                 </QBtn>
             </QToolbar>
         </QHeader>
-        <QDrawer v-model="leftDrawerOpen" :width="250" show-if-above>
+        <QDrawer
+            v-model="leftDrawerOpen"
+            :width="250"
+            show-if-above
+            data-testid="layoutMenuDrawer"
+        >
             <QToolbar class="logo">
                 <img src="statics/logo-dark.svg" />
             </QToolbar>
diff --git a/src/pages/Ecomerce/PendingOrders.vue b/src/pages/Ecomerce/PendingOrders.vue
index 9b5966df..f30b38a5 100644
--- a/src/pages/Ecomerce/PendingOrders.vue
+++ b/src/pages/Ecomerce/PendingOrders.vue
@@ -71,6 +71,7 @@ onMounted(async () => {
 <template>
     <Teleport v-if="isHeaderMounted" to="#actions">
         <QBtn
+            data-testid="pendingOrdersNewOrder"
             :to="{ name: 'checkout' }"
             icon="add_shopping_cart"
             :label="t('newOrder')"
@@ -83,11 +84,16 @@ onMounted(async () => {
         </QBtn>
     </Teleport>
     <QPage class="vn-w-sm">
-        <VnList :rows="orders" :loading="loading">
+        <VnList
+            :rows="orders"
+            :loading="loading"
+            data-testid="pendingOrdersList"
+        >
             <CardList
                 v-for="(order, index) in orders"
                 :key="index"
                 :to="{ name: 'basket', params: { id: order.id } }"
+                data-testid="pendingOrderCard"
             >
                 <template #content>
                     <QItemLabel class="text-bold q-mb-sm">
diff --git a/src/test/cypress/integration/UserFlows.spec.js b/src/test/cypress/integration/UserFlows.spec.js
new file mode 100644
index 00000000..bca27c3c
--- /dev/null
+++ b/src/test/cypress/integration/UserFlows.spec.js
@@ -0,0 +1,31 @@
+describe('User flow 1', () => {
+    // 1- Loguear como empleado
+    // 2- Ir a la sección de pedidos pendientes
+    // 3- Crear un pedido
+    beforeEach(() => {
+        cy.changeLanguage('es');
+    });
+
+    it('should log in successfully', () => {
+        // 1- Loguear como empleado
+        cy.loginFlow('employee');
+
+        // 2- Ir a la sección de pedidos pendientes
+        cy.visit('/#/ecomerce/pending');
+        cy.get('[data-testid="pendingOrdersNewOrder"]').should('exist');
+        cy.get('[data-testid="pendingOrdersNewOrder"]').click();
+        // 3- Crear un pedido
+        cy.url().should('contain', '/#/ecomerce/checkout');
+        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();
+        cy.get('[data-testid="checkoutStepperRightButton"]').click();
+        cy.get('[data-testid="checkoutStepper"]').should(
+            'contain',
+            '¿Qué día quieres recibir el pedido?'
+        );
+    });
+});
diff --git a/src/test/cypress/integration/login/login.spec.js b/src/test/cypress/integration/login/LoginView.spec.js
similarity index 80%
rename from src/test/cypress/integration/login/login.spec.js
rename to src/test/cypress/integration/login/LoginView.spec.js
index 4dd3b3b0..aff1c9cf 100644
--- a/src/test/cypress/integration/login/login.spec.js
+++ b/src/test/cypress/integration/login/LoginView.spec.js
@@ -19,9 +19,10 @@ describe('Login Tests', () => {
 
     it('should select a language from the dropdown', () => {
         cy.get('[data-testid="switchLanguage"]').should('exist');
-        cy.get('[data-testid="switchLanguage"]').click();
-        cy.get('.q-item').contains('English').click();
-        cy.get('[data-testid="switchLanguage"]').should('contain', 'en');
+        cy.changeLanguage('en');
+        cy.get('button[type="submit"]').should('contain', 'Log in');
+        cy.changeLanguage('es');
+        cy.get('button[type="submit"]').should('contain', 'Iniciar sesión');
     });
 
     it('should fail to log in using wrong user', () => {
@@ -45,10 +46,7 @@ describe('Login Tests', () => {
     });
 
     it('should log in', () => {
-        cy.get('[data-testid="loginUserInput"]').type('employee');
-        cy.get('[data-testid="loginPasswordInput"]').type('nightmare');
-        cy.get('button[type="submit"]').click();
-        cy.url().should('contain', '/#/cms/home');
+        cy.loginFlow('employee');
     });
 
     it('should log in as guest', () => {
diff --git a/src/test/cypress/support/commands.js b/src/test/cypress/support/commands.js
index 66ea16ef..00e34c42 100644
--- a/src/test/cypress/support/commands.js
+++ b/src/test/cypress/support/commands.js
@@ -22,4 +22,60 @@
 //
 //
 // -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+Cypress.Commands.add('login', user => {
+    cy.request({
+        method: 'POST',
+        url: '/api/Accounts/login',
+        body: {
+            user,
+            password: 'nightmare'
+        }
+    }).then(response => {
+        window.localStorage.setItem('token', response.body.token);
+        cy.request({
+            method: 'GET',
+            url: '/api/VnUsers/ShareToken',
+            headers: {
+                Authorization: window.localStorage.getItem('token')
+            }
+        }).then(({ body }) => {
+            window.localStorage.setItem(
+                'tokenMultimedia',
+                body.multimediaToken.id
+            );
+        });
+    });
+});
+
+Cypress.Commands.add('loginFlow', user => {
+    cy.visit('/#/login');
+    cy.get('[data-testid="loginUserInput"]').type(user);
+    cy.get('[data-testid="loginPasswordInput"]').type('nightmare');
+    cy.get('button[type="submit"]').click();
+    cy.url().should('contain', '/#/cms/home');
+});
+
+Cypress.Commands.add('logout', user => {
+    cy.request({
+        method: 'POST',
+        url: 'Accounts/logout'
+    }).then(response => {
+        localStorage.clear();
+        sessionStorage.clear();
+    });
+});
+
+Cypress.Commands.add('waitForElement', (element, timeout = 5000) => {
+    cy.get(element, { timeout }).should('be.visible');
+});
+
+Cypress.Commands.add('changeLanguage', language => {
+    const languagesOrder = ['en', 'es', 'ca', 'fr', 'pt'];
+    const index = languagesOrder.indexOf(language);
+    cy.visit('/#/login');
+    cy.waitForElement('[data-testid="switchLanguage"]');
+    cy.get('[data-testid="switchLanguage"]').click();
+    cy.get('.q-menu .q-item').eq(index).click(); // Selecciona y hace clic en el tercer elemento "index" de la lista
+});