2021-03-11 19:13:27 +05:30
|
|
|
import { GlFilteredSearchToken } from '@gitlab/ui';
|
2021-02-22 17:27:13 +05:30
|
|
|
import { shallowMount, createLocalVue } from '@vue/test-utils';
|
|
|
|
import Vuex from 'vuex';
|
|
|
|
import MembersFilteredSearchBar from '~/members/components/filter_sort/members_filtered_search_bar.vue';
|
2021-04-29 21:17:54 +05:30
|
|
|
import { MEMBER_TYPES } from '~/members/constants';
|
2021-06-08 01:23:25 +05:30
|
|
|
import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
|
2021-02-22 17:27:13 +05:30
|
|
|
import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
|
|
|
|
|
|
|
|
const localVue = createLocalVue();
|
|
|
|
localVue.use(Vuex);
|
|
|
|
|
|
|
|
describe('MembersFilteredSearchBar', () => {
|
|
|
|
let wrapper;
|
|
|
|
|
2021-04-29 21:17:54 +05:30
|
|
|
const createComponent = ({ state = {}, provide = {} } = {}) => {
|
2021-02-22 17:27:13 +05:30
|
|
|
const store = new Vuex.Store({
|
2021-04-29 21:17:54 +05:30
|
|
|
modules: {
|
|
|
|
[MEMBER_TYPES.user]: {
|
|
|
|
namespaced: true,
|
|
|
|
state: {
|
|
|
|
filteredSearchBar: {
|
|
|
|
show: true,
|
|
|
|
tokens: ['two_factor'],
|
|
|
|
searchParam: 'search',
|
|
|
|
placeholder: 'Filter members',
|
|
|
|
recentSearchesStorageKey: 'group_members',
|
|
|
|
},
|
|
|
|
...state,
|
|
|
|
},
|
2021-02-22 17:27:13 +05:30
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
wrapper = shallowMount(MembersFilteredSearchBar, {
|
|
|
|
localVue,
|
2021-04-29 21:17:54 +05:30
|
|
|
provide: {
|
|
|
|
sourceId: 1,
|
|
|
|
canManageMembers: true,
|
|
|
|
namespace: MEMBER_TYPES.user,
|
|
|
|
...provide,
|
|
|
|
},
|
2021-02-22 17:27:13 +05:30
|
|
|
store,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
const findFilteredSearchBar = () => wrapper.find(FilteredSearchBar);
|
|
|
|
|
|
|
|
it('passes correct props to `FilteredSearchBar` component', () => {
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
expect(findFilteredSearchBar().props()).toMatchObject({
|
|
|
|
namespace: '1',
|
|
|
|
recentSearchesStorageKey: 'group_members',
|
|
|
|
searchInputPlaceholder: 'Filter members',
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('filtering tokens', () => {
|
|
|
|
it('includes tokens set in `filteredSearchBar.tokens`', () => {
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
expect(findFilteredSearchBar().props('tokens')).toEqual([
|
|
|
|
{
|
|
|
|
type: 'two_factor',
|
|
|
|
icon: 'lock',
|
|
|
|
title: '2FA',
|
|
|
|
token: GlFilteredSearchToken,
|
|
|
|
unique: true,
|
2021-06-08 01:23:25 +05:30
|
|
|
operators: OPERATOR_IS_ONLY,
|
2021-02-22 17:27:13 +05:30
|
|
|
options: [
|
|
|
|
{ value: 'enabled', title: 'Enabled' },
|
|
|
|
{ value: 'disabled', title: 'Disabled' },
|
|
|
|
],
|
|
|
|
requiredPermissions: 'canManageMembers',
|
|
|
|
},
|
|
|
|
]);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when `canManageMembers` is false', () => {
|
|
|
|
it('excludes 2FA token', () => {
|
|
|
|
createComponent({
|
2021-04-29 21:17:54 +05:30
|
|
|
state: {
|
|
|
|
filteredSearchBar: {
|
|
|
|
show: true,
|
|
|
|
tokens: ['two_factor', 'with_inherited_permissions'],
|
|
|
|
searchParam: 'search',
|
|
|
|
placeholder: 'Filter members',
|
|
|
|
recentSearchesStorageKey: 'group_members',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
provide: {
|
|
|
|
canManageMembers: false,
|
2021-02-22 17:27:13 +05:30
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(findFilteredSearchBar().props('tokens')).toEqual([
|
|
|
|
{
|
|
|
|
type: 'with_inherited_permissions',
|
|
|
|
icon: 'group',
|
|
|
|
title: 'Membership',
|
|
|
|
token: GlFilteredSearchToken,
|
|
|
|
unique: true,
|
2021-06-08 01:23:25 +05:30
|
|
|
operators: OPERATOR_IS_ONLY,
|
2021-03-08 18:12:59 +05:30
|
|
|
options: [
|
|
|
|
{ value: 'exclude', title: 'Direct' },
|
|
|
|
{ value: 'only', title: 'Inherited' },
|
|
|
|
],
|
2021-02-22 17:27:13 +05:30
|
|
|
},
|
|
|
|
]);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when filters are set via query params', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
delete window.location;
|
|
|
|
window.location = new URL('https://localhost');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('parses and passes tokens to `FilteredSearchBar` component as `initialFilterValue` prop', () => {
|
|
|
|
window.location.search = '?two_factor=enabled&token_not_available=foobar';
|
|
|
|
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
expect(findFilteredSearchBar().props('initialFilterValue')).toEqual([
|
|
|
|
{
|
|
|
|
type: 'two_factor',
|
|
|
|
value: {
|
|
|
|
data: 'enabled',
|
|
|
|
operator: '=',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
]);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('parses and passes search param to `FilteredSearchBar` component as `initialFilterValue` prop', () => {
|
|
|
|
window.location.search = '?search=foobar';
|
|
|
|
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
expect(findFilteredSearchBar().props('initialFilterValue')).toEqual([
|
|
|
|
{
|
|
|
|
type: 'filtered-search-term',
|
|
|
|
value: {
|
|
|
|
data: 'foobar',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
]);
|
|
|
|
});
|
2021-06-08 01:23:25 +05:30
|
|
|
|
|
|
|
it('parses and passes search param with multiple words to `FilteredSearchBar` component as `initialFilterValue` prop', () => {
|
|
|
|
window.location.search = '?search=foo+bar+baz';
|
|
|
|
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
expect(findFilteredSearchBar().props('initialFilterValue')).toEqual([
|
|
|
|
{
|
|
|
|
type: 'filtered-search-term',
|
|
|
|
value: {
|
|
|
|
data: 'foo bar baz',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
]);
|
|
|
|
});
|
2021-02-22 17:27:13 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
describe('when filter bar is submitted', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
delete window.location;
|
|
|
|
window.location = new URL('https://localhost');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('adds correct filter query params', () => {
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
findFilteredSearchBar().vm.$emit('onFilter', [
|
|
|
|
{ type: 'two_factor', value: { data: 'enabled', operator: '=' } },
|
|
|
|
]);
|
|
|
|
|
|
|
|
expect(window.location.href).toBe('https://localhost/?two_factor=enabled');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('adds search query param', () => {
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
findFilteredSearchBar().vm.$emit('onFilter', [
|
|
|
|
{ type: 'two_factor', value: { data: 'enabled', operator: '=' } },
|
|
|
|
{ type: 'filtered-search-term', value: { data: 'foobar' } },
|
|
|
|
]);
|
|
|
|
|
|
|
|
expect(window.location.href).toBe('https://localhost/?two_factor=enabled&search=foobar');
|
|
|
|
});
|
|
|
|
|
2021-06-08 01:23:25 +05:30
|
|
|
it('adds search query param with multiple words', () => {
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
findFilteredSearchBar().vm.$emit('onFilter', [
|
|
|
|
{ type: 'two_factor', value: { data: 'enabled', operator: '=' } },
|
|
|
|
{ type: 'filtered-search-term', value: { data: 'foo bar baz' } },
|
|
|
|
]);
|
|
|
|
|
|
|
|
expect(window.location.href).toBe('https://localhost/?two_factor=enabled&search=foo+bar+baz');
|
|
|
|
});
|
|
|
|
|
2021-02-22 17:27:13 +05:30
|
|
|
it('adds sort query param', () => {
|
|
|
|
window.location.search = '?sort=name_asc';
|
|
|
|
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
findFilteredSearchBar().vm.$emit('onFilter', [
|
|
|
|
{ type: 'two_factor', value: { data: 'enabled', operator: '=' } },
|
|
|
|
{ type: 'filtered-search-term', value: { data: 'foobar' } },
|
|
|
|
]);
|
|
|
|
|
|
|
|
expect(window.location.href).toBe(
|
|
|
|
'https://localhost/?two_factor=enabled&search=foobar&sort=name_asc',
|
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|