diff options
Diffstat (limited to 'spec/frontend/members/components/filter_sort/sort_dropdown_spec.js')
-rw-r--r-- | spec/frontend/members/components/filter_sort/sort_dropdown_spec.js | 162 |
1 files changed, 162 insertions, 0 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 new file mode 100644 index 00000000000..6fe67aded3d --- /dev/null +++ b/spec/frontend/members/components/filter_sort/sort_dropdown_spec.js @@ -0,0 +1,162 @@ +import { mount, createLocalVue } from '@vue/test-utils'; +import Vuex from 'vuex'; +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); + +describe('SortDropdown', () => { + let wrapper; + + const URL_HOST = 'https://localhost/'; + + const createComponent = state => { + const store = new Vuex.Store({ + state: { + sourceId: 1, + tableSortableFields: ['account', 'granted', 'expires', 'maxRole', 'lastSignIn'], + filteredSearchBar: { + show: true, + tokens: ['two_factor'], + searchParam: 'search', + placeholder: 'Filter members', + recentSearchesStorageKey: 'group_members', + }, + ...state, + }, + }); + + wrapper = mount(SortDropdown, { + localVue, + store, + }); + }; + + 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(GlSortingItem) + .wrappers.find(dropdownItemWrapper => dropdownItemWrapper.text() === text); + + describe('dropdown options', () => { + beforeEach(() => { + delete window.location; + window.location = new URL(URL_HOST); + }); + + it('adds dropdown items for all the sortable fields', () => { + const URL_FILTER_PARAMS = '?two_factor=enabled&search=foobar'; + const EXPECTED_BASE_URL = `${URL_HOST}${URL_FILTER_PARAMS}&sort=`; + + window.location.search = URL_FILTER_PARAMS; + + const expectedDropdownItems = [ + { + label: 'Account', + url: `${EXPECTED_BASE_URL}name_asc`, + }, + { + label: 'Access granted', + url: `${EXPECTED_BASE_URL}last_joined`, + }, + { + label: 'Max role', + url: `${EXPECTED_BASE_URL}access_level_asc`, + }, + { + label: 'Last sign-in', + url: `${EXPECTED_BASE_URL}recent_sign_in`, + }, + ]; + + createComponent(); + + expectedDropdownItems.forEach(expectedDropdownItem => { + const dropdownItem = findDropdownItemByText(expectedDropdownItem.label); + + expect(dropdownItem).not.toBe(null); + expect(dropdownItem.find('a').attributes('href')).toBe(expectedDropdownItem.url); + }); + }); + + it('checks selected sort option', () => { + window.location.search = '?sort=access_level_asc'; + + createComponent(); + + expect(findDropdownItemByText('Max role').vm.$attrs.active).toBe(true); + }); + }); + + describe('dropdown toggle', () => { + beforeEach(() => { + delete window.location; + window.location = new URL(URL_HOST); + }); + + it('defaults to sorting by "Account" in ascending order', () => { + createComponent(); + + expect(findSortingComponent().props('isAscending')).toBe(true); + expect(findDropdownToggle().text()).toBe('Account'); + }); + + it('sets text as selected sort option', () => { + window.location.search = '?sort=access_level_asc'; + + createComponent(); + + expect(findDropdownToggle().text()).toBe('Max role'); + }); + }); + + 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`); + }); + }); + }); + + 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`); + }); + }); + }); + }); +}); |