e2e order creation flow

package.json

@@ -54,11 +54,11 @@
         "@quasar/extras": "^1.0.0",
         "axios": "^0.21.1",
         "core-js": "^3.6.5",
+        "eslint-plugin-cypress": "^2.13.3",
         "js-yaml": "^3.12.1",
         "mootools": "^1.5.2",
         "pinia": "^2.0.11",
         "promise-polyfill": "^8.2.3",
-        "eslint-plugin-cypress": "^2.13.3",
         "quasar": "^2.6.0",
         "require-yaml": "0.0.1",
         "tinymce": "^6.3.0",

src/pages/Ecomerce/CheckoutView.vue

@@ -30,7 +30,7 @@ const currentStep = ref('method');
 const id = route.params.id;
 const orderForm = ref({
     method: 'AGENCY',
-    date: '',
+    date: formatDate(Date.vnNew(), 'YYYY/MM/DD'),
     address: ''
 });
 
@@ -322,6 +322,7 @@ onMounted(async () => {
             :flat="isMobile"
             contracted
             class="default-radius stepper-container"
+            data-testid="checkoutStepper"
         >
             <QStep
                 v-for="(step, stepIndex) in steps[orderForm.method]"
@@ -374,6 +375,7 @@ onMounted(async () => {
                 <QList
                     v-if="step.name === 'address'"
                     class="vn-w-xs q-gutter-y-sm column"
+                    data-testid="checkoutAddressStep"
                 >
                     <span class="text-h6 step-title">
                         {{
@@ -417,6 +419,7 @@ onMounted(async () => {
                         option-label="description"
                         option-value="id"
                         :options="agencies"
+                        data-testid="agencyStepSelect"
                     />
                 </div>
                 <div
@@ -431,6 +434,7 @@ onMounted(async () => {
                         option-label="description"
                         option-value="id"
                         :options="warehouses"
+                        data-testid="pickupStepSelect"
                     />
                 </div>
                 <!-- Confirm step -->
@@ -457,6 +461,7 @@ onMounted(async () => {
                     icon="arrow_back"
                     dense
                     class="left-navigation-button"
+                    data-testid="checkoutStepperLeftButton"
                 >
                     <QTooltip>
                         {{ t(`${step.backButtonLabel || 'back'}`) }}
@@ -471,6 +476,7 @@ onMounted(async () => {
                     "
                     dense
                     class="right-navigation-button"
+                    data-testid="checkoutStepperRightButton"
                 >
                     <QTooltip>
                         {{ t(`${step.nextButtonLabel || 'next'}`) }}

src/test/cypress/integration/UserFlows.spec.js

@@ -6,7 +6,13 @@ describe('User flow 1', () => {
         cy.changeLanguage('es');
     });
 
-    it('should log in successfully', () => {
+    const checkoutNextStep = () => {
+        cy.get('[data-testid="checkoutStepperRightButton"]')
+            .should('be.visible')
+            .click();
+    };
+
+    it('should success', () => {
         // 1- Loguear como empleado
         cy.loginFlow('employee');
 
@@ -22,10 +28,33 @@ describe('User flow 1', () => {
             '¿Quieres recibir o recoger el pedido?'
         );
         cy.get('[aria-label="Recibir en mi tienda"]').click();
-        cy.get('[data-testid="checkoutStepperRightButton"]').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');
+        cy.get('.q-notification__message:first').should(
+            'have.text',
+            '¡Pedido cargado en la cesta!'
+        );
     });
 });

src/test/cypress/support/commands.js

@@ -79,3 +79,10 @@ Cypress.Commands.add('changeLanguage', language => {
     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
 });
+
+// Fill Inputs
+Cypress.Commands.add('selectOption', (selector, option) => {
+    cy.waitForElement(selector);
+    cy.get(selector).click();
+    cy.get('.q-menu .q-item').contains(option).click();
+});