diff options
Diffstat (limited to 'spec/frontend/search/topbar')
3 files changed, 422 insertions, 0 deletions
diff --git a/spec/frontend/search/topbar/components/group_filter_spec.js b/spec/frontend/search/topbar/components/group_filter_spec.js new file mode 100644 index 00000000000..017808d576e --- /dev/null +++ b/spec/frontend/search/topbar/components/group_filter_spec.js @@ -0,0 +1,121 @@ +import Vuex from 'vuex'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import { MOCK_GROUP, MOCK_QUERY } from 'jest/search/mock_data'; +import { visitUrl, setUrlParams } from '~/lib/utils/url_utility'; +import GroupFilter from '~/search/topbar/components/group_filter.vue'; +import SearchableDropdown from '~/search/topbar/components/searchable_dropdown.vue'; +import { ANY_OPTION, GROUP_DATA, PROJECT_DATA } from '~/search/topbar/constants'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +jest.mock('~/lib/utils/url_utility', () => ({ + visitUrl: jest.fn(), + setUrlParams: jest.fn(), +})); + +describe('GroupFilter', () => { + let wrapper; + + const actionSpies = { + fetchGroups: jest.fn(), + }; + + const defaultProps = { + initialData: null, + }; + + const createComponent = (initialState, props) => { + const store = new Vuex.Store({ + state: { + query: MOCK_QUERY, + ...initialState, + }, + actions: actionSpies, + }); + + wrapper = shallowMount(GroupFilter, { + localVue, + store, + propsData: { + ...defaultProps, + ...props, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + const findSearchableDropdown = () => wrapper.find(SearchableDropdown); + + describe('template', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders SearchableDropdown always', () => { + expect(findSearchableDropdown().exists()).toBe(true); + }); + }); + + describe('events', () => { + describe('when @search is emitted', () => { + const search = 'test'; + + beforeEach(() => { + createComponent(); + + findSearchableDropdown().vm.$emit('search', search); + }); + + it('calls fetchGroups with the search paramter', () => { + expect(actionSpies.fetchGroups).toHaveBeenCalledTimes(1); + expect(actionSpies.fetchGroups).toHaveBeenCalledWith(expect.any(Object), search); + }); + }); + + describe('when @change is emitted', () => { + beforeEach(() => { + createComponent(); + + findSearchableDropdown().vm.$emit('change', MOCK_GROUP); + }); + + it('calls calls setUrlParams with group id, project id null, and visitUrl', () => { + expect(setUrlParams).toHaveBeenCalledWith({ + [GROUP_DATA.queryParam]: MOCK_GROUP.id, + [PROJECT_DATA.queryParam]: null, + }); + + expect(visitUrl).toHaveBeenCalled(); + }); + }); + }); + + describe('computed', () => { + describe('selectedGroup', () => { + describe('when initialData is null', () => { + beforeEach(() => { + createComponent(); + }); + + it('sets selectedGroup to ANY_OPTION', () => { + expect(wrapper.vm.selectedGroup).toBe(ANY_OPTION); + }); + }); + + describe('when initialData is set', () => { + beforeEach(() => { + createComponent({}, { initialData: MOCK_GROUP }); + }); + + it('sets selectedGroup to ANY_OPTION', () => { + expect(wrapper.vm.selectedGroup).toBe(MOCK_GROUP); + }); + }); + }); + }); +}); diff --git a/spec/frontend/search/topbar/components/project_filter_spec.js b/spec/frontend/search/topbar/components/project_filter_spec.js new file mode 100644 index 00000000000..c1fc61d7e89 --- /dev/null +++ b/spec/frontend/search/topbar/components/project_filter_spec.js @@ -0,0 +1,134 @@ +import Vuex from 'vuex'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import { MOCK_PROJECT, MOCK_QUERY } from 'jest/search/mock_data'; +import { visitUrl, setUrlParams } from '~/lib/utils/url_utility'; +import ProjectFilter from '~/search/topbar/components/project_filter.vue'; +import SearchableDropdown from '~/search/topbar/components/searchable_dropdown.vue'; +import { ANY_OPTION, GROUP_DATA, PROJECT_DATA } from '~/search/topbar/constants'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +jest.mock('~/lib/utils/url_utility', () => ({ + visitUrl: jest.fn(), + setUrlParams: jest.fn(), +})); + +describe('ProjectFilter', () => { + let wrapper; + + const actionSpies = { + fetchProjects: jest.fn(), + }; + + const defaultProps = { + initialData: null, + }; + + const createComponent = (initialState, props) => { + const store = new Vuex.Store({ + state: { + query: MOCK_QUERY, + ...initialState, + }, + actions: actionSpies, + }); + + wrapper = shallowMount(ProjectFilter, { + localVue, + store, + propsData: { + ...defaultProps, + ...props, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + const findSearchableDropdown = () => wrapper.find(SearchableDropdown); + + describe('template', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders SearchableDropdown always', () => { + expect(findSearchableDropdown().exists()).toBe(true); + }); + }); + + describe('events', () => { + beforeEach(() => { + createComponent(); + }); + + describe('when @search is emitted', () => { + const search = 'test'; + + beforeEach(() => { + findSearchableDropdown().vm.$emit('search', search); + }); + + it('calls fetchProjects with the search paramter', () => { + expect(actionSpies.fetchProjects).toHaveBeenCalledWith(expect.any(Object), search); + }); + }); + + describe('when @change is emitted', () => { + describe('with Any', () => { + beforeEach(() => { + findSearchableDropdown().vm.$emit('change', ANY_OPTION); + }); + + it('calls setUrlParams with project id, not group id, then calls visitUrl', () => { + expect(setUrlParams).toHaveBeenCalledWith({ + [PROJECT_DATA.queryParam]: ANY_OPTION.id, + }); + expect(visitUrl).toHaveBeenCalled(); + }); + }); + + describe('with a Project', () => { + beforeEach(() => { + findSearchableDropdown().vm.$emit('change', MOCK_PROJECT); + }); + + it('calls setUrlParams with project id, group id, then calls visitUrl', () => { + expect(setUrlParams).toHaveBeenCalledWith({ + [GROUP_DATA.queryParam]: MOCK_PROJECT.namespace_id, + [PROJECT_DATA.queryParam]: MOCK_PROJECT.id, + }); + expect(visitUrl).toHaveBeenCalled(); + }); + }); + }); + }); + + describe('computed', () => { + describe('selectedProject', () => { + describe('when initialData is null', () => { + beforeEach(() => { + createComponent(); + }); + + it('sets selectedProject to ANY_OPTION', () => { + expect(wrapper.vm.selectedProject).toBe(ANY_OPTION); + }); + }); + + describe('when initialData is set', () => { + beforeEach(() => { + createComponent({}, { initialData: MOCK_PROJECT }); + }); + + it('sets selectedProject to the initialData', () => { + expect(wrapper.vm.selectedProject).toBe(MOCK_PROJECT); + }); + }); + }); + }); +}); diff --git a/spec/frontend/search/topbar/components/searchable_dropdown_spec.js b/spec/frontend/search/topbar/components/searchable_dropdown_spec.js new file mode 100644 index 00000000000..c4ebaabbf96 --- /dev/null +++ b/spec/frontend/search/topbar/components/searchable_dropdown_spec.js @@ -0,0 +1,167 @@ +import Vuex from 'vuex'; +import { createLocalVue, shallowMount, mount } from '@vue/test-utils'; +import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlSkeletonLoader } from '@gitlab/ui'; +import { MOCK_GROUPS, MOCK_GROUP, MOCK_QUERY } from 'jest/search/mock_data'; +import SearchableDropdown from '~/search/topbar/components/searchable_dropdown.vue'; +import { ANY_OPTION, GROUP_DATA } from '~/search/topbar/constants'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('Global Search Searchable Dropdown', () => { + let wrapper; + + const defaultProps = { + headerText: GROUP_DATA.headerText, + selectedDisplayValue: GROUP_DATA.selectedDisplayValue, + itemsDisplayValue: GROUP_DATA.itemsDisplayValue, + loading: false, + selectedItem: ANY_OPTION, + items: [], + }; + + const createComponent = (initialState, props, mountFn = shallowMount) => { + const store = new Vuex.Store({ + state: { + query: MOCK_QUERY, + ...initialState, + }, + }); + + wrapper = mountFn(SearchableDropdown, { + localVue, + store, + propsData: { + ...defaultProps, + ...props, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + const findGlDropdown = () => wrapper.find(GlDropdown); + const findGlDropdownSearch = () => findGlDropdown().find(GlSearchBoxByType); + const findDropdownText = () => findGlDropdown().find('.dropdown-toggle-text'); + const findDropdownItems = () => findGlDropdown().findAll(GlDropdownItem); + const findDropdownItemsText = () => findDropdownItems().wrappers.map(w => w.text()); + const findAnyDropdownItem = () => findDropdownItems().at(0); + const findFirstGroupDropdownItem = () => findDropdownItems().at(1); + const findLoader = () => wrapper.find(GlSkeletonLoader); + + describe('template', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders GlDropdown', () => { + expect(findGlDropdown().exists()).toBe(true); + }); + + describe('findGlDropdownSearch', () => { + it('renders always', () => { + expect(findGlDropdownSearch().exists()).toBe(true); + }); + + it('has debounce prop', () => { + expect(findGlDropdownSearch().attributes('debounce')).toBe('500'); + }); + + describe('onSearch', () => { + const search = 'test search'; + + beforeEach(() => { + findGlDropdownSearch().vm.$emit('input', search); + }); + + it('$emits @search when input event is fired from GlSearchBoxByType', () => { + expect(wrapper.emitted('search')[0]).toEqual([search]); + }); + }); + }); + + describe('findDropdownItems', () => { + describe('when loading is false', () => { + beforeEach(() => { + createComponent({}, { items: MOCK_GROUPS }); + }); + + it('does not render loader', () => { + expect(findLoader().exists()).toBe(false); + }); + + it('renders an instance for each namespace', () => { + const resultsIncludeAny = ['Any'].concat(MOCK_GROUPS.map(n => n.full_name)); + expect(findDropdownItemsText()).toStrictEqual(resultsIncludeAny); + }); + }); + + describe('when loading is true', () => { + beforeEach(() => { + createComponent({}, { loading: true, items: MOCK_GROUPS }); + }); + + it('does render loader', () => { + expect(findLoader().exists()).toBe(true); + }); + + it('renders only Any in dropdown', () => { + expect(findDropdownItemsText()).toStrictEqual(['Any']); + }); + }); + + describe('when item is selected', () => { + beforeEach(() => { + createComponent({}, { items: MOCK_GROUPS, selectedItem: MOCK_GROUPS[0] }); + }); + + it('marks the dropdown as checked', () => { + expect(findFirstGroupDropdownItem().attributes('ischecked')).toBe('true'); + }); + }); + }); + + describe('Dropdown Text', () => { + describe('when selectedItem is any', () => { + beforeEach(() => { + createComponent({}, {}, mount); + }); + + it('sets dropdown text to Any', () => { + expect(findDropdownText().text()).toBe(ANY_OPTION.name); + }); + }); + + describe('selectedItem is set', () => { + beforeEach(() => { + createComponent({}, { selectedItem: MOCK_GROUP }, mount); + }); + + it('sets dropdown text to the selectedItem selectedDisplayValue', () => { + expect(findDropdownText().text()).toBe(MOCK_GROUP[GROUP_DATA.selectedDisplayValue]); + }); + }); + }); + }); + + describe('actions', () => { + beforeEach(() => { + createComponent({}, { items: MOCK_GROUPS }); + }); + + it('clicking "Any" dropdown item $emits @change with ANY_OPTION', () => { + findAnyDropdownItem().vm.$emit('click'); + + expect(wrapper.emitted('change')[0]).toEqual([ANY_OPTION]); + }); + + it('clicking result dropdown item $emits @change with result', () => { + findFirstGroupDropdownItem().vm.$emit('click'); + + expect(wrapper.emitted('change')[0]).toEqual([MOCK_GROUPS[0]]); + }); + }); +}); |