diff options
Diffstat (limited to 'spec/frontend/search/topbar/components')
4 files changed, 118 insertions, 5 deletions
diff --git a/spec/frontend/search/topbar/components/app_spec.js b/spec/frontend/search/topbar/components/app_spec.js new file mode 100644 index 00000000000..fb953f2ed1b --- /dev/null +++ b/spec/frontend/search/topbar/components/app_spec.js @@ -0,0 +1,113 @@ +import { GlForm, GlSearchBoxByType, GlButton } from '@gitlab/ui'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import Vuex from 'vuex'; +import { MOCK_QUERY } from 'jest/search/mock_data'; +import GlobalSearchTopbar from '~/search/topbar/components/app.vue'; +import GroupFilter from '~/search/topbar/components/group_filter.vue'; +import ProjectFilter from '~/search/topbar/components/project_filter.vue'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('GlobalSearchTopbar', () => { + let wrapper; + + const actionSpies = { + applyQuery: jest.fn(), + setQuery: jest.fn(), + }; + + const createComponent = (initialState) => { + const store = new Vuex.Store({ + state: { + query: MOCK_QUERY, + ...initialState, + }, + actions: actionSpies, + }); + + wrapper = shallowMount(GlobalSearchTopbar, { + localVue, + store, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + const findTopbarForm = () => wrapper.find(GlForm); + const findGlSearchBox = () => wrapper.find(GlSearchBoxByType); + const findGroupFilter = () => wrapper.find(GroupFilter); + const findProjectFilter = () => wrapper.find(ProjectFilter); + const findSearchButton = () => wrapper.find(GlButton); + + describe('template', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders Topbar Form always', () => { + expect(findTopbarForm().exists()).toBe(true); + }); + + describe('Search box', () => { + it('renders always', () => { + expect(findGlSearchBox().exists()).toBe(true); + }); + + describe('onSearch', () => { + const testSearch = 'test search'; + + beforeEach(() => { + findGlSearchBox().vm.$emit('input', testSearch); + }); + + it('calls setQuery when input event is fired from GlSearchBoxByType', () => { + expect(actionSpies.setQuery).toHaveBeenCalledWith(expect.any(Object), { + key: 'search', + value: testSearch, + }); + }); + }); + }); + + describe.each` + snippets | showFilters + ${null} | ${true} + ${{ query: { snippets: '' } }} | ${true} + ${{ query: { snippets: false } }} | ${true} + ${{ query: { snippets: true } }} | ${false} + ${{ query: { snippets: 'false' } }} | ${true} + ${{ query: { snippets: 'true' } }} | ${false} + `('topbar filters', ({ snippets, showFilters }) => { + beforeEach(() => { + createComponent(snippets); + }); + + it(`does${showFilters ? '' : ' not'} render when snippets is ${JSON.stringify( + snippets, + )}`, () => { + expect(findGroupFilter().exists()).toBe(showFilters); + expect(findProjectFilter().exists()).toBe(showFilters); + }); + }); + + it('renders SearchButton always', () => { + expect(findSearchButton().exists()).toBe(true); + }); + }); + + describe('actions', () => { + beforeEach(() => { + createComponent(); + }); + + it('clicking SearchButton calls applyQuery', () => { + findTopbarForm().vm.$emit('submit', { preventDefault: () => {} }); + + expect(actionSpies.applyQuery).toHaveBeenCalled(); + }); + }); +}); diff --git a/spec/frontend/search/topbar/components/group_filter_spec.js b/spec/frontend/search/topbar/components/group_filter_spec.js index 017808d576e..15b46f9c058 100644 --- a/spec/frontend/search/topbar/components/group_filter_spec.js +++ b/spec/frontend/search/topbar/components/group_filter_spec.js @@ -1,5 +1,5 @@ -import Vuex from 'vuex'; import { createLocalVue, shallowMount } from '@vue/test-utils'; +import Vuex from 'vuex'; 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'; diff --git a/spec/frontend/search/topbar/components/project_filter_spec.js b/spec/frontend/search/topbar/components/project_filter_spec.js index c1fc61d7e89..3bd0769b34a 100644 --- a/spec/frontend/search/topbar/components/project_filter_spec.js +++ b/spec/frontend/search/topbar/components/project_filter_spec.js @@ -1,5 +1,5 @@ -import Vuex from 'vuex'; import { createLocalVue, shallowMount } from '@vue/test-utils'; +import Vuex from 'vuex'; 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'; @@ -99,7 +99,7 @@ describe('ProjectFilter', () => { it('calls setUrlParams with project id, group id, then calls visitUrl', () => { expect(setUrlParams).toHaveBeenCalledWith({ - [GROUP_DATA.queryParam]: MOCK_PROJECT.namespace_id, + [GROUP_DATA.queryParam]: MOCK_PROJECT.namespace.id, [PROJECT_DATA.queryParam]: MOCK_PROJECT.id, }); expect(visitUrl).toHaveBeenCalled(); diff --git a/spec/frontend/search/topbar/components/searchable_dropdown_spec.js b/spec/frontend/search/topbar/components/searchable_dropdown_spec.js index 86e29571d0f..5de948592d4 100644 --- a/spec/frontend/search/topbar/components/searchable_dropdown_spec.js +++ b/spec/frontend/search/topbar/components/searchable_dropdown_spec.js @@ -1,6 +1,6 @@ -import Vuex from 'vuex'; -import { createLocalVue, shallowMount, mount } from '@vue/test-utils'; import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlSkeletonLoader } from '@gitlab/ui'; +import { createLocalVue, shallowMount, mount } from '@vue/test-utils'; +import Vuex from 'vuex'; 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'; |