From 703aaa1f38c2cc1d85d35514fefc1af569580ecb Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 15 Nov 2024 10:28:42 +0100
Subject: [PATCH 01/10] feat: refs #8061 #8061 updates

---
 src/components/CreateNewCityForm.vue     |  5 ---
 src/components/CreateNewPostcodeForm.vue | 39 ++++++++++++---------
 src/components/CreateNewProvinceForm.vue | 12 ++++---
 src/components/VnSelectProvince.vue      | 43 +++++++++++++++---------
 4 files changed, 60 insertions(+), 39 deletions(-)

diff --git a/src/components/CreateNewCityForm.vue b/src/components/CreateNewCityForm.vue
index 85d13beb1..4b1e12fb0 100644
--- a/src/components/CreateNewCityForm.vue
+++ b/src/components/CreateNewCityForm.vue
@@ -17,10 +17,6 @@ const $props = defineProps({
         type: Number,
         default: null,
     },
-    provinces: {
-        type: Array,
-        default: () => [],
-    },
 });
 const { t } = useI18n();
 
@@ -56,7 +52,6 @@ const onDataSaved = (...args) => {
                     :province-selected="$props.provinceSelected"
                     :country-fk="$props.countryFk"
                     v-model="data.provinceFk"
-                    :provinces="$props.provinces"
                 />
             </VnRow>
         </template>
diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue
index 03cba8ac7..6f7d8a24e 100644
--- a/src/components/CreateNewPostcodeForm.vue
+++ b/src/components/CreateNewPostcodeForm.vue
@@ -90,22 +90,33 @@ watch(
             postcodeFormData.townFk = null;
         }
         if (oldValueFk !== newCountryFk) {
-            await provincesFetchDataRef.value.fetch({
-                where: {
-                    countryFk: newCountryFk,
-                },
-            });
-            await townsFetchDataRef.value.fetch({
-                where: {
-                    provinceFk: {
-                        inq: provincesOptions.value.map(({ id }) => id),
-                    },
-                },
-            });
+            await fetchProvinces(newCountryFk);
+            await fetchTowns(newCountryFk);
         }
     }
 );
