1 files changed, 25 insertions, 34 deletions
diff --git a/spec/frontend/vue_shared/components/content_viewer/viewers/image_viewer_spec.js b/spec/frontend/vue_shared/components/content_viewer/viewers/image_viewer_spec.js
index ef785b9f0f5..31e843297fa 100644
--- a/spec/frontend/vue_shared/components/content_viewer/viewers/image_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/content_viewer/viewers/image_viewer_spec.js
@@ -1,45 +1,36 @@
-import { shallowMount } from '@vue/test-utils';
-
+import { mount } from '@vue/test-utils';
 import { GREEN_BOX_IMAGE_URL } from 'spec/test_constants';
 import ImageViewer from '~/vue_shared/components/content_viewer/viewers/image_viewer.vue';
 
 describe('Image Viewer', () => {
-  const requiredProps = {
-    path: GREEN_BOX_IMAGE_URL,
-    renderInfo: true,
-  };
   let wrapper;
-  let imageInfo;
-
-  function createElement({ props, includeRequired = true } = {}) {
-    const data = includeRequired ? { ...requiredProps, ...props } : { ...props };
 
-    wrapper = shallowMount(ImageViewer, {
-      propsData: data,
+  it('renders image preview', () => {
+    wrapper = mount(ImageViewer, {
+      propsData: { path: GREEN_BOX_IMAGE_URL, fileSize: 1024 },
     });
-    imageInfo = wrapper.find('.image-info');
-  }
-
-  describe('file sizes', () => {
-    it('should show the humanized file size when `renderInfo` is true and there is size info', () => {
-      createElement({ props: { fileSize: 1024 } });
-
-      expect(imageInfo.text()).toContain('1.00 KiB');
-    });
-
-    it('should not show the humanized file size when `renderInfo` is true and there is no size', () => {
-      const FILESIZE_RE = /\d+(\.\d+)?\s*([KMGTP]i)*B/;
 
-      createElement({ props: { fileSize: 0 } });
-
-      // It shouldn't show any filesize info
-      expect(imageInfo.text()).not.toMatch(FILESIZE_RE);
-    });
-
-    it('should not show any image information when `renderInfo` is false', () => {
-      createElement({ props: { renderInfo: false } });
+    expect(wrapper.find('img').element).toHaveAttr('src', GREEN_BOX_IMAGE_URL);
+  });
 
-      expect(imageInfo.exists()).toBe(false);
-    });
+  describe('file sizes', () => {
+    it.each`
+      fileSize | renderInfo | elementExists | humanizedFileSize
+      ${1024}  | ${true}    | ${true}       | ${'1.00 KiB'}
+      ${0}     | ${true}    | ${true}       | ${''}
+      ${1024}  | ${false}   | ${false}      | ${undefined}
+    `(
+      'shows file size as "$humanizedFileSize", if fileSize=$fileSize and renderInfo=$renderInfo',
+      ({ fileSize, renderInfo, elementExists, humanizedFileSize }) => {
+        wrapper = mount(ImageViewer, {
+          propsData: { path: GREEN_BOX_IMAGE_URL, fileSize, renderInfo },
+        });
+
+        const imageInfo = wrapper.find('.image-info');
+
+        expect(imageInfo.exists()).toBe(elementExists);
+        expect(imageInfo.element?.textContent.trim()).toBe(humanizedFileSize);
+      },
+    );
   });
 });