From 3948b26f6b4eebc7e869fc84bdaaaa6be1f3701f Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 6 Dec 2024 13:35:35 +0100
Subject: [PATCH 1/4] feat: init directive

---
 src/boot/dataCy.js | 17 +++++++++++++++++
 src/boot/quasar.js |  2 ++
 2 files changed, 19 insertions(+)
 create mode 100644 src/boot/dataCy.js

diff --git a/src/boot/dataCy.js b/src/boot/dataCy.js
new file mode 100644
index 000000000..18f200ae6
--- /dev/null
+++ b/src/boot/dataCy.js
@@ -0,0 +1,17 @@
+export default {
+    mounted: function (el, binding, { ctx }) {
+        const { innerText, localName } = el;
+        const { type, attrs } = ctx;
+
+        el.setAttribute(
+            'data-cy',
+            `${attrs?.label ?? innerText}_${type.name.replace('Q', '').toLowerCase()}`
+        );
+        console.error('dataCy', el.getAttribute('data-cy'));
+    },
+    unmounted: function (el) {
+        if (el._handleKeydown) {
+            window.removeEventListener('keydown', el._handleKeydown);
+        }
+    },
+};
diff --git a/src/boot/quasar.js b/src/boot/quasar.js
index 01fe68d8b..f6c6c3331 100644
--- a/src/boot/quasar.js
+++ b/src/boot/quasar.js
@@ -3,12 +3,14 @@ import qFormMixin from './qformMixin';
 import keyShortcut from './keyShortcut';
 import useNotify from 'src/composables/useNotify.js';
 import { CanceledError } from 'axios';