-
+async function fetchTowns(countryFk) {
+    const townsFilter = countryFk
+        ? {
+              where: {
+                  provinceFk: {
+                      inq: provincesOptions.value.map(({ id }) => id),
+                  },
+              },
+          }
+        : {};
+    await townsFetchDataRef.value.fetch(townsFilter);
+}
+async function fetchProvinces(countryFk) {
+    const provincesFilter = countryFk
+        ? {
+              where: {
+                  countryFk: countryFk,
+              },
+          }
+        : {};
+    await provincesFetchDataRef.value.fetch(provincesFilter);
+}
 watch(
     () => postcodeFormData.provinceFk,
     async (newProvinceFk, oldValueFk) => {
@@ -193,7 +204,6 @@ async function handleCountries(data) {
                         <CreateNewCityForm
                             :country-fk="data.countryFk"
                             :province-selected="data.provinceFk"
-                            :provinces="provincesOptions"
                             @on-data-saved="
                                 (_, requestResponse) =>
                                     onCityCreated(requestResponse, data)
@@ -209,7 +219,6 @@ async function handleCountries(data) {
                     @update:model-value="(value) => setProvince(value, data)"
                     v-model="data.provinceFk"
                     :clearable="true"
-                    :provinces="provincesOptions"
                     @on-province-created="onProvinceCreated"
                 />
                 <VnSelect
diff --git a/src/components/CreateNewProvinceForm.vue b/src/components/CreateNewProvinceForm.vue
index d7df38f9f..a0e681f77 100644
--- a/src/components/CreateNewProvinceForm.vue
+++ b/src/components/CreateNewProvinceForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
@@ -34,6 +34,12 @@ const onDataSaved = (dataSaved, requestResponse) => {
     );
     emit('onDataSaved', dataSaved, requestResponse);
 };
+const where = computed(() => {
+    if (!$props.countryFk) {
+        return {};
+    }
+    return { countryFk: $props.countryFk };
+});
 </script>
 
 <template>
@@ -41,9 +47,7 @@ const onDataSaved = (dataSaved, requestResponse) => {
         @on-fetch="(data) => (autonomiesOptions = data)"
         auto-load
         :filter="{
-            where: {
-                countryFk: $props.countryFk,
-            },
+            where,
         }"
         url="Autonomies/location"
         :sort-by="['name ASC']"
diff --git a/src/components/VnSelectProvince.vue b/src/components/VnSelectProvince.vue
index 9fcbef11e..2999bd600 100644
--- a/src/components/VnSelectProvince.vue
+++ b/src/components/VnSelectProvince.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { useValidator } from 'src/composables/useValidator';
 import { useI18n } from 'vue-i18n';
 
@@ -17,47 +17,60 @@ const $props = defineProps({
         type: Number,
         default: null,
     },
-    provinces: {
-        type: Array,
-        default: () => [],
-    },
 });
 const provinceFk = defineModel({ type: Number, default: null });
 
 const { validate } = useValidator();
 const { t } = useI18n();
-
+const filter = ref({
+    include: { relation: 'country' },
+    where: {
+        countryFk: $props.countryFk,
+    },
+});
 const provincesOptions = ref($props.provinces);
-provinceFk.value = $props.provinceSelected;
 const provincesFetchDataRef = ref();
-
+provinceFk.value = $props.provinceSelected;
+if (!$props.countryFk) {
+    filter.value.where = {};
+}
 async function onProvinceCreated(_, data) {
     await provincesFetchDataRef.value.fetch({ where: { countryFk: $props.countryFk } });
     provinceFk.value = data.id;
     emit('onProvinceCreated', data);
 }
 async function handleProvinces(data) {
+    console.error($props.countryFk);
+
     provincesOptions.value = data;
 }
+
+watch(
+    () => $props.countryFk,
+    async () => {
+        if ($props.countryFk) {
+            filter.value.where.countryFk = $props.countryFk;
+        } else filter.value.where = {};
+        await provincesFetchDataRef.value.fetch({});
+    }
+);
 </script>
 
 <template>
     <FetchData
         ref="provincesFetchDataRef"
-        :filter="{
-            include: { relation: 'country' },
-            where: {
-                countryFk: $props.countryFk,
-            },
-        }"
+        :filter="filter"
         @on-fetch="handleProvinces"
         url="Provinces"
+        auto-load
     />
+    {{ $props.countryFk }}
     <VnSelectDialog
         :label="t('Province')"
-        :options="$props.provinces"
+        :options="provincesOptions"
         :tooltip="t('Create province')"
         hide-selected
+        :limit="3"
         v-model="provinceFk"
         :rules="validate && validate('postcode.provinceFk')"
         :acls="[{ model: 'Province', props: '*', accessType: 'WRITE' }]"

From c7c9c139441c99f389ddc118ff2a75382c9d2f0f Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 15 Nov 2024 10:28:52 +0100
Subject: [PATCH 02/10] test: refs #8061 #8061 updates

---
 .../common/CreateNewCityForm.spec.js          | 64 ++++++++++++++
 .../common/CreateNewPostcodeForm.spec.js      | 79 +++++++++++++++++
 .../common/CreateNewProvinceForm.spec.js      | 64 ++++++++++++++
 .../common/VnSelectProvince.spec.js           | 85 +++++++++++++++++++
 4 files changed, 292 insertions(+)
 create mode 100644 test/vitest/__tests__/components/common/CreateNewCityForm.spec.js
 create mode 100644 test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js
 create mode 100644 test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js
 create mode 100644 test/vitest/__tests__/components/common/VnSelectProvince.spec.js

diff --git a/test/vitest/__tests__/components/common/CreateNewCityForm.spec.js b/test/vitest/__tests__/components/common/CreateNewCityForm.spec.js
new file mode 100644
index 000000000..afa8466d0
--- /dev/null
+++ b/test/vitest/__tests__/components/common/CreateNewCityForm.spec.js
@@ -0,0 +1,64 @@
+// tests/CreateNewCityForm.spec.js
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi } from 'vitest';
+import CreateNewCityForm from 'path/to/CreateNewCityForm.vue';
+import { useI18n } from 'vue-i18n';
+import { Quasar } from 'quasar';
+import { createTestingPinia } from '@pinia/testing';
+
+vi.mock('vue-i18n', () => ({
+    useI18n: () => ({
+        t: (key) => key,
+    }),
+}));
+
+describe('CreateNewCityForm.vue', () => {
+    it('renders the form correctly', () => {
+        const wrapper = mount(CreateNewCityForm, {
+            global: {
+                plugins: [Quasar, createTestingPinia()],
+            },
+        });
+
+        expect(wrapper.find('form').exists()).toBe(true);
+        expect(wrapper.find('input[name="cityName"]').exists()).toBe(true);
+        expect(wrapper.find('select[name="province"]').exists()).toBe(true);
+        expect(wrapper.find('select[name="country"]').exists()).toBe(true);
+    });
+
+    it('emits onDataSaved when form is submitted', async () => {
+        const wrapper = mount(CreateNewCityForm, {
+            global: {
+                plugins: [Quasar, createTestingPinia()],
+            },
+        });
+
+        const form = wrapper.find('form');
+        await form.trigger('submit.prevent');
+
+        expect(wrapper.emitted().onDataSaved).toBeTruthy();
+    });
+
+    it('calls t function from useI18n', () => {
+        const wrapper = mount(CreateNewCityForm, {
+            global: {
+                plugins: [Quasar, createTestingPinia()],
+            },
+        });
+
+        expect(wrapper.vm.t).toBeDefined();
+    });
+
+    it('updates city data correctly', async () => {
+        const wrapper = mount(CreateNewCityForm, {
+            global: {
+                plugins: [Quasar, createTestingPinia()],
+            },
+        });
+
+        const cityNameInput = wrapper.find('input[name="cityName"]');
+        await cityNameInput.setValue('New City');
+
+        expect(wrapper.vm.cityName).toBe('New City');
+    });
+});
diff --git a/test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js b/test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js
new file mode 100644
index 000000000..4f1f03554
--- /dev/null
+++ b/test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js
@@ -0,0 +1,79 @@
+// tests/CreateNewPostcodeForm.spec.js
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi } from 'vitest';
+import CreateNewPostcodeForm from 'path/to/CreateNewPostcodeForm.vue';
+import { useI18n } from 'vue-i18n';
+import { Quasar } from 'quasar';
+import { createTestingPinia } from '@pinia/testing';
+
+vi.mock('vue-i18n', () => ({
+    useI18n: () => ({
+        t: (key) => key,
+    }),
+}));
+
+describe('CreateNewPostcodeForm.vue', () => {
+    it('renders the form correctly', () => {
+        const wrapper = mount(CreateNewPostcodeForm, {
+            global: {
+                plugins: [Quasar, createTestingPinia()],
+            },
+        });
+
+        expect(wrapper.find('form').exists()).toBe(true);
+        expect(wrapper.find('input[label="Postcode"]').exists()).toBe(true);
+        expect(wrapper.find('select[label="City"]').exists()).toBe(true);
+        expect(wrapper.find('select[label="Province"]').exists()).toBe(true);
+        expect(wrapper.find('select[label="Country"]').exists()).toBe(true);
+    });
+
+    it('calls onDataSaved when form is submitted', async () => {
+        const wrapper = mount(CreateNewPostcodeForm, {
+            global: {
+                plugins: [Quasar, createTestingPinia()],
+            },
+        });
+
+        const formModelPopup = wrapper.findComponent({ name: 'FormModelPopup' });
+        await formModelPopup.vm.$emit('onDataSaved', { code: '12345' });
+
+        expect(wrapper.emitted().onDataSaved).toBeTruthy();
+        expect(wrapper.emitted().onDataSaved[0]).toEqual([{ code: '12345' }]);
+    });
+
+    it('updates town when a new city is created', async () => {
+        const wrapper = mount(CreateNewPostcodeForm, {
+            global: {
+                plugins: [Quasar, createTestingPinia()],
+            },
+        });
+
+        const createNewCityForm = wrapper.findComponent({ name: 'CreateNewCityForm' });
+        const newTown = { id: 1, name: 'New Town', provinceFk: 2 };
+        await createNewCityForm.vm.$emit('onDataSaved', newTown, {});
+
+        expect(wrapper.vm.town).toEqual(newTown);
+    });
+
+    it('fetches provinces and towns when country changes', async () => {
+        const wrapper = mount(CreateNewPostcodeForm, {
+            global: {
+                plugins: [Quasar, createTestingPinia()],
+            },
+        });
+
+        wrapper.vm.postcodeFormData.countryFk = 1;
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.vm.provincesFetchDataRef.fetch).toHaveBeenCalledWith({
+            where: { countryFk: 1 },
+        });
+        expect(wrapper.vm.townsFetchDataRef.fetch).toHaveBeenCalledWith({
+            where: {
+                provinceFk: {
+                    inq: wrapper.vm.provincesOptions.map(({ id }) => id),
+                },
+            },
+        });
+    });
+});
diff --git a/test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js b/test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js
new file mode 100644
index 000000000..785bd9bca
--- /dev/null
+++ b/test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js
@@ -0,0 +1,64 @@
+// tests/CreateNewProvinceForm.spec.js
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi } from 'vitest';
+import CreateNewProvinceForm from 'path/to/CreateNewProvinceForm.vue';
+import { useI18n } from 'vue-i18n';
+import { Quasar } from 'quasar';
+import { createTestingPinia } from '@pinia/testing';
+
+vi.mock('vue-i18n', () => ({
+    useI18n: () => ({
+        t: (key) => key,
+    }),
+}));
+
+describe('CreateNewProvinceForm.vue', () => {
+    it('renders the form correctly', () => {
+        const wrapper = mount(CreateNewProvinceForm, {
+            global: {
+                plugins: [Quasar, createTestingPinia()],
+            },
+        });
+
+        expect(wrapper.find('form').exists()).toBe(true);
+        expect(wrapper.findComponent({ name: 'VnInput' }).exists()).toBe(true);
+        expect(wrapper.findComponent({ name: 'VnSelect' }).exists()).toBe(true);
+    });
+
+    it('emits onDataSaved when form is submitted', async () => {
+        const wrapper = mount(CreateNewProvinceForm, {
+            global: {
+                plugins: [Quasar, createTestingPinia()],
+            },
+        });
+
+        const formModelPopup = wrapper.findComponent({ name: 'FormModelPopup' });
+        await formModelPopup.vm.$emit('onDataSaved', { name: 'New Province' });
+
+        expect(wrapper.emitted().onDataSaved).toBeTruthy();
+        expect(wrapper.emitted().onDataSaved[0]).toEqual([{ name: 'New Province' }]);
+    });
+
+    it('calls t function from useI18n', () => {
+        const wrapper = mount(CreateNewProvinceForm, {
+            global: {
+                plugins: [Quasar, createTestingPinia()],
+            },
+        });
+
+        expect(wrapper.vm.t).toBeDefined();
+    });
+
+    it('updates province data correctly', async () => {
+        const wrapper = mount(CreateNewProvinceForm, {
+            global: {
+                plugins: [Quasar, createTestingPinia()],
+            },
+        });
+
+        const provinceNameInput = wrapper.findComponent({ name: 'VnInput' });
+        await provinceNameInput.setValue('New Province');
+
+        expect(wrapper.vm.provinceFormData.name).toBe('New Province');
+    });
+});
diff --git a/test/vitest/__tests__/components/common/VnSelectProvince.spec.js b/test/vitest/__tests__/components/common/VnSelectProvince.spec.js
new file mode 100644
index 000000000..7d708a074
--- /dev/null
+++ b/test/vitest/__tests__/components/common/VnSelectProvince.spec.js
@@ -0,0 +1,85 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi } from 'vitest';
+import VnSelectProvince from './VnSelectProvince.vue';
+import FetchData from 'components/FetchData.vue';
+import VnSelectDialog from 'components/common/VnSelectDialog.vue';
+import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
+
+vi.mock('components/FetchData.vue', () => ({
+    default: {
+        name: 'FetchData',
+        template: '<div><slot></slot></div>',
+    },
+}));
+
+vi.mock('components/common/VnSelectDialog.vue', () => ({
+    default: {
+        name: 'VnSelectDialog',
+        template: '<div><slot></slot><slot name="form"></slot></div>',
+    },
+}));
+
+vi.mock('./CreateNewProvinceForm.vue', () => ({
+    default: {
+        name: 'CreateNewProvinceForm',
+        template: '<div></div>',
+    },
+}));
+
+describe('VnSelectProvince.vue', () => {
+    it('renders correctly with default props', () => {
+        const wrapper = mount(VnSelectProvince, {
+            props: {
+                countryFk: 1,
+                provinceSelected: 2,
+            },
+        });
+        expect(wrapper.exists()).toBe(true);
+    });
+
+    it('calls fetch method on countryFk change', async () => {
+        const fetchMock = vi.fn();
+        const wrapper = mount(VnSelectProvince, {
+            props: {
+                countryFk: 1,
+                provinceSelected: 2,
+            },
+            global: {
+                mocks: {
+                    provincesFetchDataRef: {
+                        fetch: fetchMock,
+                    },
+                },
+            },
+        });
+
+        await wrapper.setProps({ countryFk: 2 });
+        expect(fetchMock).toHaveBeenCalled();
+    });
+
+    it('emits onProvinceCreated event when a new province is created', async () => {
+        const wrapper = mount(VnSelectProvince, {
+            props: {
+                countryFk: 1,
+                provinceSelected: 2,
+            },
+        });
+
+        await wrapper.vm.onProvinceCreated(null, { id: 3 });
+        expect(wrapper.emitted().onProvinceCreated).toBeTruthy();
+        expect(wrapper.emitted().onProvinceCreated[0]).toEqual([{ id: 3 }]);
+    });
+
+    it('updates provincesOptions when handleProvinces is called', async () => {
+        const wrapper = mount(VnSelectProvince, {
+            props: {
+                countryFk: 1,
+                provinceSelected: 2,
+            },
+        });
+
+        const data = [{ id: 1, name: 'Province 1' }];
+        await wrapper.vm.handleProvinces(data);
+        expect(wrapper.vm.provincesOptions).toEqual(data);
+    });
+});

