Add latest changes from gitlab-org/gitlab@master

2 files changed, 71 insertions, 44 deletions

diff --git a/spec/frontend/members/components/filter_sort/sort_dropdown_spec.js b/spec/frontend/members/components/filter_sort/sort_dropdown_spec.js
index 22c1eea1653..6fe67aded3d 100644
--- a/spec/frontend/members/components/filter_sort/sort_dropdown_spec.js
+++ b/spec/frontend/members/components/filter_sort/sort_dropdown_spec.js
@@ -1,8 +1,8 @@
 import { mount, createLocalVue } from '@vue/test-utils';
-import { within } from '@testing-library/dom';
 import Vuex from 'vuex';
-import { GlDropdownItem } from '@gitlab/ui';
+import { GlSorting, GlSortingItem } from '@gitlab/ui';
 import SortDropdown from '~/members/components/filter_sort/sort_dropdown.vue';
+import * as urlUtilities from '~/lib/utils/url_utility';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -34,10 +34,13 @@ describe('SortDropdown', () => {
     });
   };
 
+  const findSortingComponent = () => wrapper.find(GlSorting);
+  const findSortDirectionToggle = () =>
+    findSortingComponent().find('button[title="Sort direction"]');
   const findDropdownToggle = () => wrapper.find('button[aria-haspopup="true"]');
   const findDropdownItemByText = text =>
     wrapper
