diff --git a/src/components/CvTextInput/CvTextInput.vue b/src/components/CvTextInput/CvTextInput.vue index 3db13273f..7beff9c27 100644 --- a/src/components/CvTextInput/CvTextInput.vue +++ b/src/components/CvTextInput/CvTextInput.vue @@ -11,9 +11,10 @@
@@ -34,3 +35,9 @@ const props = defineProps({ const cvId = useCvId(props); const emit = defineEmits(['update:modelValue']); + + diff --git a/src/components/CvTextInput/__tests__/CvTextInput.spec.js b/src/components/CvTextInput/__tests__/CvTextInput.spec.js index a1a55775a..b17554c49 100644 --- a/src/components/CvTextInput/__tests__/CvTextInput.spec.js +++ b/src/components/CvTextInput/__tests__/CvTextInput.spec.js @@ -46,4 +46,36 @@ describe('CvTextInput', () => { const input = getByLabelText(dummyLabel); expect(input).toBeDefined(); }); + + describe('Attribute & event binding', () => { + it('binds attributes to native input', async () => { + const dummyName = 'dummy-name'; + const { container } = render(CvTextInput, { + attrs: { name: dummyName }, + }); + const input = container.querySelector('input'); + expect(input.getAttribute('name')).toBe(dummyName); + expect(container.firstChild.getAttribute('name')).not.toBe(dummyName); + }); + + it('does not overwrite native input type if attribute type is set', async () => { + const dummyType = 'number'; + const { container } = render(CvTextInput, { + attrs: { type: dummyType }, + }); + + const input = container.querySelector('input'); + expect(input.getAttribute('type')).toBe('text'); + }); + + it('does not overwrite native input value if attribute value is set', async () => { + const dummyValue = 'Dummy Value'; + const { container } = render(CvTextInput, { + attrs: { value: dummyValue }, + }); + + const input = container.querySelector('input'); + expect(input.value).toBe(''); + }); + }); });