1 files changed, 70 insertions, 0 deletions
diff --git a/spec/frontend/repository/components/blob_viewers/download_viewer_spec.js b/spec/frontend/repository/components/blob_viewers/download_viewer_spec.js
new file mode 100644
index 00000000000..c71b2b3c55c
--- /dev/null
+++ b/spec/frontend/repository/components/blob_viewers/download_viewer_spec.js
@@ -0,0 +1,70 @@
+import { GlLink, GlIcon } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { numberToHumanSize } from '~/lib/utils/number_utils';
+import DownloadViewer from '~/repository/components/blob_viewers/download_viewer.vue';
+
+describe('Text Viewer', () => {
+  let wrapper;
+
+  const DEFAULT_PROPS = {
+    fileName: 'file_name.js',
+    filePath: '/some/file/path',
+    fileSize: 2269674,
+  };
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(DownloadViewer, {
+      propsData: {
+        ...DEFAULT_PROPS,
+        ...props,
+      },
+    });
+  };
+
+  it('renders component', () => {
+    createComponent();
+
+    const { fileName, filePath, fileSize } = DEFAULT_PROPS;
+    expect(wrapper.props()).toMatchObject({
+      fileName,
+      filePath,
+      fileSize,
+    });
+  });
+
+  it('renders download human readable file size text', () => {
+    createComponent();
+
+    const downloadText = `Download (${numberToHumanSize(DEFAULT_PROPS.fileSize)})`;
+    expect(wrapper.text()).toBe(downloadText);
+  });
+
+  it('renders download text', () => {
+    createComponent({
+      fileSize: 0,
+    });
+
+    expect(wrapper.text()).toBe('Download');
+  });
+
+  it('renders download link', () => {
+    createComponent();
+    const { filePath, fileName } = DEFAULT_PROPS;
+
+    expect(wrapper.findComponent(GlLink).attributes()).toMatchObject({
+      rel: 'nofollow',
+      target: '_blank',
+      href: filePath,
+      download: fileName,
+    });
+  });
+
+  it('renders download icon', () => {
+    createComponent();
+
+    expect(wrapper.findComponent(GlIcon).props()).toMatchObject({
+      name: 'download',
+      size: 16,
+    });
+  });
+});