1 files changed, 86 insertions, 9 deletions

diff --git a/spec/frontend/work_items/components/work_item_notes_spec.js b/spec/frontend/work_items/components/work_item_notes_spec.js
index ed68d214fc9..23dd2b6bacb 100644
--- a/spec/frontend/work_items/components/work_item_notes_spec.js
+++ b/spec/frontend/work_items/components/work_item_notes_spec.js
@@ -1,18 +1,22 @@
 import { GlSkeletonLoader } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import SystemNote from '~/work_items/components/notes/system_note.vue';
 import WorkItemNotes from '~/work_items/components/work_item_notes.vue';
+import WorkItemCommentForm from '~/work_items/components/work_item_comment_form.vue';
+import ActivityFilter from '~/work_items/components/notes/activity_filter.vue';
 import workItemNotesQuery from '~/work_items/graphql/work_item_notes.query.graphql';
 import workItemNotesByIidQuery from '~/work_items/graphql/work_item_notes_by_iid.query.graphql';
-import { WIDGET_TYPE_NOTES } from '~/work_items/constants';
+import { DEFAULT_PAGE_SIZE_NOTES, WIDGET_TYPE_NOTES } from '~/work_items/constants';
+import { DESC } from '~/notes/constants';
 import {
   mockWorkItemNotesResponse,
   workItemQueryResponse,
   mockWorkItemNotesByIidResponse,
+  mockMoreWorkItemNotesResponse,
 } from '../mock_data';
 
 const mockWorkItemId = workItemQueryResponse.data.workItem.id;
@@ -24,6 +28,12 @@ const mockNotesByIidWidgetResponse = mockWorkItemNotesByIidResponse.data.workspa
   (widget) => widget.type === WIDGET_TYPE_NOTES,
 );
 
+const mockMoreNotesWidgetResponse = mockMoreWorkItemNotesResponse.data.workItem.widgets.find(
+  (widget) => widget.type === WIDGET_TYPE_NOTES,
+);
+
+const firstSystemNodeId = mockNotesWidgetResponse.discussions.nodes[0].notes.nodes[0].id;
+
 describe('WorkItemNotes component', () => {
   let wrapper;
 
@@ -31,16 +41,24 @@ describe('WorkItemNotes component', () => {
 
   const findAllSystemNotes = () => wrapper.findAllComponents(SystemNote);
   const findActivityLabel = () => wrapper.find('label');
+  const findWorkItemCommentForm = () => wrapper.findComponent(WorkItemCommentForm);
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
+  const findSortingFilter = () => wrapper.findComponent(ActivityFilter);
+  const findSystemNoteAtIndex = (index) => findAllSystemNotes().at(index);
   const workItemNotesQueryHandler = jest.fn().mockResolvedValue(mockWorkItemNotesResponse);
   const workItemNotesByIidQueryHandler = jest
     .fn()
     .mockResolvedValue(mockWorkItemNotesByIidResponse);
+  const workItemMoreNotesQueryHandler = jest.fn().mockResolvedValue(mockMoreWorkItemNotesResponse);
 
-  const createComponent = ({ workItemId = mockWorkItemId, fetchByIid = false } = {}) => {
+  const createComponent = ({
+    workItemId = mockWorkItemId,
+    fetchByIid = false,
+    defaultWorkItemNotesQueryHandler = workItemNotesQueryHandler,
+  } = {}) => {
     wrapper = shallowMount(WorkItemNotes, {
       apolloProvider: createMockApollo([
-        [workItemNotesQuery, workItemNotesQueryHandler],
+        [workItemNotesQuery, defaultWorkItemNotesQueryHandler],
         [workItemNotesByIidQuery, workItemNotesByIidQueryHandler],
       ]),
       propsData: {
@@ -50,6 +68,7 @@ describe('WorkItemNotes component', () => {
         },
         fullPath: 'test-path',
         fetchByIid,
+        workItemType: 'task',
       },
       provide: {
         glFeatures: {
@@ -63,14 +82,17 @@ describe('WorkItemNotes component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders activity label', () => {
     expect(findActivityLabel().exists()).toBe(true);
   });
 
+  it('passes correct props to comment form component', async () => {
+    createComponent({ workItemId: mockWorkItemId, fetchByIid: false });
+    await waitForPromises();
+
+    expect(findWorkItemCommentForm().props('fetchByIid')).toEqual(false);
+  });
+
   describe('when notes are loading', () => {
     it('renders skeleton loader', () => {
       expect(findSkeletonLoader().exists()).toBe(true);
@@ -98,10 +120,65 @@ describe('WorkItemNotes component', () => {
       await waitForPromises();
     });
 
-    it('shows the notes list', () => {
+    it('renders the notes list to the length of the response', () => {
       expect(findAllSystemNotes()).toHaveLength(
         mockNotesByIidWidgetResponse.discussions.nodes.length,
       );
     });
+
+    it('passes correct props to comment form component', () => {
+      expect(findWorkItemCommentForm().props('fetchByIid')).toEqual(true);
+    });
+  });
+
+  describe('Pagination', () => {
+    describe('When there is no next page', () => {
+      it('fetch more notes is not called', async () => {
+        createComponent();
+        await nextTick();
+        expect(workItemMoreNotesQueryHandler).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when there is next page', () => {
+      beforeEach(async () => {
+        createComponent({ defaultWorkItemNotesQueryHandler: workItemMoreNotesQueryHandler });
+        await waitForPromises();
+      });
+
+      it('fetch more notes should be called', async () => {
+        expect(workItemMoreNotesQueryHandler).toHaveBeenCalledWith({
+          pageSize: DEFAULT_PAGE_SIZE_NOTES,
+          id: 'gid://gitlab/WorkItem/1',
+        });
+
+        await nextTick();
+
+        expect(workItemMoreNotesQueryHandler).toHaveBeenCalledWith({
+          pageSize: 45,
+          id: 'gid://gitlab/WorkItem/1',
+          after: mockMoreNotesWidgetResponse.discussions.pageInfo.endCursor,
+        });
+      });
+    });
+  });
+
+  describe('Sorting', () => {
+    beforeEach(async () => {
+      createComponent();
+      await waitForPromises();
+    });
+
+    it('filter exists', () => {
+      expect(findSortingFilter().exists()).toBe(true);
+    });
+
+    it('sorts the list when the `changeSortOrder` event is emitted', async () => {
+      expect(findSystemNoteAtIndex(0).props('note').id).toEqual(firstSystemNodeId);
+
+      await findSortingFilter().vm.$emit('changeSortOrder', DESC);
+
+      expect(findSystemNoteAtIndex(0).props('note').id).not.toEqual(firstSystemNodeId);
+    });
   });
 });