diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/markdown/editor_mode_dropdown_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/markdown/editor_mode_dropdown_spec.js | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/markdown/editor_mode_dropdown_spec.js b/spec/frontend/vue_shared/components/markdown/editor_mode_dropdown_spec.js new file mode 100644 index 00000000000..34071775b9c --- /dev/null +++ b/spec/frontend/vue_shared/components/markdown/editor_mode_dropdown_spec.js @@ -0,0 +1,58 @@ +import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import EditorModeDropdown from '~/vue_shared/components/markdown/editor_mode_dropdown.vue'; + +describe('vue_shared/component/markdown/editor_mode_dropdown', () => { + let wrapper; + + const createComponent = ({ value, size } = {}) => { + wrapper = shallowMount(EditorModeDropdown, { + propsData: { + value, + size, + }, + }); + }; + + const findDropdown = () => wrapper.findComponent(GlDropdown); + const findDropdownItem = (text) => + wrapper + .findAllComponents(GlDropdownItem) + .filter((item) => item.text().startsWith(text)) + .at(0); + + afterEach(() => { + wrapper.destroy(); + }); + + describe.each` + modeText | value | dropdownText | otherMode + ${'Rich text'} | ${'richText'} | ${'View markdown'} | ${'Markdown'} + ${'Markdown'} | ${'markdown'} | ${'View rich text'} | ${'Rich text'} + `('$modeText', ({ modeText, value, dropdownText, otherMode }) => { + beforeEach(() => { + createComponent({ value }); + }); + + it('shows correct dropdown label', () => { + expect(findDropdown().props('text')).toEqual(dropdownText); + }); + + it('checks correct checked dropdown item', () => { + expect(findDropdownItem(modeText).props().isChecked).toBe(true); + expect(findDropdownItem(otherMode).props().isChecked).toBe(false); + }); + + it('emits event on click', () => { + findDropdownItem(modeText).vm.$emit('click'); + + expect(wrapper.emitted().input).toEqual([[value]]); + }); + }); + + it('passes size to dropdown', () => { + createComponent({ size: 'small', value: 'markdown' }); + + expect(findDropdown().props('size')).toEqual('small'); + }); +}); |