Merge branch 'dev' into 7069-testVnAccountNumber

src/components/__tests__/vnAccountNumber.spec.js

@@ -0,0 +1,43 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { createWrapper } from 'app/test/vitest/helper';
+import VnAccountNumber from 'src/components/common/VnAccountNumber.vue';
+
+describe('VnAccountNumber', () => {
+    let wrapper;
+    let input;
+    let vnInput;
+    let spyShort;
+
+    beforeEach(() => {
+        wrapper = createWrapper(VnAccountNumber);
+        wrapper = wrapper.wrapper;
+        input = wrapper.find('input');
+        vnInput = wrapper.findComponent({ name: 'VnInput' });
+        spyShort = vi.spyOn(wrapper.vm, 'useAccountShortToStandard');
+    });
+
+    it('should filter out non-numeric characters on input event', async () => {
+        await input.setValue('abc123.45!@#');
+        const emitted = wrapper.emitted('update:modelValue');
+        expect(emitted.pop()[0]).toBe('123.45');
+        expect(spyShort).not.toHaveBeenCalled();
+    });
+
+    it('should apply conversion on blur when valid short value is provided', async () => {
+        await input.setValue('123.45');
+        await vnInput.trigger('blur');
+
+        const emitted = wrapper.emitted('update:modelValue');
+        expect(emitted.pop()[0]).toBe('1230000045');
+        expect(spyShort).toHaveBeenCalled();
+    });
+
+    it('should not change value for invalid input values', async () => {
+        await input.setValue('123');
+        await vnInput.trigger('blur');
+
+        const emitted = wrapper.emitted('update:modelValue');
+        expect(emitted.pop()[0]).toBe('123');
+        expect(spyShort).toHaveBeenCalled();
+    });
+});

src/components/common/VnInput.vue

@@ -6,13 +6,7 @@ import { useRequired } from 'src/composables/useRequired';
 const $attrs = useAttrs();
 const { isRequired, requiredFieldRule } = useRequired($attrs);
 const { t } = useI18n();
-const emit = defineEmits([
+const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
-    'update:modelValue',
-    'update:options',
-    'keyup.enter',
-    'remove',
-    'blur',
-]);
 
 const $props = defineProps({
     modelValue: {
@@ -126,6 +120,14 @@ const handleInsertMode = (e) => {
 const handleUppercase = () => {
     value.value = value.value?.toUpperCase() || '';
 };
+
+const listeners = computed(() =>
+    Object.fromEntries(
+        Object.entries($attrs).filter(
+            ([key, val]) => key.startsWith('on') && typeof val === 'function',
+        ),
+    ),
+);
 </script>
 
 <template>
@@ -134,10 +136,9 @@ const handleUppercase = () => {
             ref="vnInputRef"
             v-model="value"
             v-bind="{ ...$attrs, ...styleAttrs }"
+            v-on="listeners"
             :type="$attrs.type"
             :class="{ required: isRequired }"
-            @keyup.enter="emit('keyup.enter')"
-            @blur="emit('blur')"
             @keydown="handleKeydown"
             :clearable="false"
             :rules="mixinRules"