-      .findAll(GlDropdownItem)
+      .findAll(GlSortingItem)
       .wrappers.find(dropdownItemWrapper => dropdownItemWrapper.text() === text);
 
   describe('dropdown options', () => {
@@ -54,37 +57,21 @@ describe('SortDropdown', () => {
 
       const expectedDropdownItems = [
         {
-          label: 'Account, ascending',
+          label: 'Account',
           url: `${EXPECTED_BASE_URL}name_asc`,
         },
         {
-          label: 'Account, descending',
-          url: `${EXPECTED_BASE_URL}name_desc`,
-        },
-        {
-          label: 'Access granted, ascending',
+          label: 'Access granted',
           url: `${EXPECTED_BASE_URL}last_joined`,
         },
         {
-          label: 'Access granted, descending',
-          url: `${EXPECTED_BASE_URL}oldest_joined`,
-        },
-        {
-          label: 'Max role, ascending',
+          label: 'Max role',
           url: `${EXPECTED_BASE_URL}access_level_asc`,
         },
         {
-          label: 'Max role, descending',
-          url: `${EXPECTED_BASE_URL}access_level_desc`,
-        },
-        {
-          label: 'Last sign-in, ascending',
+          label: 'Last sign-in',
           url: `${EXPECTED_BASE_URL}recent_sign_in`,
         },
-        {
-          label: 'Last sign-in, descending',
-          url: `${EXPECTED_BASE_URL}oldest_sign_in`,
-        },
       ];
 
       createComponent();
@@ -102,7 +89,7 @@ describe('SortDropdown', () => {
 
       createComponent();
 
-      expect(findDropdownItemByText('Max role, ascending').props('isChecked')).toBe(true);
+      expect(findDropdownItemByText('Max role').vm.$attrs.active).toBe(true);
     });
   });
 
@@ -112,10 +99,11 @@ describe('SortDropdown', () => {
       window.location = new URL(URL_HOST);
     });
 
-    it('defaults to sorting by "Account, ascending"', () => {
+    it('defaults to sorting by "Account" in ascending order', () => {
       createComponent();
 
-      expect(findDropdownToggle().text()).toBe('Account, ascending');
+      expect(findSortingComponent().props('isAscending')).toBe(true);
+      expect(findDropdownToggle().text()).toBe('Account');
     });
 
     it('sets text as selected sort option', () => {
@@ -123,13 +111,52 @@ describe('SortDropdown', () => {
 
       createComponent();
 
-      expect(findDropdownToggle().text()).toBe('Max role, ascending');
+      expect(findDropdownToggle().text()).toBe('Max role');
     });
   });
 
-  it('renders dropdown label', () => {
-    createComponent();
+  describe('sort direction toggle', () => {
+    beforeEach(() => {
+      delete window.location;
+      window.location = new URL(URL_HOST);
+
+      jest.spyOn(urlUtilities, 'visitUrl');
+    });
+
+    describe('when current sort direction is ascending', () => {
+      beforeEach(() => {
+        window.location.search = '?sort=access_level_asc';
+
+        createComponent();
+      });
+
+      describe('when sort direction toggle is clicked', () => {
+        beforeEach(() => {
+          findSortDirectionToggle().trigger('click');
+        });
+
+        it('sorts in descending order', () => {
+          expect(urlUtilities.visitUrl).toHaveBeenCalledWith(`${URL_HOST}?sort=access_level_desc`);
+        });
+      });
+    });
 
-    expect(within(wrapper.element).queryByText('Sort by')).not.toBe(null);
+    describe('when current sort direction is descending', () => {
+      beforeEach(() => {
+        window.location.search = '?sort=access_level_desc';
+
+        createComponent();
+      });
+
+      describe('when sort direction toggle is clicked', () => {
+        beforeEach(() => {
+          findSortDirectionToggle().trigger('click');
+        });
+
+        it('sorts in ascending order', () => {
+          expect(urlUtilities.visitUrl).toHaveBeenCalledWith(`${URL_HOST}?sort=access_level_asc`);
+        });
+      });
+    });
   });
 });
diff --git a/spec/frontend/members/utils_spec.js b/spec/frontend/members/utils_spec.js
index 2dcd084b241..7bbfddf8fc6 100644
--- a/spec/frontend/members/utils_spec.js
+++ b/spec/frontend/members/utils_spec.js
@@ -8,7 +8,7 @@ import {
   canUpdate,
   canOverride,
   parseSortParam,
-  buildSortUrl,
+  buildSortHref,
 } from '~/members/utils';
 import { DEFAULT_SORT } from '~/members/constants';
 import { member as memberMock, group, invite } from './mock_data';
@@ -148,14 +148,14 @@ describe('Members Utils', () => {
 
     describe.each`
       sortParam              | expected
-      ${'name_asc'}          | ${{ sortBy: 'account', sortDesc: false, sortByLabel: 'Account, ascending' }}
-      ${'name_desc'}         | ${{ sortBy: 'account', sortDesc: true, sortByLabel: 'Account, descending' }}
-      ${'last_joined'}       | ${{ sortBy: 'granted', sortDesc: false, sortByLabel: 'Access granted, ascending' }}
-      ${'oldest_joined'}     | ${{ sortBy: 'granted', sortDesc: true, sortByLabel: 'Access granted, descending' }}
-      ${'access_level_asc'}  | ${{ sortBy: 'maxRole', sortDesc: false, sortByLabel: 'Max role, ascending' }}
-      ${'access_level_desc'} | ${{ sortBy: 'maxRole', sortDesc: true, sortByLabel: 'Max role, descending' }}
-      ${'recent_sign_in'}    | ${{ sortBy: 'lastSignIn', sortDesc: false, sortByLabel: 'Last sign-in, ascending' }}
-      ${'oldest_sign_in'}    | ${{ sortBy: 'lastSignIn', sortDesc: true, sortByLabel: 'Last sign-in, descending' }}
+      ${'name_asc'}          | ${{ sortByKey: 'account', sortDesc: false }}
+      ${'name_desc'}         | ${{ sortByKey: 'account', sortDesc: true }}
+      ${'last_joined'}       | ${{ sortByKey: 'granted', sortDesc: false }}
+      ${'oldest_joined'}     | ${{ sortByKey: 'granted', sortDesc: true }}
+      ${'access_level_asc'}  | ${{ sortByKey: 'maxRole', sortDesc: false }}
+      ${'access_level_desc'} | ${{ sortByKey: 'maxRole', sortDesc: true }}
+      ${'recent_sign_in'}    | ${{ sortByKey: 'lastSignIn', sortDesc: false }}
+      ${'oldest_sign_in'}    | ${{ sortByKey: 'lastSignIn', sortDesc: true }}
     `('when `sort` query string param is `$sortParam`', ({ sortParam, expected }) => {
       it(`returns ${JSON.stringify(expected)}`, async () => {
         window.location.search = `?sort=${sortParam}`;
@@ -167,7 +167,7 @@ describe('Members Utils', () => {
     });
   });
 
-  describe('buildSortUrl', () => {
+  describe('buildSortHref', () => {
     beforeEach(() => {
       delete window.location;
       window.location = new URL(URL_HOST);
@@ -176,7 +176,7 @@ describe('Members Utils', () => {
     describe('when field passed in `sortBy` argument does not have `sort` key defined', () => {
       it('returns an empty string', () => {
         expect(
-          buildSortUrl({
+          buildSortHref({
             sortBy: 'source',
             sortDesc: false,
             filteredSearchBarTokens: [],
@@ -189,7 +189,7 @@ describe('Members Utils', () => {
     describe('when there are no filter params set', () => {
       it('sets `sort` param', () => {
         expect(
-          buildSortUrl({
+          buildSortHref({
             sortBy: 'account',
             sortDesc: false,
             filteredSearchBarTokens: [],
@@ -204,7 +204,7 @@ describe('Members Utils', () => {
         window.location.search = '?two_factor=enabled&with_inherited_permissions=exclude';
 
         expect(
-          buildSortUrl({
+          buildSortHref({
             sortBy: 'account',
             sortDesc: false,
             filteredSearchBarTokens: ['two_factor', 'with_inherited_permissions'],
@@ -219,7 +219,7 @@ describe('Members Utils', () => {
         window.location.search = '?search=foobar';
 
         expect(
-          buildSortUrl({
+          buildSortHref({
             sortBy: 'account',
             sortDesc: false,
             filteredSearchBarTokens: ['two_factor', 'with_inherited_permissions'],