diff --git a/packages/core/src/components/inputs/BaseInputV3/BaseInputV3.spec.ts b/packages/core/src/components/inputs/BaseInputV3/BaseInputV3.spec.ts index 2aa8b208..3a5078ec 100644 --- a/packages/core/src/components/inputs/BaseInputV3/BaseInputV3.spec.ts +++ b/packages/core/src/components/inputs/BaseInputV3/BaseInputV3.spec.ts @@ -20,13 +20,34 @@ describe('BaseInput.vue', () => { const expectedName = 'expectedFieldName' await wrapper.setProps({ name: expectedName }) expect(wrapper.find('input').attributes('name')).toBe(expectedName) - expect(wrapper.find('input').attributes('id')).toBe(expectedName) + }) + it(':name - does not be overwritten when id is provided', () => { + const explicitId = 'explicit-id' + const expectedName = 'expectedFieldName' + wrapper = mount(BaseInputV3, { + props: { name: expectedName, label: 'Label' }, + attrs: { id: explicitId } + }) + expect(wrapper.find('input').attributes('name')).toBe(expectedName) }) it(':label - is rendered as label', async () => { const expectedLabel = 'Expected Label' await wrapper.setProps({ label: expectedLabel }) expect(wrapper.find('label').text()).toBe(expectedLabel) }) + it(':label - associates with name when no id is provided', async () => { + const expectedName = 'expectedFieldName' + await wrapper.setProps({ name: expectedName }) + expect(wrapper.find('label').attributes('for')).toBe(expectedName) + }) + it(':label - associates with id when it is provided', () => { + const explicitId = 'explicit-id' + wrapper = mount(BaseInputV3, { + props: { name: 'name', label: 'Label' }, + attrs: { id: explicitId } + }) + expect(wrapper.find('label').attributes('for')).toBe(explicitId) + }) it(':type - default type is text', async () => { expect(wrapper.find('input').attributes('type')).toBe('text') }) @@ -40,5 +61,18 @@ describe('BaseInput.vue', () => { await wrapper.setProps({ name: 'test', errors: [expectedError], invalid: true }) expect(wrapper.findComponent(ErrorBox).vm.errors).toStrictEqual([expectedError]) }) + it(':id - defaults to name when no id is provided', async () => { + const expectedName = 'expectedFieldName' + await wrapper.setProps({ name: expectedName }) + expect(wrapper.find('input').attributes('id')).toBe(expectedName) + }) + it(':id - uses explicit id when provided', () => { + const explicitId = 'explicit-id' + wrapper = mount(BaseInputV3, { + props: { name: 'name', label: 'Label' }, + attrs: { id: explicitId } + }) + expect(wrapper.find('input').attributes('id')).toBe(explicitId) + }) }) }) diff --git a/packages/core/src/components/inputs/BaseInputV3/BaseInputV3.vue b/packages/core/src/components/inputs/BaseInputV3/BaseInputV3.vue index b0053816..f6178de9 100644 --- a/packages/core/src/components/inputs/BaseInputV3/BaseInputV3.vue +++ b/packages/core/src/components/inputs/BaseInputV3/BaseInputV3.vue @@ -8,7 +8,7 @@ >