refactor: refs #7069 simplify VnInput emits and update event handling in tests

src/components/__tests__/vnAccountNumber.spec.js

@@ -2,57 +2,42 @@ import { describe, expect, it, vi, beforeEach } from 'vitest';
 import { createWrapper } from 'app/test/vitest/helper';
 import VnAccountNumber from 'src/components/common/VnAccountNumber.vue';
 
-const VnInputStub = {
-    name: 'VnInput',
-    props: ['modelValue'],
-    emits: ['input', 'keydown', 'blur'],
-    template: `
-    <input
-      :value="modelValue"
-      @input="$emit('input', $event)"
-      @keydown.tab="$emit('blur', $event)"
-      @blur="$emit('blur', $event)"
-    />
-  `,
-};
-
 describe('VnAccountNumber', () => {
     let wrapper;
     let input;
+    let vnInput;
     let spyShort;
 
     beforeEach(() => {
-        wrapper = createWrapper(VnAccountNumber, {
-            props: { modelValue: '' },
-            global: { stubs: { VnInput: VnInputStub } },
-        });
+        wrapper = createWrapper(VnAccountNumber);
         wrapper = wrapper.wrapper;
-        input = wrapper.findComponent(VnInputStub);
+        input = wrapper.find('input');
+        vnInput = wrapper.findComponent({ name: 'VnInput' });
         spyShort = vi.spyOn(wrapper.vm, 'useAccountShortToStandard');
     });
 
-    it('should filters out non-numeric characters on input event', async () => {
-        await input.vm.$emit('input', { target: { value: 'abc123.45!@#' } });
+    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 applies conversion on blur when valid short value provided', async () => {
-        await input.vm.$emit('input', { target: { value: '123.45' } });
-        await input.trigger('keydown.tab');
+    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 does not change value for invalid input values', async () => {
-        await input.vm.$emit('input', { target: { value: '123' } });
-        await input.trigger('keydown.tab');
+    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([
-    'update:modelValue',
-    'update:options',
-    'keyup.enter',
-    'remove',
-    'blur',
-]);
+const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
 
 const $props = defineProps({
     modelValue: {
@@ -134,10 +128,9 @@ const handleUppercase = () => {
             ref="vnInputRef"
             v-model="value"
             v-bind="{ ...$attrs, ...styleAttrs }"
+            v-on="$attrs"
             :type="$attrs.type"
             :class="{ required: isRequired }"
-            @keyup.enter="emit('keyup.enter')"
-            @blur="emit('blur')"
             @keydown="handleKeydown"
             :clearable="false"
             :rules="mixinRules"