Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

6 files changed, 202 insertions, 40 deletions

diff --git a/spec/frontend/repository/components/__snapshots__/directory_download_links_spec.js.snap b/spec/frontend/repository/components/__snapshots__/directory_download_links_spec.js.snap
index 6968fb3e153..836ae5c22e6 100644
--- a/spec/frontend/repository/components/__snapshots__/directory_download_links_spec.js.snap
+++ b/spec/frontend/repository/components/__snapshots__/directory_download_links_spec.js.snap
@@ -16,22 +16,30 @@ exports[`Repository directory download links component renders downloads links f
     <div
       class="btn-group ml-0 w-100"
     >
-      <gl-link-stub
-        class="btn btn-xs btn-primary"
+      <gl-button-stub
+        buttontextclasses=""
+        category="primary"
         href="http://test.com/?path=app"
+        icon=""
+        size="small"
+        variant="confirm"
       >
         
         zip
       
-      </gl-link-stub>
-      <gl-link-stub
-        class="btn btn-xs"
+      </gl-button-stub>
+      <gl-button-stub
+        buttontextclasses=""
+        category="primary"
         href="http://test.com/?path=app"
+        icon=""
+        size="small"
+        variant="default"
       >
         
         tar
       
-      </gl-link-stub>
+      </gl-button-stub>
     </div>
   </div>
 </section>
@@ -53,22 +61,30 @@ exports[`Repository directory download links component renders downloads links f
     <div
       class="btn-group ml-0 w-100"
     >
-      <gl-link-stub
-        class="btn btn-xs btn-primary"
+      <gl-button-stub
+        buttontextclasses=""
+        category="primary"
         href="http://test.com/?path=app/assets"
+        icon=""
+        size="small"
+        variant="confirm"
       >
         
         zip
       
-      </gl-link-stub>
-      <gl-link-stub
-        class="btn btn-xs"
+      </gl-button-stub>
+      <gl-button-stub
+        buttontextclasses=""
+        category="primary"
         href="http://test.com/?path=app/assets"
+        icon=""
+        size="small"
+        variant="default"
       >
         
         tar
       
-      </gl-link-stub>
+      </gl-button-stub>
     </div>
   </div>
 </section>
diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
new file mode 100644
index 00000000000..b662a1d20a9
--- /dev/null
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -0,0 +1,86 @@
+import { GlLoadingIcon } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+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';
+
+let wrapper;
+const mockData = {
+  name: 'some_file.js',
+  size: 123,
+  rawBlob: 'raw content',
+  type: 'text',
+  fileType: 'text',
+  tooLarge: false,
+  path: 'some_file.js',
+  editBlobPath: 'some_file.js/edit',
+  ideEditPath: 'some_file.js/ide/edit',
+  storedExternally: false,
+  rawPath: 'some_file.js',
+  externalStorageUrl: 'some_file.js',
+  replacePath: 'some_file.js/replace',
+  deletePath: 'some_file.js/delete',
+  canLock: true,
+  isLocked: false,
+  lockLink: 'some_file.js/lock',
+  canModifyBlob: true,
+  forkPath: 'some_file.js/fork',
+  simpleViewer: {},
+  richViewer: {},
+};
+
+function factory(path, loading = false) {
+  wrapper = shallowMount(BlobContentViewer, {
+    propsData: {
+      path,
+    },
+    mocks: {
+      $apollo: {
+        queries: {
+          blobInfo: {
+            loading,
+          },
+        },
+      },
+    },
+  });
+
+  wrapper.setData({ blobInfo: mockData });
+}
+
+describe('Blob content viewer component', () => {
+  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findBlobHeader = () => wrapper.find(BlobHeader);
+  const findBlobContent = () => wrapper.find(BlobContent);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  beforeEach(() => {
+    factory('some_file.js');
+  });
+
+  it('renders a GlLoadingIcon component', () => {
+    factory('some_file.js', true);
+
+    expect(findLoadingIcon().exists()).toBe(true);
+  });
+
+  it('renders a BlobHeader component', () => {
+    expect(findBlobHeader().exists()).toBe(true);
+  });
+
+  it('renders a BlobContent component', () => {
+    expect(findBlobContent().exists()).toBe(true);
+
+    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',
+    });
+  });
+});
diff --git a/spec/frontend/repository/components/breadcrumbs_spec.js b/spec/frontend/repository/components/breadcrumbs_spec.js
index 2ac2069a177..93bfd3d9d32 100644
--- a/spec/frontend/repository/components/breadcrumbs_spec.js
+++ b/spec/frontend/repository/components/breadcrumbs_spec.js
@@ -1,24 +1,36 @@
 import { GlDropdown } from '@gitlab/ui';
 import { shallowMount, RouterLinkStub } from '@vue/test-utils';
 import Breadcrumbs from '~/repository/components/breadcrumbs.vue';
