From 169e4863b2501d9d2af99c4d84354c1176769557 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 23 Aug 2023 15:09:03 +0200
Subject: [PATCH] refs #5673 fix: front, e2e, fix: VnSelectFilter

---
 src/components/CrudModel.vue                  |   7 +-
 src/components/common/VnSelectFilter.vue      |   5 +-
 src/components/ui/VnPaginate.vue              |   2 +-
 src/pages/Claim/Card/ClaimDevelopment.vue     | 123 ++++++++---------
 .../integration/claimDevelopment.spec.js      |  72 +++++-----
 test/cypress/support/commands.js              | 128 ++++++++++--------
 6 files changed, 172 insertions(+), 165 deletions(-)

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index 280282ffd..13e8ca3e3 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -261,10 +261,6 @@ function isEmpty(obj) {
 }
 </script>
 <template>
-    <QBanner v-if="hasChanges" class="text-white bg-warning">
-        <QIcon name="warning" size="md" class="q-mr-md" />
-        <span>{{ t('globals.changesToSave') }}</span>
-    </QBanner>
     <VnPaginate
         @submit="onSubmit"
         @reset="reset"
@@ -286,12 +282,13 @@ function isEmpty(obj) {
     </VnPaginate>
     <SkeletonTable v-if="!formData" />
     <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-        <QBtnGroup push flat class="q-gutter-x-sm">
+        <QBtnGroup push class="q-gutter-x-sm">
             <slot name="moreActions" />
             <QBtn
                 :label="tMobile('globals.remove')"
                 color="primary"
                 icon="delete"
+                flat
                 @click="remove(selected)"
                 :disable="!selected?.length"
                 :title="t('globals.remove')"
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 926b1b907..2fc8ce4ad 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, toRefs } from 'vue';
+import { ref, toRefs, computed } from 'vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 
 const $props = defineProps({
@@ -16,10 +16,9 @@ const $props = defineProps({
         default: '',
     },
 });
-
+const myOptions = computed(() => $props.options);
 const updateValue = (newValue) => emit('update:modelValue', newValue);
 const { modelValue, optionLabel, options } = toRefs($props);
-const myOptions = ref(JSON.parse(JSON.stringify(options.value)));
 const myOptionsOriginal = ref(JSON.parse(JSON.stringify(options.value)));
 
 const filter = (val, options) => {
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 9c8cd6223..d84e8f1af 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -171,7 +171,7 @@ async function onLoad(...params) {
             </QCard>
         </div>
     </div>
-    <QInfiniteScroll v-if="store.data" @load="onLoad" :offset="offset">
+    <QInfiniteScroll v-if="store.data" @load="onLoad" :offset="offset" class="full-width">
         <slot name="body" :rows="store.data"></slot>
         <div v-if="isLoading" class="info-row q-pa-md text-center">
             <QSpinner color="orange" size="md" />
diff --git a/src/pages/Claim/Card/ClaimDevelopment.vue b/src/pages/Claim/Card/ClaimDevelopment.vue
index 764b64def..b293fcc8b 100644
--- a/src/pages/Claim/Card/ClaimDevelopment.vue
+++ b/src/pages/Claim/Card/ClaimDevelopment.vue
@@ -121,67 +121,65 @@ const columns = computed(() => [
         auto-load
     />
     <div class="column items-center">
-        <div class="list">
-            <CrudModel
-                data-key="ClaimDevelopments"
-                url="ClaimDevelopments"
-                model="claimDevelopment"
-                :filter="developmentsFilter"
-                ref="claimDevelopmentForm"
-                :data-required="{ claimFk: route.params.id }"
-                v-model:selected="selected"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <QTable
-                        :columns="columns"
-                        :rows="rows"
-                        :pagination="{ rowsPerPage: 0 }"
-                        row-key="$index"
-                        selection="multiple"
-                        hide-pagination
-                        v-model:selected="selected"
-                        :grid="$q.screen.lt.md"
-                    >
-                        <template #body-cell="{ row, col }">
-                            <QTd auto-width>
-                                <VnSelectFilter
-                                    :label="col.label"
-                                    v-model="row[col.model]"
-                                    :options="col.options"
-                                    :option-value="col.optionValue"
-                                    :option-label="col.optionLabel"
-                                />
-                            </QTd>
-                        </template>
-                        <template #item="props">
-                            <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
-                                <QCard bordered flat>
-                                    <QCardSection>
-                                        <QCheckbox v-model="props.selected" dense />
-                                    </QCardSection>
-                                    <QSeparator />
-                                    <QList dense>
-                                        <QItem v-for="col in props.cols" :key="col.name">
-                                            <QItemSection>
-                                                <VnSelectFilter
-                                                    :label="col.label"
-                                                    v-model="props.row[col.model]"
-                                                    :options="col.options"
-                                                    :option-value="col.optionValue"
-                                                    :option-label="col.optionLabel"
-                                                    dense
-                                                />
-                                            </QItemSection>
-                                        </QItem>
-                                    </QList>
-                                </QCard>
-                            </div>
-                        </template>
-                    </QTable>
-                </template>
-            </CrudModel>
-        </div>
+        <CrudModel
+            data-key="ClaimDevelopments"
+            url="ClaimDevelopments"
+            model="claimDevelopment"
+            :filter="developmentsFilter"
+            ref="claimDevelopmentForm"
+            :data-required="{ claimFk: route.params.id }"
+            v-model:selected="selected"
+            auto-load
+        >
+            <template #body="{ rows }">
+                <QTable
+                    :columns="columns"
+                    :rows="rows"
+                    :pagination="{ rowsPerPage: 0 }"
+                    row-key="$index"
+                    selection="multiple"
+                    hide-pagination
+                    v-model:selected="selected"
+                    :grid="$q.screen.lt.md"
+                >
+                    <template #body-cell="{ row, col }">
+                        <QTd auto-width>
+                            <VnSelectFilter
+                                :label="col.label"
+                                v-model="row[col.model]"
+                                :options="col.options"
+                                :option-value="col.optionValue"
+                                :option-label="col.optionLabel"
+                            />
+                        </QTd>
+                    </template>
+                    <template #item="props">
+                        <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
+                            <QCard bordered flat>
+                                <QCardSection>
+                                    <QCheckbox v-model="props.selected" dense />
+                                </QCardSection>
+                                <QSeparator />
+                                <QList dense>
+                                    <QItem v-for="col in props.cols" :key="col.name">
+                                        <QItemSection>
+                                            <VnSelectFilter
+                                                :label="col.label"
+                                                v-model="props.row[col.model]"
+                                                :options="col.options"
+                                                :option-value="col.optionValue"
+                                                :option-label="col.optionLabel"
+                                                dense
+                                            />
+                                        </QItemSection>
+                                    </QItem>
+                                </QList>
+                            </QCard>
+                        </div>
+                    </template>
+                </QTable>
+            </template>
+        </CrudModel>
     </div>
     <QPageSticky position="bottom-right" :offset="[25, 25]">
         <QBtn fab color="primary" icon="add" @click="claimDevelopmentForm.insert()" />
@@ -192,6 +190,9 @@ const columns = computed(() => [
 .grid-style-transition {
     transition: transform 0.28s, background-color 0.28s;
 }
+.maxwidth {
+    width: 100%;
+}
 </style>
 
 <i18n>
diff --git a/test/cypress/integration/claimDevelopment.spec.js b/test/cypress/integration/claimDevelopment.spec.js
index f05710eea..8a882d0e6 100755
--- a/test/cypress/integration/claimDevelopment.spec.js
+++ b/test/cypress/integration/claimDevelopment.spec.js
@@ -1,6 +1,8 @@
 /// <reference types="cypress" />
 describe('ClaimDevelopment', () => {
     const claimId = 1;
+    const firstLineReason = 'tbody > :nth-child(1) > :nth-child(2)';
+    const thirdRow = 'tbody > :nth-child(3)';
 
     beforeEach(() => {
         cy.viewport(1920, 1080);
@@ -9,58 +11,46 @@ describe('ClaimDevelopment', () => {
     });
 
     it('should reset line', () => {
-        cy.get('tbody > :nth-child(1) > :nth-child(2)').click();
-        cy.selectOption('Novato');
-        cy.get('[title="Reset"]').click();
-        cy.get(
-            ':nth-child(1) > :nth-child(2) > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native > span'
-        ).should('have.text', 'Prisas');
+        cy.selectOption(firstLineReason, 'Novato');
+        cy.resetCard();
+        cy.getValue(firstLineReason).should('have.text', 'Prisas');
     });
 
     it('should edit line', () => {
-        cy.get('tbody > :nth-child(1) > :nth-child(2)').click();
-        cy.selectOption('Novato');
-        cy.get('[title="Save"]').click();
+        cy.selectOption(firstLineReason, 'Novato');
+        cy.saveCard();
 
-        cy.visit(`/#/claim/${claimId}/development`);
-        cy.get(
-            ':nth-child(1) > :nth-child(2) > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native > span'
-        ).should('have.text', 'Novato');
+        cy.reload();
+        cy.getValue(firstLineReason).should('have.text', 'Novato');
 
         //Restart data
-        cy.get('tbody > :nth-child(1) > :nth-child(2)');
-        cy.selectOption('Prisas');
-        cy.get('[title="Save"]').click();
+        cy.selectOption(firstLineReason, 'Prisas');
+        cy.saveCard();
     });
 
-    it('should add new line', () => {
-        //check third if row exist
-        cy.get('.q-page-sticky > div > .q-btn').click();
-        cy.get('tbody > :nth-child(3)').should('exist');
+    it('should add and remove new line', () => {
+        //add row
+        cy.addCard();
+        cy.get(thirdRow).should('exist');
 
-        //fill in data
-        const rowData = ['', '', ''];
-        cy.fillTableRow(3, rowData);
+        const rowData = [false, 'Novato', 'Roces', 'Compradores', 'employeeNick', 'Tour'];
+        cy.fillRow(thirdRow, rowData);
+        cy.saveCard();
+        cy.validateRow(thirdRow, rowData);
+
+        cy.reload();
+        cy.validateRow(thirdRow, rowData);
+
+        //remove row
+        cy.fillRow(thirdRow, [true]);
+        cy.removeCard();
+        cy.clickConfirm();
+        cy.get(thirdRow).should('not.exist');
+
+        cy.reload();
+        cy.get(thirdRow).should('not.exist');
     });
 
-    // it('should remove last line', () => {
-    //     cy.get(
-    //         ':nth-child(1) > .q-card > .q-img > .q-img__container > .q-img__image'
-    //     ).click();
-    //     cy.get('.q-carousel__slide > .q-img > .q-img__container > .q-img__image').should(
-    //         'be.visible'
-    //     );
-
-    //     cy.get('.q-carousel__control > .q-btn > .q-btn__content > .q-icon').click();
-
-    //     cy.get(
-    //         '.q-dialog__inner > .q-toolbar > .q-btn > .q-btn__content > .q-icon'
-    //     ).click();
-    //     cy.get('.q-carousel__slide > .q-img > .q-img__container > .q-img__image').should(
-    //         'not.be.visible'
-    //     );
-    // });
-
     // it('should remove third and fourth file', () => {
     //     cy.get(
     //         '.multimediaParent > :nth-child(3) > .q-btn > .q-btn__content > .q-icon'
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index eca5f6c8c..2eb14e463 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -41,70 +41,90 @@ Cypress.Commands.add('login', (user) => {
     });
 });
 
-Cypress.Commands.add('selectOption', (option) => {
-    //cy.visit('/#/login');
-    cy.get('.q-item__label').then(() => {
-        cy.contains('.q-item__label', option).click();
+Cypress.Commands.add('waitForElement', (element) => {
+    cy.get(element, { timeout: 2000 }).should('be.visible');
+});
+
+Cypress.Commands.add('getValue', (selector) => {
+    cy.get(selector).then(($el) => {
+        if ($el.find('.q-checkbox__inner').length > 0) {
+            return cy.get(selector + '.q-checkbox__inner');
+        }
+        // Si es un QSelect
+        else if ($el.find('.q-select__dropdown-icon').length) {
+            return cy.get(
+                selector +
+                    '> .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native > span'
+            );
+        } else {
+            // Puedes añadir un log o lanzar un error si el elemento no es reconocido
+            cy.log('Elemento no soportado');
+        }
     });
 });
 
-// Cypress.Commands.add('fillRow', (row, options) => {
-//     //cy.visit('/#/login');
-//     for (let [i, option] of options.entries()) {
-//         i++;
-//         console.log(i);
-//         const selector = `tbody > :nth-child(${row}) > :nth-child(${i})`;
-//         if (cy.get(selector).should('have.class', 'q-select'))
-//             cy.selectOption(selector, option);
-//     }
-// });
-Cypress.Commands.add('fillTableRow', (rowNumber, data) => {
-    // Obtener todas las filas de la tabla
-    cy.get('table tbody tr').eq(rowNumber).as('currentRow');
+// Fill Inputs
+Cypress.Commands.add('selectOption', (selector, option) => {
+    cy.get(selector).find('.q-select__dropdown-icon').click();
+    cy.get('.q-menu .q-item').contains(option).click();
+});
+
+Cypress.Commands.add('checkOption', (selector) => {
+    cy.wrap(selector).find('.q-checkbox__inner').click();
+});
+
+// Global buttons
+Cypress.Commands.add('saveCard', () => {
+    cy.get('[title="Save"]').click();
+    cy.get('[title="Save"]').should('have.class', 'disabled');
+});
+Cypress.Commands.add('resetCard', () => {
+    cy.get('[title="Reset"]').click();
+});
+Cypress.Commands.add('removeCard', () => {
+    cy.get('[title="Remove"]').click();
+});
+Cypress.Commands.add('addCard', () => {
+    cy.waitForElement('tbody');
+    cy.get('.q-page-sticky > div > .q-btn').click();
+});
+Cypress.Commands.add('clickConfirm', () => {
+    cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
+});
+
+Cypress.Commands.add('fillRow', (rowSelector, data) => {
+    // Usar el selector proporcionado para obtener la fila deseada
+    cy.waitForElement('tbody');
+    cy.get(rowSelector).as('currentRow');
 
-    // Iterar sobre cada dato en el array 'data'
     data.forEach((value, index) => {
-        // Basándonos en el índice, encontramos la celda correspondiente y verificamos el tipo de input
+        if (value === null) return;
         cy.get('@currentRow')
             .find('td')
             .eq(index)
-            .find('input')
-            .invoke('attr', 'type')
-            .then((type) => {
-                switch (type) {
-                    case 'text':
-                        cy.get('@currentRow')
-                            .find('td')
-                            .eq(index)
-                            .find('input[type="text"]')
-                            .clear()
-                            .type(value);
-                        break;
-
-                    case 'checkbox':
-                        if (value) {
-                            // Puede adaptar esto según cómo represente los valores booleanos en su array 'data'
-                            cy.get('@currentRow')
-                                .find('td')
-                                .eq(index)
-                                .find('input[type="checkbox"]')
-                                .check();
-                        } else {
-                            cy.get('@currentRow')
-                                .find('td')
-                                .eq(index)
-                                .find('input[type="checkbox"]')
-                                .uncheck();
-                        }
-                        break;
-
-                    // ... Puede agregar más casos para otros tipos de inputs según sea necesario
-
-                    default:
-                        // Manejar cualquier otro tipo de input o agregar lógica de error aquí si es necesario
-                        break;
+            .then((td) => {
+                if (td.find('.q-select__dropdown-icon').length) {
+                    cy.selectOption(td, value);
+                }
+                if (td.find('.q-checkbox__inner').length && value) {
+                    cy.checkOption(td);
                 }
             });
     });
 });
+
+Cypress.Commands.add('validateRow', (rowSelector, expectedValues) => {
+    cy.waitForElement('tbody');
+    cy.get(rowSelector).within(() => {
+        for (const [index, value] of expectedValues.entries()) {
+            cy.log('CHECKING ', index, value);
+            if (typeof value == 'boolean') {
+                const prefix = value ? '' : 'not.';
+                cy.getValue(`:nth-child(${index + 1})`).should(`${prefix}be.checked`);
+                continue;
+            }
+            cy.getValue(`:nth-child(${index + 1})`).should('have.text', value);
+        }
+    });
+});
 // registerCommands();