1 files changed, 128 insertions, 27 deletions

diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
index b662a1d20a9..f03df8cf2ac 100644
--- a/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -1,14 +1,17 @@
 import { GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import BlobContent from '~/blob/components/blob_content.vue';
 import BlobHeader from '~/blob/components/blob_header.vue';
 import BlobContentViewer from '~/repository/components/blob_content_viewer.vue';
+import BlobHeaderEdit from '~/repository/components/blob_header_edit.vue';
 
 let wrapper;
-const mockData = {
+const simpleMockData = {
   name: 'some_file.js',
   size: 123,
-  rawBlob: 'raw content',
+  rawSize: 123,
+  rawTextBlob: 'raw content',
   type: 'text',
   fileType: 'text',
   tooLarge: false,
@@ -25,62 +28,160 @@ const mockData = {
   lockLink: 'some_file.js/lock',
   canModifyBlob: true,
   forkPath: 'some_file.js/fork',
-  simpleViewer: {},
-  richViewer: {},
+  simpleViewer: {
+    fileType: 'text',
+    tooLarge: false,
+    type: 'simple',
+    renderError: null,
+  },
+  richViewer: null,
+};
+const richMockData = {
+  ...simpleMockData,
+  richViewer: {
+    fileType: 'markup',
+    tooLarge: false,
+    type: 'rich',
+    renderError: null,
+  },
 };
 
-function factory(path, loading = false) {
-  wrapper = shallowMount(BlobContentViewer, {
+const createFactory = (mountFn) => (
+  { props = {}, mockData = {}, stubs = {} } = {},
+  loading = false,
+) => {
+  wrapper = mountFn(BlobContentViewer, {
     propsData: {
-      path,
+      path: 'some_file.js',
+      projectPath: 'some/path',
+      ...props,
     },
     mocks: {
       $apollo: {
         queries: {
-          blobInfo: {
+          project: {
             loading,
           },
         },
       },
     },
+    stubs,
   });
 
-  wrapper.setData({ blobInfo: mockData });
-}
+  wrapper.setData(mockData);
+};
+
+const factory = createFactory(shallowMount);
+const fullFactory = createFactory(mount);
 
 describe('Blob content viewer component', () => {
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
   const findBlobHeader = () => wrapper.find(BlobHeader);
+  const findBlobHeaderEdit = () => wrapper.find(BlobHeaderEdit);
   const findBlobContent = () => wrapper.find(BlobContent);
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  beforeEach(() => {
-    factory('some_file.js');
-  });
-
   it('renders a GlLoadingIcon component', () => {
-    factory('some_file.js', true);
+    factory({ mockData: { blobInfo: simpleMockData } }, true);
 
     expect(findLoadingIcon().exists()).toBe(true);
   });
 
-  it('renders a BlobHeader component', () => {
-    expect(findBlobHeader().exists()).toBe(true);
+  describe('simple viewer', () => {
+    beforeEach(() => {
+      factory({ mockData: { blobInfo: simpleMockData } });
+    });
+
+    it('renders a BlobHeader component', () => {
+      expect(findBlobHeader().props('activeViewerType')).toEqual('simple');
+      expect(findBlobHeader().props('hasRenderError')).toEqual(false);
+      expect(findBlobHeader().props('hideViewerSwitcher')).toEqual(true);
+      expect(findBlobHeader().props('blob')).toEqual(simpleMockData);
+    });
+
+    it('renders a BlobContent component', () => {
+      expect(findBlobContent().props('loading')).toEqual(false);
+      expect(findBlobContent().props('content')).toEqual('raw content');
+      expect(findBlobContent().props('isRawContent')).toBe(true);
+      expect(findBlobContent().props('activeViewer')).toEqual({
+        fileType: 'text',
+        tooLarge: false,
+        type: 'simple',
+        renderError: null,
+      });
+    });
+  });
+
+  describe('rich viewer', () => {
+    beforeEach(() => {
+      factory({
+        mockData: { blobInfo: richMockData, activeViewerType: 'rich' },
+      });
+    });
+
+    it('renders a BlobHeader component', () => {
+      expect(findBlobHeader().props('activeViewerType')).toEqual('rich');
+      expect(findBlobHeader().props('hasRenderError')).toEqual(false);
+      expect(findBlobHeader().props('hideViewerSwitcher')).toEqual(false);
+      expect(findBlobHeader().props('blob')).toEqual(richMockData);
+    });
+
+    it('renders a BlobContent component', () => {
+      expect(findBlobContent().props('loading')).toEqual(false);
+      expect(findBlobContent().props('content')).toEqual('raw content');
+      expect(findBlobContent().props('isRawContent')).toBe(true);
+      expect(findBlobContent().props('activeViewer')).toEqual({
+        fileType: 'markup',
+        tooLarge: false,
+        type: 'rich',
+        renderError: null,
+      });
+    });
+
+    it('updates viewer type when viewer changed is clicked', async () => {
+      expect(findBlobContent().props('activeViewer')).toEqual(
+        expect.objectContaining({
+          type: 'rich',
+        }),
+      );
+      expect(findBlobHeader().props('activeViewerType')).toEqual('rich');
+
+      findBlobHeader().vm.$emit('viewer-changed', 'simple');
+      await nextTick();
+
+      expect(findBlobHeader().props('activeViewerType')).toEqual('simple');
+      expect(findBlobContent().props('activeViewer')).toEqual(
+        expect.objectContaining({
+          type: 'simple',
+        }),
+      );
+    });
   });
 
-  it('renders a BlobContent component', () => {
-    expect(findBlobContent().exists()).toBe(true);
+  describe('BlobHeader action slot', () => {
+    it('renders BlobHeaderEdit button in simple viewer', async () => {
+      fullFactory({
+        mockData: { blobInfo: simpleMockData },
+        stubs: {
+          BlobContent: true,
+        },
+      });
+      await nextTick();
+      expect(findBlobHeaderEdit().props('editPath')).toEqual('some_file.js/edit');
+    });
 
-    expect(findBlobContent().props('loading')).toEqual(false);
-    expect(findBlobContent().props('content')).toEqual('raw content');
-    expect(findBlobContent().props('isRawContent')).toBe(true);
-    expect(findBlobContent().props('activeViewer')).toEqual({
-      fileType: 'text',
-      tooLarge: false,
-      type: 'text',
+    it('renders BlobHeaderEdit button in rich viewer', async () => {
+      fullFactory({
+        mockData: { blobInfo: richMockData },
+        stubs: {
+          BlobContent: true,
+        },
+      });
+      await nextTick();
+      expect(findBlobHeaderEdit().props('editPath')).toEqual('some_file.js/edit');
     });
   });
 });