Add latest changes from gitlab-org/gitlab@master

4 files changed, 109 insertions, 57 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');
+  });
+});
diff --git a/spec/frontend/vue_shared/components/markdown/field_spec.js b/spec/frontend/vue_shared/components/markdown/field_spec.js
index 285ea10c813..3b8e78bbadd 100644
--- a/spec/frontend/vue_shared/components/markdown/field_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/field_spec.js
@@ -37,7 +37,7 @@ describe('Markdown field component', () => {
     axiosMock.restore();
   });
 
-  function createSubject({ lines = [], enablePreview = true } = {}) {
+  function createSubject({ lines = [], enablePreview = true, showContentEditorSwitcher } = {}) {
     // We actually mount a wrapper component so that we can force Vue to rerender classes in order to test a regression
     // caused by mixing Vanilla JS and Vue.
     subject = mountExtended(
@@ -68,6 +68,7 @@ describe('Markdown field component', () => {
           lines,
           enablePreview,
           restrictedToolBarItems,
+          showContentEditorSwitcher,
         },
       },
     );
@@ -191,6 +192,7 @@ describe('Markdown field component', () => {
           markdownDocsPath,
           quickActionsDocsPath: '',
           showCommentToolBar: true,
+          showContentEditorSwitcher: false,
         });
       });
     });
@@ -342,4 +344,18 @@ describe('Markdown field component', () => {
       restrictedToolBarItems,
     );
   });
+
+  describe('showContentEditorSwitcher', () => {
+    it('defaults to false', () => {
+      createSubject();
+
+      expect(findMarkdownToolbar().props('showContentEditorSwitcher')).toBe(false);
+    });
+
+    it('passes showContentEditorSwitcher', () => {
+      createSubject({ showContentEditorSwitcher: true });
+
+      expect(findMarkdownToolbar().props('showContentEditorSwitcher')).toBe(true);
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js b/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js
index 5f416db2676..64b4b55fce5 100644
--- a/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js
@@ -1,4 +1,3 @@
-import { GlSegmentedControl } from '@gitlab/ui';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
@@ -49,7 +48,6 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
       },
     });
   };
-  const findSegmentedControl = () => wrapper.findComponent(GlSegmentedControl);
   const findMarkdownField = () => wrapper.findComponent(MarkdownField);
   const findTextarea = () => wrapper.find('textarea');
   const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
@@ -97,36 +95,26 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
     expect(findTextarea().element.value).toBe(value);
   });
 
