diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/color_picker/color_picker_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/color_picker/color_picker_spec.js | 41 |
1 files changed, 30 insertions, 11 deletions
diff --git a/spec/frontend/vue_shared/components/color_picker/color_picker_spec.js b/spec/frontend/vue_shared/components/color_picker/color_picker_spec.js index 28b3bf5287a..8cbe0630426 100644 --- a/spec/frontend/vue_shared/components/color_picker/color_picker_spec.js +++ b/spec/frontend/vue_shared/components/color_picker/color_picker_spec.js @@ -3,6 +3,8 @@ import { mount, shallowMount } from '@vue/test-utils'; import ColorPicker from '~/vue_shared/components/color_picker/color_picker.vue'; +jest.mock('lodash/uniqueId', () => (prefix) => (prefix ? `${prefix}1` : 1)); + describe('ColorPicker', () => { let wrapper; @@ -14,10 +16,11 @@ describe('ColorPicker', () => { const setColor = '#000000'; const invalidText = 'Please enter a valid hex (#RRGGBB or #RGB) color value'; - const label = () => wrapper.find(GlFormGroup).attributes('label'); + const findGlFormGroup = () => wrapper.find(GlFormGroup); const colorPreview = () => wrapper.find('[data-testid="color-preview"]'); const colorPicker = () => wrapper.find(GlFormInput); - const colorInput = () => wrapper.find(GlFormInputGroup).find('input[type="text"]'); + const colorInput = () => wrapper.find('input[type="color"]'); + const colorTextInput = () => wrapper.find(GlFormInputGroup).find('input[type="text"]'); const invalidFeedback = () => wrapper.find('.invalid-feedback'); const description = () => wrapper.find(GlFormGroup).attributes('description'); const presetColors = () => wrapper.findAll(GlLink); @@ -39,13 +42,29 @@ describe('ColorPicker', () => { it('hides the label if the label is not passed', () => { createComponent(shallowMount); - expect(label()).toBe(''); + expect(findGlFormGroup().attributes('label')).toBe(''); }); it('shows the label if the label is passed', () => { createComponent(shallowMount, { label: 'test' }); - expect(label()).toBe('test'); + expect(findGlFormGroup().attributes('label')).toBe('test'); + }); + + describe.each` + desc | id + ${'with prop id'} | ${'test-id'} + ${'without prop id'} | ${undefined} + `('$desc', ({ id }) => { + beforeEach(() => { + createComponent(mount, { id, label: 'test' }); + }); + + it('renders the same `ID` for input and `for` for label', () => { + expect(findGlFormGroup().find('label').attributes('for')).toBe( + colorInput().attributes('id'), + ); + }); }); }); @@ -55,30 +74,30 @@ describe('ColorPicker', () => { expect(colorPreview().attributes('style')).toBe(undefined); expect(colorPicker().attributes('value')).toBe(undefined); - expect(colorInput().props('value')).toBe(''); + expect(colorTextInput().props('value')).toBe(''); expect(colorPreview().attributes('class')).toContain('gl-inset-border-1-gray-400'); }); it('has a color set on initialization', () => { createComponent(mount, { value: setColor }); - expect(colorInput().props('value')).toBe(setColor); + expect(colorTextInput().props('value')).toBe(setColor); }); it('emits input event from component when a color is selected', async () => { createComponent(); - await colorInput().setValue(setColor); + await colorTextInput().setValue(setColor); expect(wrapper.emitted().input[0]).toStrictEqual([setColor]); }); it('trims spaces from submitted colors', async () => { createComponent(); - await colorInput().setValue(` ${setColor} `); + await colorTextInput().setValue(` ${setColor} `); expect(wrapper.emitted().input[0]).toStrictEqual([setColor]); expect(colorPreview().attributes('class')).toContain('gl-inset-border-1-gray-400'); - expect(colorInput().attributes('class')).not.toContain('is-invalid'); + expect(colorTextInput().attributes('class')).not.toContain('is-invalid'); }); it('shows invalid feedback when the state is marked as invalid', async () => { @@ -86,14 +105,14 @@ describe('ColorPicker', () => { expect(invalidFeedback().text()).toBe(invalidText); expect(colorPreview().attributes('class')).toContain('gl-inset-border-1-red-500'); - expect(colorInput().attributes('class')).toContain('is-invalid'); + expect(colorTextInput().attributes('class')).toContain('is-invalid'); }); }); describe('inputs', () => { it('has color input value entered', async () => { createComponent(); - await colorInput().setValue(setColor); + await colorTextInput().setValue(setColor); expect(wrapper.emitted().input[0]).toStrictEqual([setColor]); }); |