1 files changed, 57 insertions, 35 deletions

diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
index d3b60ec3768..109e5cef49b 100644
--- a/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -1,8 +1,8 @@
 import { GlLoadingIcon } from '@gitlab/ui';
-import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -12,10 +12,10 @@ import BlobButtonGroup from '~/repository/components/blob_button_group.vue';
 import BlobContentViewer from '~/repository/components/blob_content_viewer.vue';
 import BlobEdit from '~/repository/components/blob_edit.vue';
 import ForkSuggestion from '~/repository/components/fork_suggestion.vue';
-import { loadViewer, viewerProps } from '~/repository/components/blob_viewers';
+import { loadViewer } from '~/repository/components/blob_viewers';
 import DownloadViewer from '~/repository/components/blob_viewers/download_viewer.vue';
 import EmptyViewer from '~/repository/components/blob_viewers/empty_viewer.vue';
-import SourceViewer from '~/vue_shared/components/source_viewer.vue';
+import SourceViewer from '~/vue_shared/components/source_viewer/source_viewer.vue';
 import blobInfoQuery from '~/repository/queries/blob_info.query.graphql';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { isLoggedIn } from '~/lib/utils/common_utils';
@@ -36,11 +36,10 @@ jest.mock('~/lib/utils/common_utils');
 let wrapper;
 let mockResolver;
 
-const localVue = createLocalVue();
 const mockAxios = new MockAdapter(axios);
 
 const createComponent = async (mockData = {}, mountFn = shallowMount) => {
-  localVue.use(VueApollo);
+  Vue.use(VueApollo);
 
   const {
     blob = simpleViewerMock,
@@ -51,6 +50,7 @@ const createComponent = async (mockData = {}, mountFn = shallowMount) => {
     createMergeRequestIn = userPermissionsMock.createMergeRequestIn,
     isBinary,
     inject = {},
+    highlightJs = true,
   } = mockData;
 
   const project = {
@@ -75,11 +75,17 @@ const createComponent = async (mockData = {}, mountFn = shallowMount) => {
 
   wrapper = extendedWrapper(
     mountFn(BlobContentViewer, {
-      localVue,
       apolloProvider: fakeApollo,
       propsData: propsMock,
       mixins: [{ data: () => ({ ref: refMock }) }],
-      provide: { ...inject },
+      provide: {
+        targetBranch: 'test',
+        originalBranch: 'default-ref',
+        ...inject,
+        glFeatures: {
+          highlightJs,
+        },
+      },
     }),
   );
 
@@ -100,7 +106,6 @@ describe('Blob content viewer component', () => {
   const findForkSuggestion = () => wrapper.findComponent(ForkSuggestion);
 
   beforeEach(() => {
-    gon.features = { highlightJs: true };
     isLoggedIn.mockReturnValue(true);
   });
 
@@ -138,6 +143,15 @@ describe('Blob content viewer component', () => {
     });
 
     describe('legacy viewers', () => {
+      it('loads a legacy viewer when a the fileType is text and the highlightJs feature is turned off', async () => {
+        await createComponent({
+          blob: { ...simpleViewerMock, fileType: 'text', highlightJs: false },
+        });
+
+        expect(mockAxios.history.get).toHaveLength(1);
+        expect(mockAxios.history.get[0].url).toEqual('some_file.js?format=json&viewer=simple');
+      });
+
       it('loads a legacy viewer when a viewer component is not available', async () => {
         await createComponent({ blob: { ...simpleViewerMock, fileType: 'unknown' } });
 
@@ -203,44 +217,39 @@ describe('Blob content viewer component', () => {
   describe('Blob viewer', () => {
     afterEach(() => {
       loadViewer.mockRestore();
-      viewerProps.mockRestore();
     });
 
     it('does not render a BlobContent component if a Blob viewer is available', async () => {
       loadViewer.mockReturnValue(() => true);
       await createComponent({ blob: richViewerMock });
-
+      await waitForPromises();
       expect(findBlobContent().exists()).toBe(false);
     });
 
     it.each`
-      viewer        | loadViewerReturnValue | viewerPropsReturnValue
-      ${'empty'}    | ${EmptyViewer}        | ${{}}
-      ${'download'} | ${DownloadViewer}     | ${{ filePath: '/some/file/path', fileName: 'test.js', fileSize: 100 }}
-      ${'text'}     | ${SourceViewer}       | ${{ content: 'test', autoDetect: true }}
-    `(
-      'renders viewer component for $viewer files',
-      async ({ viewer, loadViewerReturnValue, viewerPropsReturnValue }) => {
-        loadViewer.mockReturnValue(loadViewerReturnValue);
-        viewerProps.mockReturnValue(viewerPropsReturnValue);
-
-        createComponent({
-          blob: {
-            ...simpleViewerMock,
-            fileType: 'null',
-            simpleViewer: {
-              ...simpleViewerMock.simpleViewer,
-              fileType: viewer,
-            },
+      viewer        | loadViewerReturnValue
+      ${'empty'}    | ${EmptyViewer}
+      ${'download'} | ${DownloadViewer}
+      ${'text'}     | ${SourceViewer}
+    `('renders viewer component for $viewer files', async ({ viewer, loadViewerReturnValue }) => {
+      loadViewer.mockReturnValue(loadViewerReturnValue);
+
+      createComponent({
+        blob: {
+          ...simpleViewerMock,
+          fileType: 'null',
+          simpleViewer: {
+            ...simpleViewerMock.simpleViewer,
+            fileType: viewer,
           },
-        });
+        },
+      });
 
-        await nextTick();
+      await waitForPromises();
 
-        expect(loadViewer).toHaveBeenCalledWith(viewer);
-        expect(wrapper.findComponent(loadViewerReturnValue).exists()).toBe(true);
-      },
-    );
+      expect(loadViewer).toHaveBeenCalledWith(viewer, false);
+      expect(wrapper.findComponent(loadViewerReturnValue).exists()).toBe(true);
+    });
   });
 
   describe('BlobHeader action slot', () => {
@@ -354,6 +363,19 @@ describe('Blob content viewer component', () => {
   });
 
   describe('blob info query', () => {
+    it.each`
+      highlightJs | shouldFetchRawText
+      ${true}     | ${true}
+      ${false}    | ${false}
+    `(
+      'calls blob info query with shouldFetchRawText: $shouldFetchRawText when highlightJs (feature flag): $highlightJs',
+      async ({ highlightJs, shouldFetchRawText }) => {
+        await createComponent({ highlightJs });
+
+        expect(mockResolver).toHaveBeenCalledWith(expect.objectContaining({ shouldFetchRawText }));
+      },
+    );
+
     it('is called with originalBranch value if the prop has a value', async () => {
       await createComponent({ inject: { originalBranch: 'some-branch' } });