1 files changed, 46 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_value_spec.js b/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_value_spec.js
new file mode 100644
index 00000000000..f22592dd604
--- /dev/null
+++ b/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_value_spec.js
@@ -0,0 +1,46 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+import ColorItem from '~/vue_shared/components/color_select_dropdown/color_item.vue';
+import DropdownValue from '~/vue_shared/components/color_select_dropdown/dropdown_value.vue';
+
+import { color } from './mock_data';
+
+const propsData = {
+  selectedColor: color,
+};
+
+describe('DropdownValue', () => {
+  let wrapper;
+
+  const findColorItems = () => wrapper.findAllComponents(ColorItem);
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(DropdownValue, { propsData });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when there is a color set', () => {
+    it('renders the color', () => {
+      expect(findColorItems()).toHaveLength(2);
+    });
+
+    it.each`
+      index | cssClass
+      ${0}  | ${['gl-font-base', 'gl-line-height-24']}
+      ${1}  | ${['hide-collapsed']}
+    `(
+      'passes correct props to the ColorItem with CSS class `$cssClass`',
+      async ({ index, cssClass }) => {
+        expect(findColorItems().at(index).props()).toMatchObject(propsData.selectedColor);
+        expect(findColorItems().at(index).classes()).toEqual(cssClass);
+      },
+    );
+  });
+});