1 files changed, 69 insertions, 0 deletions
diff --git a/spec/javascripts/vue_shared/components/markdown/suggestion_diff_header_spec.js b/spec/javascripts/vue_shared/components/markdown/suggestion_diff_header_spec.js
new file mode 100644
index 00000000000..8187b3204b1
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/markdown/suggestion_diff_header_spec.js
@@ -0,0 +1,69 @@
+import Vue from 'vue';
+import SuggestionDiffHeaderComponent from '~/vue_shared/components/markdown/suggestion_diff_header.vue';
+
+const MOCK_DATA = {
+  canApply: true,
+  isApplied: false,
+  helpPagePath: 'path_to_docs',
+};
+
+describe('Suggestion Diff component', () => {
+  let vm;
+
+  function createComponent(propsData) {
+    const Component = Vue.extend(SuggestionDiffHeaderComponent);
+
+    return new Component({
+      propsData,
+    }).$mount();
+  }
+
+  beforeEach(done => {
+    vm = createComponent(MOCK_DATA);
+    Vue.nextTick(done);
+  });
+
+  describe('init', () => {
+    it('renders a suggestion header', () => {
+      const header = vm.$el.querySelector('.qa-suggestion-diff-header');
+
+      expect(header).not.toBeNull();
+      expect(header.innerHTML.includes('Suggested change')).toBe(true);
+    });
+
+    it('renders an apply button', () => {
+      const applyBtn = vm.$el.querySelector('.qa-apply-btn');
+
+      expect(applyBtn).not.toBeNull();
+      expect(applyBtn.innerHTML.includes('Apply suggestion')).toBe(true);
+    });
+
+    it('does not render an apply button if `canApply` is set to false', () => {
+      const props = Object.assign(MOCK_DATA, { canApply: false });
+
+      vm = createComponent(props);
+
+      expect(vm.$el.querySelector('.qa-apply-btn')).toBeNull();
+    });
+  });
+
+  describe('applySuggestion', () => {
+    it('emits when the apply button is clicked', () => {
+      const props = Object.assign(MOCK_DATA, { canApply: true });
+
+      vm = createComponent(props);
+      spyOn(vm, '$emit');
+      vm.applySuggestion();
+
+      expect(vm.$emit).toHaveBeenCalled();
+    });
+
+    it('does not emit when the canApply is set to false', () => {
+      spyOn(vm, '$emit');
+      vm.canApply = false;
+      vm.applySuggestion();
+
+      expect(vm.$emit).not.toHaveBeenCalled();
+    });
+  });
+});