-
-let vm;
-
-function factory(currentPath, extraProps = {}) {
-  vm = shallowMount(Breadcrumbs, {
-    propsData: {
-      currentPath,
-      ...extraProps,
-    },
-    stubs: {
-      RouterLink: RouterLinkStub,
-    },
-  });
-}
+import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
 
 describe('Repository breadcrumbs component', () => {
+  let wrapper;
+
+  const factory = (currentPath, extraProps = {}) => {
+    const $apollo = {
+      queries: {
+        userPermissions: {
+          loading: true,
+        },
+      },
+    };
+
+    wrapper = shallowMount(Breadcrumbs, {
+      propsData: {
+        currentPath,
+        ...extraProps,
+      },
+      stubs: {
+        RouterLink: RouterLinkStub,
+      },
+      mocks: { $apollo },
+    });
+  };
+
+  const findUploadBlobModal = () => wrapper.find(UploadBlobModal);
+
   afterEach(() => {
-    vm.destroy();
+    wrapper.destroy();
   });
 
   it.each`
@@ -30,13 +42,13 @@ describe('Repository breadcrumbs component', () => {
   `('renders $linkCount links for path $path', ({ path, linkCount }) => {
     factory(path);
 
-    expect(vm.findAll(RouterLinkStub).length).toEqual(linkCount);
+    expect(wrapper.findAll(RouterLinkStub).length).toEqual(linkCount);
   });
 
   it('escapes hash in directory path', () => {
     factory('app/assets/javascripts#');
 
-    expect(vm.findAll(RouterLinkStub).at(3).props('to')).toEqual(
+    expect(wrapper.findAll(RouterLinkStub).at(3).props('to')).toEqual(
       '/-/tree/app/assets/javascripts%23',
     );
   });
@@ -44,26 +56,44 @@ describe('Repository breadcrumbs component', () => {
   it('renders last link as active', () => {
     factory('app/assets');
 
-    expect(vm.findAll(RouterLinkStub).at(2).attributes('aria-current')).toEqual('page');
+    expect(wrapper.findAll(RouterLinkStub).at(2).attributes('aria-current')).toEqual('page');
   });
 
-  it('does not render add to tree dropdown when permissions are false', () => {
+  it('does not render add to tree dropdown when permissions are false', async () => {
     factory('/', { canCollaborate: false });
 
-    vm.setData({ userPermissions: { forkProject: false, createMergeRequestIn: false } });
+    wrapper.setData({ userPermissions: { forkProject: false, createMergeRequestIn: false } });
 
-    return vm.vm.$nextTick(() => {
-      expect(vm.find(GlDropdown).exists()).toBe(false);
-    });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find(GlDropdown).exists()).toBe(false);
   });
 
-  it('renders add to tree dropdown when permissions are true', () => {
+  it('renders add to tree dropdown when permissions are true', async () => {
     factory('/', { canCollaborate: true });
 
-    vm.setData({ userPermissions: { forkProject: true, createMergeRequestIn: true } });
+    wrapper.setData({ userPermissions: { forkProject: true, createMergeRequestIn: true } });
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find(GlDropdown).exists()).toBe(true);
+  });
+
+  describe('renders the upload blob modal', () => {
+    beforeEach(() => {
+      factory('/', { canEditTree: true });
+    });
+
+    it('does not render the modal while loading', () => {
+      expect(findUploadBlobModal().exists()).toBe(false);
+    });
+
+    it('renders the modal once loaded', async () => {
+      wrapper.setData({ $apollo: { queries: { userPermissions: { loading: false } } } });
+
+      await wrapper.vm.$nextTick();
 
-    return vm.vm.$nextTick(() => {
-      expect(vm.find(GlDropdown).exists()).toBe(true);
+      expect(findUploadBlobModal().exists()).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/repository/components/table/row_spec.js b/spec/frontend/repository/components/table/row_spec.js
index 69cb69de5df..3ebffbedcdb 100644
--- a/spec/frontend/repository/components/table/row_spec.js
+++ b/spec/frontend/repository/components/table/row_spec.js
@@ -19,6 +19,9 @@ function factory(propsData = {}) {
       projectPath: 'gitlab-org/gitlab-ce',
       url: `https://test.com`,
     },
+    provide: {
+      glFeatures: { refactorBlobViewer: true },
+    },
     mocks: {
       $router,
     },
@@ -81,7 +84,7 @@ describe('Repository table row component', () => {
   it.each`
     type        | component         | componentName
     ${'tree'}   | ${RouterLinkStub} | ${'RouterLink'}
-    ${'file'}   | ${'a'}            | ${'hyperlink'}
+    ${'blob'}   | ${RouterLinkStub} | ${'RouterLink'}
     ${'commit'} | ${'a'}            | ${'hyperlink'}
   `('renders a $componentName for type $type', ({ type, component }) => {
     factory({
diff --git a/spec/frontend/repository/pages/blob_spec.js b/spec/frontend/repository/pages/blob_spec.js
new file mode 100644
index 00000000000..3e7ead4ad00
--- /dev/null
+++ b/spec/frontend/repository/pages/blob_spec.js
@@ -0,0 +1,25 @@
+import { shallowMount } from '@vue/test-utils';
+import BlobContentViewer from '~/repository/components/blob_content_viewer.vue';
+import BlobPage from '~/repository/pages/blob.vue';
+
+jest.mock('~/repository/utils/dom');
+
+describe('Repository blob page component', () => {
+  let wrapper;
+
+  const findBlobContentViewer = () => wrapper.find(BlobContentViewer);
+  const path = 'file.js';
+
+  beforeEach(() => {
+    wrapper = shallowMount(BlobPage, { propsData: { path } });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('has a Blob Content Viewer component', () => {
+    expect(findBlobContentViewer().exists()).toBe(true);
+    expect(findBlobContentViewer().props('path')).toBe(path);
+  });
+});
diff --git a/spec/frontend/repository/router_spec.js b/spec/frontend/repository/router_spec.js
index 3c7dda05ca3..3354b2315fc 100644
--- a/spec/frontend/repository/router_spec.js
+++ b/spec/frontend/repository/router_spec.js
@@ -1,3 +1,4 @@
+import BlobPage from '~/repository/pages/blob.vue';
 import IndexPage from '~/repository/pages/index.vue';
 import TreePage from '~/repository/pages/tree.vue';
 import createRouter from '~/repository/router';
@@ -11,6 +12,7 @@ describe('Repository router spec', () => {
     ${'/-/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'}
   `('sets component as $componentName for path "$path"', ({ path, component, branch }) => {
     const router = createRouter('', branch);