1 files changed, 79 insertions, 0 deletions
diff --git a/spec/javascripts/vue_shared/components/markdown/suggestion_diff_spec.js b/spec/javascripts/vue_shared/components/markdown/suggestion_diff_spec.js
new file mode 100644
index 00000000000..d4ed8f2f7a4
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/markdown/suggestion_diff_spec.js
@@ -0,0 +1,79 @@
+import Vue from 'vue';
+import SuggestionDiffComponent from '~/vue_shared/components/markdown/suggestion_diff.vue';
+
+const MOCK_DATA = {
+  canApply: true,
+  newLines: [
+    { content: 'Line 1\n', lineNumber: 1 },
+    { content: 'Line 2\n', lineNumber: 2 },
+    { content: 'Line 3\n', lineNumber: 3 },
+  ],
+  fromLine: 1,
+  fromContent: 'Old content',
+  suggestion: {
+    id: 1,
+  },
+  helpPagePath: 'path_to_docs',
+};
+
+describe('Suggestion Diff component', () => {
+  let vm;
+
+  beforeEach(done => {
+    const Component = Vue.extend(SuggestionDiffComponent);
+
+    vm = new Component({
+      propsData: MOCK_DATA,
+    }).$mount();
+
+    Vue.nextTick(done);
+  });
+
+  describe('init', () => {
+    it('renders a suggestion header', () => {
+      expect(vm.$el.querySelector('.qa-suggestion-diff-header')).not.toBeNull();
+    });
+
+    it('renders a diff table', () => {
+      expect(vm.$el.querySelector('table.md-suggestion-diff')).not.toBeNull();
+    });
+
+    it('renders the oldLineNumber', () => {
+      const fromLine = vm.$el.querySelector('.qa-old-diff-line-number').innerHTML;
+
+      expect(parseInt(fromLine, 10)).toBe(vm.fromLine);
+    });
+
+    it('renders the oldLineContent', () => {
+      const fromContent = vm.$el.querySelector('.line_content.old').innerHTML;
+
+      expect(fromContent.includes(vm.fromContent)).toBe(true);
+    });
+
+    it('renders the contents of newLines', () => {
+      const newLines = vm.$el.querySelectorAll('.line_holder.new');
+
+      newLines.forEach((line, i) => {
+        expect(newLines[i].innerHTML.includes(vm.newLines[i].content)).toBe(true);
+      });
+    });
+
+    it('renders a line number for each line', () => {
+      const newLineNumbers = vm.$el.querySelectorAll('.qa-new-diff-line-number');
+
+      newLineNumbers.forEach((line, i) => {
+        expect(newLineNumbers[i].innerHTML.includes(vm.newLines[i].lineNumber)).toBe(true);
+      });
+    });
+  });
+
+  describe('applySuggestion', () => {
+    it('emits apply event when applySuggestion is called', () => {
+      const callback = () => {};
+      spyOn(vm, '$emit');
+      vm.applySuggestion(callback);
+
+      expect(vm.$emit).toHaveBeenCalledWith('apply', { suggestionId: vm.suggestion.id, callback });
+    });
+  });
+});