From 1d3be4856be4459a200a23274ce2aeddf7e73b7a Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 17 Feb 2025 12:18:43 +0100
Subject: [PATCH] fix: refs #6943 required

---
 src/components/common/VnLocation.vue          |  1 +
 src/components/common/VnSelect.vue            |  7 +-
 src/composables/__tests__/useRequired.spec.js | 66 +++++++++++++++++++
 src/composables/useRequired.js                | 12 ++--
 .../components/CustomerAddressCreate.vue      |  5 +-
 5 files changed, 74 insertions(+), 17 deletions(-)
 create mode 100644 src/composables/__tests__/useRequired.spec.js

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 3ede24274d9..5028e876dae 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -85,6 +85,7 @@ const handleModelValue = (data) => {
         :tooltip="t('Create new location')"
         :rules="mixinRules"
         :lazy-rules="true"
+        required
     >
         <template #form>
             <CreateNewPostcode
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index c850f2e53da..95fe80a699e 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -10,12 +10,7 @@ const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
 const $attrs = useAttrs();
 const { t } = useI18n();
 
-const isRequired = computed(() => {
-    return useRequired($attrs).isRequired;
-});
-const requiredFieldRule = computed(() => {
-    return useRequired($attrs).requiredFieldRule;
-});
+const { isRequired, requiredFieldRule } = useRequired($attrs);
 
 const $props = defineProps({
     modelValue: {
diff --git a/src/composables/__tests__/useRequired.spec.js b/src/composables/__tests__/useRequired.spec.js
new file mode 100644
index 00000000000..e035a80c6c7
--- /dev/null
+++ b/src/composables/__tests__/useRequired.spec.js
@@ -0,0 +1,66 @@
+import { describe, it, expect, vi } from 'vitest';
+import { useRequired } from '../useRequired';
+
+vi.mock('../useValidator', () => ({
+    useValidator: () => ({
+        validations: () => ({
+            required: vi.fn((isRequired, val) => {
+                if (!isRequired) return true;
+                return val !== null && val !== undefined && val !== '';
+            }),
+        }),
+    }),
+}));
+
+describe('useRequired', () => {
+    it('should detect required when attr is boolean true', () => {
+        const attrs = { required: true };
+        const { isRequired } = useRequired(attrs);
+        expect(isRequired).toBe(true);
+    });
+
+    it('should detect required when attr is boolean false', () => {
+        const attrs = { required: false };
+        const { isRequired } = useRequired(attrs);
+        expect(isRequired).toBe(false);
+    });
+
+    it('should detect required when attr exists without value', () => {
+        const attrs = { required: '' };
+        const { isRequired } = useRequired(attrs);
+        expect(isRequired).toBe(true);
+    });
+
+    it('should return false when required attr does not exist', () => {
+        const attrs = { someOtherAttr: 'value' };
+        const { isRequired } = useRequired(attrs);
+        expect(isRequired).toBe(false);
+    });
+
+    describe('requiredFieldRule', () => {
+        it('should validate required field with value', () => {
+            const attrs = { required: true };
+            const { requiredFieldRule } = useRequired(attrs);
+            expect(requiredFieldRule('some value')).toBe(true);
+        });
+
+        it('should validate required field with empty value', () => {
+            const attrs = { required: true };
+            const { requiredFieldRule } = useRequired(attrs);
+            expect(requiredFieldRule('')).toBe(false);
+        });
+
+        it('should pass validation when field is not required', () => {
+            const attrs = { required: false };
+            const { requiredFieldRule } = useRequired(attrs);
+            expect(requiredFieldRule('')).toBe(true);
+        });
+
+        it('should handle null and undefined values', () => {
+            const attrs = { required: true };
+            const { requiredFieldRule } = useRequired(attrs);
+            expect(requiredFieldRule(null)).toBe(false);
+            expect(requiredFieldRule(undefined)).toBe(false);
+        });
+    });
+});
diff --git a/src/composables/useRequired.js b/src/composables/useRequired.js
index d211b96b459..4e84b9e48c4 100644
--- a/src/composables/useRequired.js
+++ b/src/composables/useRequired.js
@@ -2,14 +2,10 @@ import { useValidator } from 'src/composables/useValidator';
 
 export function useRequired($attrs) {
     const { validations } = useValidator();
-    const hasRequired = Object.keys($attrs).includes('required');
-    let isRequired = false;
-    if (hasRequired) {
-        const required = $attrs['required'];
-        if (typeof required === 'boolean') {
-            isRequired = required;
-        }
-    }
+    const isRequired =
+        typeof $attrs['required'] === 'boolean'
+            ? $attrs['required']
+            : Object.keys($attrs).includes('required');
     const requiredFieldRule = (val) => validations().required(isRequired, val);
 
     return {
diff --git a/src/pages/Customer/components/CustomerAddressCreate.vue b/src/pages/Customer/components/CustomerAddressCreate.vue
index ea820a3a521..e1be6b1504c 100644
--- a/src/pages/Customer/components/CustomerAddressCreate.vue
+++ b/src/pages/Customer/components/CustomerAddressCreate.vue
@@ -81,7 +81,7 @@ function onAgentCreated({ id, fiscalName }, data) {
             <VnRow>
                 <VnInput
                     :label="t('Consignee')"
-                    :required="true"
+                    required
                     clearable
                     v-model="data.nickname"
                 />
@@ -90,7 +90,7 @@ function onAgentCreated({ id, fiscalName }, data) {
                     :label="t('Street address')"
                     clearable
                     v-model="data.street"
-                    :required="true"
+                    required
                 />
             </VnRow>
 
@@ -98,7 +98,6 @@ function onAgentCreated({ id, fiscalName }, data) {
                 :rules="validate('Worker.postcode')"
                 :acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
                 v-model="data.location"
-                :required="true"
                 @update:model-value="(location) => handleLocation(data, location)"
             />