From 868c80a18718fe649f24c5c7036e30c91ea4b41c Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 19 Nov 2024 09:56:18 -0300
Subject: [PATCH] test: tests order catalog

---
 src/components/ui/VnFilterPanel.vue           |   1 +
 .../Order/Card/CatalogFilterValueDialog.vue   |   2 +
 src/pages/Order/Card/OrderCatalog.vue         |   4 +-
 src/pages/Order/Card/OrderCatalogFilter.vue   |   5 +
 .../integration/claim/orderCatalog.spec.js    | 132 ++++++++++++++++++
 test/cypress/support/commands.js              |   4 +
 6 files changed, 147 insertions(+), 1 deletion(-)
 create mode 100644 test/cypress/integration/claim/orderCatalog.spec.js

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index c3611c4643..4a3962c412 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -273,6 +273,7 @@ defineExpose({ search, sanitizer, userParams });
                         :key="chip.label"
                         :removable="!unremovableParams?.includes(chip.label)"
                         @remove="remove(chip.label)"
+                        data-cy="vnFilterPanelChip"
                     >
                         <slot name="tags" :tag="chip" :format-fn="formatValue">
                             <div class="q-gutter-x-xs">
diff --git a/src/pages/Order/Card/CatalogFilterValueDialog.vue b/src/pages/Order/Card/CatalogFilterValueDialog.vue
index 28e235f6a6..14175d50b0 100644
--- a/src/pages/Order/Card/CatalogFilterValueDialog.vue
+++ b/src/pages/Order/Card/CatalogFilterValueDialog.vue
@@ -85,6 +85,7 @@ const getSelectedTagValues = async (tag) => {
                 :emit-value="false"
                 use-input
                 @update:model-value="($event) => getSelectedTagValues($event)"
+                data-cy="catalogFilterValueDialogTagSelect"
             />
             <QBtn
                 icon="add_circle"
@@ -126,6 +127,7 @@ const getSelectedTagValues = async (tag) => {
                         is-outlined
                         :is-clearable="false"
                         class="col"
+                        data-cy="catalogFilterValueDialogValueInput"
                     />
                     <QBtn
                         icon="delete"
diff --git a/src/pages/Order/Card/OrderCatalog.vue b/src/pages/Order/Card/OrderCatalog.vue
index a266fc3d43..89ed2f9d6b 100644
--- a/src/pages/Order/Card/OrderCatalog.vue
+++ b/src/pages/Order/Card/OrderCatalog.vue
@@ -120,7 +120,7 @@ watch(
             />
         </QScrollArea>
     </QDrawer>
-    <QPage class="column items-center q-pa-md">
+    <QPage class="column items-center q-pa-md" data-cy="orderCatalogPage">
         <div class="full-width">
             <VnPaginate
                 data-key="OrderCatalogList"
@@ -130,6 +130,7 @@ watch(
                 @on-fetch="showFilter = true"
                 :update-router="false"
                 :auto-load="autoLoad"
+                data-cy="orderCatalogPage"
             >
                 <template #body="{ rows }">
                     <div class="catalog-list">
@@ -142,6 +143,7 @@ watch(
                             :item="row"
                             is-catalog
                             class="fill-icon"
+                            data-cy="orderCatalogItem"
                         />
                     </div>
                 </template>
diff --git a/src/pages/Order/Card/OrderCatalogFilter.vue b/src/pages/Order/Card/OrderCatalogFilter.vue
index 758639f69e..aa1b3c229f 100644
--- a/src/pages/Order/Card/OrderCatalogFilter.vue
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@@ -189,6 +189,7 @@ onMounted(() => {
                             ? resetCategory(params, searchFn)
                             : removeTagGroupParam(params, searchFn, valIndex)
                     "
+                    data-cy="catalogFilterCustomTag"
                 >
                     <strong v-if="customTag.label === 'categoryFk'">
                         {{ t(selectedCategory?.name || '') }}
@@ -217,6 +218,7 @@ onMounted(() => {
                         :name="category.icon"
                         class="category-icon"
                         @click="selectCategory(params, category, searchFn)"
+                        data-cy="catalogFilterCategory"
                     >
                         <QTooltip>
                             {{ t(category.name) }}
@@ -245,6 +247,7 @@ onMounted(() => {
                                 searchFn();
                             }
                         "
+                        data-cy="catalogFilterType"
                     >
                         <template #option="{ itemProps, opt }">
                             <QItem v-bind="itemProps">
@@ -304,6 +307,7 @@ onMounted(() => {
                             searchFn
                         )
                     "
+                    data-cy="catalogFilterValueSelect"
                 >
                     <template #prepend>
                         <QIcon name="search" />
@@ -315,6 +319,7 @@ onMounted(() => {
                             flat
                             color="primary"
                             size="md"
+                            data-cy="catalogFilterValueDialogBtn"
                         />
                         <QPopupProxy>
                             <CatalogFilterValueDialog
diff --git a/test/cypress/integration/claim/orderCatalog.spec.js b/test/cypress/integration/claim/orderCatalog.spec.js
new file mode 100644
index 0000000000..9fd23271e6
--- /dev/null
+++ b/test/cypress/integration/claim/orderCatalog.spec.js
@@ -0,0 +1,132 @@
+/// <reference types="cypress" />
+describe('OrderCatalog', () => {
+    beforeEach(() => {
+        cy.login('developer');
+        cy.viewport(1920, 720);
+        cy.visit('/#/order/8/catalog');
+    });
+
+    const checkCustomFilterTag = (filterName = 'Plant') => {
+        cy.dataCy('catalogFilterCustomTag').should('exist');
+        cy.dataCy('catalogFilterCustomTag').contains(filterName);
+    };
+
+    const checkFilterTag = (filterName = 'Plant') => {
+        cy.dataCy('vnFilterPanelChip').should('exist');
+        cy.dataCy('vnFilterPanelChip').contains(filterName);
+    };
+
+    const selectCategory = (categoryIndex = 1, categoryName = 'Plant') => {
+        cy.get(
+            `div.q-page-container div:nth-of-type(${categoryIndex}) > [data-cy='catalogFilterCategory']`
+        ).should('exist');
+        cy.get(
+            `div.q-page-container div:nth-of-type(${categoryIndex}) > [data-cy='catalogFilterCategory']`
+        ).click();
+        checkCustomFilterTag(categoryName);
+    };
+
+    const selectOptionFromValueFilter = (option) => {
+        cy.selectOption(
+            "div.q-page-container [data-cy='catalogFilterValueSelect']",
+            option
+        );
+        checkCustomFilterTag(option);
+    };
+
+    const selectTypeFilter = (option) => {
+        cy.selectOption("div.q-page-container [data-cy='catalogFilterType']", option);
+        checkFilterTag(option);
+    };
+
+    it('Shows empty state', () => {
+        cy.dataCy('orderCatalogPage').should('exist');
+        cy.dataCy('orderCatalogPage').contains('No data to display');
+    });
+
+    it('filter by category', () => {
+        selectCategory();
+        cy.dataCy('orderCatalogItem').should('exist');
+    });
+
+    it('filters by type', () => {
+        selectCategory();
+        selectTypeFilter('Anthurium');
+    });
+
+    it('filters by custom value select', () => {
+        selectCategory();
+        selectOptionFromValueFilter('Silver');
+    });
+
+    it('filters by custom value dialog', () => {
+        Cypress.on('uncaught:exception', (err) => {
+            if (err.message.includes('canceled')) {
+                return false;
+            }
+        });
+        selectCategory();
+        cy.dataCy('catalogFilterValueDialogBtn').should('exist');
+        cy.dataCy('catalogFilterValueDialogBtn').last().click();
+        cy.dataCy('catalogFilterValueDialogTagSelect').should('exist');
+        cy.selectOption("[data-cy='catalogFilterValueDialogTagSelect']", 'Tallos');
+        cy.dataCy('catalogFilterValueDialogValueInput').find('input').focus();
+        cy.dataCy('catalogFilterValueDialogValueInput').find('input').type('2');
+        cy.dataCy('catalogFilterValueDialogValueInput').find('input').type('{enter}');
+        checkCustomFilterTag('2');
+    });
+
+    it('removes a secondary tag', () => {
+        selectCategory();
+        selectTypeFilter('Anthurium');
+        cy.dataCy('vnFilterPanelChip').should('exist');
+        cy.get(
+            "div.q-page-container [data-cy='vnFilterPanelChip'] > i.q-chip__icon--remove"
+        )
+            .contains('cancel')
+            .should('exist');
+        cy.get(
+            "div.q-page-container [data-cy='vnFilterPanelChip'] > i.q-chip__icon--remove"
+        )
+            .contains('cancel')
+            .click();
+        cy.dataCy('vnFilterPanelChip').should('not.exist');
+    });
+
+    it('Removes category tag', () => {
+        selectCategory();
+        cy.get(
+            "div.q-page-container [data-cy='catalogFilterCustomTag'] > i.q-chip__icon--remove"
+        )
+            .contains('cancel')
+            .should('exist');
+        cy.get(
+            "div.q-page-container [data-cy='catalogFilterCustomTag'] > i.q-chip__icon--remove"
+        )
+            .contains('cancel')
+            .click();
+        cy.dataCy('catalogFilterCustomTag').should('not.exist');
+    });
+
+    it('removes all tags when category tag is removed', () => {
+        selectCategory();
+        selectTypeFilter('Anthurium');
+        // Verificamos que existan tags
+        cy.dataCy('vnFilterPanelChip').should('exist');
+        cy.dataCy('catalogFilterCustomTag').should('exist');
+        // Removemos la custom tag que en este caso seria la category tag
+        cy.get(
+            "div.q-page-container [data-cy='catalogFilterCustomTag'] > i.q-chip__icon--remove"
+        )
+            .contains('cancel')
+            .should('exist');
+        cy.get(
+            "div.q-page-container [data-cy='catalogFilterCustomTag'] > i.q-chip__icon--remove"
+        )
+            .contains('cancel')
+            .click();
+        // Verificamos que no existan tags
+        cy.dataCy('catalogFilterCustomTag').should('not.exist');
+        cy.dataCy('vnFilterPanelChip').should('not.exist');
+    });
+});
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 34aadad1d8..68fc10b23c 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -311,3 +311,7 @@ Cypress.Commands.add('checkValueSelectForm', (id, search) => {
 Cypress.Commands.add('searchByLabel', (label, value) => {
     cy.get(`[label="${label}"] > .q-field > .q-field__inner`).type(`${value}{enter}`);
 });
+
+Cypress.Commands.add('dataCy', (dataTestId, attr = 'data-cy') => {
+    return cy.get(`[${attr}="${dataTestId}"]`);
+});