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]);
     });