diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/color_select_dropdown/dropdown_contents_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/color_select_dropdown/dropdown_contents_spec.js | 52 |
1 files changed, 17 insertions, 35 deletions
diff --git a/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_contents_spec.js b/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_contents_spec.js index 74f50b878e2..ee4d3a2630a 100644 --- a/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_contents_spec.js +++ b/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_contents_spec.js @@ -1,57 +1,30 @@ -import { shallowMount } from '@vue/test-utils'; import { nextTick } from 'vue'; +import { GlDropdown } from '@gitlab/ui'; +import { mountExtended } from 'helpers/vue_test_utils_helper'; import { DROPDOWN_VARIANT } from '~/vue_shared/components/color_select_dropdown/constants'; import DropdownContents from '~/vue_shared/components/color_select_dropdown/dropdown_contents.vue'; import DropdownContentsColorView from '~/vue_shared/components/color_select_dropdown/dropdown_contents_color_view.vue'; +import DropdownHeader from '~/vue_shared/components/color_select_dropdown/dropdown_header.vue'; import { color } from './mock_data'; -const showDropdown = jest.fn(); -const focusInput = jest.fn(); - const defaultProps = { dropdownTitle: '', selectedColor: color, - dropdownButtonText: '', + dropdownButtonText: 'Pick a color', variant: '', isVisible: false, }; -const GlDropdownStub = { - template: ` - <div> - <slot name="header"></slot> - <slot></slot> - </div> - `, - methods: { - show: showDropdown, - hide: jest.fn(), - }, -}; - -const DropdownHeaderStub = { - template: ` - <div>Hello, I am a header</div> - `, - methods: { - focusInput, - }, -}; - describe('DropdownContent', () => { let wrapper; const createComponent = ({ propsData = {} } = {}) => { - wrapper = shallowMount(DropdownContents, { + wrapper = mountExtended(DropdownContents, { propsData: { ...defaultProps, ...propsData, }, - stubs: { - GlDropdown: GlDropdownStub, - DropdownHeader: DropdownHeaderStub, - }, }); }; @@ -60,16 +33,17 @@ describe('DropdownContent', () => { }); const findColorView = () => wrapper.findComponent(DropdownContentsColorView); - const findDropdownHeader = () => wrapper.findComponent(DropdownHeaderStub); - const findDropdown = () => wrapper.findComponent(GlDropdownStub); + const findDropdownHeader = () => wrapper.findComponent(DropdownHeader); + const findDropdown = () => wrapper.findComponent(GlDropdown); it('calls dropdown `show` method on `isVisible` prop change', async () => { createComponent(); + const spy = jest.spyOn(wrapper.vm.$refs.dropdown, 'show'); await wrapper.setProps({ isVisible: true, }); - expect(showDropdown).toHaveBeenCalledTimes(1); + expect(spy).toHaveBeenCalledTimes(1); }); it('does not emit `setColor` event on dropdown hide if color did not change', () => { @@ -110,4 +84,12 @@ describe('DropdownContent', () => { expect(findDropdownHeader().exists()).toBe(true); }); + + it('handles no selected color', () => { + createComponent({ propsData: { selectedColor: {} } }); + + expect(wrapper.findByTestId('fallback-button-text').text()).toEqual( + defaultProps.dropdownButtonText, + ); + }); }); |