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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
import { mount } from '@vue/test-utils';
import { setHTMLFixture } from 'helpers/fixtures';
import DomElementListener from '~/vue_shared/components/dom_element_listener.vue';
const DEFAULT_SLOT_CONTENT = 'Default slot content';
const SELECTOR = '.js-test-include';
const HTML = `
<div>
<button class="js-test-include" data-testid="lorem">Lorem</button>
<button class="js-test-include" data-testid="ipsum">Ipsum</button>
<button data-testid="hello">Hello</a>
</div>
`;
describe('~/vue_shared/components/dom_element_listener.vue', () => {
let wrapper;
let spies;
const createComponent = () => {
wrapper = mount(DomElementListener, {
propsData: {
selector: SELECTOR,
},
listeners: spies,
slots: {
default: DEFAULT_SLOT_CONTENT,
},
});
};
const findElement = (testId) => document.querySelector(`[data-testid="${testId}"]`);
const spiesCallCount = () =>
Object.values(spies)
.map((x) => x.mock.calls.length)
.reduce((a, b) => a + b);
beforeEach(() => {
setHTMLFixture(HTML);
spies = {
click: jest.fn(),
focus: jest.fn(),
};
});
describe('default', () => {
beforeEach(() => {
createComponent();
});
it('renders default slot', () => {
expect(wrapper.text()).toBe(DEFAULT_SLOT_CONTENT);
});
it('does not initially trigger listeners', () => {
expect(spiesCallCount()).toBe(0);
});
describe.each`
event | testId
${'click'} | ${'lorem'}
${'focus'} | ${'ipsum'}
`(
'when matching element triggers event (testId=$testId, event=$event)',
({ event, testId }) => {
beforeEach(() => {
findElement(testId).dispatchEvent(new Event(event));
});
it('triggers listener', () => {
expect(spiesCallCount()).toBe(1);
expect(spies[event]).toHaveBeenCalledWith(expect.any(Event));
expect(spies[event]).toHaveBeenCalledWith(
expect.objectContaining({
target: findElement(testId),
}),
);
});
},
);
describe.each`
desc | event | testId
${'when non-matching element triggers event'} | ${'click'} | ${'hello'}
${'when matching element triggers unlistened event'} | ${'hover'} | ${'lorem'}
`('$desc', ({ event, testId }) => {
beforeEach(() => {
findElement(testId).dispatchEvent(new Event(event));
});
it('does not trigger listeners', () => {
expect(spiesCallCount()).toBe(0);
});
});
});
describe('after destroyed', () => {
beforeEach(() => {
createComponent();
wrapper.destroy();
});
describe('when matching element triggers event', () => {
beforeEach(() => {
findElement('lorem').dispatchEvent(new Event('click'));
});
it('does not trigger any listeners', () => {
expect(spiesCallCount()).toBe(0);
});
});
});
});
|
