Add latest changes from gitlab-org/gitlab@master

2 files changed, 127 insertions, 8 deletions

diff --git a/spec/frontend/notes/components/notes_app_spec.js b/spec/frontend/notes/components/notes_app_spec.js
index 60e866542a6..e22dd85f221 100644
--- a/spec/frontend/notes/components/notes_app_spec.js
+++ b/spec/frontend/notes/components/notes_app_spec.js
@@ -1,26 +1,44 @@
 import $ from 'jquery';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import Vue from 'vue';
-import { mount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import { setTestTimeout } from 'helpers/timeout';
 import axios from '~/lib/utils/axios_utils';
 import NotesApp from '~/notes/components/notes_app.vue';
+import CommentForm from '~/notes/components/comment_form.vue';
 import createStore from '~/notes/stores';
+import * as constants from '~/notes/constants';
 import '~/behaviors/markdown/render_gfm';
 // TODO: use generated fixture (https://gitlab.com/gitlab-org/gitlab-foss/issues/62491)
 import * as mockData from '../../notes/mock_data';
 import * as urlUtility from '~/lib/utils/url_utility';
+import OrderedLayout from '~/vue_shared/components/ordered_layout.vue';
 
 jest.mock('~/user_popovers', () => jest.fn());
 
 setTestTimeout(1000);
 
+const TYPE_COMMENT_FORM = 'comment-form';
+const TYPE_NOTES_LIST = 'notes-list';
+
+const propsData = {
+  noteableData: mockData.noteableDataMock,
+  notesData: mockData.notesDataMock,
+  userData: mockData.userDataMock,
+};
+
 describe('note_app', () => {
   let axiosMock;
   let mountComponent;
   let wrapper;
   let store;
 
+  const getComponentOrder = () => {
+    return wrapper
+      .findAll('#notes-list,.js-comment-form')
+      .wrappers.map(node => (node.is(CommentForm) ? TYPE_COMMENT_FORM : TYPE_NOTES_LIST));
+  };
+
   /**
    * waits for fetchNotes() to complete
    */
@@ -43,13 +61,7 @@ describe('note_app', () => {
     axiosMock = new AxiosMockAdapter(axios);
 
     store = createStore();
-    mountComponent = data => {
-      const propsData = data || {
-        noteableData: mockData.noteableDataMock,
-        notesData: mockData.notesDataMock,
-        userData: mockData.userDataMock,
-      };
-
+    mountComponent = () => {
       return mount(
         {
           components: {
@@ -346,4 +358,39 @@ describe('note_app', () => {
       expect(setTargetNoteHash).toHaveBeenCalled();
     });
   });
+
+  describe('when sort direction is desc', () => {
+    beforeEach(() => {
+      store = createStore();
+      store.state.discussionSortOrder = constants.DESC;
+      wrapper = shallowMount(NotesApp, {
+        propsData,
+        store,
+        stubs: {
+          'ordered-layout': OrderedLayout,
+        },
+      });
+    });
+
+    it('finds CommentForm before notes list', () => {
+      expect(getComponentOrder()).toStrictEqual([TYPE_COMMENT_FORM, TYPE_NOTES_LIST]);
+    });
+  });
+
+  describe('when sort direction is asc', () => {
+    beforeEach(() => {
+      store = createStore();
+      wrapper = shallowMount(NotesApp, {
+        propsData,
+        store,
+        stubs: {
+          'ordered-layout': OrderedLayout,
+        },
+      });
+    });
+
+    it('finds CommentForm after notes list', () => {
+      expect(getComponentOrder()).toStrictEqual([TYPE_NOTES_LIST, TYPE_COMMENT_FORM]);
+    });
+  });
 });
diff --git a/spec/frontend/notes/components/sort_discussion_spec.js b/spec/frontend/notes/components/sort_discussion_spec.js
new file mode 100644
index 00000000000..785e8c75233
--- /dev/null
+++ b/spec/frontend/notes/components/sort_discussion_spec.js
@@ -0,0 +1,72 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import SortDiscussion from '~/notes/components/sort_discussion.vue';
+import createStore from '~/notes/stores';
+import { ASC, DESC } from '~/notes/constants';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('Sort Discussion component', () => {
+  let wrapper;
+  let store;
+
+  const createComponent = () => {
+    jest.spyOn(store, 'dispatch').mockImplementation();
+
+    wrapper = shallowMount(SortDiscussion, {
+      localVue,
+      store,
+    });
+  };
+
+  beforeEach(() => {
+    store = createStore();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when asc', () => {
+    describe('when the dropdown is clicked', () => {
+      it('calls the right actions', () => {
+        createComponent();
+
+        wrapper.find('.js-newest-first').trigger('click');
+
+        expect(store.dispatch).toHaveBeenCalledWith('setDiscussionSortDirection', DESC);
+      });
+    });
+
+    it('shows the "Oldest First" as the dropdown', () => {
+      createComponent();
+
+      expect(wrapper.find('.js-dropdown-text').text()).toBe('Oldest first');
+    });
+  });
+
+  describe('when desc', () => {
+    beforeEach(() => {
+      store.state.discussionSortOrder = DESC;
+      createComponent();
+    });
+
+    describe('when the dropdown item is clicked', () => {
+      it('calls the right actions', () => {
+        wrapper.find('.js-oldest-first').trigger('click');
+
+        expect(store.dispatch).toHaveBeenCalledWith('setDiscussionSortDirection', ASC);
+      });
+
+      it('applies the active class to the correct button in the dropdown', () => {
+        expect(wrapper.find('.js-newest-first').classes()).toContain('is-active');
+      });
+    });
+
+    it('shows the "Newest First" as the dropdown', () => {
+      expect(wrapper.find('.js-dropdown-text').text()).toBe('Newest first');
+    });
+  });
+});