From 1a0a2d94423f9fd2244adf10ebb00316129a62d3 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sat, 16 Nov 2024 14:30:16 +0100
Subject: [PATCH 03/10] test: refs #8061 #8061 updates

---
 .../common/CreateNewCityForm.spec.js          | 35 +++-----------
 .../common/CreateNewPostcodeForm.spec.js      | 35 +++-----------
 .../common/CreateNewProvinceForm.spec.js      | 35 +++-----------
 .../common/VnSelectProvince.spec.js           | 47 ++++++++++---------
 4 files changed, 42 insertions(+), 110 deletions(-)

diff --git a/test/vitest/__tests__/components/common/CreateNewCityForm.spec.js b/test/vitest/__tests__/components/common/CreateNewCityForm.spec.js
index afa8466d0..bc6dd8655 100644
--- a/test/vitest/__tests__/components/common/CreateNewCityForm.spec.js
+++ b/test/vitest/__tests__/components/common/CreateNewCityForm.spec.js
@@ -1,24 +1,13 @@
 // tests/CreateNewCityForm.spec.js
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import CreateNewCityForm from 'path/to/CreateNewCityForm.vue';
-import { useI18n } from 'vue-i18n';
+import CreateNewCityForm from 'src/components/CreateNewCityForm.vue';
 import { Quasar } from 'quasar';
