1 files changed, 25 insertions, 24 deletions

diff --git a/spec/frontend/vue_shared/components/markdown/header_spec.js b/spec/frontend/vue_shared/components/markdown/header_spec.js
index fec6abc9639..93ce3935fab 100644
--- a/spec/frontend/vue_shared/components/markdown/header_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/header_spec.js
@@ -1,20 +1,25 @@
-import { shallowMount } from '@vue/test-utils';
 import $ from 'jquery';
+import { nextTick } from 'vue';
+import { GlTabs } from '@gitlab/ui';
 import HeaderComponent from '~/vue_shared/components/markdown/header.vue';
 import ToolbarButton from '~/vue_shared/components/markdown/toolbar_button.vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 describe('Markdown field header component', () => {
   let wrapper;
 
   const createWrapper = (props) => {
-    wrapper = shallowMount(HeaderComponent, {
+    wrapper = shallowMountExtended(HeaderComponent, {
       propsData: {
         previewMarkdown: false,
         ...props,
       },
+      stubs: { GlTabs },
     });
   };
 
+  const findWriteTab = () => wrapper.findByTestId('write-tab');
+  const findPreviewTab = () => wrapper.findByTestId('preview-tab');
   const findToolbarButtons = () => wrapper.findAll(ToolbarButton);
   const findToolbarButtonByProp = (prop, value) =>
     findToolbarButtons()
@@ -33,7 +38,6 @@ describe('Markdown field header component', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('markdown header buttons', () => {
@@ -74,30 +78,29 @@ describe('Markdown field header component', () => {
     });
   });
 
-  it('renders `write` link as active when previewMarkdown is false', () => {
-    expect(wrapper.find('li:nth-child(1)').classes()).toContain('active');
+  it('activates `write` tab when previewMarkdown is false', () => {
+    expect(findWriteTab().attributes('active')).toBe('true');
+    expect(findPreviewTab().attributes('active')).toBeUndefined();
   });
 
-  it('renders `preview` link as active when previewMarkdown is true', () => {
+  it('activates `preview` tab when previewMarkdown is true', () => {
     createWrapper({ previewMarkdown: true });
 
-    expect(wrapper.find('li:nth-child(2)').classes()).toContain('active');
+    expect(findWriteTab().attributes('active')).toBeUndefined();
+    expect(findPreviewTab().attributes('active')).toBe('true');
   });
 
-  it('emits toggle markdown event when clicking preview', () => {
-    wrapper.find('.js-preview-link').trigger('click');
+  it('emits toggle markdown event when clicking preview tab', async () => {
+    const eventData = { target: {} };
+    findPreviewTab().vm.$emit('click', eventData);
 
-    return wrapper.vm
-      .$nextTick()
-      .then(() => {
-        expect(wrapper.emitted('preview-markdown').length).toEqual(1);
+    await nextTick();
+    expect(wrapper.emitted('preview-markdown').length).toEqual(1);
 
-        wrapper.find('.js-write-link').trigger('click');
-        return wrapper.vm.$nextTick();
-      })
-      .then(() => {
-        expect(wrapper.emitted('write-markdown').length).toEqual(1);
-      });
+    findWriteTab().vm.$emit('click', eventData);
+
+    await nextTick();
+    expect(wrapper.emitted('write-markdown').length).toEqual(1);
   });
 
   it('does not emit toggle markdown event when triggered from another form', () => {
@@ -112,12 +115,10 @@ describe('Markdown field header component', () => {
   });
 
   it('blurs preview link after click', () => {
-    const link = wrapper.find('li:nth-child(2) button');
-    jest.spyOn(HTMLElement.prototype, 'blur').mockImplementation();
-
-    link.trigger('click');
+    const target = { blur: jest.fn() };
+    findPreviewTab().vm.$emit('click', { target });
 
-    expect(link.element.blur).toHaveBeenCalled();
+    expect(target.blur).toHaveBeenCalled();
   });
 
   it('renders markdown table template', () => {