58 lines
1.9 KiB
JavaScript
58 lines
1.9 KiB
JavaScript
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';
|
|
|
|
describe('Toolbar Item', () => {
|
|
let wrapper;
|
|
|
|
const findIcon = () => wrapper.find(GlIcon);
|
|
const findButton = () => wrapper.find('button');
|
|
|
|
const buildWrapper = propsData => {
|
|
wrapper = shallowMount(ToolbarItem, {
|
|
propsData,
|
|
directives: {
|
|
GlTooltip: createMockDirective(),
|
|
},
|
|
});
|
|
};
|
|
|
|
describe.each`
|
|
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);
|
|
});
|
|
});
|
|
});
|