Add latest changes from gitlab-org/gitlab@master

1 files changed, 85 insertions, 85 deletions

diff --git a/spec/frontend/blob/components/blob_header_spec.js b/spec/frontend/blob/components/blob_header_spec.js
index 46740958090..47e09bb38bc 100644
--- a/spec/frontend/blob/components/blob_header_spec.js
+++ b/spec/frontend/blob/components/blob_header_spec.js
@@ -1,9 +1,14 @@
 import { shallowMount, mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import BlobHeader from '~/blob/components/blob_header.vue';
 import DefaultActions from '~/blob/components/blob_header_default_actions.vue';
 import BlobFilepath from '~/blob/components/blob_header_filepath.vue';
 import ViewerSwitcher from '~/blob/components/blob_header_viewer_switcher.vue';
+import {
+  RICH_BLOB_VIEWER_TITLE,
+  SIMPLE_BLOB_VIEWER,
+  SIMPLE_BLOB_VIEWER_TITLE,
+} from '~/blob/components/constants';
 import TableContents from '~/blob/components/table_contents.vue';
 
 import { Blob } from './mock_data';
@@ -11,12 +16,26 @@ import { Blob } from './mock_data';
 describe('Blob Header Default Actions', () => {
   let wrapper;
 
-  function createComponent(blobProps = {}, options = {}, propsData = {}, shouldMount = false) {
-    const method = shouldMount ? mount : shallowMount;
-    const blobHash = 'foo-bar';
-    wrapper = method.call(this, BlobHeader, {
+  const defaultProvide = {
+    blobHash: 'foo-bar',
+  };
+
+  const findDefaultActions = () => wrapper.findComponent(DefaultActions);
+  const findTableContents = () => wrapper.findComponent(TableContents);
+  const findViewSwitcher = () => wrapper.findComponent(ViewerSwitcher);
+  const findBlobFilePath = () => wrapper.findComponent(BlobFilepath);
+  const findRichTextEditorBtn = () => wrapper.findByLabelText(RICH_BLOB_VIEWER_TITLE);
+  const findSimpleTextEditorBtn = () => wrapper.findByLabelText(SIMPLE_BLOB_VIEWER_TITLE);
+
+  function createComponent({
+    blobProps = {},
+    options = {},
+    propsData = {},
+    mountFn = shallowMount,
+  } = {}) {
+    wrapper = mountFn(BlobHeader, {
       provide: {
-        blobHash,
+        ...defaultProvide,
       },
       propsData: {
         blob: { ...Blob, ...blobProps },
@@ -26,143 +45,123 @@ describe('Blob Header Default Actions', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('rendering', () => {
-    const findDefaultActions = () => wrapper.findComponent(DefaultActions);
-
-    const slots = {
-      prepend: 'Foo Prepend',
-      actions: 'Actions Bar',
-    };
-
     it('matches the snapshot', () => {
       createComponent();
       expect(wrapper.element).toMatchSnapshot();
     });
 
-    it('renders all components', () => {
-      createComponent();
-      expect(wrapper.findComponent(TableContents).exists()).toBe(true);
-      expect(wrapper.findComponent(ViewerSwitcher).exists()).toBe(true);
-      expect(findDefaultActions().exists()).toBe(true);
-      expect(wrapper.findComponent(BlobFilepath).exists()).toBe(true);
+    describe('default render', () => {
+      it.each`
+        findComponent         | componentName
+        ${findTableContents}  | ${'TableContents'}
+        ${findViewSwitcher}   | ${'ViewSwitcher'}
+        ${findDefaultActions} | ${'DefaultActions'}
+        ${findBlobFilePath}   | ${'BlobFilePath'}
+      `('renders $componentName component by default', ({ findComponent }) => {
+        createComponent();
+
+        expect(findComponent().exists()).toBe(true);
+      });
     });
 
     it('does not render viewer switcher if the blob has only the simple viewer', () => {
       createComponent({
-        richViewer: null,
+        blobProps: {
+          richViewer: null,
+        },
       });
-      expect(wrapper.findComponent(ViewerSwitcher).exists()).toBe(false);
+      expect(findViewSwitcher().exists()).toBe(false);
     });
 
     it('does not render viewer switcher if a corresponding prop is passed', () => {
-      createComponent(
-        {},
-        {},
-        {
+      createComponent({
+        propsData: {
           hideViewerSwitcher: true,
         },
-      );
-      expect(wrapper.findComponent(ViewerSwitcher).exists()).toBe(false);
+      });
+      expect(findViewSwitcher().exists()).toBe(false);
     });
 
     it('does not render default actions is corresponding prop is passed', () => {
-      createComponent(
-        {},
-        {},
-        {
+      createComponent({
+        propsData: {
           hideDefaultActions: true,
         },
-      );
-      expect(wrapper.findComponent(DefaultActions).exists()).toBe(false);
+      });
+      expect(findDefaultActions().exists()).toBe(false);
     });
 
-    Object.keys(slots).forEach((slot) => {
-      it('renders the slots', () => {
-        const slotContent = slots[slot];
-        createComponent(
-          {},
-          {
-            scopedSlots: {
-              [slot]: `<span>${slotContent}</span>`,
-            },
+    it.each`
+      slotContent      | key
+      ${'Foo Prepend'} | ${'prepend'}
+      ${'Actions Bar'} | ${'actions'}
+    `('renders the slot $key', ({ key, slotContent }) => {
+      createComponent({
+        options: {
+          scopedSlots: {
+            [key]: `<span>${slotContent}</span>`,
           },
-          {},
-          true,
-        );
-        expect(wrapper.text()).toContain(slotContent);
+        },
+        mountFn: mount,
       });
+      expect(wrapper.text()).toContain(slotContent);
     });
 
     it('passes information about render error down to default actions', () => {
-      createComponent(
-        {},
-        {},
-        {
+      createComponent({
+        propsData: {
           hasRenderError: true,
         },
-      );
+      });
       expect(findDefaultActions().props('hasRenderError')).toBe(true);
     });
 
     it('passes the correct isBinary value to default actions when viewing a binary file', () => {
-      createComponent({}, {}, { isBinary: true });
+      createComponent({ propsData: { isBinary: true } });
 
       expect(findDefaultActions().props('isBinary')).toBe(true);
     });
   });
 
   describe('functionality', () => {
-    const newViewer = 'Foo Bar';
-    const activeViewerType = 'Alpha Beta';
-
     const factory = (hideViewerSwitcher = false) => {
-      createComponent(
-        {},
-        {},
-        {
-          activeViewerType,
+      createComponent({
+        propsData: {
+          activeViewerType: SIMPLE_BLOB_VIEWER,
           hideViewerSwitcher,
         },
-      );
+        mountFn: mountExtended,
+      });
     };
 
-    it('by default sets viewer data based on activeViewerType', () => {
+    it('shows the correctly selected view by default', () => {
       factory();
-      expect(wrapper.vm.viewer).toBe(activeViewerType);
+
+      expect(findViewSwitcher().exists()).toBe(true);
+      expect(findRichTextEditorBtn().props().selected).toBe(false);
+      expect(findSimpleTextEditorBtn().props().selected).toBe(true);
     });
 
-    it('sets viewer to null if the viewer switcher should be hidden', () => {
+    it('Does not show the viewer switcher should be hidden', () => {
       factory(true);
-      expect(wrapper.vm.viewer).toBe(null);
+
+      expect(findViewSwitcher().exists()).toBe(false);
     });
 
     it('watches the changes in viewer data and emits event when the change is registered', async () => {
       factory();
-      jest.spyOn(wrapper.vm, '$emit');
-      wrapper.vm.viewer = newViewer;
 
-      await nextTick();
-      expect(wrapper.vm.$emit).toHaveBeenCalledWith('viewer-changed', newViewer);
-    });
-
-    it('does not emit event if the switcher is not rendered', async () => {
-      factory(true);
-
-      expect(wrapper.vm.showViewerSwitcher).toBe(false);
-      jest.spyOn(wrapper.vm, '$emit');
-      wrapper.vm.viewer = newViewer;
+      await findRichTextEditorBtn().trigger('click');
 
-      await nextTick();
-      expect(wrapper.vm.$emit).not.toHaveBeenCalled();
+      expect(wrapper.emitted('viewer-changed')).toBeDefined();
     });
 
     it('sets different icons depending on the blob file type', async () => {
       factory();
-      expect(wrapper.vm.blobSwitcherDocIcon).toBe('document');
+
+      expect(findViewSwitcher().props('docIcon')).toBe('document');
+
       await wrapper.setProps({
         blob: {
           ...Blob,
@@ -172,7 +171,8 @@ describe('Blob Header Default Actions', () => {
           },
         },
       });
-      expect(wrapper.vm.blobSwitcherDocIcon).toBe('table');
+
+      expect(findViewSwitcher().props('docIcon')).toBe('table');
     });
   });
 });