diff --git a/src/libs/context.js b/src/libs/context.js index a5ace55..53dc32d 100644 --- a/src/libs/context.js +++ b/src/libs/context.js @@ -167,7 +167,6 @@ function hasGivenName () { if ( this.name && typeof this.name === 'string' && - !['checkbox', 'radio'].includes(this.type) && this.name !== `${this.type}_${this.id}` && this.name !== `${this.type}_${this.defaultId}` && // radio and checkbox options have their value as part of their ID so we need to filter those out too diff --git a/test/unit/FormulateInputBox.test.js b/test/unit/FormulateInputBox.test.js index 36ca59a..e2c17c7 100644 --- a/test/unit/FormulateInputBox.test.js +++ b/test/unit/FormulateInputBox.test.js @@ -19,6 +19,16 @@ describe('FormulateInputBox', () => { expect(wrapper.contains(FormulateInputBox)).toBe(true) }) + it('passes an explicitly given name prop through to the root radio elements', () => { + const wrapper = mount(FormulateInput, { propsData: { type: 'radio', name: 'foo', options: {a: '1', b: '2'} } }) + expect(wrapper.findAll('input[name="foo"]')).toHaveLength(2) + }) + + it('passes an explicitly given name prop through to the root checkbox elements', () => { + const wrapper = mount(FormulateInput, { propsData: { type: 'checkbox', name: 'foo', options: {a: '1', b: '2'} } }) + expect(wrapper.findAll('input[name="foo"]')).toHaveLength(2) + }) + it('box inputs properly process options object in context library', () => { const wrapper = mount(FormulateInput, { propsData: { type: 'checkbox', options: {a: '1', b: '2'} } }) expect(Array.isArray(wrapper.vm.context.options)).toBe(true) diff --git a/test/unit/FormulateInputButton.test.js b/test/unit/FormulateInputButton.test.js index 5b697ea..c23d0e7 100644 --- a/test/unit/FormulateInputButton.test.js +++ b/test/unit/FormulateInputButton.test.js @@ -83,3 +83,8 @@ it('passes an explicitly given name prop through to the root element', () => { const wrapper = mount(FormulateInput, { propsData: { type: 'button', name: 'foo' } }) expect(wrapper.find('button[name="foo"]').exists()).toBe(true) }) + +it('additional context does not bleed through to button input attributes', () => { + const wrapper = mount(FormulateInput, { propsData: { type: 'button' } } ) + expect(Object.keys(wrapper.find('button').attributes())).toEqual(["type", "id"]) + }) diff --git a/test/unit/FormulateInputFile.test.js b/test/unit/FormulateInputFile.test.js index 7d74e45..89dc010 100644 --- a/test/unit/FormulateInputFile.test.js +++ b/test/unit/FormulateInputFile.test.js @@ -42,6 +42,11 @@ describe('FormulateInputFile', () => { expect(wrapper.find('input[name="foo"]').exists()).toBe(true) }) + it('additional context does not bleed through to file input attributes', () => { + const wrapper = mount(FormulateInput, { propsData: { type: 'image' } } ) + expect(Object.keys(wrapper.find('input[type="file"]').attributes())).toEqual(["type", "id"]) + }) + /** * =========================================================================== * Currently there appears to be no way to properly mock upload data in diff --git a/test/unit/FormulateInputSelect.test.js b/test/unit/FormulateInputSelect.test.js index ba1ee61..41ba2d7 100644 --- a/test/unit/FormulateInputSelect.test.js +++ b/test/unit/FormulateInputSelect.test.js @@ -47,4 +47,9 @@ describe('FormulateInputSelect', () => { const wrapper = mount(FormulateInput, { propsData: { type: 'select', options: [], name: 'foo' } }) expect(wrapper.find('select[name="foo"]').exists()).toBe(true) }) + + it('additional context does not bleed through to text select attributes', () => { + const wrapper = mount(FormulateInput, { propsData: { type: 'select' } } ) + expect(Object.keys(wrapper.find('select').attributes())).toEqual(["id"]) + }) }) diff --git a/test/unit/FormulateInputSlider.test.js b/test/unit/FormulateInputSlider.test.js index 38157b5..ac429c4 100644 --- a/test/unit/FormulateInputSlider.test.js +++ b/test/unit/FormulateInputSlider.test.js @@ -30,4 +30,9 @@ describe('FormulateInputSlider', () => { const wrapper = mount(FormulateInput, { propsData: { type: 'range', name: 'foo' } }) expect(wrapper.find('input[name="foo"]').exists()).toBe(true) }) + + it('additional context does not bleed through to range input attributes', () => { + const wrapper = mount(FormulateInput, { propsData: { type: 'range' } } ) + expect(Object.keys(wrapper.find('input[type="range"]').attributes())).toEqual(["type", "id"]) + }) }) diff --git a/test/unit/FormulateInputText.test.js b/test/unit/FormulateInputText.test.js index cbc4a14..1c4c188 100644 --- a/test/unit/FormulateInputText.test.js +++ b/test/unit/FormulateInputText.test.js @@ -83,11 +83,26 @@ describe('FormulateInputText', () => { expect(wrapper.find(`input[id="${wrapper.vm.context.attributes.id}"]`).exists()).toBe(true) }) - it('passes an explicitly given name prop through to the root element', () => { + it('passes an explicitly given name prop through to the root text element', () => { const wrapper = mount(FormulateInput, { propsData: { type: 'text', name: 'foo' } }) expect(wrapper.find('input[name="foo"]').exists()).toBe(true) }) + it('passes an explicitly given name prop through to the root textarea element', () => { + const wrapper = mount(FormulateInput, { propsData: { type: 'textarea', name: 'foo' } }) + expect(wrapper.find('textarea[name="foo"]').exists()).toBe(true) + }) + + it('additional context does not bleed through to text input attributes', () => { + const wrapper = mount(FormulateInput, { propsData: { type: 'text' } } ) + expect(Object.keys(wrapper.find('input[type="text"]').attributes())).toEqual(["type", "id"]) + }) + + it('additional context does not bleed through to textarea input attributes', () => { + const wrapper = mount(FormulateInput, { propsData: { type: 'textarea' } } ) + expect(Object.keys(wrapper.find('textarea').attributes())).toEqual(["id"]) + }) + it('doesn’t automatically add a label', () => { const wrapper = mount(FormulateInput, { propsData: { type: 'text' } }) expect(wrapper.find('label').exists()).toBe(false)