diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js | 102 |
1 files changed, 83 insertions, 19 deletions
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js index de893bf44c8..0ec814e3f15 100644 --- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js +++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js @@ -1,10 +1,16 @@ import { mount } from '@vue/test-utils'; -import { GlFilteredSearchToken, GlFilteredSearchTokenSegment } from '@gitlab/ui'; +import { + GlFilteredSearchToken, + GlFilteredSearchSuggestion, + GlFilteredSearchTokenSegment, + GlDropdownDivider, +} from '@gitlab/ui'; import MockAdapter from 'axios-mock-adapter'; import waitForPromises from 'helpers/wait_for_promises'; import axios from '~/lib/utils/axios_utils'; import createFlash from '~/flash'; +import { DEFAULT_MILESTONES } from '~/vue_shared/components/filtered_search_bar/constants'; import MilestoneToken from '~/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue'; import { @@ -16,12 +22,24 @@ import { jest.mock('~/flash'); -const createComponent = ({ - config = mockMilestoneToken, - value = { data: '' }, - active = false, -} = {}) => - mount(MilestoneToken, { +const defaultStubs = { + Portal: true, + GlFilteredSearchSuggestionList: { + template: '<div></div>', + methods: { + getValue: () => '=', + }, + }, +}; + +function createComponent(options = {}) { + const { + config = mockMilestoneToken, + value = { data: '' }, + active = false, + stubs = defaultStubs, + } = options; + return mount(MilestoneToken, { propsData: { config, value, @@ -31,18 +49,9 @@ const createComponent = ({ portalName: 'fake target', alignSuggestions: function fakeAlignSuggestions() {}, }, - stubs: { - Portal: { - template: '<div><slot></slot></div>', - }, - GlFilteredSearchSuggestionList: { - template: '<div></div>', - methods: { - getValue: () => '=', - }, - }, - }, + stubs, }); +} describe('MilestoneToken', () => { let mock; @@ -128,6 +137,8 @@ describe('MilestoneToken', () => { }); describe('template', () => { + const defaultMilestones = [{ text: 'foo', value: 'foo' }, { text: 'bar', value: 'baz' }]; + beforeEach(async () => { wrapper = createComponent({ value: { data: `"${mockRegularMilestone.title}"` } }); @@ -146,7 +157,60 @@ describe('MilestoneToken', () => { const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment); expect(tokenSegments).toHaveLength(3); // Milestone, =, '%"4.0"' - expect(tokenSegments.at(2).text()).toBe(`%"${mockRegularMilestone.title}"`); // "4.0 RC1" + expect(tokenSegments.at(2).text()).toBe(`%${mockRegularMilestone.title}`); // "4.0 RC1" + }); + + it('renders provided defaultMilestones as suggestions', async () => { + wrapper = createComponent({ + active: true, + config: { ...mockMilestoneToken, defaultMilestones }, + stubs: { Portal: true }, + }); + const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment); + const suggestionsSegment = tokenSegments.at(2); + suggestionsSegment.vm.$emit('activate'); + await wrapper.vm.$nextTick(); + + const suggestions = wrapper.findAll(GlFilteredSearchSuggestion); + + expect(suggestions).toHaveLength(defaultMilestones.length); + defaultMilestones.forEach((milestone, index) => { + expect(suggestions.at(index).text()).toBe(milestone.text); + }); + }); + + it('does not render divider when no defaultMilestones', async () => { + wrapper = createComponent({ + active: true, + config: { ...mockMilestoneToken, defaultMilestones: [] }, + stubs: { Portal: true }, + }); + const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment); + const suggestionsSegment = tokenSegments.at(2); + suggestionsSegment.vm.$emit('activate'); + await wrapper.vm.$nextTick(); + + expect(wrapper.contains(GlFilteredSearchSuggestion)).toBe(false); + expect(wrapper.contains(GlDropdownDivider)).toBe(false); + }); + + it('renders `DEFAULT_MILESTONES` as default suggestions', async () => { + wrapper = createComponent({ + active: true, + config: { ...mockMilestoneToken }, + stubs: { Portal: true }, + }); + const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment); + const suggestionsSegment = tokenSegments.at(2); + suggestionsSegment.vm.$emit('activate'); + await wrapper.vm.$nextTick(); + + const suggestions = wrapper.findAll(GlFilteredSearchSuggestion); + + expect(suggestions).toHaveLength(DEFAULT_MILESTONES.length); + DEFAULT_MILESTONES.forEach((milestone, index) => { + expect(suggestions.at(index).text()).toBe(milestone.text); + }); }); }); }); |