-import { createTestingPinia } from '@pinia/testing';
-
-vi.mock('vue-i18n', () => ({
-    useI18n: () => ({
-        t: (key) => key,
-    }),
-}));
+import { createWrapper, axios } from 'app/test/vitest/helper';
 
 describe('CreateNewCityForm.vue', () => {
     it('renders the form correctly', () => {
-        const wrapper = mount(CreateNewCityForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewCityForm);
 
         expect(wrapper.find('form').exists()).toBe(true);
         expect(wrapper.find('input[name="cityName"]').exists()).toBe(true);
@@ -27,11 +16,7 @@ describe('CreateNewCityForm.vue', () => {
     });
 
     it('emits onDataSaved when form is submitted', async () => {
-        const wrapper = mount(CreateNewCityForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewCityForm);
 
         const form = wrapper.find('form');
         await form.trigger('submit.prevent');
@@ -40,21 +25,13 @@ describe('CreateNewCityForm.vue', () => {
     });
 
     it('calls t function from useI18n', () => {
-        const wrapper = mount(CreateNewCityForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewCityForm);
 
         expect(wrapper.vm.t).toBeDefined();
     });
 
     it('updates city data correctly', async () => {
-        const wrapper = mount(CreateNewCityForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewCityForm);
 
         const cityNameInput = wrapper.find('input[name="cityName"]');
         await cityNameInput.setValue('New City');
diff --git a/test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js b/test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js
index 4f1f03554..24e3a9006 100644
--- a/test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js
+++ b/test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js
@@ -1,24 +1,13 @@
 // tests/CreateNewPostcodeForm.spec.js
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import CreateNewPostcodeForm from 'path/to/CreateNewPostcodeForm.vue';
-import { useI18n } from 'vue-i18n';
+import CreateNewPostcodeForm from 'src/components/CreateNewPostcodeForm.vue';
 import { Quasar } from 'quasar';
-import { createTestingPinia } from '@pinia/testing';
-
-vi.mock('vue-i18n', () => ({
-    useI18n: () => ({
-        t: (key) => key,
-    }),
-}));
+import { createWrapper, axios } from 'app/test/vitest/helper';
 
 describe('CreateNewPostcodeForm.vue', () => {
     it('renders the form correctly', () => {
-        const wrapper = mount(CreateNewPostcodeForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewPostcodeForm);
 
         expect(wrapper.find('form').exists()).toBe(true);
         expect(wrapper.find('input[label="Postcode"]').exists()).toBe(true);
@@ -28,11 +17,7 @@ describe('CreateNewPostcodeForm.vue', () => {
     });
 
     it('calls onDataSaved when form is submitted', async () => {
-        const wrapper = mount(CreateNewPostcodeForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewPostcodeForm);
 
         const formModelPopup = wrapper.findComponent({ name: 'FormModelPopup' });
         await formModelPopup.vm.$emit('onDataSaved', { code: '12345' });
@@ -42,11 +27,7 @@ describe('CreateNewPostcodeForm.vue', () => {
     });
 
     it('updates town when a new city is created', async () => {
-        const wrapper = mount(CreateNewPostcodeForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewPostcodeForm);
 
         const createNewCityForm = wrapper.findComponent({ name: 'CreateNewCityForm' });
         const newTown = { id: 1, name: 'New Town', provinceFk: 2 };
@@ -56,11 +37,7 @@ describe('CreateNewPostcodeForm.vue', () => {
     });
 
     it('fetches provinces and towns when country changes', async () => {
-        const wrapper = mount(CreateNewPostcodeForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewPostcodeForm);
 
         wrapper.vm.postcodeFormData.countryFk = 1;
         await wrapper.vm.$nextTick();
diff --git a/test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js b/test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js
index 785bd9bca..70b166a3c 100644
--- a/test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js
+++ b/test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js
@@ -1,24 +1,13 @@
 // tests/CreateNewProvinceForm.spec.js
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import CreateNewProvinceForm from 'path/to/CreateNewProvinceForm.vue';
-import { useI18n } from 'vue-i18n';
+import CreateNewProvinceForm from 'src/components/CreateNewProvinceForm.vue';
 import { Quasar } from 'quasar';
-import { createTestingPinia } from '@pinia/testing';
-
-vi.mock('vue-i18n', () => ({
-    useI18n: () => ({
-        t: (key) => key,
-    }),
-}));
+import { createWrapper, axios } from 'app/test/vitest/helper';
 
 describe('CreateNewProvinceForm.vue', () => {
     it('renders the form correctly', () => {
-        const wrapper = mount(CreateNewProvinceForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewProvinceForm);
 
         expect(wrapper.find('form').exists()).toBe(true);
         expect(wrapper.findComponent({ name: 'VnInput' }).exists()).toBe(true);
@@ -26,11 +15,7 @@ describe('CreateNewProvinceForm.vue', () => {
     });
 
     it('emits onDataSaved when form is submitted', async () => {
-        const wrapper = mount(CreateNewProvinceForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewProvinceForm);
 
         const formModelPopup = wrapper.findComponent({ name: 'FormModelPopup' });
         await formModelPopup.vm.$emit('onDataSaved', { name: 'New Province' });
@@ -40,21 +25,13 @@ describe('CreateNewProvinceForm.vue', () => {
     });
 
     it('calls t function from useI18n', () => {
-        const wrapper = mount(CreateNewProvinceForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewProvinceForm);
 
         expect(wrapper.vm.t).toBeDefined();
     });
 
     it('updates province data correctly', async () => {
-        const wrapper = mount(CreateNewProvinceForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewProvinceForm);
 
         const provinceNameInput = wrapper.findComponent({ name: 'VnInput' });
         await provinceNameInput.setValue('New Province');
diff --git a/test/vitest/__tests__/components/common/VnSelectProvince.spec.js b/test/vitest/__tests__/components/common/VnSelectProvince.spec.js
index 7d708a074..459e400b3 100644
--- a/test/vitest/__tests__/components/common/VnSelectProvince.spec.js
+++ b/test/vitest/__tests__/components/common/VnSelectProvince.spec.js
@@ -1,34 +1,35 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import VnSelectProvince from './VnSelectProvince.vue';
+import VnSelectProvince from 'src/components/VnSelectProvince.vue';
 import FetchData from 'components/FetchData.vue';
 import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
+import { createWrapper, axios } from 'app/test/vitest/helper';
 
-vi.mock('components/FetchData.vue', () => ({
-    default: {
-        name: 'FetchData',
-        template: '<div><slot></slot></div>',
-    },
-}));
+// vi.mock('components/FetchData.vue', () => ({
+//     default: {
+//         name: 'FetchData',
+//         template: '<div><slot></slot></div>',
+//     },
+// }));
 
-vi.mock('components/common/VnSelectDialog.vue', () => ({
-    default: {
-        name: 'VnSelectDialog',
-        template: '<div><slot></slot><slot name="form"></slot></div>',
-    },
-}));
+// vi.mock('components/common/VnSelectDialog.vue', () => ({
+//     default: {
+//         name: 'VnSelectDialog',
+//         template: '<div><slot></slot><slot name="form"></slot></div>',
+//     },
+// }));
 
-vi.mock('./CreateNewProvinceForm.vue', () => ({
-    default: {
-        name: 'CreateNewProvinceForm',
-        template: '<div></div>',
-    },
-}));
+// vi.mock('./CreateNewProvinceForm.vue', () => ({
+//     default: {
+//         name: 'CreateNewProvinceForm',
+//         template: '<div></div>',
+//     },
+// }));
 
 describe('VnSelectProvince.vue', () => {
     it('renders correctly with default props', () => {
-        const wrapper = mount(VnSelectProvince, {
+        const wrapper = createWrapper(VnSelectProvince, {
             props: {
                 countryFk: 1,
                 provinceSelected: 2,
@@ -39,7 +40,7 @@ describe('VnSelectProvince.vue', () => {
 
     it('calls fetch method on countryFk change', async () => {
         const fetchMock = vi.fn();
-        const wrapper = mount(VnSelectProvince, {
+        const wrapper = createWrapper(VnSelectProvince, {
             props: {
                 countryFk: 1,
                 provinceSelected: 2,
@@ -58,7 +59,7 @@ describe('VnSelectProvince.vue', () => {
     });
 
     it('emits onProvinceCreated event when a new province is created', async () => {
-        const wrapper = mount(VnSelectProvince, {
+        const wrapper = createWrapper(VnSelectProvince, {
             props: {
                 countryFk: 1,
                 provinceSelected: 2,
@@ -71,7 +72,7 @@ describe('VnSelectProvince.vue', () => {
     });
 
     it('updates provincesOptions when handleProvinces is called', async () => {
-        const wrapper = mount(VnSelectProvince, {
+        const wrapper = createWrapper(VnSelectProvince, {
             props: {
                 countryFk: 1,
                 provinceSelected: 2,

From e8ad185873358f0a9bbbda945156ae5e6ffa1518 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sat, 16 Nov 2024 14:32:41 +0100
Subject: [PATCH 04/10] revert: refs #8061 test  #8061 updates

---
 .../common/CreateNewCityForm.spec.js          | 41 ---------
 .../common/CreateNewPostcodeForm.spec.js      | 56 ------------
 .../common/CreateNewProvinceForm.spec.js      | 41 ---------
 .../common/VnSelectProvince.spec.js           | 86 -------------------
 4 files changed, 224 deletions(-)
 delete mode 100644 test/vitest/__tests__/components/common/CreateNewCityForm.spec.js
 delete mode 100644 test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js
 delete mode 100644 test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js
 delete mode 100644 test/vitest/__tests__/components/common/VnSelectProvince.spec.js

diff --git a/test/vitest/__tests__/components/common/CreateNewCityForm.spec.js b/test/vitest/__tests__/components/common/CreateNewCityForm.spec.js
deleted file mode 100644
index bc6dd8655..000000000
--- a/test/vitest/__tests__/components/common/CreateNewCityForm.spec.js
+++ /dev/null
@@ -1,41 +0,0 @@
-// tests/CreateNewCityForm.spec.js
-import { mount } from '@vue/test-utils';
-import { describe, it, expect, vi } from 'vitest';
-import CreateNewCityForm from 'src/components/CreateNewCityForm.vue';
-import { Quasar } from 'quasar';
-import { createWrapper, axios } from 'app/test/vitest/helper';
-
-describe('CreateNewCityForm.vue', () => {
-    it('renders the form correctly', () => {
-        const wrapper = createWrapper(CreateNewCityForm);
-
-        expect(wrapper.find('form').exists()).toBe(true);
-        expect(wrapper.find('input[name="cityName"]').exists()).toBe(true);
-        expect(wrapper.find('select[name="province"]').exists()).toBe(true);
-        expect(wrapper.find('select[name="country"]').exists()).toBe(true);
-    });
-
-    it('emits onDataSaved when form is submitted', async () => {
-        const wrapper = createWrapper(CreateNewCityForm);
-
-        const form = wrapper.find('form');
-        await form.trigger('submit.prevent');
-
-        expect(wrapper.emitted().onDataSaved).toBeTruthy();
-    });
-
-    it('calls t function from useI18n', () => {
-        const wrapper = createWrapper(CreateNewCityForm);
-
-        expect(wrapper.vm.t).toBeDefined();
-    });
-
-    it('updates city data correctly', async () => {
-        const wrapper = createWrapper(CreateNewCityForm);
-
-        const cityNameInput = wrapper.find('input[name="cityName"]');
-        await cityNameInput.setValue('New City');
-
-        expect(wrapper.vm.cityName).toBe('New City');
-    });
-});
diff --git a/test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js b/test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js
deleted file mode 100644
index 24e3a9006..000000000
--- a/test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js
+++ /dev/null
@@ -1,56 +0,0 @@
-// tests/CreateNewPostcodeForm.spec.js
-import { mount } from '@vue/test-utils';
-import { describe, it, expect, vi } from 'vitest';
-import CreateNewPostcodeForm from 'src/components/CreateNewPostcodeForm.vue';
-import { Quasar } from 'quasar';
-import { createWrapper, axios } from 'app/test/vitest/helper';
-
-describe('CreateNewPostcodeForm.vue', () => {
-    it('renders the form correctly', () => {
-        const wrapper = createWrapper(CreateNewPostcodeForm);
-
-        expect(wrapper.find('form').exists()).toBe(true);
-        expect(wrapper.find('input[label="Postcode"]').exists()).toBe(true);
-        expect(wrapper.find('select[label="City"]').exists()).toBe(true);
-        expect(wrapper.find('select[label="Province"]').exists()).toBe(true);
-        expect(wrapper.find('select[label="Country"]').exists()).toBe(true);
-    });
-
-    it('calls onDataSaved when form is submitted', async () => {
-        const wrapper = createWrapper(CreateNewPostcodeForm);
-
-        const formModelPopup = wrapper.findComponent({ name: 'FormModelPopup' });
-        await formModelPopup.vm.$emit('onDataSaved', { code: '12345' });
-
-        expect(wrapper.emitted().onDataSaved).toBeTruthy();
-        expect(wrapper.emitted().onDataSaved[0]).toEqual([{ code: '12345' }]);
-    });
-
-    it('updates town when a new city is created', async () => {
-        const wrapper = createWrapper(CreateNewPostcodeForm);
-
-        const createNewCityForm = wrapper.findComponent({ name: 'CreateNewCityForm' });
-        const newTown = { id: 1, name: 'New Town', provinceFk: 2 };
-        await createNewCityForm.vm.$emit('onDataSaved', newTown, {});
-
-        expect(wrapper.vm.town).toEqual(newTown);
-    });
-
-    it('fetches provinces and towns when country changes', async () => {
-        const wrapper = createWrapper(CreateNewPostcodeForm);
-
-        wrapper.vm.postcodeFormData.countryFk = 1;
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.vm.provincesFetchDataRef.fetch).toHaveBeenCalledWith({
-            where: { countryFk: 1 },
-        });
-        expect(wrapper.vm.townsFetchDataRef.fetch).toHaveBeenCalledWith({
-            where: {
-                provinceFk: {
-                    inq: wrapper.vm.provincesOptions.map(({ id }) => id),
-                },
-            },
-        });
-    });
-});
diff --git a/test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js b/test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js
deleted file mode 100644
index 70b166a3c..000000000
--- a/test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js
+++ /dev/null
@@ -1,41 +0,0 @@
-// tests/CreateNewProvinceForm.spec.js
-import { mount } from '@vue/test-utils';
-import { describe, it, expect, vi } from 'vitest';
-import CreateNewProvinceForm from 'src/components/CreateNewProvinceForm.vue';
-import { Quasar } from 'quasar';
-import { createWrapper, axios } from 'app/test/vitest/helper';
-
-describe('CreateNewProvinceForm.vue', () => {
-    it('renders the form correctly', () => {
-        const wrapper = createWrapper(CreateNewProvinceForm);
-
-        expect(wrapper.find('form').exists()).toBe(true);
-        expect(wrapper.findComponent({ name: 'VnInput' }).exists()).toBe(true);
-        expect(wrapper.findComponent({ name: 'VnSelect' }).exists()).toBe(true);
-    });
-
-    it('emits onDataSaved when form is submitted', async () => {
-        const wrapper = createWrapper(CreateNewProvinceForm);
-
-        const formModelPopup = wrapper.findComponent({ name: 'FormModelPopup' });
-        await formModelPopup.vm.$emit('onDataSaved', { name: 'New Province' });
-
-        expect(wrapper.emitted().onDataSaved).toBeTruthy();
-        expect(wrapper.emitted().onDataSaved[0]).toEqual([{ name: 'New Province' }]);
-    });
-
-    it('calls t function from useI18n', () => {
-        const wrapper = createWrapper(CreateNewProvinceForm);
-
-        expect(wrapper.vm.t).toBeDefined();
-    });
-
-    it('updates province data correctly', async () => {
-        const wrapper = createWrapper(CreateNewProvinceForm);
-
-        const provinceNameInput = wrapper.findComponent({ name: 'VnInput' });
-        await provinceNameInput.setValue('New Province');
-
-        expect(wrapper.vm.provinceFormData.name).toBe('New Province');
-    });
-});
diff --git a/test/vitest/__tests__/components/common/VnSelectProvince.spec.js b/test/vitest/__tests__/components/common/VnSelectProvince.spec.js
deleted file mode 100644
index 459e400b3..000000000
--- a/test/vitest/__tests__/components/common/VnSelectProvince.spec.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, it, expect, vi } from 'vitest';
-import VnSelectProvince from 'src/components/VnSelectProvince.vue';
-import FetchData from 'components/FetchData.vue';
-import VnSelectDialog from 'components/common/VnSelectDialog.vue';
-import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
-import { createWrapper, axios } from 'app/test/vitest/helper';
-
-// vi.mock('components/FetchData.vue', () => ({
-//     default: {
-//         name: 'FetchData',
-//         template: '<div><slot></slot></div>',
-//     },
-// }));
-
-// vi.mock('components/common/VnSelectDialog.vue', () => ({
-//     default: {
-//         name: 'VnSelectDialog',
-//         template: '<div><slot></slot><slot name="form"></slot></div>',
-//     },
-// }));
-
-// vi.mock('./CreateNewProvinceForm.vue', () => ({
-//     default: {
-//         name: 'CreateNewProvinceForm',
-//         template: '<div></div>',
-//     },
-// }));
-
-describe('VnSelectProvince.vue', () => {
-    it('renders correctly with default props', () => {
-        const wrapper = createWrapper(VnSelectProvince, {
-            props: {
-                countryFk: 1,
-                provinceSelected: 2,
-            },
-        });
-        expect(wrapper.exists()).toBe(true);
-    });
-
-    it('calls fetch method on countryFk change', async () => {
-        const fetchMock = vi.fn();
-        const wrapper = createWrapper(VnSelectProvince, {
-            props: {
-                countryFk: 1,
-                provinceSelected: 2,
-            },
-            global: {
-                mocks: {
-                    provincesFetchDataRef: {
-                        fetch: fetchMock,
-                    },
-                },
-            },
-        });
-
-        await wrapper.setProps({ countryFk: 2 });
-        expect(fetchMock).toHaveBeenCalled();
-    });
-
-    it('emits onProvinceCreated event when a new province is created', async () => {
-        const wrapper = createWrapper(VnSelectProvince, {
-            props: {
-                countryFk: 1,
-                provinceSelected: 2,
-            },
-        });
-
-        await wrapper.vm.onProvinceCreated(null, { id: 3 });
-        expect(wrapper.emitted().onProvinceCreated).toBeTruthy();
-        expect(wrapper.emitted().onProvinceCreated[0]).toEqual([{ id: 3 }]);
-    });
-
-    it('updates provincesOptions when handleProvinces is called', async () => {
-        const wrapper = createWrapper(VnSelectProvince, {
-            props: {
-                countryFk: 1,
-                provinceSelected: 2,
-            },
-        });
-
-        const data = [{ id: 1, name: 'Province 1' }];
-        await wrapper.vm.handleProvinces(data);
-        expect(wrapper.vm.provincesOptions).toEqual(data);
-    });
-});

From 69e6f0f4679ff2483c4718ded3e15a4dc89429bb Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sun, 17 Nov 2024 12:57:35 +0100
Subject: [PATCH 05/10] test: refs #8061 #8061 CreateNewPostcodeForm

---
 src/components/CreateNewPostcodeForm.vue      | 19 +++--
 .../vnComponent/vnLocation.spec.js            | 83 +++++++++++++++++--
 test/cypress/support/commands.js              |  5 ++
 3 files changed, 94 insertions(+), 13 deletions(-)

diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue
index 6f7d8a24e..6e634465c 100644
--- a/src/components/CreateNewPostcodeForm.vue
+++ b/src/components/CreateNewPostcodeForm.vue
@@ -56,10 +56,10 @@ async function onCityCreated(newTown, formData) {
 }
 
 function setTown(newTown, data) {
-    if (!newTown) return;
-    town.value = newTown;
     data.provinceFk = newTown.provinceFk;
     data.countryFk = newTown.province.countryFk;
+    if (!newTown) return;
+    town.value = newTown;
 }
 
 async function setProvince(id, data) {
@@ -73,7 +73,7 @@ async function onProvinceCreated(data) {
     await provincesFetchDataRef.value.fetch({
         where: { countryFk: postcodeFormData.countryFk },
     });
-    postcodeFormData.provinceFk.value = data.id;
+    postcodeFormData.provinceFk = data.id;
 }
 
 watch(
@@ -158,6 +158,13 @@ async function handleCountries(data) {
         auto-load
         url="Towns/location"
     />
+    <FetchData
+        ref="CountriesFetchDataRef"
+        :sort-by="['name ASC']"
+        @on-fetch="handleCountries"
+        auto-load
+        url="Countries"
+    />
 
     <FormModelPopup
         url-create="postcodes"
@@ -169,6 +176,7 @@ async function handleCountries(data) {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data, validate }">
+            {{ data }}
             <VnRow>
                 <VnInput
                     :label="t('Postcode')"
@@ -202,6 +210,7 @@ async function handleCountries(data) {
                     </template>
                     <template #form>
                         <CreateNewCityForm
+                            data-cy="create-new-city-btn"
                             :country-fk="data.countryFk"
                             :province-selected="data.provinceFk"
                             @on-data-saved="
@@ -220,12 +229,12 @@ async function handleCountries(data) {
                     v-model="data.provinceFk"
                     :clearable="true"
                     @on-province-created="onProvinceCreated"
+                    data-cy="create-new-province-btn"
                 />
                 <VnSelect
-                    url="Countries"
-                    :sort-by="['name ASC']"
                     :label="t('Country')"
                     @update:options="handleCountries"
+                    :options="countriesOptions"
                     hide-selected
                     option-label="name"
                     option-value="id"
diff --git a/test/cypress/integration/vnComponent/vnLocation.spec.js b/test/cypress/integration/vnComponent/vnLocation.spec.js
index 924b16adc..659f17eb5 100644
--- a/test/cypress/integration/vnComponent/vnLocation.spec.js
+++ b/test/cypress/integration/vnComponent/vnLocation.spec.js
@@ -137,24 +137,91 @@ describe('VnLocation', () => {
 
             checkVnLocation(postCode, province);
         });
-        it('Create city', () => {
-            const postCode = '9011';
-            const province = 'Saskatchew';
+        it.only('Create city without country', () => {
+            // const postCode = '9011';
+            const cityName = 'Saskatchew'.concat(Math.random(1 * 100));
             cy.get(createLocationButton).click();
-            cy.get(dialogInputs).eq(0).type(postCode);
+            // cy.get(dialogInputs).eq(0).type(postCode);
             // city create button
             cy.get(
                 `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(2) > .q-icon`
             ).click();
             cy.selectOption('#q-portal--dialog--3 .q-select', 'one');
-            cy.get('#q-portal--dialog--3 .q-input').type(province);
+            cy.get('#q-portal--dialog--3 .q-input').type(cityName);
             cy.get('#q-portal--dialog--3 .q-btn--standard').click();
-            cy.get('#q-portal--dialog--1 .q-btn--standard').click();
-            cy.waitForElement('.q-form');
+            // cy.get('#q-portal--dialog--1 .q-btn--standard').click();
+            // cy.waitForElement('.q-form');
 
-            checkVnLocation(postCode, province);
+            // checkVnLocation(postCode, province);
         });
+        it.only('Create province without country', () => {
+            // const postCode = '9011';
+            const provinceName = 'Saskatchew'.concat(Math.random(1 * 100));
+            cy.get(createLocationButton).click();
+            // cy.get(dialogInputs).eq(0).type(postCode);
+            cy.get(
+                `${createForm.prefix} > :nth-child(5) > .q-select > ${createForm.sufix} > :nth-child(2) `
+            )
+                .eq(0)
+                .click();
+            cy.selectOption('#q-portal--dialog--3 .q-select', 'one');
+            cy.countSelectOptions('#q-portal--dialog--3 .q-select', 4);
+            cy.get('#q-portal--dialog--3 .q-input').type(provinceName);
 
+            cy.get('#q-portal--dialog--3 .q-btn--standard').click();
+            // cy.get('#q-portal--dialog--1 .q-btn--standard').click();
+            // cy.waitForElement('.q-form');
+
+            // checkVnLocation(postCode, province);
+        });
+        it.only('Create city with country', () => {
+            // const postCode = '9011';
+            const cityName = 'Saskatchew'.concat(Math.random(1 * 100));
+            cy.get(createLocationButton).click();
+            // cy.get(dialogInputs).eq(0).type(postCode);
+            // city create button
+            cy.selectOption(
+                `${createForm.prefix} > :nth-child(5) > :nth-child(3) `,
+                'Italia'
+            );
+            cy.get(
+                `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(2) > .q-icon`
+            ).click();
+            cy.selectOption('#q-portal--dialog--4 .q-select', 'Province four');
+            cy.countSelectOptions('#q-portal--dialog--4 .q-select', 1);
+
+            cy.get('#q-portal--dialog--4 .q-input').type(cityName);
+            cy.get('#q-portal--dialog--4 .q-btn--standard').click();
+            // cy.get('#q-portal--dialog--1 .q-btn--standard').click();
+            // cy.waitForElement('.q-form');
+
+            // checkVnLocation(postCode, province);
+        });
+        it.only('Create province with country', () => {
+            // const postCode = '9011';
+            const provinceName = 'Saskatchew'.concat(Math.random(1 * 100));
+            cy.get(createLocationButton).click();
+            // cy.get(dialogInputs).eq(0).type(postCode);
+            cy.selectOption(
+                `${createForm.prefix} > :nth-child(5) > :nth-child(3) `,
+                'España'
+            );
+            cy.get(
+                `${createForm.prefix} > :nth-child(5) > .q-select > ${createForm.sufix} > :nth-child(2) `
+            )
+                .eq(0)
+                .click();
+
+            cy.selectOption('#q-portal--dialog--4 .q-select', 'one');
+            cy.countSelectOptions('#q-portal--dialog--4 .q-select', 2);
+
+            cy.get('#q-portal--dialog--4 .q-input').type(provinceName);
+            cy.get('#q-portal--dialog--4 .q-btn--standard').click();
+            // cy.get('#q-portal--dialog--1 .q-btn--standard').click();
+            // cy.waitForElement('.q-form');
+
+            // checkVnLocation(postCode, province);
+        });
         function checkVnLocation(postCode, province) {
             cy.get(`${createForm.prefix}`).should('not.exist');
             cy.get('.q-form > .q-card > .vn-row:nth-child(6)')
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 34aadad1d..3945c5333 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -91,6 +91,11 @@ Cypress.Commands.add('selectOption', (selector, option) => {
     cy.get(selector).click();
     cy.get('.q-menu .q-item').contains(option).click();
 });
+Cypress.Commands.add('countSelectOptions', (selector, option) => {
+    cy.waitForElement(selector);
+    cy.get(selector).click();
+    cy.get('.q-menu .q-item').should('have.length', option);
+});
 
 Cypress.Commands.add('fillInForm', (obj, form = '.q-form > .q-card') => {
     cy.waitForElement('.q-form > .q-card');

From 8e37d221641fec89a77a7cd9647dedd30a843f06 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sun, 17 Nov 2024 14:22:42 +0100
Subject: [PATCH 06/10] test: refs #8061 #8061 CreateNewPostcodeForm

---
 src/components/CreateNewPostcodeForm.vue      |  3 --
 src/components/VnSelectProvince.vue           |  2 -
 .../vnComponent/vnLocation.spec.js            | 50 +++++--------------
 3 files changed, 12 insertions(+), 43 deletions(-)

diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue
index 6e634465c..44338f186 100644
--- a/src/components/CreateNewPostcodeForm.vue
+++ b/src/components/CreateNewPostcodeForm.vue
@@ -176,7 +176,6 @@ async function handleCountries(data) {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data, validate }">
-            {{ data }}
             <VnRow>
                 <VnInput
                     :label="t('Postcode')"
@@ -210,7 +209,6 @@ async function handleCountries(data) {
                     </template>
                     <template #form>
                         <CreateNewCityForm
-                            data-cy="create-new-city-btn"
                             :country-fk="data.countryFk"
                             :province-selected="data.provinceFk"
                             @on-data-saved="
@@ -229,7 +227,6 @@ async function handleCountries(data) {
                     v-model="data.provinceFk"
                     :clearable="true"
                     @on-province-created="onProvinceCreated"
-                    data-cy="create-new-province-btn"
                 />
                 <VnSelect
                     :label="t('Country')"
diff --git a/src/components/VnSelectProvince.vue b/src/components/VnSelectProvince.vue
index 2999bd600..c0a46921a 100644
--- a/src/components/VnSelectProvince.vue
+++ b/src/components/VnSelectProvince.vue
@@ -64,13 +64,11 @@ watch(
         url="Provinces"
         auto-load
     />
-    {{ $props.countryFk }}
     <VnSelectDialog
         :label="t('Province')"
         :options="provincesOptions"
         :tooltip="t('Create province')"
         hide-selected
-        :limit="3"
         v-model="provinceFk"
         :rules="validate && validate('postcode.provinceFk')"
         :acls="[{ model: 'Province', props: '*', accessType: 'WRITE' }]"
diff --git a/test/cypress/integration/vnComponent/vnLocation.spec.js b/test/cypress/integration/vnComponent/vnLocation.spec.js
index 659f17eb5..d3c750a11 100644
--- a/test/cypress/integration/vnComponent/vnLocation.spec.js
+++ b/test/cypress/integration/vnComponent/vnLocation.spec.js
@@ -18,34 +18,34 @@ describe('VnLocation', () => {
         it('should filter provinces based on selected country', () => {
             // Select a country
             cy.selectOption(
-                `${createForm.prefix} > :nth-child(5) > .q-field:nth-child(5)> ${createForm.sufix}`,
+                `${createForm.prefix} > :nth-child(5) > :nth-child(3) > ${createForm.sufix}`,
                 'Ecuador'
             );
             // Verify that provinces are filtered
             cy.get(
-                `${createForm.prefix} > :nth-child(5) > .q-field:nth-child(3)> ${createForm.sufix}`
+                `${createForm.prefix} > :nth-child(5) > :nth-child(3) > ${createForm.sufix}`
             ).should('have.length', 1);
 
             // Verify that towns are filtered
             cy.get(
-                `${createForm.prefix} > :nth-child(4) > .q-field:nth-child(3)> ${createForm.sufix}`
+                `${createForm.prefix} > :nth-child(4) > :nth-child(2) > ${createForm.sufix}`
             ).should('have.length', 1);
         });
 
-        it('should filter towns based on selected province', () => {
+        it.only('should filter towns based on selected province', () => {
             // Select a country
             cy.selectOption(
-                `${createForm.prefix} > :nth-child(5) > .q-field:nth-child(3)> ${createForm.sufix}`,
+                `${createForm.prefix} > :nth-child(5) > :nth-child(3) > ${createForm.sufix}`,
                 'Ecuador'
             );
             // Verify that provinces are filtered
             cy.get(
-                `${createForm.prefix} > :nth-child(5) > .q-field:nth-child(3)> ${createForm.sufix}`
+                `${createForm.prefix} > :nth-child(5) > :nth-child(2) > ${createForm.sufix}`
             ).should('have.length', 1);
 
             // Verify that towns are filtered
             cy.get(
-                `${createForm.prefix} > :nth-child(4) > .q-field:nth-child(3)> ${createForm.sufix}`
+                `${createForm.prefix} > :nth-child(4) > :nth-child(2) > ${createForm.sufix}`
             ).should('have.length', 1);
         });
         it('should pass selected country', () => {
@@ -53,7 +53,7 @@ describe('VnLocation', () => {
             const country = 'Ecuador';
             const province = 'Province five';
             cy.selectOption(
-                `${createForm.prefix} > :nth-child(5) > .q-field:nth-child(5)> ${createForm.sufix}`,
+                `${createForm.prefix} > :nth-child(5) >  :nth-child(3) > ${createForm.sufix}`,
                 country
             );
             cy.selectOption(
@@ -137,28 +137,19 @@ describe('VnLocation', () => {
 
             checkVnLocation(postCode, province);
         });
-        it.only('Create city without country', () => {
-            // const postCode = '9011';
+        it('Create city without country', () => {
             const cityName = 'Saskatchew'.concat(Math.random(1 * 100));
             cy.get(createLocationButton).click();
-            // cy.get(dialogInputs).eq(0).type(postCode);
-            // city create button
             cy.get(
                 `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(2) > .q-icon`
             ).click();
             cy.selectOption('#q-portal--dialog--3 .q-select', 'one');
             cy.get('#q-portal--dialog--3 .q-input').type(cityName);
             cy.get('#q-portal--dialog--3 .q-btn--standard').click();
-            // cy.get('#q-portal--dialog--1 .q-btn--standard').click();
-            // cy.waitForElement('.q-form');
-
-            // checkVnLocation(postCode, province);
         });
-        it.only('Create province without country', () => {
-            // const postCode = '9011';
+        it('Create province without country', () => {
             const provinceName = 'Saskatchew'.concat(Math.random(1 * 100));
             cy.get(createLocationButton).click();
-            // cy.get(dialogInputs).eq(0).type(postCode);
             cy.get(
                 `${createForm.prefix} > :nth-child(5) > .q-select > ${createForm.sufix} > :nth-child(2) `
             )
@@ -169,17 +160,10 @@ describe('VnLocation', () => {
             cy.get('#q-portal--dialog--3 .q-input').type(provinceName);
 
             cy.get('#q-portal--dialog--3 .q-btn--standard').click();
-            // cy.get('#q-portal--dialog--1 .q-btn--standard').click();
-            // cy.waitForElement('.q-form');
-
-            // checkVnLocation(postCode, province);
         });
-        it.only('Create city with country', () => {
-            // const postCode = '9011';
+        it('Create city with country', () => {
             const cityName = 'Saskatchew'.concat(Math.random(1 * 100));
             cy.get(createLocationButton).click();
-            // cy.get(dialogInputs).eq(0).type(postCode);
-            // city create button
             cy.selectOption(
                 `${createForm.prefix} > :nth-child(5) > :nth-child(3) `,
                 'Italia'
@@ -192,16 +176,10 @@ describe('VnLocation', () => {
 
             cy.get('#q-portal--dialog--4 .q-input').type(cityName);
             cy.get('#q-portal--dialog--4 .q-btn--standard').click();
-            // cy.get('#q-portal--dialog--1 .q-btn--standard').click();
-            // cy.waitForElement('.q-form');
-
-            // checkVnLocation(postCode, province);
         });
-        it.only('Create province with country', () => {
-            // const postCode = '9011';
+        it('Create province with country', () => {
             const provinceName = 'Saskatchew'.concat(Math.random(1 * 100));
             cy.get(createLocationButton).click();
-            // cy.get(dialogInputs).eq(0).type(postCode);
             cy.selectOption(
                 `${createForm.prefix} > :nth-child(5) > :nth-child(3) `,
                 'España'
@@ -217,10 +195,6 @@ describe('VnLocation', () => {
 
             cy.get('#q-portal--dialog--4 .q-input').type(provinceName);
             cy.get('#q-portal--dialog--4 .q-btn--standard').click();
-            // cy.get('#q-portal--dialog--1 .q-btn--standard').click();
-            // cy.waitForElement('.q-form');
-
-            // checkVnLocation(postCode, province);
         });
         function checkVnLocation(postCode, province) {
             cy.get(`${createForm.prefix}`).should('not.exist');

From 95758e2564ed49074ac7ff4be2cea28bf0b60d74 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sun, 17 Nov 2024 14:25:23 +0100
Subject: [PATCH 07/10] test: refs #8061 #8061 CreateNewPostcodeForm

---
 .../vnComponent/vnLocation.spec.js            | 34 ++++++-------------
 1 file changed, 10 insertions(+), 24 deletions(-)

diff --git a/test/cypress/integration/vnComponent/vnLocation.spec.js b/test/cypress/integration/vnComponent/vnLocation.spec.js
index d3c750a11..207f5d634 100644
--- a/test/cypress/integration/vnComponent/vnLocation.spec.js
+++ b/test/cypress/integration/vnComponent/vnLocation.spec.js
@@ -7,6 +7,9 @@ describe('VnLocation', () => {
         prefix: '.q-dialog__inner > .column > #formModel > .q-card',
         sufix: ' .q-field__inner > .q-field__control',
     };
+    const countrySelector = `${createForm.prefix} > :nth-child(5) > :nth-child(3) > ${createForm.sufix}`;
+    const provinceSelector = `${createForm.prefix} > :nth-child(5) > :nth-child(2) > ${createForm.sufix}`;
+    const citySelector = `${createForm.prefix} > :nth-child(4) > :nth-child(2) > ${createForm.sufix}`;
     describe('CreateFormDialog ', () => {
         beforeEach(() => {
             cy.viewport(1280, 720);
@@ -17,45 +20,28 @@ describe('VnLocation', () => {
         });
         it('should filter provinces based on selected country', () => {
             // Select a country
-            cy.selectOption(
-                `${createForm.prefix} > :nth-child(5) > :nth-child(3) > ${createForm.sufix}`,
-                'Ecuador'
-            );
+            cy.selectOption(countrySelector, 'Ecuador');
             // Verify that provinces are filtered
-            cy.get(
-                `${createForm.prefix} > :nth-child(5) > :nth-child(3) > ${createForm.sufix}`
-            ).should('have.length', 1);
+            cy.get(countrySelector).should('have.length', 1);
 
             // Verify that towns are filtered
-            cy.get(
-                `${createForm.prefix} > :nth-child(4) > :nth-child(2) > ${createForm.sufix}`
-            ).should('have.length', 1);
+            cy.get(citySelector).should('have.length', 1);
         });
 
         it.only('should filter towns based on selected province', () => {
             // Select a country
-            cy.selectOption(
-                `${createForm.prefix} > :nth-child(5) > :nth-child(3) > ${createForm.sufix}`,
-                'Ecuador'
-            );
+            cy.selectOption(countrySelector, 'Ecuador');
             // Verify that provinces are filtered
-            cy.get(
-                `${createForm.prefix} > :nth-child(5) > :nth-child(2) > ${createForm.sufix}`
-            ).should('have.length', 1);
+            cy.get(provinceSelector).should('have.length', 1);
 
             // Verify that towns are filtered
-            cy.get(
-                `${createForm.prefix} > :nth-child(4) > :nth-child(2) > ${createForm.sufix}`
-            ).should('have.length', 1);
+            cy.get(citySelector).should('have.length', 1);
         });
         it('should pass selected country', () => {
             // Select a country
             const country = 'Ecuador';
             const province = 'Province five';
-            cy.selectOption(
-                `${createForm.prefix} > :nth-child(5) >  :nth-child(3) > ${createForm.sufix}`,
-                country
-            );
+            cy.selectOption(countrySelector, country);
             cy.selectOption(
                 `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix}`,
                 province

From 4116f681b0f482df410e146f66d5d6c3945843e3 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sun, 17 Nov 2024 14:27:51 +0100
Subject: [PATCH 08/10] test: refs #8061 #8061 remove only

---
 test/cypress/integration/vnComponent/vnLocation.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/cypress/integration/vnComponent/vnLocation.spec.js b/test/cypress/integration/vnComponent/vnLocation.spec.js
index 207f5d634..448d374ec 100644
--- a/test/cypress/integration/vnComponent/vnLocation.spec.js
+++ b/test/cypress/integration/vnComponent/vnLocation.spec.js
@@ -28,7 +28,7 @@ describe('VnLocation', () => {
             cy.get(citySelector).should('have.length', 1);
         });
 
-        it.only('should filter towns based on selected province', () => {
+        it('should filter towns based on selected province', () => {
             // Select a country
             cy.selectOption(countrySelector, 'Ecuador');
             // Verify that provinces are filtered

From feb752f75c88231365981faae842bb50ecdddea5 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sun, 24 Nov 2024 09:31:43 +0100
Subject: [PATCH 09/10] perf: refs #8061 solve conflicts and random posCode it

---
 .../vnComponent/vnLocation.spec.js            | 25 ++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/test/cypress/integration/vnComponent/vnLocation.spec.js b/test/cypress/integration/vnComponent/vnLocation.spec.js
index 448d374ec..c83befbe7 100644
--- a/test/cypress/integration/vnComponent/vnLocation.spec.js
+++ b/test/cypress/integration/vnComponent/vnLocation.spec.js
@@ -19,28 +19,22 @@ describe('VnLocation', () => {
             cy.get(createLocationButton).click();
         });
         it('should filter provinces based on selected country', () => {
-            // Select a country
-            cy.selectOption(countrySelector, 'Ecuador');
-            // Verify that provinces are filtered
+            const country = 'Ecuador';
+            cy.selectOption(countrySelector, country);
             cy.get(countrySelector).should('have.length', 1);
-
-            // Verify that towns are filtered
             cy.get(citySelector).should('have.length', 1);
         });
 
         it('should filter towns based on selected province', () => {
-            // Select a country
-            cy.selectOption(countrySelector, 'Ecuador');
-            // Verify that provinces are filtered
+            const country = 'Ecuador';
+            cy.selectOption(countrySelector, country);
             cy.get(provinceSelector).should('have.length', 1);
-
-            // Verify that towns are filtered
             cy.get(citySelector).should('have.length', 1);
         });
         it('should pass selected country', () => {
-            // Select a country
             const country = 'Ecuador';
             const province = 'Province five';
+
             cy.selectOption(countrySelector, country);
             cy.selectOption(
                 `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix}`,
@@ -66,13 +60,11 @@ describe('VnLocation', () => {
             cy.get(locationOptions).should('have.length.at.least', 5);
         });
         it('input filter location as "al"', function () {
-            // cy.get(inputLocation).click();
             cy.get(inputLocation).clear();
             cy.get(inputLocation).type('al');
             cy.get(locationOptions).should('have.length.at.least', 4);
         });
         it('input filter location as "ecuador"', function () {
-            // cy.get(inputLocation).click();
             cy.get(inputLocation).clear();
             cy.get(inputLocation).type('ecuador');
             cy.get(locationOptions).should('have.length.at.least', 1);
@@ -107,7 +99,7 @@ describe('VnLocation', () => {
         });
 
         it('Create postCode', () => {
-            const postCode = '1234475';
+            const postCode = Math.floor(100000 + Math.random() * 900000);
             const province = 'Valencia';
             cy.get(createLocationButton).click();
             cy.get('.q-card > h1').should('have.text', 'New postcode');
@@ -123,6 +115,7 @@ describe('VnLocation', () => {
 
             checkVnLocation(postCode, province);
         });
+
         it('Create city without country', () => {
             const cityName = 'Saskatchew'.concat(Math.random(1 * 100));
             cy.get(createLocationButton).click();
@@ -133,6 +126,7 @@ describe('VnLocation', () => {
             cy.get('#q-portal--dialog--3 .q-input').type(cityName);
             cy.get('#q-portal--dialog--3 .q-btn--standard').click();
         });
+
         it('Create province without country', () => {
             const provinceName = 'Saskatchew'.concat(Math.random(1 * 100));
             cy.get(createLocationButton).click();
@@ -147,6 +141,7 @@ describe('VnLocation', () => {
 
             cy.get('#q-portal--dialog--3 .q-btn--standard').click();
         });
+
         it('Create city with country', () => {
             const cityName = 'Saskatchew'.concat(Math.random(1 * 100));
             cy.get(createLocationButton).click();
@@ -163,6 +158,7 @@ describe('VnLocation', () => {
             cy.get('#q-portal--dialog--4 .q-input').type(cityName);
             cy.get('#q-portal--dialog--4 .q-btn--standard').click();
         });
+
         it('Create province with country', () => {
             const provinceName = 'Saskatchew'.concat(Math.random(1 * 100));
             cy.get(createLocationButton).click();
@@ -182,6 +178,7 @@ describe('VnLocation', () => {
             cy.get('#q-portal--dialog--4 .q-input').type(provinceName);
             cy.get('#q-portal--dialog--4 .q-btn--standard').click();
         });
+
         function checkVnLocation(postCode, province) {
             cy.get(`${createForm.prefix}`).should('not.exist');
             cy.get('.q-form > .q-card > .vn-row:nth-child(6)')

From 3e06ba3c186fe73ecc75bb9de4f21cbe54153649 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 25 Nov 2024 11:20:07 +0000
Subject: [PATCH 10/10] perf: remove console

---
 src/components/VnSelectProvince.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/VnSelectProvince.vue b/src/components/VnSelectProvince.vue
index c0a46921a..5da6b781f 100644
--- a/src/components/VnSelectProvince.vue
+++ b/src/components/VnSelectProvince.vue
@@ -40,8 +40,6 @@ async function onProvinceCreated(_, data) {
     emit('onProvinceCreated', data);
 }
 async function handleProvinces(data) {
-    console.error($props.countryFk);
-
     provincesOptions.value = data;
 }