1 files changed, 58 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/markdown/editor_mode_dropdown_spec.js b/spec/frontend/vue_shared/components/markdown/editor_mode_dropdown_spec.js
new file mode 100644
index 00000000000..34071775b9c
--- /dev/null
+++ b/spec/frontend/vue_shared/components/markdown/editor_mode_dropdown_spec.js
@@ -0,0 +1,58 @@
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import EditorModeDropdown from '~/vue_shared/components/markdown/editor_mode_dropdown.vue';
+
+describe('vue_shared/component/markdown/editor_mode_dropdown', () => {
+  let wrapper;
+
+  const createComponent = ({ value, size } = {}) => {
+    wrapper = shallowMount(EditorModeDropdown, {
+      propsData: {
+        value,
+        size,
+      },
+    });
+  };
+
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findDropdownItem = (text) =>
+    wrapper
+      .findAllComponents(GlDropdownItem)
+      .filter((item) => item.text().startsWith(text))
+      .at(0);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe.each`
+    modeText       | value         | dropdownText        | otherMode
+    ${'Rich text'} | ${'richText'} | ${'View markdown'}  | ${'Markdown'}
+    ${'Markdown'}  | ${'markdown'} | ${'View rich text'} | ${'Rich text'}
+  `('$modeText', ({ modeText, value, dropdownText, otherMode }) => {
+    beforeEach(() => {
+      createComponent({ value });
+    });
+
+    it('shows correct dropdown label', () => {
+      expect(findDropdown().props('text')).toEqual(dropdownText);
+    });
+
+    it('checks correct checked dropdown item', () => {
+      expect(findDropdownItem(modeText).props().isChecked).toBe(true);
+      expect(findDropdownItem(otherMode).props().isChecked).toBe(false);
+    });
+
+    it('emits event on click', () => {
+      findDropdownItem(modeText).vm.$emit('click');
+
+      expect(wrapper.emitted().input).toEqual([[value]]);
+    });
+  });
+
+  it('passes size to dropdown', () => {
+    createComponent({ size: 'small', value: 'markdown' });
+
+    expect(findDropdown().props('size')).toEqual('small');
+  });
+});