diff options
Diffstat (limited to 'spec/frontend/search/components/dropdown_filter_spec.js')
-rw-r--r-- | spec/frontend/search/components/dropdown_filter_spec.js | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/spec/frontend/search/components/dropdown_filter_spec.js b/spec/frontend/search/components/dropdown_filter_spec.js new file mode 100644 index 00000000000..ffac038e1c5 --- /dev/null +++ b/spec/frontend/search/components/dropdown_filter_spec.js @@ -0,0 +1,108 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; +import DropdownFilter from '~/search/components/dropdown_filter.vue'; +import { + FILTER_STATES, + FILTER_STATES_BY_SCOPE, + FILTER_HEADER, + SCOPES, +} from '~/search/state_filter/constants'; +import * as urlUtils from '~/lib/utils/url_utility'; + +jest.mock('~/lib/utils/url_utility', () => ({ + visitUrl: jest.fn(), + setUrlParams: jest.fn(), +})); + +function createComponent(props = { scope: 'issues' }) { + return shallowMount(DropdownFilter, { + propsData: { + filtersArray: FILTER_STATES_BY_SCOPE.issues, + filters: FILTER_STATES, + header: FILTER_HEADER, + param: 'state', + supportedScopes: Object.values(SCOPES), + ...props, + }, + }); +} + +describe('DropdownFilter', () => { + let wrapper; + + beforeEach(() => { + wrapper = createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + const findGlDropdown = () => wrapper.find(GlDropdown); + const findGlDropdownItems = () => findGlDropdown().findAll(GlDropdownItem); + const findDropdownItemsText = () => findGlDropdownItems().wrappers.map(w => w.text()); + const firstDropDownItem = () => findGlDropdownItems().at(0); + + describe('template', () => { + describe.each` + scope | showDropdown + ${'issues'} | ${true} + ${'merge_requests'} | ${true} + ${'projects'} | ${false} + ${'milestones'} | ${false} + ${'users'} | ${false} + ${'notes'} | ${false} + ${'wiki_blobs'} | ${false} + ${'blobs'} | ${false} + `(`dropdown`, ({ scope, showDropdown }) => { + beforeEach(() => { + wrapper = createComponent({ scope }); + }); + + it(`does${showDropdown ? '' : ' not'} render when scope is ${scope}`, () => { + expect(findGlDropdown().exists()).toBe(showDropdown); + }); + }); + + describe.each` + initialFilter | label + ${FILTER_STATES.ANY.value} | ${`Any ${FILTER_HEADER}`} + ${FILTER_STATES.OPEN.value} | ${FILTER_STATES.OPEN.label} + ${FILTER_STATES.CLOSED.value} | ${FILTER_STATES.CLOSED.label} + `(`filter text`, ({ initialFilter, label }) => { + describe(`when initialFilter is ${initialFilter}`, () => { + beforeEach(() => { + wrapper = createComponent({ scope: 'issues', initialFilter }); + }); + + it(`sets dropdown label to ${label}`, () => { + expect(findGlDropdown().attributes('text')).toBe(label); + }); + }); + }); + + describe('Filter options', () => { + it('renders a dropdown item for each filterOption', () => { + expect(findDropdownItemsText()).toStrictEqual( + FILTER_STATES_BY_SCOPE[SCOPES.ISSUES].map(v => { + return v.label; + }), + ); + }); + + it('clicking a dropdown item calls setUrlParams', () => { + const state = FILTER_STATES[Object.keys(FILTER_STATES)[0]].value; + firstDropDownItem().vm.$emit('click'); + + expect(urlUtils.setUrlParams).toHaveBeenCalledWith({ state }); + }); + + it('clicking a dropdown item calls visitUrl', () => { + firstDropDownItem().vm.$emit('click'); + + expect(urlUtils.visitUrl).toHaveBeenCalled(); + }); + }); + }); +}); |