From d81b8c7fc38a140b2edc63e4397d9d854bb6589b Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Sun, 27 Apr 2025 11:51:54 +0200
Subject: [PATCH] refactor: refs #8684 improve styling and accessibility in
 Item components, add data-cy attributes for testing

---
 src/components/ui/VnLv.vue                    |  5 +---
 src/css/app.scss                              |  9 ++++---
 src/pages/Item/Card/ItemBasicData.vue         | 24 ++++++++++++++++++-
 src/pages/Item/Card/ItemSummary.vue           |  2 +-
 src/pages/Item/locale/en.yml                  |  2 +-
 .../integration/item/itemBasicData.spec.js    | 21 ++++++++++++++++
 .../cypress/integration/item/itemList.spec.js |  1 +
 .../integration/item/itemSummary.spec.js      |  4 +---
 test/cypress/support/commands.js              |  4 +---
 9 files changed, 56 insertions(+), 16 deletions(-)
 create mode 100644 test/cypress/integration/item/itemBasicData.spec.js

diff --git a/src/components/ui/VnLv.vue b/src/components/ui/VnLv.vue
index d0278609a..bc1faccfe 100644
--- a/src/components/ui/VnLv.vue
+++ b/src/components/ui/VnLv.vue
@@ -42,10 +42,7 @@ const val = computed(() => $props.value);
             <div v-if="label || $slots.label" class="label">
                 <slot name="label">
                     <QTooltip v-if="tooltip">{{ tooltip }}</QTooltip>
-                    <span style="color: var(--vn-label-color)">
-                        {{ label }}
-                        :</span
-                    >
+                    <span style="color: var(--vn-label-color)"> {{ label }}: </span>
                 </slot>
             </div>
             <div class="value">