-  it('renders switch segmented control', () => {
+  it(`emits ${EDITING_MODE_CONTENT_EDITOR} event when enableContentEditor emitted from markdown editor`, () => {
     buildWrapper();
 
-    expect(findSegmentedControl().props()).toEqual({
-      checked: EDITING_MODE_MARKDOWN_FIELD,
-      options: [
-        {
-          text: expect.any(String),
-          value: EDITING_MODE_MARKDOWN_FIELD,
-        },
-        {
-          text: expect.any(String),
-          value: EDITING_MODE_CONTENT_EDITOR,
-        },
-      ],
-    });
+    findMarkdownField().vm.$emit('enableContentEditor');
+
+    expect(wrapper.emitted(EDITING_MODE_CONTENT_EDITOR)).toHaveLength(1);
   });
 
-  describe.each`
-    editingMode
-    ${EDITING_MODE_CONTENT_EDITOR}
-    ${EDITING_MODE_MARKDOWN_FIELD}
-  `('when segmented control emits change event with $editingMode value', ({ editingMode }) => {
-    it(`emits ${editingMode} event`, () => {
-      buildWrapper();
+  it(`emits ${EDITING_MODE_MARKDOWN_FIELD} event when enableMarkdownEditor emitted from content editor`, async () => {
+    buildWrapper({
+      stubs: { ContentEditor: stubComponent(ContentEditor) },
+    });
 
-      findSegmentedControl().vm.$emit('change', editingMode);
+    findMarkdownField().vm.$emit('enableContentEditor');
 
-      expect(wrapper.emitted(editingMode)).toHaveLength(1);
-    });
+    await nextTick();
+
+    findContentEditor().vm.$emit('enableMarkdownEditor');
+
+    expect(wrapper.emitted(EDITING_MODE_MARKDOWN_FIELD)).toHaveLength(1);
   });
 
   describe(`when editingMode is ${EDITING_MODE_MARKDOWN_FIELD}`, () => {
@@ -159,11 +147,10 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
       expect(wrapper.emitted('keydown')).toHaveLength(1);
     });
 
-    describe(`when segmented control triggers input event with ${EDITING_MODE_CONTENT_EDITOR} value`, () => {
+    describe(`when markdown field triggers enableContentEditor event`, () => {
       beforeEach(() => {
         buildWrapper();
-        findSegmentedControl().vm.$emit('input', EDITING_MODE_CONTENT_EDITOR);
-        findSegmentedControl().vm.$emit('change', EDITING_MODE_CONTENT_EDITOR);
+        findMarkdownField().vm.$emit('enableContentEditor');
       });
 
       it('displays the content editor', () => {
@@ -202,7 +189,7 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
   describe(`when editingMode is ${EDITING_MODE_CONTENT_EDITOR}`, () => {
     beforeEach(() => {
       buildWrapper();
-      findSegmentedControl().vm.$emit('input', EDITING_MODE_CONTENT_EDITOR);
+      findMarkdownField().vm.$emit('enableContentEditor');
     });
 
     describe('when autofocus is true', () => {
@@ -234,9 +221,9 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
       expect(wrapper.emitted('keydown')).toEqual([[event]]);
     });
 
-    describe(`when segmented control triggers input event with ${EDITING_MODE_MARKDOWN_FIELD} value`, () => {
+    describe(`when richText editor triggers enableMarkdownEditor event`, () => {
       beforeEach(() => {
-        findSegmentedControl().vm.$emit('input', EDITING_MODE_MARKDOWN_FIELD);
+        findContentEditor().vm.$emit('enableMarkdownEditor');
       });
 
       it('hides the content editor', () => {
@@ -251,29 +238,5 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
         expect(findLocalStorageSync().props().value).toBe(EDITING_MODE_MARKDOWN_FIELD);
       });
     });
-
-    describe('when content editor emits loading event', () => {
-      beforeEach(() => {
-        findContentEditor().vm.$emit('loading');
-      });
-
-      it('disables switch editing mode control', () => {
-        // This is the only way that I found to check the segmented control is disabled
-        expect(findSegmentedControl().find('input[disabled]').exists()).toBe(true);
-      });
-
-      describe.each`
-        event
-        ${'loadingSuccess'}
-        ${'loadingError'}
-      `('when content editor emits $event event', ({ event }) => {
-        beforeEach(() => {
-          findContentEditor().vm.$emit(event);
-        });
-        it('enables the switch editing mode control', () => {
-          expect(findSegmentedControl().find('input[disabled]').exists()).toBe(false);
-        });
-      });
-    });
   });
 });
diff --git a/spec/frontend/vue_shared/components/markdown/toolbar_spec.js b/spec/frontend/vue_shared/components/markdown/toolbar_spec.js
index f698794b951..b1a1dbbeb7a 100644
--- a/spec/frontend/vue_shared/components/markdown/toolbar_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/toolbar_spec.js
@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import Toolbar from '~/vue_shared/components/markdown/toolbar.vue';
+import EditorModeDropdown from '~/vue_shared/components/markdown/editor_mode_dropdown.vue';
 
 describe('toolbar', () => {
   let wrapper;
@@ -47,4 +48,18 @@ describe('toolbar', () => {
       expect(wrapper.find('.comment-toolbar').exists()).toBe(true);
     });
   });
+
+  describe('with content editor switcher', () => {
+    beforeEach(() => {
+      createMountedWrapper({
+        showContentEditorSwitcher: true,
+      });
+    });
+
+    it('re-emits event from switcher', () => {
+      wrapper.findComponent(EditorModeDropdown).vm.$emit('input', 'richText');
+
+      expect(wrapper.emitted('enableContentEditor')).toEqual([[]]);
+    });
+  });
 });