1 files changed, 17 insertions, 22 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 c8fe6c3131c..d30f36ec63c 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
@@ -13,6 +13,7 @@ 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 colorPreview = () => wrapper.find('[data-testid="color-preview"]');
   const colorPicker = () => wrapper.find(GlFormInput);
@@ -28,8 +29,6 @@ describe('ColorPicker', () => {
       '#428BCA': 'Moderate blue',
       '#44AD8E': 'Lime green',
     };
-
-    createComponent(shallowMount);
   });
 
   afterEach(() => {
@@ -38,6 +37,8 @@ describe('ColorPicker', () => {
 
   describe('label', () => {
     it('hides the label if the label is not passed', () => {
+      createComponent(shallowMount);
+
       expect(label()).toBe('');
     });
 
@@ -55,43 +56,37 @@ describe('ColorPicker', () => {
       expect(colorPreview().attributes('style')).toBe(undefined);
       expect(colorPicker().attributes('value')).toBe(undefined);
       expect(colorInput().props('value')).toBe('');
+      expect(colorPreview().attributes('class')).toContain('gl-inset-border-1-gray-400');
     });
 
     it('has a color set on initialization', () => {
-      createComponent(shallowMount, { setColor });
+      createComponent(mount, { value: setColor });
 
-      expect(wrapper.vm.$data.selectedColor).toBe(setColor);
+      expect(colorInput().props('value')).toBe(setColor);
     });
 
     it('emits input event from component when a color is selected', async () => {
       createComponent();
       await colorInput().setValue(setColor);
 
-      expect(wrapper.emitted().input[0]).toEqual([setColor]);
+      expect(wrapper.emitted().input[0]).toStrictEqual([setColor]);
     });
 
     it('trims spaces from submitted colors', async () => {
       createComponent();
       await colorInput().setValue(`    ${setColor}    `);
 
-      expect(wrapper.vm.$data.selectedColor).toBe(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');
     });
 
-    it('shows invalid feedback when an invalid color is used', async () => {
-      createComponent();
-      await colorInput().setValue('abcd');
-
-      expect(invalidFeedback().text()).toBe(
-        'Please enter a valid hex (#RRGGBB or #RGB) color value',
-      );
-      expect(wrapper.emitted().input).toBe(undefined);
-    });
-
-    it('shows an invalid feedback border on the preview when an invalid color is used', async () => {
-      createComponent();
-      await colorInput().setValue('abcd');
+    it('shows invalid feedback when the state is marked as invalid', async () => {
+      createComponent(mount, { invalidFeedback: invalidText, state: false });
 
+      expect(invalidFeedback().text()).toBe(invalidText);
       expect(colorPreview().attributes('class')).toContain('gl-inset-border-1-red-500');
+      expect(colorInput().attributes('class')).toContain('is-invalid');
     });
   });
 
@@ -100,14 +95,14 @@ describe('ColorPicker', () => {
       createComponent();
       await colorInput().setValue(setColor);
 
-      expect(wrapper.vm.$data.selectedColor).toBe(setColor);
+      expect(wrapper.emitted().input[0]).toStrictEqual([setColor]);
     });
 
     it('has color picker value entered', async () => {
       createComponent();
       await colorPicker().setValue(setColor);
 
-      expect(wrapper.vm.$data.selectedColor).toBe(setColor);
+      expect(wrapper.emitted().input[0]).toStrictEqual([setColor]);
     });
   });
 
@@ -132,7 +127,7 @@ describe('ColorPicker', () => {
       createComponent();
       await presetColors().at(0).trigger('click');
 
-      expect(wrapper.vm.$data.selectedColor).toBe(setColor);
+      expect(wrapper.emitted().input[0]).toStrictEqual([setColor]);
     });
   });
 });