diff --git a/src/components/common/__tests__/VnInput.spec.js b/src/components/common/__tests__/VnInput.spec.js
new file mode 100644
index 000000000..7ddb88126
--- /dev/null
+++ b/src/components/common/__tests__/VnInput.spec.js
@@ -0,0 +1,91 @@
+import { createWrapper } from 'app/test/vitest/helper';
+import { vi, describe, expect, it } from 'vitest';
+import VnInput from 'src/components/common/VnInput.vue';
+
+
+describe('VnInput', () => {
+    let vm;
+    let wrapper;
+    let input;
+
+    function generateWrapper(value, isOutlined, emptyToNull, insertable) {
+        wrapper = createWrapper(VnInput, {
+            props: {
+                modelValue: value,                
+                isOutlined,  emptyToNull,  insertable,
+                maxlength: 101
+            },
+            attrs: {
+                required: true,
+                maxlength: 101,
+                maxLength: 10,
+                'max-length':20
+            },
+        });
+        wrapper = wrapper.wrapper;
+        vm = wrapper.vm;
+        input = wrapper.find('input');
+    };
+
+    describe('value', () => {
+        it('should emit update:modelValue when value changes', async () => {
+            generateWrapper('12345', false, false, true)
+            await input.setValue('123');
+            expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+            expect(wrapper.emitted('update:modelValue')[0]).toEqual(['123']);
+        });
+
+        it('should emit update:modelValue with null when input is empty', async () => {
+            generateWrapper('12345', false, true, true);
+            await input.setValue('');
+            expect(wrapper.emitted('update:modelValue')[0]).toEqual([null]);
+        });
+    });
+
+    describe('styleAttrs', () => {
+        it('should return empty styleAttrs when isOutlined is false', async () => {
+            generateWrapper('123', false, false, false);
+            expect(vm.styleAttrs).toEqual({}); 
+        });
+
+        it('should set styleAttrs when isOutlined is true', async () => {        
+            generateWrapper('123', true, false, false);
+            expect(vm.styleAttrs.outlined).toBe(true);
+        });
+    });
+
+    describe('handleKeydown', () => { 
+        it('should do nothing when "Backspace" key is pressed', async () => {
+            generateWrapper('12345', false, false, true);
+            await input.trigger('keydown', { key: 'Backspace' });
+            expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+            const spyhandler = vi.spyOn(vm, 'handleInsertMode');
+            expect(spyhandler).not.toHaveBeenCalled();
+            
+        });
+        
+        /*
+        Verify the component's behavior before removing the .skip, as it doesn't set the maxlength
+        property of the input and doesn't set the value.
+        */
+        it.skip('handleKeydown respects insertable behavior', async () => {
+            const expectedValue = '12345';
+            generateWrapper('1234', false, false, true);
+            vm.focus()
+            await input.trigger('keydown', { key: '5' });
+            await vm.$nextTick();
+            expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+            expect(wrapper.emitted('update:modelValue')[0]).toEqual([expectedValue ]);
+            expect(vm.value).toBe( expectedValue);
+        });
+    });
+
+    describe('focus', () => {
+        it('should call focus method when input is focused', async () => {
+            generateWrapper('123', false, false, true);
+            const focusSpy = vi.spyOn(input.element, 'focus');
+            vm.focus();
+            expect(focusSpy).toHaveBeenCalled();
+        }); 
+    });
+});