diff options
Diffstat (limited to 'spec/frontend/search/sidebar/components/filters_template_spec.js')
-rw-r--r-- | spec/frontend/search/sidebar/components/filters_template_spec.js | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/spec/frontend/search/sidebar/components/filters_template_spec.js b/spec/frontend/search/sidebar/components/filters_template_spec.js new file mode 100644 index 00000000000..11c7c541b54 --- /dev/null +++ b/spec/frontend/search/sidebar/components/filters_template_spec.js @@ -0,0 +1,167 @@ +import { GlForm, GlButton, GlLink } from '@gitlab/ui'; +import Vue from 'vue'; +import Vuex from 'vuex'; + +import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import { MOCK_QUERY, MOCK_AGGREGATIONS } from 'jest/search/mock_data'; + +import FiltersTemplate from '~/search/sidebar/components/filters_template.vue'; + +import { + TRACKING_ACTION_CLICK, + TRACKING_LABEL_APPLY, + TRACKING_LABEL_RESET, +} from '~/search/sidebar/constants/index'; + +Vue.use(Vuex); + +describe('GlobalSearchSidebarLanguageFilter', () => { + let wrapper; + let trackingSpy; + + const actionSpies = { + applyQuery: jest.fn(), + resetQuery: jest.fn(), + }; + + const getterSpies = { + currentScope: jest.fn(() => 'issues'), + }; + + const createComponent = (initialState) => { + const store = new Vuex.Store({ + state: { + query: MOCK_QUERY, + urlQuery: MOCK_QUERY, + aggregations: MOCK_AGGREGATIONS, + sidebarDirty: false, + ...initialState, + }, + actions: actionSpies, + getters: getterSpies, + }); + + wrapper = shallowMountExtended(FiltersTemplate, { + store, + slots: { + default: '<p>Filters Content</p>', + }, + }); + }; + + const findForm = () => wrapper.findComponent(GlForm); + const findDividers = () => wrapper.findAll('hr'); + const findApplyButton = () => wrapper.findComponent(GlButton); + const findResetButton = () => wrapper.findComponent(GlLink); + const findSlotContent = () => wrapper.findByText('Filters Content'); + + describe('Renders correctly', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders form', () => { + expect(findForm().exists()).toBe(true); + }); + + it('renders dividers', () => { + expect(findDividers()).toHaveLength(2); + }); + + it('renders slot content', () => { + expect(findSlotContent().exists()).toBe(true); + }); + + it('renders ApplyButton', () => { + expect(findApplyButton().exists()).toBe(true); + }); + + it('renders reset button', () => { + expect(findResetButton().exists()).toBe(false); + }); + }); + + describe('resetButton', () => { + describe.each` + description | sidebarDirty | queryLangFilters | exists + ${'sidebar dirty only'} | ${true} | ${[]} | ${true} + ${'query filters only'} | ${false} | ${['JSON', 'C']} | ${false} + ${'sidebar dirty and query filters'} | ${true} | ${['JSON', 'C']} | ${true} + ${'sidebar not dirty and no query filters'} | ${false} | ${[]} | ${false} + `('$description', ({ sidebarDirty, queryLangFilters, exists }) => { + beforeEach(() => { + getterSpies.queryLanguageFilters = jest.fn(() => queryLangFilters); + + const query = { + ...MOCK_QUERY, + language: queryLangFilters, + state: undefined, + labels: undefined, + confidential: undefined, + }; + + createComponent({ + sidebarDirty, + query, + urlQuery: query, + }); + }); + + it(`button is ${exists ? 'shown' : 'hidden'}`, () => { + expect(findResetButton().exists()).toBe(exists); + }); + }); + }); + + describe('ApplyButton', () => { + describe('when sidebarDirty is false', () => { + beforeEach(() => { + createComponent({ sidebarDirty: false }); + }); + + it('disables the button', () => { + expect(findApplyButton().attributes('disabled')).toBeDefined(); + }); + }); + + describe('when sidebarDirty is true', () => { + beforeEach(() => { + createComponent({ sidebarDirty: true }); + }); + + it('enables the button', () => { + expect(findApplyButton().attributes('disabled')).toBe(undefined); + }); + }); + }); + + describe('actions', () => { + beforeEach(() => { + createComponent({ sidebarDirty: true }); + trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn); + }); + + afterEach(() => { + unmockTracking(); + }); + + it('clicking ApplyButton calls applyQuery', () => { + findForm().vm.$emit('submit', { preventDefault: () => {} }); + + expect(actionSpies.applyQuery).toHaveBeenCalled(); + expect(trackingSpy).toHaveBeenCalledWith(TRACKING_ACTION_CLICK, TRACKING_LABEL_APPLY, { + label: getterSpies.currentScope(), + }); + }); + + it('clicking resetButton calls resetQuery', () => { + findResetButton().vm.$emit('click'); + + expect(actionSpies.resetQuery).toHaveBeenCalled(); + expect(trackingSpy).toHaveBeenCalledWith(TRACKING_ACTION_CLICK, TRACKING_LABEL_RESET, { + label: getterSpies.currentScope(), + }); + }); + }); +}); |