1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
import { shallowMount } from '@vue/test-utils';
import { escape } from 'lodash';
import ItemTitle from '~/work_items/components/item_title.vue';
const createComponent = ({ title = 'Sample title', disabled = false } = {}) =>
shallowMount(ItemTitle, {
propsData: {
title,
disabled,
},
});
describe('ItemTitle', () => {
let wrapper;
const mockUpdatedTitle = 'Updated title';
const findInputEl = () => wrapper.find('[aria-label="Title"]');
beforeEach(() => {
wrapper = createComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('renders title contents', () => {
expect(findInputEl().attributes()).toMatchObject({
'data-placeholder': 'Add a title...',
contenteditable: 'true',
});
expect(findInputEl().text()).toBe('Sample title');
});
it('renders title contents with editing disabled', () => {
wrapper = createComponent({
disabled: true,
});
expect(wrapper.classes()).toContain('gl-cursor-text');
expect(findInputEl().attributes('contenteditable')).toBe('false');
});
it.each`
eventName | sourceEvent
${'title-changed'} | ${'blur'}
${'title-input'} | ${'keyup'}
`('emits "$eventName" event on input $sourceEvent', async ({ eventName, sourceEvent }) => {
findInputEl().element.innerText = mockUpdatedTitle;
await findInputEl().trigger(sourceEvent);
expect(wrapper.emitted(eventName)).toBeDefined();
});
it('renders only the text content from clipboard', async () => {
const htmlContent = '<strong>bold text</strong>';
const buildClipboardData = (data = {}) => ({
clipboardData: {
getData(mimeType) {
return data[mimeType];
},
types: Object.keys(data),
},
});
findInputEl().trigger(
'paste',
buildClipboardData({
html: htmlContent,
text: htmlContent,
}),
);
expect(findInputEl().element.innerHTML).toBe(escape(htmlContent));
});
});
|