diff --git a/src/css/app.scss b/src/css/app.scss
index de04f0943..f6144f405 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -17,6 +17,8 @@ body.body--light {
     --vn-text-color-contrast: white;
     --vn-link-color: #1e90ff;
     --vn-image-background-color: white;
+    --vn-input-underline-color: #bdbdbd;
+    --vn-input-icons-color: #797979;
 
     background-color: var(--vn-page-color);
 
@@ -42,6 +44,8 @@ body.body--dark {
     --vn-text-color-contrast: black;
     --vn-link-color: #66bfff;
     --vn-image-background-color: black;
+    --vn-input-underline-color: #545353;
+    --vn-input-icons-color: #888787;
 
     background-color: var(--vn-page-color);
 
@@ -157,7 +161,6 @@ select:-webkit-autofill {
     cursor: pointer;
 }
 
-/* Estilo para el asterisco en campos requeridos */
 .q-field.required .q-field__label:after {
     content: ' *';
 }
@@ -299,10 +302,10 @@ input::-webkit-inner-spin-button {
         border-color: var(--vn-page-color);
     }
     div.q-field__append.q-field__marginal {
-        color: red !important;
+        color: var(--vn-input-icons-color) !important;
     }
     .q-field__control:before {
-        border-color: #545353 !important;
+        border-color: var(--vn-input-underline-color) !important;
     }
 }
 
diff --git a/src/pages/Item/Card/ItemBasicData.vue b/src/pages/Item/Card/ItemBasicData.vue
index 7c55fb7be..25fede8c6 100644
--- a/src/pages/Item/Card/ItemBasicData.vue
+++ b/src/pages/Item/Card/ItemBasicData.vue
@@ -71,6 +71,7 @@ const onIntrastatCreated = (response, formData) => {
                     hide-selected
                     map-options
                     required
+                    data-cy="itemBasicDataItemType"
                 >
                     <template #option="scope">
                         <QItem v-bind="scope.itemProps">
@@ -83,11 +84,16 @@ const onIntrastatCreated = (response, formData) => {
                         </QItem>
                     </template>
                 </VnSelect>
-                <VnInput :label="t('item.basicData.reference')" v-model="data.comment" />
+                <VnInput
+                    :label="t('item.basicData.reference')"
+                    v-model="data.comment"
+                    data-cy="itemBasicDataReference"
+                />
                 <VnInput
                     :label="t('item.basicData.relevancy')"
                     type="number"
                     v-model="data.relevancy"
+                    data-cy="itemBasicDataRelevancy"
                 />
             </VnRow>
             <VnRow class="q-py-sm">
@@ -95,11 +101,13 @@ const onIntrastatCreated = (response, formData) => {
                     :label="t('item.basicData.stems')"
                     type="number"
                     v-model="data.stems"
+                    data-cy="itemBasicDataStems"
                 />
                 <VnInput
                     :label="t('item.basicData.multiplier')"
                     type="number"
                     v-model="data.stemMultiplier"
+                    data-cy="itemBasicDataMultiplier"
                 />
                 <VnSelectDialog
                     :label="t('item.basicData.generic')"
@@ -112,6 +120,7 @@ const onIntrastatCreated = (response, formData) => {
                     map-options
                     hide-selected
                     action-icon="filter_alt"
+                    data-cy="itemBasicDataGeneric"
                 >
                     <template #form>
                         <FilterItemForm
@@ -133,6 +142,7 @@ const onIntrastatCreated = (response, formData) => {
                 <VnCheckbox
                     v-model="data.isCustomInspectionRequired"
                     :label="t('item.basicData.isCustomInspectionRequired')"
+                    data-cy="itemBasicDataCustomInspection"
                 />
                 <VnSelectDialog
                     :label="t('item.basicData.intrastat')"
@@ -142,6 +152,7 @@ const onIntrastatCreated = (response, formData) => {
                     option-label="description"
                     map-options
                     hide-selected
+                    data-cy="itemBasicDataIntrastat"
                 >
                     <template #form>
                         <CreateIntrastatForm
@@ -169,6 +180,7 @@ const onIntrastatCreated = (response, formData) => {
                         option-label="name"
                         hide-selected
                         map-options
+                        data-cy="itemBasicDataExpense"
                     />
                 </div>
             </VnRow>
@@ -176,35 +188,41 @@ const onIntrastatCreated = (response, formData) => {
                 <VnCheckbox
                     v-model="data.hasKgPrice"
                     :label="t('item.basicData.hasKgPrice')"
+                    data-cy="itemBasicDataHasKgPrice"
                 />
                 <VnInput
                     :label="t('item.basicData.weightByPiece')"
                     v-model.number="data.weightByPiece"
                     :min="0"
                     type="number"
+                    data-cy="itemBasicDataWeightByPiece"
                 />
                 <VnInput
                     :label="t('item.basicData.boxUnits')"
                     v-model.number="data.packingOut"
                     :min="0"
                     type="number"
+                    data-cy="itemBasicDataBoxUnits"
                 />
             </VnRow>
             <VnRow class="q-py-sm">
                 <VnCheckbox
                     v-model="data.isActive"
                     :label="t('item.basicData.isActive')"
+                    data-cy="itemBasicDataIsActive"
                 />
 
                 <VnCheckbox
                     v-model="data.isFragile"
                     :label="t('item.basicData.isFragile')"
                     :info="t('item.basicData.isFragileTooltip')"
+                    data-cy="itemBasicDataIsFragile"
                 />
                 <VnCheckbox
                     v-model="data.isPhotoRequested"
                     :label="t('item.basicData.isPhotoRequested')"
                     :info="t('item.basicData.isPhotoRequestedTooltip')"
+                    data-cy="itemBasicDataIsPhotoRequested"
                 />
             </VnRow>
             <VnRow class="q-py-sm">
@@ -213,12 +231,14 @@ const onIntrastatCreated = (response, formData) => {
                     v-model.number="data.recycledPlastic"
                     :min="0"
                     type="number"
+                    data-cy="itemBasicDataRecycledPlastic"
                 />
                 <VnInput
                     :label="t('item.basicData.nonRecycledPlastic')"
                     v-model.number="data.nonRecycledPlastic"
                     :min="0"
                     type="number"
+                    data-cy="itemBasicDataNonRecycledPlastic"
                 />
             </VnRow>
             <VnRow class="q-py-sm">
@@ -227,12 +247,14 @@ const onIntrastatCreated = (response, formData) => {
                     type="textarea"
                     v-model="data.description"
                     fill-input
+                    data-cy="itemBasicDataDescription"
                 />
                 <VnInput
                     type="textarea"
                     :label="t('item.basicData.photoMotivation')"
                     v-model="data.photoMotivation"
                     fill-input
+                    data-cy="itemBasicDataPhotoMotivation"
                 />
             </VnRow>
         </template>
diff --git a/src/pages/Item/Card/ItemSummary.vue b/src/pages/Item/Card/ItemSummary.vue
index c5749a731..5d6abdb54 100644
--- a/src/pages/Item/Card/ItemSummary.vue
+++ b/src/pages/Item/Card/ItemSummary.vue
@@ -57,7 +57,7 @@ const getUrl = (id, param) => `#/Item/${id}/${param}`;
                     :show-edit-button="false"
                 />
             </QCard>
-            <QCard class="vn-three">
+            <QCard class="vn-two">
                 <VnTitle
                     :url="getUrl(entityId, 'basic-data')"
                     :text="t('globals.summary.basicData')"
diff --git a/src/pages/Item/locale/en.yml b/src/pages/Item/locale/en.yml
index 496fde909..9d3262a93 100644
--- a/src/pages/Item/locale/en.yml
+++ b/src/pages/Item/locale/en.yml
@@ -155,7 +155,7 @@ item:
         isPhotoRequestedTooltip: This item does need a photo
         isCustomInspectionRequired: Needs physical inspection (PIF)
         description: Description
-        fotoMotivation: Comment for the photographer
+        photoMotivation: Comment for the photographer
     fixedPrice:
         itemFk: Item ID
         groupingPrice: Grouping price
diff --git a/test/cypress/integration/item/itemBasicData.spec.js b/test/cypress/integration/item/itemBasicData.spec.js
new file mode 100644
index 000000000..fb31dda58
--- /dev/null
+++ b/test/cypress/integration/item/itemBasicData.spec.js
@@ -0,0 +1,21 @@
+describe('Item list', () => {
+    beforeEach(() => {
+        cy.login('buyer');
+        cy.visit(`/#/item/1/basic-data`);
+    });
+
+    const mock = {
+        itemBasicDataItemType: { val: 'Container', type: 'select' },
+        itemBasicDataReference: '1',
+        itemBasicDataRelevancy: '1',
+        itemBasicDataStems: '1',
+        itemBasicDataMultiplier: '2',
+        itemBasicDataGeneric: { val: 'Pallet', type: 'select' },
+    };
+
+    it('should edit every field', () => {
+        cy.fillInForm(mock, { attr: 'data-cy' });
+        cy.saveCard();
+        cy.validateForm(mock, { attr: 'data-cy' });
+    });
+});
diff --git a/test/cypress/integration/item/itemList.spec.js b/test/cypress/integration/item/itemList.spec.js
index 70c142e89..719f3c120 100644
--- a/test/cypress/integration/item/itemList.spec.js
+++ b/test/cypress/integration/item/itemList.spec.js
@@ -17,6 +17,7 @@ describe('Item list', () => {
 
     it('should create an item', () => {
         const data = {
+            'Provisional name': { val: `Test item` },
             Description: { val: `Test item` },
             Type: { val: `Crisantemo`, type: 'select' },
             Intrastat: { val: `Coral y materiales similares`, type: 'select' },
diff --git a/test/cypress/integration/item/itemSummary.spec.js b/test/cypress/integration/item/itemSummary.spec.js
index 65b4c8629..6a33fff95 100644
--- a/test/cypress/integration/item/itemSummary.spec.js
+++ b/test/cypress/integration/item/itemSummary.spec.js
@@ -14,11 +14,9 @@ describe('Item summary', () => {
     });
 
     it('should regularize stock', () => {
-        cy.dataCy('descriptor-more-opts').click();
-        cy.get('.q-menu > .q-list > :nth-child(1) > .q-item__section').click();
+        cy.selectDescriptorOption();
         cy.dataCy('regularizeStockInput').type('10');
         cy.dataCy('Warehouse_select').type('Warehouse One{enter}');
-        cy.dataCy('FormModelPopup_save').click();
         cy.checkNotification('Data created');
     });
 });
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index f990c1774..e2aaaa1aa 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -194,9 +194,7 @@ Cypress.Commands.add('fillInForm', (obj, opts = {}) => {
                         cy.selectOption(el, val);
                         break;
                     case 'date':
-                        cy.get(el).type(
-                            `{selectall}{backspace}${val}`,
-                        ).blur();
+                        cy.get(el).type(`{selectall}{backspace}${val}`).blur();
                         break;
                     case 'time':
                         cy.get(el).click();