Merge branch 'cherry-pick-a587f9b8' into 'master'

Add "empty" scenario and refactor viewers spec

See merge request gitlab-org/gitlab!66009

spec/frontend/repository/components/blob_content_viewer_spec.js

@@ -13,6 +13,7 @@ import BlobContentViewer from '~/repository/components/blob_content_viewer.vue';
 import BlobEdit from '~/repository/components/blob_edit.vue';
 import { loadViewer, viewerProps } 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 TextViewer from '~/repository/components/blob_viewers/text_viewer.vue';
 import blobInfoQuery from '~/repository/queries/blob_info.query.graphql';
 
@@ -124,8 +125,6 @@ describe('Blob content viewer component', () => {
   const findBlobEdit = () => wrapper.findComponent(BlobEdit);
   const findBlobContent = () => wrapper.findComponent(BlobContent);
   const findBlobButtonGroup = () => wrapper.findComponent(BlobButtonGroup);
-  const findTextViewer = () => wrapper.findComponent(TextViewer);
-  const findDownloadViewer = () => wrapper.findComponent(DownloadViewer);
 
   afterEach(() => {
     wrapper.destroy();
@@ -225,9 +224,9 @@ describe('Blob content viewer component', () => {
   });
 
   describe('Blob viewer', () => {
-    beforeEach(() => {
-      loadViewer.mockClear();
-      viewerProps.mockClear();
+    afterEach(() => {
+      loadViewer.mockRestore();
+      viewerProps.mockRestore();
     });
 
     it('does not render a BlobContent component if a Blob viewer is available', () => {
@@ -237,39 +236,36 @@ describe('Blob content viewer component', () => {
       expect(findBlobContent().exists()).toBe(false);
     });
 
-    it('renders a TextViewer for text files', () => {
-      loadViewer.mockReturnValueOnce(TextViewer);
-      viewerProps.mockReturnValueOnce({ content: 'test', fileName: 'test.js', readOnly: true });
-
-      factory({ mockData: { blobInfo: simpleMockData } });
-
-      expect(findTextViewer().exists()).toBe(true);
-    });
-
-    it('renders a DownloadViewer for download files', async () => {
-      loadViewer.mockReturnValue(DownloadViewer);
-      viewerProps.mockReturnValue({
-        filePath: '/some/file/path',
-        fileName: 'test.js',
-        fileSize: 100,
-      });
-
-      const downloadSimpleMockData = {
-        ...simpleMockData,
-        fileType: null,
-        simpleViewer: {
-          ...simpleMockData.simpleViewer,
-          fileType: 'download',
-        },
-      };
-
-      factory({ mockData: { blobInfo: downloadSimpleMockData } });
+    it.each`
+      viewer        | loadViewerReturnValue | viewerPropsReturnValue
+      ${'empty'}    | ${EmptyViewer}        | ${{}}
+      ${'download'} | ${DownloadViewer}     | ${{ filePath: '/some/file/path', fileName: 'test.js', fileSize: 100 }}
+      ${'text'}     | ${TextViewer}         | ${{ content: 'test', fileName: 'test.js', readOnly: true }}
+    `(
+      'renders viewer component for $viewer files',
+      async ({ viewer, loadViewerReturnValue, viewerPropsReturnValue }) => {
+        loadViewer.mockReturnValue(loadViewerReturnValue);
+        viewerProps.mockReturnValue(viewerPropsReturnValue);
+
+        factory({
+          mockData: {
+            blobInfo: {
+              ...simpleMockData,
+              fileType: null,
+              simpleViewer: {
+                ...simpleMockData.simpleViewer,
+                fileType: viewer,
+              },
+            },
+          },
+        });
 
-      await nextTick();
+        await nextTick();
 
-      expect(loadViewer).toHaveBeenCalledWith('download');
-      expect(findDownloadViewer().exists()).toBe(true);
-    });
+        expect(loadViewer).toHaveBeenCalledWith(viewer);
+        expect(wrapper.findComponent(loadViewerReturnValue).exists()).toBe(true);
+      },
+    );
   });
 
   describe('BlobHeader action slot', () => {