1 files changed, 98 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js b/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js
new file mode 100644
index 00000000000..636508be6b6
--- /dev/null
+++ b/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js
@@ -0,0 +1,98 @@
+import Vue from 'vue';
+
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants';
+import diffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
+
+describe('DiffViewer', () => {
+  const requiredProps = {
+    diffMode: 'replaced',
+    diffViewerMode: 'image',
+    newPath: GREEN_BOX_IMAGE_URL,
+    newSha: 'ABC',
+    oldPath: RED_BOX_IMAGE_URL,
+    oldSha: 'DEF',
+  };
+  let vm;
+
+  function createComponent(props) {
+    const DiffViewer = Vue.extend(diffViewer);
+
+    vm = mountComponent(DiffViewer, props);
+  }
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders image diff', done => {
+    window.gon = {
+      relative_url_root: '',
+    };
+
+    createComponent({ ...requiredProps, projectPath: '' });
+
+    setImmediate(() => {
+      expect(vm.$el.querySelector('.deleted img').getAttribute('src')).toBe(
+        `//-/raw/DEF/${RED_BOX_IMAGE_URL}`,
+      );
+
+      expect(vm.$el.querySelector('.added img').getAttribute('src')).toBe(
+        `//-/raw/ABC/${GREEN_BOX_IMAGE_URL}`,
+      );
+
+      done();
+    });
+  });
+
+  it('renders fallback download diff display', done => {
+    createComponent({
+      ...requiredProps,
+      diffViewerMode: 'added',
+      newPath: 'test.abc',
+      oldPath: 'testold.abc',
+    });
+
+    setImmediate(() => {
+      expect(vm.$el.querySelector('.deleted .file-info').textContent.trim()).toContain(
+        'testold.abc',
+      );
+
+      expect(vm.$el.querySelector('.deleted .btn.btn-default').textContent.trim()).toContain(
+        'Download',
+      );
+
+      expect(vm.$el.querySelector('.added .file-info').textContent.trim()).toContain('test.abc');
+      expect(vm.$el.querySelector('.added .btn.btn-default').textContent.trim()).toContain(
+        'Download',
+      );
+
+      done();
+    });
+  });
+
+  it('renders renamed component', () => {
+    createComponent({
+      ...requiredProps,
+      diffMode: 'renamed',
+      diffViewerMode: 'renamed',
+      newPath: 'test.abc',
+      oldPath: 'testold.abc',
+    });
+
+    expect(vm.$el.textContent).toContain('File moved');
+  });
+
+  it('renders mode changed component', () => {
+    createComponent({
+      ...requiredProps,
+      diffMode: 'mode_changed',
+      newPath: 'test.abc',
+      oldPath: 'testold.abc',
+      aMode: '123',
+      bMode: '321',
+    });
+
+    expect(vm.$el.textContent).toContain('File mode changed from 123 to 321');
+  });
+});