+import dataCy from './dataCy';
 
 const { notify } = useNotify();
 
 export default boot(({ app }) => {
     app.mixin(qFormMixin);
     app.directive('shortcut', keyShortcut);
+    app.directive('dataCy', dataCy);
     app.config.errorHandler = (error) => {
         let message;
         const response = error.response;
-- 
2.40.1


From 160fbfca440ea730ac0cf2322043bd9710a9a873 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 6 Dec 2024 13:35:52 +0100
Subject: [PATCH 2/4] feat: add v-dataCy for some components

---
 src/components/common/VnDate.vue      | 2 +-
 src/components/common/VnInput.vue     | 2 +-
 src/components/common/VnInputDate.vue | 1 +
 src/components/common/VnSelect.vue    | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/common/VnDate.vue b/src/components/common/VnDate.vue
index 761ac995e..6959ad754 100644
--- a/src/components/common/VnDate.vue
+++ b/src/components/common/VnDate.vue
@@ -2,7 +2,7 @@
 const model = defineModel({ type: [String, Number], required: true });
 </script>
 <template>
-    <QDate v-model="model" :today-btn="true" :options="$attrs.options" />
+    <QDate v-model="model" :today-btn="true" :options="$attrs.options" data-cy />
 </template>
 <style lang="scss" scoped>
 .q-date {
diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 57a495ac3..445ad6aa7 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -132,7 +132,7 @@ const handleInsertMode = (e) => {
             :rules="mixinRules"
             :lazy-rules="true"
             hide-bottom-space
-            :data-cy="$attrs.dataCy ?? $attrs.label + '_input'"
+            v-data-cy
         >
             <template v-if="$slots.prepend" #prepend>
                 <slot name="prepend" />
diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index eb9dc0f38..19b1f15d6 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -108,6 +108,7 @@ const manageDate = (date) => {
             :clearable="false"
             @click="isPopupOpen = true"
             hide-bottom-space
+            data-cy="date"
         >
             <template #append>
                 <QIcon
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index e116be32a..d19b12abf 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -313,7 +313,7 @@ function handleKeyDown(event) {
         :input-debounce="useURL ? '300' : '0'"
         :loading="isLoading"
         @virtual-scroll="onScroll"
-        :data-cy="$attrs.dataCy ?? $attrs.label + '_select'"
+        data-cy
     >
         <template #append>
             <QIcon
-- 
2.40.1


From 7db4a3cc3a48919b5bcd74bd38164bad39a5b190 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 6 Dec 2024 14:39:45 +0100
Subject: [PATCH 3/4] test: generate test for QInput

---
 src/boot/dataCy.js                            | 16 ++---
 .../__tests__/composables/dataCy.spec.js      | 68 +++++++++++++++++++
 2 files changed, 73 insertions(+), 11 deletions(-)
 create mode 100644 test/vitest/__tests__/composables/dataCy.spec.js

diff --git a/src/boot/dataCy.js b/src/boot/dataCy.js
index 18f200ae6..d26012a60 100644
--- a/src/boot/dataCy.js
+++ b/src/boot/dataCy.js
@@ -2,16 +2,10 @@ export default {
     mounted: function (el, binding, { ctx }) {
         const { innerText, localName } = el;
         const { type, attrs } = ctx;
-
-        el.setAttribute(
-            'data-cy',
-            `${attrs?.label ?? innerText}_${type.name.replace('Q', '').toLowerCase()}`
-        );
-        console.error('dataCy', el.getAttribute('data-cy'));
-    },
-    unmounted: function (el) {
-        if (el._handleKeydown) {
-            window.removeEventListener('keydown', el._handleKeydown);
-        }
+        const name = ctx.parent.attrs?.name ?? ctx.parent.attrs?.label ?? innerText;
+        const value = `${attrs.dataCy ?? name}_${type.name
+            .replace('Q', '')
+            .toLowerCase()}`;
+        el.setAttribute('data-cy', value);
     },
 };
diff --git a/test/vitest/__tests__/composables/dataCy.spec.js b/test/vitest/__tests__/composables/dataCy.spec.js
new file mode 100644
index 000000000..8afa0a7e0
--- /dev/null
+++ b/test/vitest/__tests__/composables/dataCy.spec.js
@@ -0,0 +1,68 @@
+// tests/dataCy.spec.js
+import { mount, shallowMount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import { Quasar, QInput, QSelect, QIcon, QBtn } from 'quasar';
+import dataCy from 'src/boot/dataCy.js';
+const mountWithQuasar = (component, options) => {
+    return mount(component, {
+        global: {
+            plugins: [Quasar],
+            stubs: {
+                vDataCy: true,
+            },
+            directives: {
+                dataCy: dataCy,
+            },
+        },
+        ...options,
+    });
+};
+
+describe('dataCy directive', () => {
+    it.only('applies data-cy attribute to QInput', () => {
+        const wrapper = mountWithQuasar(QInput, {
+            props: {
+                label: 'Test Input',
+            },
+        });
+        const input = wrapper.find('input');
+        dataCy.mounted(input.element, null, {
+            ctx: {
+                type: QInput,
+                attrs: { dataCy: 'Test Input' },
+                parent: { attrs: { label: 'Test Input' } },
+            },
+        });
+        expect(input.attributes('data-cy')).toBe('Test Input_input');
+    });
+
+    it('applies data-cy attribute to QSelect', () => {
+        const wrapper = mountWithQuasar(QSelect, {
+            props: {
+                label: 'Test Select',
+            },
+        });
+        const select = wrapper.find('.q-field__native');
+        expect(select.attributes('data-cy')).toBe('Test Select_select');
+    });
+
+    it('applies data-cy attribute to QIcon', () => {
+        const wrapper = mountWithQuasar(QIcon, {
+            props: {
+                name: 'home',
+            },
+        });
+        const icon = wrapper.find('i');
+        expect(icon.attributes('data-cy')).toBe('home_icon');
+    });
+
+    it('applies data-cy attribute to QBtn', () => {
+        const wrapper = mountWithQuasar(QBtn, {
+            props: {
+                label: 'Test Button',
+            },
+        });
+        const button = wrapper.find('button');
+        expect(button.attributes('data-cy')).toBe('Test Button_btn');
+    });
+});
-- 
2.40.1


From f5ba90e1984c3e6e571ab5b89c4b7c3d16b3571a Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 6 Dec 2024 14:40:15 +0100
Subject: [PATCH 4/4] feat: add v-data-cy for more elements

---
 src/components/common/VnAccountNumber.vue  | 2 +-
 src/components/common/VnChangePassword.vue | 3 +++
 src/components/common/VnDms.vue            | 1 +
 src/components/common/VnInputDate.vue      | 4 +++-
 src/components/common/VnSelect.vue         | 2 +-
 src/components/common/vnDiscount.vue       | 2 ++
 6 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/common/VnAccountNumber.vue b/src/components/common/VnAccountNumber.vue
index c4fa78674..b12e944c9 100644
--- a/src/components/common/VnAccountNumber.vue
+++ b/src/components/common/VnAccountNumber.vue
@@ -79,5 +79,5 @@ function accountShortToStandard() {
 </script>
 
 <template>
-    <QInput @keydown="handleKeydown" ref="vnInputRef" v-model="internalValue" />
+    <QInput @keydown="handleKeydown" ref="vnInputRef" v-model="internalValue" v-data-cy />
 </template>
diff --git a/src/components/common/VnChangePassword.vue b/src/components/common/VnChangePassword.vue
index 79784f3c5..93473385a 100644
--- a/src/components/common/VnChangePassword.vue
+++ b/src/components/common/VnChangePassword.vue
@@ -64,6 +64,7 @@ defineExpose({ show: () => changePassDialog.value.show() });
                             size="xs"
                             style="flex: 0"
                             v-close-popup
+                            v-data-cy
                         />
                     </VnRow>
                 </slot>
@@ -113,6 +114,7 @@ defineExpose({ show: () => changePassDialog.value.show() });
                         flat
                         type="reset"
                         v-close-popup
+                        data-cy
                     />
                     <QBtn
                         :disabled="isLoading"
@@ -120,6 +122,7 @@ defineExpose({ show: () => changePassDialog.value.show() });
                         :label="t('globals.confirm')"
                         color="primary"
                         @click="validate"
+                        data-cy
                     />
                 </slot>
             </QCardActions>
diff --git a/src/components/common/VnDms.vue b/src/components/common/VnDms.vue
index 35308c2c4..20acd8cf0 100644
--- a/src/components/common/VnDms.vue
+++ b/src/components/common/VnDms.vue
@@ -157,6 +157,7 @@ function addDefaultData(data) {
                     />
                 </VnRow>
                 <QInput
+                    v-data-cy
                     :label="t('globals.description')"
                     v-model="dms.description"
                     type="textarea"
diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 19b1f15d6..9ad767764 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -108,7 +108,7 @@ const manageDate = (date) => {
             :clearable="false"
             @click="isPopupOpen = true"
             hide-bottom-space
-            data-cy="date"
+            v-data-cy
         >
             <template #append>
                 <QIcon
@@ -125,6 +125,7 @@ const manageDate = (date) => {
                         model = null;
                         isPopupOpen = false;
                     "
+                    v-data-cy
                 />
                 <QIcon
                     v-if="showEvent"
@@ -132,6 +133,7 @@ const manageDate = (date) => {
                     class="cursor-pointer"
                     @click="isPopupOpen = !isPopupOpen"
                     :title="t('Open date')"
+                    v-data-cy
                 />
             </template>
             <QMenu
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index d19b12abf..e7d514422 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -313,7 +313,7 @@ function handleKeyDown(event) {
         :input-debounce="useURL ? '300' : '0'"
         :loading="isLoading"
         @virtual-scroll="onScroll"
-        data-cy
+        v-data-cy
     >
         <template #append>
             <QIcon
diff --git a/src/components/common/vnDiscount.vue b/src/components/common/vnDiscount.vue
index b82923ad2..137a5afc0 100644
--- a/src/components/common/vnDiscount.vue
+++ b/src/components/common/vnDiscount.vue
@@ -98,6 +98,7 @@ function cancel({ cancel }) {
             {{ t('Mana') }} {{ toCurrency(props.mana) }}
         </QBanner>
         <QInput
+            v-data-cy
             v-model="scope.value"
             type="number"
             dense
@@ -117,6 +118,7 @@ function cancel({ cancel }) {
         <QCardActions class="q-px-none q-mt-sm" align="right">
             <QBtn :label="t('Cancel')" color="primary" flat @click="cancel(scope)" />
             <QBtn
+                data-cy
                 :label="t('Update')"
                 color="primary"
                 :loading="isLoading"
-- 
2.40.1