diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue index f582221872..3ede24274d 100644 --- a/src/components/common/VnLocation.vue +++ b/src/components/common/VnLocation.vue @@ -2,7 +2,7 @@ import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue'; import VnSelectDialog from 'components/common/VnSelectDialog.vue'; import { useI18n } from 'vue-i18n'; -import { computed } from 'vue'; +import { ref, watch } from 'vue'; import { useAttrs } from 'vue'; import { useRequired } from 'src/composables/useRequired'; const { t } = useI18n(); @@ -16,6 +16,14 @@ const props = defineProps({ }, }); +watch( + () => props.location, + (newValue) => { + if (!modelValue.value) return; + modelValue.value = formatLocation(newValue) ?? null; + } +); + const mixinRules = [requiredFieldRule]; const locationProperties = [ 'postcode', @@ -43,9 +51,7 @@ const formatLocation = (obj, properties = locationProperties) => { return filteredParts.join(', '); }; -const modelValue = computed(() => - props.location ? formatLocation(props.location, locationProperties) : null -); +const modelValue = ref(props.location ? formatLocation(props.location) : null); function showLabel(data) { const dataProperties = [ diff --git a/src/components/common/__tests__/VnInputDate.spec.js b/src/components/common/__tests__/VnInputDate.spec.js new file mode 100644 index 0000000000..21ca91e96e --- /dev/null +++ b/src/components/common/__tests__/VnInputDate.spec.js @@ -0,0 +1,72 @@ +import { createWrapper } from 'app/test/vitest/helper.js'; +import { describe, it, expect } from 'vitest'; +import VnInputDate from 'components/common/VnInputDate.vue'; + +let vm; +let wrapper; + +function generateWrapper(date, outlined, required) { + wrapper = createWrapper(VnInputDate, { + props: { + modelValue: date, + }, + attrs: { + isOutlined: outlined, + required: required + }, + }); + wrapper = wrapper.wrapper; + vm = wrapper.vm; +}; + +describe('VnInputDate', () => { + + describe('formattedDate', () => { + it('formats a valid date correctly', async () => { + generateWrapper('2023-12-25', false, false); + await vm.$nextTick(); + expect(vm.formattedDate).toBe('25/12/2023'); + }); + + it('updates the model value when a new date is set', async () => { + const input = wrapper.find('input'); + await input.setValue('31/12/2023'); + expect(wrapper.emitted()['update:modelValue']).toBeTruthy(); + expect(wrapper.emitted()['update:modelValue'][0][0]).toBe('2023-12-31T00:00:00.000Z'); + }); + + it('should not update the model value when an invalid date is set', async () => { + const input = wrapper.find('input'); + await input.setValue('invalid-date'); + expect(wrapper.emitted()['update:modelValue'][0][0]).toBe('2023-12-31T00:00:00.000Z'); + }); + }); + + describe('styleAttrs', () => { + it('should return empty styleAttrs when isOutlined is false', async () => { + generateWrapper('2023-12-25', false, false); + await vm.$nextTick(); + expect(vm.styleAttrs).toEqual({}); + }); + + it('should set styleAttrs when isOutlined is true', async () => { + generateWrapper('2023-12-25', true, false); + await vm.$nextTick(); + expect(vm.styleAttrs.outlined).toBe(true); + }); + }); + + describe('required', () => { + it('should not applies required class when isRequired is false', async () => { + generateWrapper('2023-12-25', false, false); + await vm.$nextTick(); + expect(wrapper.find('.vn-input-date').classes()).not.toContain('required'); + }); + + it('should applies required class when isRequired is true', async () => { + generateWrapper('2023-12-25', false, true); + await vm.$nextTick(); + expect(wrapper.find('.vn-input-date').classes()).toContain('required'); + }); + }); +}); \ No newline at end of file diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue index dc5f08d375..cb49109d01 100644 --- a/src/pages/Customer/Card/CustomerDescriptor.vue +++ b/src/pages/Customer/Card/CustomerDescriptor.vue @@ -1,5 +1,5 @@ @@ -97,26 +92,21 @@ const debtWarning = computed(() => { :value="entity.businessType.description" /> -