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
|
import { shallowMount } from '@vue/test-utils';
import { escape } from 'lodash';
import ItemTitle from '~/work_items/components/item_title.vue';
jest.mock('lodash/escape', () => jest.fn((fn) => fn));
const createComponent = ({ title = 'Sample title', disabled = false } = {}) =>
shallowMount(ItemTitle, {
propsData: {
title,
disabled,
},
});
describe('ItemTitle', () => {
let wrapper;
const mockUpdatedTitle = 'Updated title';
const findInputEl = () => wrapper.find('span#item-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-not-allowed');
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)).toBeTruthy();
expect(escape).toHaveBeenCalledWith(mockUpdatedTitle);
});
});
|
