Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

9 files changed, 159 insertions, 56 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');
     });
   });
 });
diff --git a/spec/frontend/repository/components/table/index_spec.js b/spec/frontend/repository/components/table/index_spec.js
index af263f43d7d..e9e51abaf0f 100644
--- a/spec/frontend/repository/components/table/index_spec.js
+++ b/spec/frontend/repository/components/table/index_spec.js
@@ -55,8 +55,8 @@ describe('Repository table component', () => {
 
   it.each`
     path            | ref
-    ${'/'}          | ${'master'}
-    ${'app/assets'} | ${'master'}
+    ${'/'}          | ${'main'}
+    ${'app/assets'} | ${'main'}
     ${'/'}          | ${'test'}
   `('renders table caption for $ref in $path', ({ path, ref }) => {
     factory({ path });
diff --git a/spec/frontend/repository/components/table/parent_row_spec.js b/spec/frontend/repository/components/table/parent_row_spec.js
index cf1ed272634..9daae8c36ef 100644
--- a/spec/frontend/repository/components/table/parent_row_spec.js
+++ b/spec/frontend/repository/components/table/parent_row_spec.js
@@ -12,7 +12,7 @@ function factory(path, loadingPath) {
 
   vm = shallowMount(ParentRow, {
     propsData: {
-      commitRef: 'master',
+      commitRef: 'main',
       path,
       loadingPath,
     },
@@ -32,10 +32,10 @@ describe('Repository parent row component', () => {
 
   it.each`
     path                        | to
-    ${'app'}                    | ${'/-/tree/master/'}
-    ${'app/assets'}             | ${'/-/tree/master/app'}
-    ${'app/assets#/test'}       | ${'/-/tree/master/app/assets%23'}
-    ${'app/assets#/test/world'} | ${'/-/tree/master/app/assets%23/test'}
+    ${'app'}                    | ${'/-/tree/main/'}
+    ${'app/assets'}             | ${'/-/tree/main/app'}
+    ${'app/assets#/test'}       | ${'/-/tree/main/app/assets%23'}
+    ${'app/assets#/test/world'} | ${'/-/tree/main/app/assets%23/test'}
   `('renders link in $path to $to', ({ path, to }) => {
     factory(path);
 
@@ -50,7 +50,7 @@ describe('Repository parent row component', () => {
     vm.find('td').trigger('click');
 
     expect($router.push).toHaveBeenCalledWith({
-      path: '/-/tree/master/app',
+      path: '/-/tree/main/app',
     });
   });
 
@@ -62,7 +62,7 @@ describe('Repository parent row component', () => {
     vm.find('a').trigger('click');
 
     expect($router.push).not.toHaveBeenCalledWith({
-      path: '/-/tree/master/app',
+      path: '/-/tree/main/app',
     });
   });
 
diff --git a/spec/frontend/repository/components/table/row_spec.js b/spec/frontend/repository/components/table/row_spec.js
index 3ebffbedcdb..6ba6f993db1 100644
--- a/spec/frontend/repository/components/table/row_spec.js
+++ b/spec/frontend/repository/components/table/row_spec.js
@@ -30,7 +30,7 @@ function factory(propsData = {}) {
     },
   });
 
-  vm.setData({ escapedRef: 'master' });
+  vm.setData({ escapedRef: 'main' });
 }
 
 describe('Repository table row component', () => {
@@ -115,7 +115,7 @@ describe('Repository table row component', () => {
 
     return vm.vm.$nextTick().then(() => {
       expect(vm.find({ ref: 'link' }).props('to')).toEqual({
-        path: `/-/tree/master/${encodeURIComponent(path)}`,
+        path: `/-/tree/main/${encodeURIComponent(path)}`,
       });
     });
   });
@@ -130,7 +130,7 @@ describe('Repository table row component', () => {
     });
 
     return vm.vm.$nextTick().then(() => {
-      expect(vm.find('.tree-item-link').props('to')).toEqual({ path: '/-/tree/master/test%23' });
+      expect(vm.find('.tree-item-link').props('to')).toEqual({ path: '/-/tree/main/test%23' });
     });
   });
 
diff --git a/spec/frontend/repository/components/upload_blob_modal_spec.js b/spec/frontend/repository/components/upload_blob_modal_spec.js
index 935ed08f67a..ec85d5666fb 100644
--- a/spec/frontend/repository/components/upload_blob_modal_spec.js
+++ b/spec/frontend/repository/components/upload_blob_modal_spec.js
@@ -20,8 +20,8 @@ jest.mock('~/lib/utils/url_utility', () => ({
 const initialProps = {
   modalId: 'upload-blob',
   commitMessage: 'Upload New File',
-  targetBranch: 'master',
-  originalBranch: 'master',
+  targetBranch: 'main',
+  originalBranch: 'main',
   canPushCode: true,
   path: 'new_upload',
 };
@@ -111,7 +111,7 @@ describe('UploadBlobModal', () => {
       if (canPushCode) {
         describe('when changing the branch name', () => {
           it('displays the MR toggle', async () => {
-            wrapper.setData({ target: 'Not master' });
+            wrapper.setData({ target: 'Not main' });
 
             await wrapper.vm.$nextTick();
 
diff --git a/spec/frontend/repository/log_tree_spec.js b/spec/frontend/repository/log_tree_spec.js
index ddc95feccd6..a842053caad 100644
--- a/spec/frontend/repository/log_tree_spec.js
+++ b/spec/frontend/repository/log_tree_spec.js
@@ -53,7 +53,7 @@ describe('fetchLogsTree', () => {
     client = {
       readQuery: () => ({
         projectPath: 'gitlab-org/gitlab-foss',
-        escapedRef: 'master',
+        escapedRef: 'main',
         commits: [],
       }),
       writeQuery: jest.fn(),
@@ -71,7 +71,7 @@ describe('fetchLogsTree', () => {
 
   it('calls axios get', () =>
     fetchLogsTree(client, '', '0', resolver).then(() => {
-      expect(axios.get).toHaveBeenCalledWith('/gitlab-org/gitlab-foss/-/refs/master/logs_tree/', {
+      expect(axios.get).toHaveBeenCalledWith('/gitlab-org/gitlab-foss/-/refs/main/logs_tree/', {
         params: { format: 'json', offset: '0' },
       });
     }));
@@ -114,7 +114,7 @@ describe('fetchLogsTree', () => {
       query: expect.anything(),
       data: {
         projectPath: 'gitlab-org/gitlab-foss',
-        escapedRef: 'master',
+        escapedRef: 'main',
         commits: [
           expect.objectContaining({
             __typename: 'LogTreeCommit',
diff --git a/spec/frontend/repository/pages/blob_spec.js b/spec/frontend/repository/pages/blob_spec.js
index 3e7ead4ad00..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 } });
+    wrapper = shallowMount(BlobPage, {
+      propsData: { path, projectPath: 'some/path' },
+    });
   });
 
   afterEach(() => {
diff --git a/spec/frontend/repository/router_spec.js b/spec/frontend/repository/router_spec.js
index 3354b2315fc..bb82fa706fd 100644
--- a/spec/frontend/repository/router_spec.js
+++ b/spec/frontend/repository/router_spec.js
@@ -5,14 +5,14 @@ import createRouter from '~/repository/router';
 
 describe('Repository router spec', () => {
   it.each`
-    path                           | branch          | component    | componentName
-    ${'/'}                         | ${'master'}     | ${IndexPage} | ${'IndexPage'}
-    ${'/tree/master'}              | ${'master'}     | ${TreePage}  | ${'TreePage'}
-    ${'/tree/feat(test)'}          | ${'feat(test)'} | ${TreePage}  | ${'TreePage'}
-    ${'/-/tree/master'}            | ${'master'}     | ${TreePage}  | ${'TreePage'}
-    ${'/-/tree/master/app/assets'} | ${'master'}     | ${TreePage}  | ${'TreePage'}
-    ${'/-/tree/123/app/assets'}    | ${'master'}     | ${null}      | ${'null'}
-    ${'/-/blob/master/file.md'}    | ${'master'}     | ${BlobPage}  | ${'BlobPage'}
+    path                         | branch          | component    | componentName
+    ${'/'}                       | ${'main'}       | ${IndexPage} | ${'IndexPage'}
+    ${'/tree/main'}              | ${'main'}       | ${TreePage}  | ${'TreePage'}
+    ${'/tree/feat(test)'}        | ${'feat(test)'} | ${TreePage}  | ${'TreePage'}
+    ${'/-/tree/main'}            | ${'main'}       | ${TreePage}  | ${'TreePage'}
+    ${'/-/tree/main/app/assets'} | ${'main'}       | ${TreePage}  | ${'TreePage'}
+    ${'/-/tree/123/app/assets'}  | ${'main'}       | ${null}      | ${'null'}
+    ${'/-/blob/main/file.md'}    | ${'main'}       | ${BlobPage}  | ${'BlobPage'}
   `('sets component as $componentName for path "$path"', ({ path, component, branch }) => {
     const router = createRouter('', branch);
 
diff --git a/spec/frontend/repository/utils/title_spec.js b/spec/frontend/repository/utils/title_spec.js
index a1213c13be8..d5206bdea92 100644
--- a/spec/frontend/repository/utils/title_spec.js
+++ b/spec/frontend/repository/utils/title_spec.js
@@ -8,9 +8,9 @@ describe('setTitle', () => {
     ${'app/assets'}             | ${'app/assets'}
     ${'app/assets/javascripts'} | ${'app/assets/javascripts'}
   `('sets document title as $title for $path', ({ path, title }) => {
-    setTitle(path, 'master', 'GitLab Org / GitLab');
+    setTitle(path, 'main', 'GitLab Org / GitLab');
 
-    expect(document.title).toEqual(`${title} · master · GitLab Org / GitLab · GitLab`);
+    expect(document.title).toEqual(`${title} · main · GitLab Org / GitLab · GitLab`);
   });
 });