diff options
Diffstat (limited to 'spec/frontend/header_search')
| -rw-r--r-- | spec/frontend/header_search/init_spec.js | 10 | ||||
| -rw-r--r-- | spec/frontend/header_search/mock_data.js | 44 | ||||
| -rw-r--r-- | spec/frontend/header_search/store/actions_spec.js | 66 | ||||
| -rw-r--r-- | spec/frontend/header_search/store/getters_spec.js | 24 |
4 files changed, 84 insertions, 60 deletions
diff --git a/spec/frontend/header_search/init_spec.js b/spec/frontend/header_search/init_spec.js index 9515ca8c812..40c1843d461 100644 --- a/spec/frontend/header_search/init_spec.js +++ b/spec/frontend/header_search/init_spec.js @@ -24,10 +24,10 @@ describe('Header Search EventListener', () => { const addEventListenerSpy = jest.spyOn(searchInputBox, 'addEventListener'); initHeaderSearch(); - expect(addEventListenerSpy).toBeCalledTimes(2); + expect(addEventListenerSpy).toHaveBeenCalledTimes(2); }); - it('removes event listener ', async () => { + it('removes event listener', async () => { const searchInputBox = document?.querySelector('#search'); const removeEventListenerSpy = jest.spyOn(searchInputBox, 'removeEventListener'); jest.mock('~/header_search', () => ({ initHeaderSearchApp: jest.fn() })); @@ -39,7 +39,7 @@ describe('Header Search EventListener', () => { [cleanEventListeners], ); - expect(removeEventListenerSpy).toBeCalledTimes(2); + expect(removeEventListenerSpy).toHaveBeenCalledTimes(2); }); it('attaches new vue dropdown when feature flag is enabled', async () => { @@ -53,7 +53,7 @@ describe('Header Search EventListener', () => { () => {}, ); - expect(mockVueApp).toBeCalled(); + expect(mockVueApp).toHaveBeenCalled(); }); it('attaches old vue dropdown when feature flag is disabled', async () => { @@ -69,6 +69,6 @@ describe('Header Search EventListener', () => { () => {}, ); - expect(mockLegacyApp).toBeCalled(); + expect(mockLegacyApp).toHaveBeenCalled(); }); }); diff --git a/spec/frontend/header_search/mock_data.js b/spec/frontend/header_search/mock_data.js index 8ccd7fb17e3..3a8624ad9dd 100644 --- a/spec/frontend/header_search/mock_data.js +++ b/spec/frontend/header_search/mock_data.js @@ -223,6 +223,20 @@ export const MOCK_AUTOCOMPLETE_OPTIONS = [ export const MOCK_GROUPED_AUTOCOMPLETE_OPTIONS = [ { + category: 'Groups', + data: [ + { + category: 'Groups', + html_id: 'autocomplete-Groups-1', + + id: 1, + label: 'Gitlab Org / MockGroup1', + value: 'MockGroup1', + url: 'group/1', + }, + ], + }, + { category: 'Projects', data: [ { @@ -246,20 +260,6 @@ export const MOCK_GROUPED_AUTOCOMPLETE_OPTIONS = [ ], }, { - category: 'Groups', - data: [ - { - category: 'Groups', - html_id: 'autocomplete-Groups-1', - - id: 1, - label: 'Gitlab Org / MockGroup1', - value: 'MockGroup1', - url: 'group/1', - }, - ], - }, - { category: 'Help', data: [ { @@ -275,6 +275,14 @@ export const MOCK_GROUPED_AUTOCOMPLETE_OPTIONS = [ export const MOCK_SORTED_AUTOCOMPLETE_OPTIONS = [ { + category: 'Groups', + html_id: 'autocomplete-Groups-1', + id: 1, + label: 'Gitlab Org / MockGroup1', + value: 'MockGroup1', + url: 'group/1', + }, + { category: 'Projects', html_id: 'autocomplete-Projects-0', id: 1, @@ -291,14 +299,6 @@ export const MOCK_SORTED_AUTOCOMPLETE_OPTIONS = [ url: 'project/2', }, { - category: 'Groups', - html_id: 'autocomplete-Groups-1', - id: 1, - label: 'Gitlab Org / MockGroup1', - value: 'MockGroup1', - url: 'group/1', - }, - { category: 'Help', html_id: 'autocomplete-Help-3', label: 'GitLab Help', diff --git a/spec/frontend/header_search/store/actions_spec.js b/spec/frontend/header_search/store/actions_spec.js index 1748d89a6d3..1ae149128ca 100644 --- a/spec/frontend/header_search/store/actions_spec.js +++ b/spec/frontend/header_search/store/actions_spec.js @@ -2,9 +2,18 @@ import MockAdapter from 'axios-mock-adapter'; import testAction from 'helpers/vuex_action_helper'; import * as actions from '~/header_search/store/actions'; import * as types from '~/header_search/store/mutation_types'; -import createState from '~/header_search/store/state'; +import initState from '~/header_search/store/state'; import axios from '~/lib/utils/axios_utils'; -import { MOCK_SEARCH, MOCK_AUTOCOMPLETE_OPTIONS_RES } from '../mock_data'; +import { + MOCK_SEARCH, + MOCK_AUTOCOMPLETE_OPTIONS_RES, + MOCK_AUTOCOMPLETE_PATH, + MOCK_PROJECT, + MOCK_SEARCH_CONTEXT, + MOCK_SEARCH_PATH, + MOCK_MR_PATH, + MOCK_ISSUE_PATH, +} from '../mock_data'; jest.mock('~/flash'); @@ -12,10 +21,15 @@ describe('Header Search Store Actions', () => { let state; let mock; - beforeEach(() => { - state = createState({}); - mock = new MockAdapter(axios); - }); + const createState = (initialState) => + initState({ + searchPath: MOCK_SEARCH_PATH, + issuesPath: MOCK_ISSUE_PATH, + mrPath: MOCK_MR_PATH, + autocompletePath: MOCK_AUTOCOMPLETE_PATH, + searchContext: MOCK_SEARCH_CONTEXT, + ...initialState, + }); afterEach(() => { state = null; @@ -24,12 +38,14 @@ describe('Header Search Store Actions', () => { describe.each` axiosMock | type | expectedMutations - ${{ method: 'onGet', code: 200, res: MOCK_AUTOCOMPLETE_OPTIONS_RES }} | ${'success'} | ${[{ type: types.REQUEST_AUTOCOMPLETE }, { type: types.RECEIVE_AUTOCOMPLETE_SUCCESS, payload: MOCK_AUTOCOMPLETE_OPTIONS_RES }]} - ${{ method: 'onGet', code: 500, res: null }} | ${'error'} | ${[{ type: types.REQUEST_AUTOCOMPLETE }, { type: types.RECEIVE_AUTOCOMPLETE_ERROR }]} + ${{ method: 'onGet', code: 200, res: MOCK_AUTOCOMPLETE_OPTIONS_RES }} | ${'success'} | ${[{ type: types.REQUEST_AUTOCOMPLETE }, { type: types.RECEIVE_AUTOCOMPLETE_SUCCESS, payload: MOCK_AUTOCOMPLETE_OPTIONS_RES }, { type: types.RECEIVE_AUTOCOMPLETE_SUCCESS, payload: MOCK_AUTOCOMPLETE_OPTIONS_RES }]} + ${{ method: 'onGet', code: 500, res: null }} | ${'error'} | ${[{ type: types.REQUEST_AUTOCOMPLETE }, { type: types.RECEIVE_AUTOCOMPLETE_ERROR }, { type: types.RECEIVE_AUTOCOMPLETE_ERROR }]} `('fetchAutocompleteOptions', ({ axiosMock, type, expectedMutations }) => { describe(`on ${type}`, () => { beforeEach(() => { - mock[axiosMock.method]().replyOnce(axiosMock.code, axiosMock.res); + state = createState({}); + mock = new MockAdapter(axios); + mock[axiosMock.method]().reply(axiosMock.code, axiosMock.res); }); it(`should dispatch the correct mutations`, () => { return testAction({ @@ -41,7 +57,35 @@ describe('Header Search Store Actions', () => { }); }); + describe.each` + project | ref | fetchType | expectedPath + ${null} | ${null} | ${null} | ${`${MOCK_AUTOCOMPLETE_PATH}?term=${MOCK_SEARCH}`} + ${MOCK_PROJECT} | ${null} | ${'generic'} | ${`${MOCK_AUTOCOMPLETE_PATH}?term=${MOCK_SEARCH}&project_id=${MOCK_PROJECT.id}&filter=generic`} + ${null} | ${MOCK_PROJECT.id} | ${'generic'} | ${`${MOCK_AUTOCOMPLETE_PATH}?term=${MOCK_SEARCH}&project_ref=${MOCK_PROJECT.id}&filter=generic`} + ${MOCK_PROJECT} | ${MOCK_PROJECT.id} | ${'search'} | ${`${MOCK_AUTOCOMPLETE_PATH}?term=${MOCK_SEARCH}&project_id=${MOCK_PROJECT.id}&project_ref=${MOCK_PROJECT.id}&filter=search`} + `('autocompleteQuery', ({ project, ref, fetchType, expectedPath }) => { + describe(`when project is ${project?.name} and project ref is ${ref}`, () => { + beforeEach(() => { + state = createState({ + search: MOCK_SEARCH, + searchContext: { + project, + ref, + }, + }); + }); + + it(`should return ${expectedPath}`, () => { + expect(actions.autocompleteQuery({ state, fetchType })).toBe(expectedPath); + }); + }); + }); + describe('clearAutocomplete', () => { + beforeEach(() => { + state = createState({}); + }); + it('calls the CLEAR_AUTOCOMPLETE mutation', () => { return testAction({ action: actions.clearAutocomplete, @@ -52,6 +96,10 @@ describe('Header Search Store Actions', () => { }); describe('setSearch', () => { + beforeEach(() => { + state = createState({}); + }); + it('calls the SET_SEARCH mutation', () => { return testAction({ action: actions.setSearch, diff --git a/spec/frontend/header_search/store/getters_spec.js b/spec/frontend/header_search/store/getters_spec.js index c76be3c0360..a1d9481b5cc 100644 --- a/spec/frontend/header_search/store/getters_spec.js +++ b/spec/frontend/header_search/store/getters_spec.js @@ -73,30 +73,6 @@ describe('Header Search Store Getters', () => { }); describe.each` - project | ref | expectedPath - ${null} | ${null} | ${`${MOCK_AUTOCOMPLETE_PATH}?term=${MOCK_SEARCH}`} - ${MOCK_PROJECT} | ${null} | ${`${MOCK_AUTOCOMPLETE_PATH}?term=${MOCK_SEARCH}&project_id=${MOCK_PROJECT.id}`} - ${null} | ${MOCK_PROJECT.id} | ${`${MOCK_AUTOCOMPLETE_PATH}?term=${MOCK_SEARCH}&project_ref=${MOCK_PROJECT.id}`} - ${MOCK_PROJECT} | ${MOCK_PROJECT.id} | ${`${MOCK_AUTOCOMPLETE_PATH}?term=${MOCK_SEARCH}&project_id=${MOCK_PROJECT.id}&project_ref=${MOCK_PROJECT.id}`} - `('autocompleteQuery', ({ project, ref, expectedPath }) => { - describe(`when project is ${project?.name} and project ref is ${ref}`, () => { - beforeEach(() => { - createState({ - searchContext: { - project, - ref, - }, - }); - state.search = MOCK_SEARCH; - }); - - it(`should return ${expectedPath}`, () => { - expect(getters.autocompleteQuery(state)).toBe(expectedPath); - }); - }); - }); - - describe.each` group | group_metadata | project | project_metadata | expectedPath ${null} | ${null} | ${null} | ${null} | ${MOCK_ISSUE_PATH} ${{ name: 'Test Group' }} | ${{ issues_path: 'group/path' }} | ${null} | ${null} | ${'group/path'} |