1 files changed, 86 insertions, 0 deletions
diff --git a/spec/frontend/notes/components/diff_with_note_spec.js b/spec/frontend/notes/components/diff_with_note_spec.js
new file mode 100644
index 00000000000..d6d42e1988d
--- /dev/null
+++ b/spec/frontend/notes/components/diff_with_note_spec.js
@@ -0,0 +1,86 @@
+import { mount } from '@vue/test-utils';
+import DiffWithNote from '~/notes/components/diff_with_note.vue';
+import { createStore } from '~/mr_notes/stores';
+
+const discussionFixture = 'merge_requests/diff_discussion.json';
+const imageDiscussionFixture = 'merge_requests/image_diff_discussion.json';
+
+describe('diff_with_note', () => {
+  let store;
+  let wrapper;
+
+  const selectors = {
+    get diffTable() {
+      return wrapper.find('.diff-content table');
+    },
+    get diffRows() {
+      return wrapper.findAll('.diff-content .line_holder');
+    },
+    get noteRow() {
+      return wrapper.find('.diff-content .notes_holder');
+    },
+  };
+
+  beforeEach(() => {
+    store = createStore();
+    store.replaceState({
+      ...store.state,
+      notes: {
+        noteableData: {
+          current_user: {},
+        },
+      },
+    });
+  });
+
+  describe('text diff', () => {
+    beforeEach(() => {
+      const diffDiscussion = getJSONFixture(discussionFixture)[0];
+
+      wrapper = mount(DiffWithNote, {
+        propsData: {
+          discussion: diffDiscussion,
+        },
+        store,
+      });
+    });
+
+    it('removes trailing "+" char', () => {
+      const richText = wrapper.vm.$el
+        .querySelectorAll('.line_holder')[4]
+        .querySelector('.line_content').textContent[0];
+
+      expect(richText).not.toEqual('+');
+    });
+
+    it('removes trailing "-" char', () => {
+      const richText = wrapper.vm.$el.querySelector('#LC13').parentNode.textContent[0];
+
+      expect(richText).not.toEqual('-');
+    });
+
+    it('shows text diff', () => {
+      expect(wrapper.classes('text-file')).toBe(true);
+      expect(selectors.diffTable.exists()).toBe(true);
+    });
+
+    it('shows diff lines', () => {
+      expect(selectors.diffRows.length).toBe(12);
+    });
+
+    it('shows notes row', () => {
+      expect(selectors.noteRow.exists()).toBe(true);
+    });
+  });
+
+  describe('image diff', () => {
+    beforeEach(() => {
+      const imageDiscussion = getJSONFixture(imageDiscussionFixture)[0];
+      wrapper = mount(DiffWithNote, { propsData: { discussion: imageDiscussion }, store });
+    });
+
+    it('shows image diff', () => {
+      expect(selectors.diffTable.exists()).toBe(false);
+    });
+  });
+});