Add latest changes from gitlab-org/gitlab@master

2 files changed, 85 insertions, 21 deletions

diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
index b4204b434e2..fbc47a106d1 100644
--- a/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -5,9 +5,10 @@ import BlobHeader from '~/blob/components/blob_header.vue';
 import BlobContentViewer from '~/repository/components/blob_content_viewer.vue';
 
 let wrapper;
-const mockData = {
+const simpleMockData = {
   name: 'some_file.js',
   size: 123,
+  rawSize: 123,
   rawTextBlob: 'raw content',
   type: 'text',
   fileType: 'text',
@@ -29,15 +30,26 @@ const mockData = {
     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) {
+function factory({ props = {}, mockData = {} } = {}, loading = false) {
   wrapper = shallowMount(BlobContentViewer, {
     propsData: {
-      path,
+      path: 'some_file.js',
       projectPath: 'some/path',
+      ...props,
     },
     mocks: {
       $apollo: {
@@ -50,7 +62,7 @@ function factory(path, loading = false) {
     },
   });
 
-  wrapper.setData({ blobInfo: mockData });
+  wrapper.setData(mockData);
 }
 
 describe('Blob content viewer component', () => {
@@ -58,34 +70,84 @@ describe('Blob content viewer component', () => {
   const findBlobHeader = () => wrapper.find(BlobHeader);
   const findBlobContent = () => wrapper.find(BlobContent);
 
-  afterEach(() => {
-    wrapper.destroy();
+  beforeEach(() => {
+    factory({ mockData: { blobInfo: simpleMockData } });
   });
 
-  beforeEach(() => {
-    factory('some_file.js');
+  afterEach(() => {
+    wrapper.destroy();
   });
 
   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', () => {
+    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,
+      });
+    });
   });
 
-  it('renders a BlobContent component', () => {
-    expect(findBlobContent().exists()).toBe(true);
+  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 wrapper.vm.$nextTick();
 
-    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',
+      expect(findBlobHeader().props('activeViewerType')).toEqual('simple');
+      expect(findBlobContent().props('activeViewer')).toEqual(
+        expect.objectContaining({
+          type: 'simple',
+        }),
+      );
     });
   });
 });
diff --git a/spec/frontend/repository/pages/blob_spec.js b/spec/frontend/repository/pages/blob_spec.js
index 74338777376..41ab4d616b8 100644
--- a/spec/frontend/repository/pages/blob_spec.js
+++ b/spec/frontend/repository/pages/blob_spec.js
@@ -11,7 +11,9 @@ describe('Repository blob page component', () => {
   const path = 'file.js';
 
   beforeEach(() => {
-    wrapper = shallowMount(BlobPage, { propsData: { path, projectPath: 'some/path' } });
+    wrapper = shallowMount(BlobPage, {
+      propsData: { path, projectPath: 'some/path' },
+    });
   });
 
   afterEach(() => {