diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-20 09:55:51 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-20 09:55:51 +0000 |
commit | e8d2c2579383897a1dd7f9debd359abe8ae8373d (patch) | |
tree | c42be41678c2586d49a75cabce89322082698334 /spec/frontend/members | |
parent | fc845b37ec3a90aaa719975f607740c22ba6a113 (diff) | |
download | gitlab-ce-e8d2c2579383897a1dd7f9debd359abe8ae8373d.tar.gz |
Add latest changes from gitlab-org/gitlab@14-1-stable-eev14.1.0-rc42
Diffstat (limited to 'spec/frontend/members')
4 files changed, 67 insertions, 60 deletions
diff --git a/spec/frontend/members/components/app_spec.js b/spec/frontend/members/components/app_spec.js index b9fdf8792fd..9590cd9d8d4 100644 --- a/spec/frontend/members/components/app_spec.js +++ b/spec/frontend/members/components/app_spec.js @@ -5,7 +5,8 @@ import Vuex from 'vuex'; import * as commonUtils from '~/lib/utils/common_utils'; import MembersApp from '~/members/components/app.vue'; import FilterSortContainer from '~/members/components/filter_sort/filter_sort_container.vue'; -import { MEMBER_TYPES } from '~/members/constants'; +import MembersTable from '~/members/components/table/members_table.vue'; +import { MEMBER_TYPES, TAB_QUERY_PARAM_VALUES } from '~/members/constants'; import { RECEIVE_MEMBER_ROLE_ERROR, HIDE_ERROR } from '~/members/store/mutation_types'; import mutations from '~/members/store/mutations'; @@ -19,7 +20,7 @@ describe('MembersApp', () => { const createComponent = (state = {}, options = {}) => { store = new Vuex.Store({ modules: { - [MEMBER_TYPES.user]: { + [MEMBER_TYPES.group]: { namespaced: true, state: { showError: true, @@ -34,7 +35,8 @@ describe('MembersApp', () => { wrapper = shallowMount(MembersApp, { localVue, propsData: { - namespace: MEMBER_TYPES.user, + namespace: MEMBER_TYPES.group, + tabQueryParamValue: TAB_QUERY_PARAM_VALUES.group, }, store, ...options, @@ -57,7 +59,7 @@ describe('MembersApp', () => { it('renders and scrolls to error alert', async () => { createComponent({ showError: false, errorMessage: '' }); - store.commit(`${MEMBER_TYPES.user}/${RECEIVE_MEMBER_ROLE_ERROR}`, { + store.commit(`${MEMBER_TYPES.group}/${RECEIVE_MEMBER_ROLE_ERROR}`, { error: new Error('Network Error'), }); @@ -77,7 +79,7 @@ describe('MembersApp', () => { it('does not render and scroll to error alert', async () => { createComponent(); - store.commit(`${MEMBER_TYPES.user}/${HIDE_ERROR}`); + store.commit(`${MEMBER_TYPES.group}/${HIDE_ERROR}`); await nextTick(); @@ -103,4 +105,13 @@ describe('MembersApp', () => { expect(findFilterSortContainer().exists()).toBe(true); }); + + it('renders `MembersTable` component and passes `tabQueryParamValue` prop', () => { + createComponent(); + + const membersTableComponent = wrapper.findComponent(MembersTable); + + expect(membersTableComponent.exists()).toBe(true); + expect(membersTableComponent.props('tabQueryParamValue')).toBe(TAB_QUERY_PARAM_VALUES.group); + }); }); diff --git a/spec/frontend/members/components/filter_sort/members_filtered_search_bar_spec.js b/spec/frontend/members/components/filter_sort/members_filtered_search_bar_spec.js index 5e04e20801a..a3b91cb20bb 100644 --- a/spec/frontend/members/components/filter_sort/members_filtered_search_bar_spec.js +++ b/spec/frontend/members/components/filter_sort/members_filtered_search_bar_spec.js @@ -216,5 +216,17 @@ describe('MembersFilteredSearchBar', () => { 'https://localhost/?two_factor=enabled&search=foobar&sort=name_asc', ); }); + + it('adds active tab query param', () => { + window.location.search = '?tab=invited'; + + createComponent(); + + findFilteredSearchBar().vm.$emit('onFilter', [ + { type: 'filtered-search-term', value: { data: 'foobar' } }, + ]); + + expect(window.location.href).toBe('https://localhost/?search=foobar&tab=invited'); + }); }); }); diff --git a/spec/frontend/members/components/members_tabs_spec.js b/spec/frontend/members/components/members_tabs_spec.js index 6f1a6d0c223..33d8eebf7eb 100644 --- a/spec/frontend/members/components/members_tabs_spec.js +++ b/spec/frontend/members/components/members_tabs_spec.js @@ -1,9 +1,14 @@ +import { GlTabs } from '@gitlab/ui'; import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; import { mountExtended } from 'helpers/vue_test_utils_helper'; import MembersApp from '~/members/components/app.vue'; import MembersTabs from '~/members/components/members_tabs.vue'; -import { MEMBER_TYPES } from '~/members/constants'; +import { + MEMBER_TYPES, + TAB_QUERY_PARAM_VALUES, + ACTIVE_TAB_QUERY_PARAM_NAME, +} from '~/members/constants'; import { pagination } from '../mock_data'; describe('MembersTabs', () => { @@ -93,6 +98,18 @@ describe('MembersTabs', () => { wrapper.destroy(); }); + it('renders `GlTabs` with `syncActiveTabWithQueryParams` and `queryParamName` props set', async () => { + await createComponent(); + + const glTabsComponent = wrapper.findComponent(GlTabs); + + expect(glTabsComponent.exists()).toBe(true); + expect(glTabsComponent.props()).toMatchObject({ + syncActiveTabWithQueryParams: true, + queryParamName: ACTIVE_TAB_QUERY_PARAM_NAME, + }); + }); + describe('when tabs have a count', () => { it('renders tabs with count', async () => { await createComponent(); @@ -106,7 +123,7 @@ describe('MembersTabs', () => { expect(findActiveTab().text()).toContain('Members'); }); - it('renders `MembersApp` and passes `namespace` prop', async () => { + it('renders `MembersApp` and passes `namespace` and `tabQueryParamValue` props', async () => { await createComponent(); const membersApps = wrapper.findAllComponents(MembersApp).wrappers; @@ -115,6 +132,10 @@ describe('MembersTabs', () => { expect(membersApps[1].props('namespace')).toBe(MEMBER_TYPES.group); expect(membersApps[2].props('namespace')).toBe(MEMBER_TYPES.invite); expect(membersApps[3].props('namespace')).toBe(MEMBER_TYPES.accessRequest); + + expect(membersApps[1].props('tabQueryParamValue')).toBe(TAB_QUERY_PARAM_VALUES.group); + expect(membersApps[2].props('tabQueryParamValue')).toBe(TAB_QUERY_PARAM_VALUES.invite); + expect(membersApps[3].props('tabQueryParamValue')).toBe(TAB_QUERY_PARAM_VALUES.accessRequest); }); }); @@ -127,56 +148,16 @@ describe('MembersTabs', () => { expect(findTabByText('Invited')).toBeUndefined(); expect(findTabByText('Access requests')).toBeUndefined(); }); - }); - describe('when url param matches `filteredSearchBar.searchParam`', () => { - beforeEach(() => { - window.location.search = '?search_groups=foo+bar'; - }); - - const expectGroupsTabActive = () => { - expect(findActiveTab().text()).toContain('Groups'); - }; - - describe('when tab has a count', () => { - it('sets tab that corresponds to search param as active tab', async () => { - await createComponent(); - - expectGroupsTabActive(); + describe('when url param matches `filteredSearchBar.searchParam`', () => { + beforeEach(() => { + window.location.search = '?search_groups=foo+bar'; }); - }); - - describe('when tab does not have a count', () => { - it('sets tab that corresponds to search param as active tab', async () => { - await createComponent({ totalItems: 0 }); - - expectGroupsTabActive(); - }); - }); - }); - - describe('when url param matches `pagination.paramName`', () => { - beforeEach(() => { - window.location.search = '?invited_page=2'; - }); - - const expectInvitedTabActive = () => { - expect(findActiveTab().text()).toContain('Invited'); - }; - - describe('when tab has a count', () => { - it('sets tab that corresponds to pagination param as active tab', async () => { - await createComponent(); - - expectInvitedTabActive(); - }); - }); - describe('when tab does not have a count', () => { - it('sets tab that corresponds to pagination param as active tab', async () => { + it('shows tab that corresponds to search param', async () => { await createComponent({ totalItems: 0 }); - expectInvitedTabActive(); + expect(findTabByText('Groups')).not.toBeUndefined(); }); }); }); diff --git a/spec/frontend/members/components/table/members_table_spec.js b/spec/frontend/members/components/table/members_table_spec.js index 5308d7651a3..3a17d78bd17 100644 --- a/spec/frontend/members/components/table/members_table_spec.js +++ b/spec/frontend/members/components/table/members_table_spec.js @@ -15,7 +15,7 @@ import MemberAvatar from '~/members/components/table/member_avatar.vue'; import MemberSource from '~/members/components/table/member_source.vue'; import MembersTable from '~/members/components/table/members_table.vue'; import RoleDropdown from '~/members/components/table/role_dropdown.vue'; -import { MEMBER_TYPES } from '~/members/constants'; +import { MEMBER_TYPES, TAB_QUERY_PARAM_VALUES } from '~/members/constants'; import * as initUserPopovers from '~/user_popovers'; import { member as memberMock, @@ -34,7 +34,7 @@ describe('MembersTable', () => { const createStore = (state = {}) => { return new Vuex.Store({ modules: { - [MEMBER_TYPES.user]: { + [MEMBER_TYPES.invite]: { namespaced: true, state: { members: [], @@ -54,11 +54,14 @@ describe('MembersTable', () => { const createComponent = (state, provide = {}) => { wrapper = mount(MembersTable, { localVue, + propsData: { + tabQueryParamValue: TAB_QUERY_PARAM_VALUES.invite, + }, store: createStore(state), provide: { sourceId: 1, currentUserId: 1, - namespace: MEMBER_TYPES.user, + namespace: MEMBER_TYPES.invite, ...provide, }, stubs: [ @@ -74,7 +77,7 @@ describe('MembersTable', () => { }); }; - const url = 'https://localhost/foo-bar/-/project_members'; + const url = 'https://localhost/foo-bar/-/project_members?tab=invited'; const getByText = (text, options) => createWrapper(getByTextHelper(wrapper.element, text, options)); @@ -92,7 +95,7 @@ describe('MembersTable', () => { const expectCorrectLinkToPage2 = () => { expect(findPagination().findByText('2', { selector: 'a' }).attributes('href')).toBe( - `${url}?page=2`, + `${url}&invited_members_page=2`, ); }; @@ -271,7 +274,7 @@ describe('MembersTable', () => { currentPage: 1, perPage: 5, totalItems: 10, - paramName: 'page', + paramName: 'invited_members_page', }, }); @@ -279,14 +282,14 @@ describe('MembersTable', () => { }); it('removes any url params defined as `null` in the `params` attribute', () => { - window.location = new URL(`${url}?search_groups=foo`); + window.location = new URL(`${url}&search_groups=foo`); createComponent({ pagination: { currentPage: 1, perPage: 5, totalItems: 10, - paramName: 'page', + paramName: 'invited_members_page', params: { search_groups: null }, }, }); |