diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js')
| -rw-r--r-- | spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js | 141 |
1 files changed, 55 insertions, 86 deletions
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js index 84f0151d9db..dd9bf2ff598 100644 --- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js +++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js @@ -1,5 +1,6 @@ -import { GlFilteredSearchToken } from '@gitlab/ui'; +import { GlFilteredSearchToken, GlLoadingIcon } from '@gitlab/ui'; import { mount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import { mockRegularLabel, mockLabels, @@ -61,13 +62,10 @@ const mockProps = { getActiveTokenValue: (labels, data) => labels.find((label) => label.title === data), }; -function createComponent({ - props = { ...mockProps }, - stubs = defaultStubs, - slots = defaultSlots, -} = {}) { +function createComponent({ props = {}, stubs = defaultStubs, slots = defaultSlots } = {}) { return mount(BaseToken, { propsData: { + ...mockProps, ...props, }, provide: { @@ -83,15 +81,7 @@ function createComponent({ describe('BaseToken', () => { let wrapper; - beforeEach(() => { - wrapper = createComponent({ - props: { - ...mockProps, - value: { data: `"${mockRegularLabel.title}"` }, - suggestions: mockLabels, - }, - }); - }); + const findGlFilteredSearchToken = () => wrapper.findComponent(GlFilteredSearchToken); afterEach(() => { wrapper.destroy(); @@ -99,21 +89,25 @@ describe('BaseToken', () => { describe('data', () => { it('calls `getRecentlyUsedSuggestions` to populate `recentSuggestions` when `recentSuggestionsStorageKey` is defined', () => { + wrapper = createComponent(); + expect(getRecentlyUsedSuggestions).toHaveBeenCalledWith(mockStorageKey); }); }); describe('computed', () => { describe('activeTokenValue', () => { - it('calls `getActiveTokenValue` when it is provided', async () => { + it('calls `getActiveTokenValue` when it is provided', () => { const mockGetActiveTokenValue = jest.fn(); - wrapper.setProps({ - getActiveTokenValue: mockGetActiveTokenValue, + wrapper = createComponent({ + props: { + value: { data: `"${mockRegularLabel.title}"` }, + suggestions: mockLabels, + getActiveTokenValue: mockGetActiveTokenValue, + }, }); - await wrapper.vm.$nextTick(); - expect(mockGetActiveTokenValue).toHaveBeenCalledTimes(1); expect(mockGetActiveTokenValue).toHaveBeenCalledWith( mockLabels, @@ -125,33 +119,19 @@ describe('BaseToken', () => { describe('watch', () => { describe('active', () => { - let wrapperWithTokenActive; - beforeEach(() => { - wrapperWithTokenActive = createComponent({ + wrapper = createComponent({ props: { - ...mockProps, value: { data: `"${mockRegularLabel.title}"` }, active: true, }, }); }); - afterEach(() => { - wrapperWithTokenActive.destroy(); - }); - it('emits `fetch-suggestions` event on the component when value of this prop is changed to false and `suggestions` array is empty', async () => { - wrapperWithTokenActive.setProps({ - active: false, - }); - - await wrapperWithTokenActive.vm.$nextTick(); + await wrapper.setProps({ active: false }); - expect(wrapperWithTokenActive.emitted('fetch-suggestions')).toBeTruthy(); - expect(wrapperWithTokenActive.emitted('fetch-suggestions')).toEqual([ - [`"${mockRegularLabel.title}"`], - ]); + expect(wrapper.emitted('fetch-suggestions')).toEqual([[`"${mockRegularLabel.title}"`]]); }); }); }); @@ -161,17 +141,15 @@ describe('BaseToken', () => { const mockTokenValue = mockLabels[0]; it('calls `setTokenValueToRecentlyUsed` when `recentSuggestionsStorageKey` is defined', () => { + wrapper = createComponent({ props: { suggestions: mockLabels } }); + wrapper.vm.handleTokenValueSelected(mockTokenValue.title); expect(setTokenValueToRecentlyUsed).toHaveBeenCalledWith(mockStorageKey, mockTokenValue); }); - it('does not add token from preloadedSuggestions', async () => { - wrapper.setProps({ - preloadedSuggestions: [mockTokenValue], - }); - - await wrapper.vm.$nextTick(); + it('does not add token from preloadedSuggestions', () => { + wrapper = createComponent({ props: { preloadedSuggestions: [mockTokenValue] } }); wrapper.vm.handleTokenValueSelected(mockTokenValue.title); @@ -182,58 +160,60 @@ describe('BaseToken', () => { describe('template', () => { it('renders gl-filtered-search-token component', () => { - const wrapperWithNoStubs = createComponent({ - stubs: {}, - }); - const glFilteredSearchToken = wrapperWithNoStubs.find(GlFilteredSearchToken); - - expect(glFilteredSearchToken.exists()).toBe(true); - expect(glFilteredSearchToken.props('config')).toEqual(mockProps.config); + wrapper = createComponent({ stubs: {} }); - wrapperWithNoStubs.destroy(); + expect(findGlFilteredSearchToken().props('config')).toEqual(mockProps.config); }); it('renders `view-token` slot when present', () => { + wrapper = createComponent(); + expect(wrapper.find('.js-view-token').exists()).toBe(true); }); it('renders `view` slot when present', () => { + wrapper = createComponent(); + expect(wrapper.find('.js-view').exists()).toBe(true); }); - describe('events', () => { - let wrapperWithNoStubs; - - afterEach(() => { - wrapperWithNoStubs.destroy(); + it('renders loading spinner when loading', () => { + wrapper = createComponent({ + props: { + active: true, + config: mockLabelToken, + suggestionsLoading: true, + }, + stubs: { Portal: true }, }); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); + }); + + describe('events', () => { describe('when activeToken has been selected', () => { beforeEach(() => { - wrapperWithNoStubs = createComponent({ - props: { - ...mockProps, - getActiveTokenValue: () => ({ title: '' }), - suggestionsLoading: true, - }, + wrapper = createComponent({ + props: { getActiveTokenValue: () => ({ title: '' }) }, stubs: { Portal: true }, }); }); + it('does not emit `fetch-suggestions` event on component after a delay when component emits `input` event', async () => { jest.useFakeTimers(); - wrapperWithNoStubs.find(GlFilteredSearchToken).vm.$emit('input', { data: 'foo' }); - await wrapperWithNoStubs.vm.$nextTick(); + findGlFilteredSearchToken().vm.$emit('input', { data: 'foo' }); + await nextTick(); jest.runAllTimers(); - expect(wrapperWithNoStubs.emitted('fetch-suggestions')).toEqual([['']]); + expect(wrapper.emitted('fetch-suggestions')).toEqual([['']]); }); }); describe('when activeToken has not been selected', () => { beforeEach(() => { - wrapperWithNoStubs = createComponent({ + wrapper = createComponent({ stubs: { Portal: true }, }); }); @@ -241,38 +221,27 @@ describe('BaseToken', () => { it('emits `fetch-suggestions` event on component after a delay when component emits `input` event', async () => { jest.useFakeTimers(); - wrapperWithNoStubs.find(GlFilteredSearchToken).vm.$emit('input', { data: 'foo' }); - await wrapperWithNoStubs.vm.$nextTick(); + findGlFilteredSearchToken().vm.$emit('input', { data: 'foo' }); + await nextTick(); jest.runAllTimers(); - expect(wrapperWithNoStubs.emitted('fetch-suggestions')).toBeTruthy(); - expect(wrapperWithNoStubs.emitted('fetch-suggestions')[2]).toEqual(['foo']); + expect(wrapper.emitted('fetch-suggestions')[2]).toEqual(['foo']); }); describe('when search is started with a quote', () => { - it('emits `fetch-suggestions` with filtered value', async () => { - jest.useFakeTimers(); - - wrapperWithNoStubs.find(GlFilteredSearchToken).vm.$emit('input', { data: '"foo' }); - await wrapperWithNoStubs.vm.$nextTick(); + it('emits `fetch-suggestions` with filtered value', () => { + findGlFilteredSearchToken().vm.$emit('input', { data: '"foo' }); - jest.runAllTimers(); - - expect(wrapperWithNoStubs.emitted('fetch-suggestions')[2]).toEqual(['foo']); + expect(wrapper.emitted('fetch-suggestions')[2]).toEqual(['foo']); }); }); describe('when search starts and ends with a quote', () => { - it('emits `fetch-suggestions` with filtered value', async () => { - jest.useFakeTimers(); - - wrapperWithNoStubs.find(GlFilteredSearchToken).vm.$emit('input', { data: '"foo"' }); - await wrapperWithNoStubs.vm.$nextTick(); - - jest.runAllTimers(); + it('emits `fetch-suggestions` with filtered value', () => { + findGlFilteredSearchToken().vm.$emit('input', { data: '"foo"' }); - expect(wrapperWithNoStubs.emitted('fetch-suggestions')[2]).toEqual(['foo']); + expect(wrapper.emitted('fetch-suggestions')[2]).toEqual(['foo']); }); }); }); |