Extract discussion notes into new component

- Moved discussion notes out of `NoteableDiscussion` component into a
new `DiscussionNotes` component
- Wrote Jest tests for the new `DiscussionNotes` component
- Updated Jest config for emojis fixtures
- Updated Karma tests `NoteableDiscussion` to match its new structure
- Convert `DiffDiscussions` tests to use Vue test utils

1 files changed, 139 insertions, 0 deletions

diff --git a/spec/frontend/notes/components/discussion_notes_spec.js b/spec/frontend/notes/components/discussion_notes_spec.js
new file mode 100644
index 00000000000..392c1b6533e
--- /dev/null
+++ b/spec/frontend/notes/components/discussion_notes_spec.js
@@ -0,0 +1,139 @@
+import { mount, createLocalVue } from '@vue/test-utils';
+import '~/behaviors/markdown/render_gfm';
+import { SYSTEM_NOTE } from '~/notes/constants';
+import DiscussionNotes from '~/notes/components/discussion_notes.vue';
+import NoteableNote from '~/notes/components/noteable_note.vue';
+import PlaceholderNote from '~/vue_shared/components/notes/placeholder_note.vue';
+import PlaceholderSystemNote from '~/vue_shared/components/notes/placeholder_system_note.vue';
+import SystemNote from '~/vue_shared/components/notes/system_note.vue';
+import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
+import createStore from '~/notes/stores';
+import {
+  noteableDataMock,
+  discussionMock,
+  notesDataMock,
+} from '../../../javascripts/notes/mock_data';
+
+const localVue = createLocalVue();
+
+describe('DiscussionNotes', () => {
+  let wrapper;
+
+  const createComponent = props => {
+    const store = createStore();
+    store.dispatch('setNoteableData', noteableDataMock);
+    store.dispatch('setNotesData', notesDataMock);
+
+    wrapper = mount(DiscussionNotes, {
+      localVue,
+      store,
+      propsData: {
+        discussion: discussionMock,
+        isExpanded: false,
+        shouldGroupReplies: false,
+        ...props,
+      },
+      scopedSlots: {
+        footer: '<p slot-scope="{ showReplies }">showReplies:{{showReplies}}</p>',
+      },
+      slots: {
+        'avatar-badge': '<span class="avatar-badge-slot-content" />',
+      },
+      sync: false,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('rendering', () => {
+    it('renders an element for each note in the discussion', () => {
+      createComponent();
+      const notesCount = discussionMock.notes.length;
+      const els = wrapper.findAll(TimelineEntryItem);
+      expect(els.length).toBe(notesCount);
+    });
+
+    it('renders one element if replies groupping is enabled', () => {
+      createComponent({ shouldGroupReplies: true });
+      const els = wrapper.findAll(TimelineEntryItem);
+      expect(els.length).toBe(1);
+    });
+
+    it('uses proper component to render each note type', () => {
+      const discussion = { ...discussionMock };
+      const notesData = [
+        // PlaceholderSystemNote
+        {
+          id: 1,
+          isPlaceholderNote: true,
+          placeholderType: SYSTEM_NOTE,
+          notes: [{ body: 'PlaceholderSystemNote' }],
+        },
+        // PlaceholderNote
+        {
+          id: 2,
+          isPlaceholderNote: true,
+          notes: [{ body: 'PlaceholderNote' }],
+        },
+        // SystemNote
+        {
+          id: 3,
+          system: true,
+          note: 'SystemNote',
+        },
+        // NoteableNote
+        discussion.notes[0],
+      ];
+      discussion.notes = notesData;
+      createComponent({ discussion });
+      const notes = wrapper.findAll('.notes > li');
+
+      expect(notes.at(0).is(PlaceholderSystemNote)).toBe(true);
+      expect(notes.at(1).is(PlaceholderNote)).toBe(true);
+      expect(notes.at(2).is(SystemNote)).toBe(true);
+      expect(notes.at(3).is(NoteableNote)).toBe(true);
+    });
+
+    it('renders footer scoped slot with showReplies === true when expanded', () => {
+      createComponent({ isExpanded: true });
+      expect(wrapper.text()).toMatch('showReplies:true');
+    });
+
+    it('renders footer scoped slot with showReplies === false when collapsed', () => {
+      createComponent({ isExpanded: false });
+      expect(wrapper.text()).toMatch('showReplies:false');
+    });
+
+    it('passes down avatar-badge slot content', () => {
+      createComponent();
+      expect(wrapper.find('.avatar-badge-slot-content').exists()).toBe(true);
+    });
+  });
+
+  describe('componentData', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('should return first note object for placeholder note', () => {
+      const data = {
+        isPlaceholderNote: true,
+        notes: [{ body: 'hello world!' }],
+      };
+      const note = wrapper.vm.componentData(data);
+
+      expect(note).toEqual(data.notes[0]);
+    });
+
+    it('should return given note for nonplaceholder notes', () => {
+      const data = {
+        notes: [{ id: 12 }],
+      };
+      const note = wrapper.vm.componentData(data);
+
+      expect(note).toEqual(data);
+    });
+  });
+});