From 17527cb4e7e29a474077758649536b1f8177c592 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 18 Dec 2024 11:22:04 +0100
Subject: [PATCH] test: refs #8315 fix VnSelect in e2e

---
 src/components/common/VnSelect.vue            |  1 +
 src/components/ui/VnConfirm.vue               |  1 +
 src/pages/Zone/Card/ZoneCreateWarehouse.vue   | 20 ++++----
 .../integration/client/clientList.spec.js     |  4 +-
 .../integration/entry/stockBought.spec.js     |  2 +-
 .../integration/item/ItemFixedPrice.spec.js   |  4 +-
 .../route/roadMap/roadmapList.spec.js         |  2 +-
 .../integration/route/routeList.spec.js       |  2 +-
 .../integration/worker/workerPda.spec.js      |  2 +-
 .../integration/zone/zoneWarehouse.spec.js    | 27 +++++------
 test/cypress/support/commands.js              | 48 +++++++++++++++----
 11 files changed, 72 insertions(+), 41 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index ed21b089b92..758fb92287b 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -343,6 +343,7 @@ function handleKeyDown(event) {
         @virtual-scroll="onScroll"
         @keydown="handleKeyDown"
         :data-cy="$attrs.dataCy ?? $attrs.label + '_select'"
+        :data-url="url"
     >
         <template #append>
             <QIcon
diff --git a/src/components/ui/VnConfirm.vue b/src/components/ui/VnConfirm.vue
index 0b191338303..a02b56bdb4e 100644
--- a/src/components/ui/VnConfirm.vue
+++ b/src/components/ui/VnConfirm.vue
@@ -98,6 +98,7 @@ function cancel() {
                 />
                 <QBtn
                     :label="t('globals.confirm')"
+                    :title="t('globals.confirm')"
                     color="primary"
                     :loading="isLoading"
                     @click="confirm()"
diff --git a/src/pages/Zone/Card/ZoneCreateWarehouse.vue b/src/pages/Zone/Card/ZoneCreateWarehouse.vue
index a46ec2e6c56..88f6a77017c 100644
--- a/src/pages/Zone/Card/ZoneCreateWarehouse.vue
+++ b/src/pages/Zone/Card/ZoneCreateWarehouse.vue
@@ -30,17 +30,15 @@ const warehousesOptions = ref([]);
     >
         <template #form-inputs>
             <VnRow>
-                <div class="col">
-                    <VnSelect
-                        :label="t('list.warehouse')"
-                        v-model="ZoneWarehouseFormData.warehouseFk"
-                        :options="warehousesOptions"
-                        option-value="id"
-                        option-label="name"
-                        hide-selected
-                        :required="true"
-                    />
-                </div>
+                <VnSelect
+                    :label="t('list.warehouse')"
+                    v-model="ZoneWarehouseFormData.warehouseFk"
+                    :options="warehousesOptions"
+                    option-value="id"
+                    option-label="name"
+                    hide-selected
+                    :required="true"
+                />
             </VnRow>
         </template>
     </FormPopup>
diff --git a/test/cypress/integration/client/clientList.spec.js b/test/cypress/integration/client/clientList.spec.js
index 703bb145495..dcded63b0fe 100644
--- a/test/cypress/integration/client/clientList.spec.js
+++ b/test/cypress/integration/client/clientList.spec.js
@@ -16,7 +16,7 @@ describe('Client list', () => {
     });
 
     it('Client list create new client', () => {
-        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.addBtnClick();
         const randomInt = Math.floor(Math.random() * 90) + 10;
 
         const data = {
@@ -27,7 +27,7 @@ describe('Client list', () => {
             Street: { val: `C/ STREET ${randomInt}` },
             Email: { val: `user.test${randomInt}@cypress.com` },
             'Sales person': { val: 'salesPerson', type: 'select' },
-            Location: { val: '46000, Valencia(Province one), España', type: 'select' },
+            Location: { val: '46000', type: 'select' },
             'Business type': { val: 'Otros', type: 'select' },
         };
         cy.fillInForm(data);
diff --git a/test/cypress/integration/entry/stockBought.spec.js b/test/cypress/integration/entry/stockBought.spec.js
index 66e06b79ee3..078ad19cc28 100644
--- a/test/cypress/integration/entry/stockBought.spec.js
+++ b/test/cypress/integration/entry/stockBought.spec.js
@@ -11,7 +11,7 @@ describe('EntryStockBought', () => {
         cy.get('.q-notification__message').should('have.text', 'Data saved');
     });
     it('Should add a new reserved space for buyerBoss', () => {
-        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.addBtnClick();
         cy.get('input[aria-label="Reserve"]').type('1');
         cy.get('input[aria-label="Date"]').eq(1).clear();
         cy.get('input[aria-label="Date"]').eq(1).type('01-01');
diff --git a/test/cypress/integration/item/ItemFixedPrice.spec.js b/test/cypress/integration/item/ItemFixedPrice.spec.js
index 824ecf7a065..92dc27fda7a 100644
--- a/test/cypress/integration/item/ItemFixedPrice.spec.js
+++ b/test/cypress/integration/item/ItemFixedPrice.spec.js
@@ -19,7 +19,7 @@ describe('Handle Items FixedPrice', () => {
         cy.selectOption('.list > :nth-child(2)', 'Alstroemeria');
         cy.get('.q-gutter-x-sm > .q-btn > .q-btn__content > .q-icon').click();
 
-        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.addBtnClick();
         cy.selectOption(`${firstRow} > :nth-child(2)`, '#13');
         cy.get(`${firstRow} > :nth-child(4)`).find('input').type(1);
         cy.get(`${firstRow} > :nth-child(5)`).find('input').type('2');
@@ -29,7 +29,7 @@ describe('Handle Items FixedPrice', () => {
     });
     it('Create and delete ', function () {
         cy.get('.q-gutter-x-sm > .q-btn > .q-btn__content > .q-icon').click();
-        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.addBtnClick();
         cy.selectOption(`${firstRow} > :nth-child(2)`, '#11');
         cy.get(`${firstRow} > :nth-child(4)`).type('1');
         cy.get(`${firstRow} > :nth-child(5)`).type('2');
diff --git a/test/cypress/integration/route/roadMap/roadmapList.spec.js b/test/cypress/integration/route/roadMap/roadmapList.spec.js
index ba602fdf67f..2f5e5672f46 100644
--- a/test/cypress/integration/route/roadMap/roadmapList.spec.js
+++ b/test/cypress/integration/route/roadMap/roadmapList.spec.js
@@ -5,7 +5,7 @@ describe('RoadMap', () => {
         cy.visit(`/#/route/roadmap`);
     });
     it('Route list create roadmap and redirect', () => {
-        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.addBtnClick();
         cy.get('input[name="name"]').eq(1).type('roadMapTestOne{enter}');
         cy.get('.q-notification__message').should('have.text', 'Data created');
         cy.url().should('include', '/summary');
diff --git a/test/cypress/integration/route/routeList.spec.js b/test/cypress/integration/route/routeList.spec.js
index 8020d3ea9f2..4da43ce8e63 100644
--- a/test/cypress/integration/route/routeList.spec.js
+++ b/test/cypress/integration/route/routeList.spec.js
@@ -9,7 +9,7 @@ describe('Route', () => {
     const getRowColumn = (row, column) => `:nth-child(${row}) > :nth-child(${column})`;
 
     it('Route list create route', () => {
-        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.addBtnClick();
         cy.get('input[name="description"]').type('routeTestOne{enter}');
         cy.get('.q-notification__message').should('have.text', 'Data created');
         cy.url().should('include', '/summary');
diff --git a/test/cypress/integration/worker/workerPda.spec.js b/test/cypress/integration/worker/workerPda.spec.js
index dc1ca622420..31ec19eda0e 100644
--- a/test/cypress/integration/worker/workerPda.spec.js
+++ b/test/cypress/integration/worker/workerPda.spec.js
@@ -7,7 +7,7 @@ describe('WorkerPda', () => {
     });
 
     it('assign pda', () => {
-        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.addBtnClick();
         cy.get(select).click();
         cy.get(select).type('{downArrow}{enter}');
         cy.get('.q-notification__message').should('have.text', 'Data created');
diff --git a/test/cypress/integration/zone/zoneWarehouse.spec.js b/test/cypress/integration/zone/zoneWarehouse.spec.js
index 3ffa3f69d70..817e26312d5 100644
--- a/test/cypress/integration/zone/zoneWarehouse.spec.js
+++ b/test/cypress/integration/zone/zoneWarehouse.spec.js
@@ -1,10 +1,10 @@
 describe('ZoneWarehouse', () => {
     const data = {
-        Warehouse: { val: 'Algemesi', type: 'select' },
+        Warehouse: { val: 'Warehouse One', type: 'select' },
     };
-    const deviceProductionField =
-        '.vn-row > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > .q-field__control-container';
-    const dataError = "ER_DUP_ENTRY: Duplicate entry '2-2' for key 'zoneFk'";
+
+    const dataError = 'ER_DUP_ENTRY: Duplicate entry';
+    const saveBtn = '.q-btn--standard > .q-btn__content > .block';
 
     beforeEach(() => {
         cy.viewport(1280, 720);
@@ -13,22 +13,21 @@ describe('ZoneWarehouse', () => {
     });
 
     it('should throw an error if the warehouse chosen is already put in the zone', () => {
-        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
-        cy.get(deviceProductionField).click();
-        cy.get(deviceProductionField).type('{upArrow}{enter}');
-        cy.get('.q-notification__message').should('have.text', dataError);
+        cy.addBtnClick();
+        cy.selectOption('[data-cy="Warehouse_select"]', 'Warehouse Two');
+        cy.get(saveBtn).click();
+        cy.checkNotification(dataError);
     });
 
-    it('should create a warehouse', () => {
-        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
-        cy.get(deviceProductionField).click();
+    it('should create & remove a warehouse', () => {
+        cy.addBtnClick();
         cy.fillInForm(data);
+        cy.get(saveBtn).click();
         cy.get('.q-mt-lg > .q-btn--standard').click();
-    });
 
-    it('should delete a warehouse', () => {
         cy.get('tbody > :nth-child(2) > :nth-child(2) > .q-icon').click();
-        cy.get('.q-card__actions > .q-btn--flat > .q-btn__content').click();
+        cy.get('[title="Confirm"]').click();
+
         cy.reload();
     });
 });
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 2b13a714445..df2c00e03dd 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -58,8 +58,9 @@ Cypress.Commands.add('domContentLoad', (element, timeout = 5000) => {
     cy.waitUntil(() => cy.document().then((doc) => doc.readyState === 'complete'));
 });
 Cypress.Commands.add('waitForElement', (element, timeout = 5000) => {
-    cy.waitUntil(() => cy.get(element).then(($el) => $el.is(':visible')));
+    cy.get(element, { timeout }).should('be.visible').and('not.be.disabled');
 });
+
 Cypress.Commands.add('getValue', (selector) => {
     cy.get(selector).then(($el) => {
         if ($el.find('.q-checkbox__inner').length > 0) {
@@ -86,15 +87,40 @@ Cypress.Commands.add('getValue', (selector) => {
 });
 
 // Fill Inputs
-Cypress.Commands.add('selectOption', (selector, option, timeout) => {
-    cy.waitForElement(selector);
+Cypress.Commands.add('selectOption', (selector, option, timeout = 5000) => {
+    cy.waitForElement(selector, timeout);
     cy.get(selector).click();
-    cy.wait(timeout || 1000);
-    cy.get('.q-menu .q-item').contains(option).click();
+    cy.get(selector).invoke('data', 'url').as('dataUrl');
+    cy.get(selector)
+        .clear()
+        .type(option)
+        .then(() => {
+            cy.get('.q-menu', { timeout })
+                .should('be.visible') // Asegurarse de que el menú está visible
+                .and('exist') // Verificar que el menú existe
+                .then(() => {
+                    cy.get('@dataUrl').then((url) => {
+                        if (url) {
+                            cy.log('url: ', url);
+                            // Esperar a que el menú no esté visible (desaparezca)
+                            cy.get('.q-menu').should('not.be.visible');
+                            // Ahora esperar a que el menú vuelva a aparecer
+                            cy.get('.q-menu').should('be.visible').and('exist');
+                        }
+                    });
+                });
+        });
+
+    // Finalmente, seleccionar la opción deseada
+    cy.get('.q-menu:visible') // Asegurarse de que estamos dentro del menú visible
+        .find('.q-item') // Encontrar los elementos de las opciones
+        .contains(option) // Verificar que existe una opción que contenga el texto deseado
+        .click(); // Hacer clic en la opción
 });
+
 Cypress.Commands.add('countSelectOptions', (selector, option) => {
     cy.waitForElement(selector);
-    cy.get(selector).click();
+    cy.get(selector).click({ force: true });
     cy.get('.q-menu .q-item').should('have.length', option);
 });
 
@@ -110,8 +136,7 @@ Cypress.Commands.add('fillInForm', (obj, form = '.q-form > .q-card') => {
                 const { type, val } = field;
                 switch (type) {
                     case 'select':
-                        cy.get(el).click();
-                        cy.get('.q-menu .q-item').contains(val).click();
+                        cy.selectOption(el, val);
                         break;
                     case 'date':
                         cy.get(el).type(val.split('-').join(''));
@@ -347,3 +372,10 @@ Cypress.Commands.add('searchByLabel', (label, value) => {
 Cypress.Commands.add('dataCy', (tag, attr = 'data-cy') => {
     return cy.get(`[${attr}="${tag}"]`);
 });
+
+Cypress.Commands.add('addBtnClick', () => {
+    cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon')
+        .should('exist')
+        .and('be.visible')
+        .click();
+});