Add latest changes from gitlab-org/gitlab@15-3-stable-eev15.3.0-rc42

2 files changed, 80 insertions, 14 deletions

diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
index 2b70cb84c67..0f7cf4e61b2 100644
--- a/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -21,12 +21,13 @@ import blobInfoQuery from '~/repository/queries/blob_info.query.graphql';
 import userInfoQuery from '~/repository/queries/user_info.query.graphql';
 import applicationInfoQuery from '~/repository/queries/application_info.query.graphql';
 import CodeIntelligence from '~/code_navigation/components/app.vue';
-import { redirectTo } from '~/lib/utils/url_utility';
+import * as urlUtility from '~/lib/utils/url_utility';
 import { isLoggedIn, handleLocationHash } from '~/lib/utils/common_utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import httpStatusCodes from '~/lib/utils/http_status';
 import LineHighlighter from '~/blob/line_highlighter';
 import { LEGACY_FILE_TYPES } from '~/repository/constants';
+import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants';
 import {
   simpleViewerMock,
   richViewerMock,
@@ -53,7 +54,12 @@ const mockAxios = new MockAdapter(axios);
 const createMockStore = () =>
   new Vuex.Store({ actions: { fetchData: jest.fn, setInitialData: jest.fn() } });
 
-const createComponent = async (mockData = {}, mountFn = shallowMount) => {
+const mockRouterPush = jest.fn();
+const mockRouter = {
+  push: mockRouterPush,
+};
+
+const createComponent = async (mockData = {}, mountFn = shallowMount, mockRoute = {}) => {
   Vue.use(VueApollo);
 
   const {
@@ -106,6 +112,10 @@ const createComponent = async (mockData = {}, mountFn = shallowMount) => {
       apolloProvider: fakeApollo,
       propsData: propsMock,
       mixins: [{ data: () => ({ ref: refMock }) }],
+      mocks: {
+        $route: mockRoute,
+        $router: mockRouter,
+      },
       provide: {
         targetBranch: 'test',
         originalBranch: 'default-ref',
@@ -158,10 +168,11 @@ describe('Blob content viewer component', () => {
     it('renders a BlobHeader component', async () => {
       await createComponent();
 
-      expect(findBlobHeader().props('activeViewerType')).toEqual('simple');
+      expect(findBlobHeader().props('activeViewerType')).toEqual(SIMPLE_BLOB_VIEWER);
       expect(findBlobHeader().props('hasRenderError')).toEqual(false);
       expect(findBlobHeader().props('hideViewerSwitcher')).toEqual(true);
       expect(findBlobHeader().props('blob')).toEqual(simpleViewerMock);
+      expect(mockRouterPush).not.toHaveBeenCalled();
     });
 
     it('copies blob text to clipboard', async () => {
@@ -179,7 +190,7 @@ describe('Blob content viewer component', () => {
       expect(findBlobContent().props('activeViewer')).toEqual({
         fileType: 'text',
         tooLarge: false,
-        type: 'simple',
+        type: SIMPLE_BLOB_VIEWER,
         renderError: null,
       });
     });
@@ -229,6 +240,12 @@ describe('Blob content viewer component', () => {
         expect(LineHighlighter).toHaveBeenCalled();
       });
 
+      it('does not load the LineHighlighter for RichViewers', async () => {
+        mockAxios.onGet(legacyViewerUrl).replyOnce(httpStatusCodes.OK, 'test');
+        await createComponent({ blob: { ...richViewerMock, fileType, highlightJs } });
+        expect(LineHighlighter).not.toHaveBeenCalled();
+      });
+
       it('scrolls to the hash', async () => {
         mockAxios.onGet(legacyViewerUrl).replyOnce(httpStatusCodes.OK, 'test');
         await createComponent({ blob: { ...simpleViewerMock, fileType, highlightJs } });
@@ -241,10 +258,11 @@ describe('Blob content viewer component', () => {
     it('renders a BlobHeader component', async () => {
       await createComponent({ blob: richViewerMock });
 
-      expect(findBlobHeader().props('activeViewerType')).toEqual('rich');
+      expect(findBlobHeader().props('activeViewerType')).toEqual(RICH_BLOB_VIEWER);
       expect(findBlobHeader().props('hasRenderError')).toEqual(false);
       expect(findBlobHeader().props('hideViewerSwitcher')).toEqual(false);
       expect(findBlobHeader().props('blob')).toEqual(richViewerMock);
+      expect(mockRouterPush).not.toHaveBeenCalled();
     });
 
     it('renders a BlobContent component', async () => {
@@ -254,30 +272,49 @@ describe('Blob content viewer component', () => {
       expect(findBlobContent().props('activeViewer')).toEqual({
         fileType: 'markup',
         tooLarge: false,
-        type: 'rich',
+        type: RICH_BLOB_VIEWER,
         renderError: null,
       });
     });
 
-    it('updates viewer type when viewer changed is clicked', async () => {
+    it('changes to simple viewer when URL has code line hash', async () => {
+      jest.spyOn(urlUtility, 'getLocationHash').mockReturnValueOnce('L5');
+
       await createComponent({ blob: richViewerMock });
 
       expect(findBlobContent().props('activeViewer')).toEqual(
         expect.objectContaining({
-          type: 'rich',
+          type: SIMPLE_BLOB_VIEWER,
+        }),
+      );
+      expect(findBlobHeader().props('activeViewerType')).toEqual(SIMPLE_BLOB_VIEWER);
+    });
+
+    it('updates viewer type when viewer changed is clicked', async () => {
+      await createComponent({ blob: richViewerMock }, shallowMount, { path: '/mock_path' });
+
+      expect(findBlobContent().props('activeViewer')).toEqual(
+        expect.objectContaining({
+          type: RICH_BLOB_VIEWER,
         }),
       );
-      expect(findBlobHeader().props('activeViewerType')).toEqual('rich');
+      expect(findBlobHeader().props('activeViewerType')).toEqual(RICH_BLOB_VIEWER);
 
-      findBlobHeader().vm.$emit('viewer-changed', 'simple');
+      findBlobHeader().vm.$emit('viewer-changed', SIMPLE_BLOB_VIEWER);
       await nextTick();
 
-      expect(findBlobHeader().props('activeViewerType')).toEqual('simple');
+      expect(findBlobHeader().props('activeViewerType')).toEqual(SIMPLE_BLOB_VIEWER);
       expect(findBlobContent().props('activeViewer')).toEqual(
         expect.objectContaining({
-          type: 'simple',
+          type: SIMPLE_BLOB_VIEWER,
         }),
       );
+      expect(mockRouterPush).toHaveBeenCalledWith({
+        path: '/mock_path',
+        query: {
+          plain: '1',
+        },
+      });
     });
   });
 
@@ -497,12 +534,12 @@ describe('Blob content viewer component', () => {
 
     it('simple edit redirects to the simple editor', () => {
       findWebIdeLink().vm.$emit('edit', 'simple');
-      expect(redirectTo).toHaveBeenCalledWith(simpleViewerMock.editBlobPath);
+      expect(urlUtility.redirectTo).toHaveBeenCalledWith(simpleViewerMock.editBlobPath);
     });
 
     it('IDE edit redirects to the IDE editor', () => {
       findWebIdeLink().vm.$emit('edit', 'ide');
-      expect(redirectTo).toHaveBeenCalledWith(simpleViewerMock.ideEditPath);
+      expect(urlUtility.redirectTo).toHaveBeenCalledWith(simpleViewerMock.ideEditPath);
     });
 
     it.each`
@@ -537,4 +574,32 @@ describe('Blob content viewer component', () => {
       },
     );
   });
+
+  describe('active viewer based on plain attribute', () => {
+    it.each`
+      hasRichViewer | plain  | activeViewerType
+      ${true}       | ${'0'} | ${RICH_BLOB_VIEWER}
+      ${true}       | ${'1'} | ${SIMPLE_BLOB_VIEWER}
+      ${false}      | ${'0'} | ${SIMPLE_BLOB_VIEWER}
+      ${false}      | ${'1'} | ${SIMPLE_BLOB_VIEWER}
+    `(
+      'activeViewerType is `$activeViewerType` when hasRichViewer is $hasRichViewer and plain is set to $plain',
+      async ({ hasRichViewer, plain, activeViewerType }) => {
+        await createComponent(
+          { blob: hasRichViewer ? richViewerMock : simpleViewerMock },
+          shallowMount,
+          { query: { plain } },
+        );
+
+        await nextTick();
+
+        expect(findBlobContent().props('activeViewer')).toEqual(
+          expect.objectContaining({
+            type: activeViewerType,
+          }),
+        );
+        expect(findBlobHeader().props('activeViewerType')).toEqual(activeViewerType);
+      },
+    );
+  });
 });
diff --git a/spec/frontend/repository/mock_data.js b/spec/frontend/repository/mock_data.js
index 0a5766a25f9..4db295fe0b7 100644
--- a/spec/frontend/repository/mock_data.js
+++ b/spec/frontend/repository/mock_data.js
@@ -8,6 +8,7 @@ export const simpleViewerMock = {
   language: 'javascript',
   path: 'some_file.js',
   webPath: 'some_file.js',
+  blamePath: 'blame/file.js',
   editBlobPath: 'some_file.js/edit',
   gitpodBlobUrl: 'https://gitpod.io#path/to/blob.js',
   ideEditPath: 'some_file.js/ide/edit',