1 files changed, 176 insertions, 0 deletions
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
new file mode 100644
index 00000000000..ca885000c2f
--- /dev/null
+++ b/spec/frontend/members/components/filter_sort/members_filtered_search_bar_spec.js
@@ -0,0 +1,176 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { GlFilteredSearchToken } from '@gitlab/ui';
+import MembersFilteredSearchBar from '~/members/components/filter_sort/members_filtered_search_bar.vue';
+import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('MembersFilteredSearchBar', () => {
+  let wrapper;
+
+  const createComponent = state => {
+    const store = new Vuex.Store({
+      state: {
+        sourceId: 1,
+        filteredSearchBar: {
+          show: true,
+          tokens: ['two_factor'],
+          searchParam: 'search',
+          placeholder: 'Filter members',
+          recentSearchesStorageKey: 'group_members',
+        },
+        canManageMembers: true,
+        ...state,
+      },
+    });
+
+    wrapper = shallowMount(MembersFilteredSearchBar, {
+      localVue,
+      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,
+          operators: [{ value: '=', description: 'is' }],
+          options: [
+            { value: 'enabled', title: 'Enabled' },
+            { value: 'disabled', title: 'Disabled' },
+          ],
+          requiredPermissions: 'canManageMembers',
+        },
+      ]);
+    });
+
+    describe('when `canManageMembers` is false', () => {
+      it('excludes 2FA token', () => {
+        createComponent({
+          filteredSearchBar: {
+            show: true,
+            tokens: ['two_factor', 'with_inherited_permissions'],
+            searchParam: 'search',
+            placeholder: 'Filter members',
+            recentSearchesStorageKey: 'group_members',
+          },
+          canManageMembers: false,
+        });
+
+        expect(findFilteredSearchBar().props('tokens')).toEqual([
+          {
+            type: 'with_inherited_permissions',
+            icon: 'group',
+            title: 'Membership',
+            token: GlFilteredSearchToken,
+            unique: true,
+            operators: [{ value: '=', description: 'is' }],
+            options: [{ value: 'exclude', title: 'Direct' }, { value: 'only', title: 'Inherited' }],
+          },
+        ]);
+      });
+    });
+  });
+
+  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',
+          },
+        },
+      ]);
+    });
+  });
+
+  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');
+    });
+
+    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',
+      );
+    });
+  });
+});