diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js | 51 |
1 files changed, 32 insertions, 19 deletions
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js index 8545c43dc1e..2db15a71215 100644 --- a/spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js +++ b/spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js @@ -1,4 +1,5 @@ import { shallowMount } from '@vue/test-utils'; +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { GlIcon } from '@gitlab/ui'; import ToolbarItem from '~/vue_shared/components/rich_content_editor/toolbar_item.vue'; @@ -9,33 +10,45 @@ describe('Toolbar Item', () => { const findButton = () => wrapper.find('button'); const buildWrapper = propsData => { - wrapper = shallowMount(ToolbarItem, { propsData }); + wrapper = shallowMount(ToolbarItem, { + propsData, + directives: { + GlTooltip: createMockDirective(), + }, + }); }; describe.each` - icon - ${'heading'} - ${'bold'} - ${'italic'} - ${'strikethrough'} - ${'quote'} - ${'link'} - ${'doc-code'} - ${'list-bulleted'} - ${'list-numbered'} - ${'list-task'} - ${'list-indent'} - ${'list-outdent'} - ${'dash'} - ${'table'} - ${'code'} - `('toolbar item component', ({ icon }) => { - beforeEach(() => buildWrapper({ icon })); + icon | tooltip + ${'heading'} | ${'Headings'} + ${'bold'} | ${'Add bold text'} + ${'italic'} | ${'Add italic text'} + ${'strikethrough'} | ${'Add strikethrough text'} + ${'quote'} | ${'Insert a quote'} + ${'link'} | ${'Add a link'} + ${'doc-code'} | ${'Insert a code block'} + ${'list-bulleted'} | ${'Add a bullet list'} + ${'list-numbered'} | ${'Add a numbered list'} + ${'list-task'} | ${'Add a task list'} + ${'list-indent'} | ${'Indent'} + ${'list-outdent'} | ${'Outdent'} + ${'dash'} | ${'Add a line'} + ${'table'} | ${'Add a table'} + ${'code'} | ${'Insert an image'} + ${'code'} | ${'Insert inline code'} + `('toolbar item component', ({ icon, tooltip }) => { + beforeEach(() => buildWrapper({ icon, tooltip })); it('renders a toolbar button', () => { expect(findButton().exists()).toBe(true); }); + it('renders the correct tooltip', () => { + const buttonTooltip = getBinding(wrapper.element, 'gl-tooltip'); + expect(buttonTooltip).toBeDefined(); + expect(buttonTooltip.value.title).toBe(tooltip); + }); + it(`renders the ${icon} icon`, () => { expect(findIcon().exists()).toBe(true); expect(findIcon().props().name).toBe(icon); |