Add latest changes from gitlab-org/gitlab@master

4 files changed, 210 insertions, 40 deletions

diff --git a/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap
new file mode 100644
index 00000000000..b77ca28b9d8
--- /dev/null
+++ b/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Blob Header Default Actions rendering matches the snapshot 1`] = `
+<div
+  class="js-file-title file-title-flex-parent"
+>
+  <blob-filepath-stub
+    blob="[object Object]"
+  />
+   
+  <div
+    class="file-actions d-none d-sm-block"
+  >
+    <viewer-switcher-stub
+      activeviewer="rich"
+      blob="[object Object]"
+    />
+      
+    <default-actions-stub
+      activeviewer="rich"
+      blob="[object Object]"
+    />
+  </div>
+</div>
+`;
diff --git a/spec/frontend/blob/components/blob_header_default_actions_spec.js b/spec/frontend/blob/components/blob_header_default_actions_spec.js
index 348d68514a3..fe0edffd12d 100644
--- a/spec/frontend/blob/components/blob_header_default_actions_spec.js
+++ b/spec/frontend/blob/components/blob_header_default_actions_spec.js
@@ -4,9 +4,11 @@ import {
   BTN_COPY_CONTENTS_TITLE,
   BTN_DOWNLOAD_TITLE,
   BTN_RAW_TITLE,
+  RICH_BLOB_VIEWER,
 } from '~/blob/components/constants';
 import { GlButtonGroup, GlButton } from '@gitlab/ui';
 import { Blob } from './mock_data';
+import eventHub from '~/blob/event_hub';
 
 describe('Blob Header Default Actions', () => {
   let wrapper;
@@ -14,10 +16,11 @@ describe('Blob Header Default Actions', () => {
   let buttons;
   const hrefPrefix = 'http://localhost';
 
-  function createComponent(props = {}) {
+  function createComponent(blobProps = {}, propsData = {}) {
     wrapper = mount(BlobHeaderActions, {
       propsData: {
-        blob: Object.assign({}, Blob, props),
+        blob: Object.assign({}, Blob, blobProps),
+        ...propsData,
       },
     });
   }
@@ -51,14 +54,30 @@ describe('Blob Header Default Actions', () => {
     it('correct href attribute on Download button', () => {
       expect(buttons.at(2).vm.$el.href).toBe(`${hrefPrefix}${Blob.rawPath}?inline=false`);
     });
+
+    it('does not render "Copy file contents" button as disables if the viewer is Simple', () => {
+      expect(buttons.at(0).attributes('disabled')).toBeUndefined();
+    });
+
+    it('renders "Copy file contents" button as disables if the viewer is Rich', () => {
+      createComponent(
+        {},
+        {
+          activeViewer: RICH_BLOB_VIEWER,
+        },
+      );
+      buttons = wrapper.findAll(GlButton);
+
+      expect(buttons.at(0).attributes('disabled')).toBeTruthy();
+    });
   });
 
   describe('functionally', () => {
     it('emits an event when a Copy Contents button is clicked', () => {
-      jest.spyOn(wrapper.vm, '$emit');
+      jest.spyOn(eventHub, '$emit');
       buttons.at(0).vm.$emit('click');
 
-      expect(wrapper.vm.$emit).toHaveBeenCalledWith('copy');
+      expect(eventHub.$emit).toHaveBeenCalledWith('copy');
     });
   });
 });
diff --git a/spec/frontend/blob/components/blob_header_spec.js b/spec/frontend/blob/components/blob_header_spec.js
new file mode 100644
index 00000000000..7d1443fb069
--- /dev/null
+++ b/spec/frontend/blob/components/blob_header_spec.js
@@ -0,0 +1,133 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import BlobHeader from '~/blob/components/blob_header.vue';
+import ViewerSwitcher from '~/blob/components/blob_header_viewer_switcher.vue';
+import DefaultActions from '~/blob/components/blob_header_default_actions.vue';
+import BlobFilepath from '~/blob/components/blob_header_filepath.vue';
+import eventHub from '~/blob/event_hub';
+
+import { Blob } from './mock_data';
+
+describe('Blob Header Default Actions', () => {
+  let wrapper;
+
+  function createComponent(blobProps = {}, options = {}, propsData = {}, shouldMount = false) {
+    const method = shouldMount ? mount : shallowMount;
+    wrapper = method.call(this, BlobHeader, {
+      propsData: {
+        blob: Object.assign({}, Blob, blobProps),
+        ...propsData,
+      },
+      ...options,
+    });
+  }
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('rendering', () => {
+    const slots = {
+      prepend: 'Foo Prepend',
+      actions: 'Actions Bar',
+    };
+
+    it('matches the snapshot', () => {
+      createComponent();
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('renders all components', () => {
+      createComponent();
+      expect(wrapper.find(ViewerSwitcher).exists()).toBe(true);
+      expect(wrapper.find(DefaultActions).exists()).toBe(true);
+      expect(wrapper.find(BlobFilepath).exists()).toBe(true);
+    });
+
+    it('does not render viewer switcher if the blob has only the simple viewer', () => {
+      createComponent({
+        richViewer: null,
+      });
+      expect(wrapper.find(ViewerSwitcher).exists()).toBe(false);
+    });
+
+    it('does not render viewer switcher if a corresponding prop is passed', () => {
+      createComponent(
+        {},
+        {},
+        {
+          hideViewerSwitcher: true,
+        },
+      );
+      expect(wrapper.find(ViewerSwitcher).exists()).toBe(false);
+    });
+
+    it('does not render default actions is corresponding prop is passed', () => {
+      createComponent(
+        {},
+        {},
+        {
+          hideDefaultActions: true,
+        },
+      );
+      expect(wrapper.find(DefaultActions).exists()).toBe(false);
+    });
+
+    Object.keys(slots).forEach(slot => {
+      it('renders the slots', () => {
+        const slotContent = slots[slot];
+        createComponent(
+          {},
+          {
+            scopedSlots: {
+              [slot]: `<span>${slotContent}</span>`,
+            },
+          },
+          {},
+          true,
+        );
+        expect(wrapper.text()).toContain(slotContent);
+      });
+    });
+  });
+
+  describe('functionality', () => {
+    const newViewer = 'Foo Bar';
+
+    it('listens to "switch-view" event when viewer switcher is shown and updates activeViewer', () => {
+      expect(wrapper.vm.showViewerSwitcher).toBe(true);
+      eventHub.$emit('switch-viewer', newViewer);
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.vm.activeViewer).toBe(newViewer);
+      });
+    });
+
+    it('does not update active viewer if the switcher is not shown', () => {
+      const activeViewer = 'Alpha Beta';
+      createComponent(
+        {},
+        {
+          data() {
+            return {
+              activeViewer,
+            };
+          },
+        },
+        {
+          hideViewerSwitcher: true,
+        },
+      );
+
+      expect(wrapper.vm.showViewerSwitcher).toBe(false);
+      eventHub.$emit('switch-viewer', newViewer);
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.vm.activeViewer).toBe(activeViewer);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js b/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js
index ff0b005f441..88e9eeea994 100644
--- a/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js
+++ b/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js
@@ -8,14 +8,16 @@ import {
 } from '~/blob/components/constants';
 import { GlButtonGroup, GlButton } from '@gitlab/ui';
 import { Blob } from './mock_data';
+import eventHub from '~/blob/event_hub';
 
 describe('Blob Header Viewer Switcher', () => {
   let wrapper;
 
-  function createComponent(props = {}) {
+  function createComponent(blobProps = {}, propsData = {}) {
     wrapper = mount(BlobHeaderViewerSwitcher, {
       propsData: {
-        blob: Object.assign({}, Blob, props),
+        blob: Object.assign({}, Blob, blobProps),
+        ...propsData,
       },
     });
   }
@@ -25,14 +27,9 @@ describe('Blob Header Viewer Switcher', () => {
   });
 
   describe('intiialization', () => {
-    it('is initialized with rich viewer as preselected when richViewer exists', () => {
+    it('is initialized with simple viewer as active', () => {
       createComponent();
-      expect(wrapper.vm.viewer).toBe(RICH_BLOB_VIEWER);
-    });
-
-    it('is initialized with simple viewer as preselected when richViewer does not exists', () => {
-      createComponent({ richViewer: null });
-      expect(wrapper.vm.viewer).toBe(SIMPLE_BLOB_VIEWER);
+      expect(wrapper.vm.activeViewer).toBe(SIMPLE_BLOB_VIEWER);
     });
   });
 
@@ -63,47 +60,43 @@ describe('Blob Header Viewer Switcher', () => {
     let simpleBtn;
     let richBtn;
 
-    beforeEach(() => {
-      createComponent();
+    function factory(propsOptions = {}) {
+      createComponent({}, propsOptions);
       buttons = wrapper.findAll(GlButton);
       simpleBtn = buttons.at(0);
       richBtn = buttons.at(1);
-    });
+
+      jest.spyOn(eventHub, '$emit');
+    }
 
     it('does not switch the viewer if the selected one is already active', () => {
-      jest.spyOn(wrapper.vm, '$emit');
+      factory();
+      expect(wrapper.vm.activeViewer).toBe(SIMPLE_BLOB_VIEWER);
+      simpleBtn.vm.$emit('click');
+      expect(wrapper.vm.activeViewer).toBe(SIMPLE_BLOB_VIEWER);
+      expect(eventHub.$emit).not.toHaveBeenCalled();
+    });
+
+    it('emits an event when a Rich Viewer button is clicked', () => {
+      factory();
+      expect(wrapper.vm.activeViewer).toBe(SIMPLE_BLOB_VIEWER);
 
-      expect(wrapper.vm.viewer).toBe(RICH_BLOB_VIEWER);
       richBtn.vm.$emit('click');
-      expect(wrapper.vm.viewer).toBe(RICH_BLOB_VIEWER);
-      expect(wrapper.vm.$emit).not.toHaveBeenCalled();
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(eventHub.$emit).toHaveBeenCalledWith('switch-viewer', RICH_BLOB_VIEWER);
+      });
     });
 
     it('emits an event when a Simple Viewer button is clicked', () => {
-      jest.spyOn(wrapper.vm, '$emit');
-
+      factory({
+        activeViewer: RICH_BLOB_VIEWER,
+      });
       simpleBtn.vm.$emit('click');
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.viewer).toBe(SIMPLE_BLOB_VIEWER);
-        expect(wrapper.vm.$emit).toHaveBeenCalledWith('switch-viewer', SIMPLE_BLOB_VIEWER);
+        expect(eventHub.$emit).toHaveBeenCalledWith('switch-viewer', SIMPLE_BLOB_VIEWER);
       });
     });
-
-    it('emits an event when a Rich Viewer button is clicked', () => {
-      jest.spyOn(wrapper.vm, '$emit');
-
-      wrapper.setData({ viewer: SIMPLE_BLOB_VIEWER });
-
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          richBtn.vm.$emit('click');
-        })
-        .then(() => {
-          expect(wrapper.vm.viewer).toBe(RICH_BLOB_VIEWER);
-          expect(wrapper.vm.$emit).toHaveBeenCalledWith('switch-viewer', RICH_BLOB_VIEWER);
-        });
-    });
   });
 });