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
|
import { setHTMLFixture } from 'helpers/fixtures';
import setupCollapsibleInputs from '~/snippet/collapsible_input';
describe('~/snippet/collapsible_input', () => {
let formEl;
let descriptionEl;
let titleEl;
let fooEl;
beforeEach(() => {
setHTMLFixture(`
<form>
<div class="js-collapsible-input js-title">
<div class="js-collapsed d-none">
<input type="text" />
</div>
<div class="js-expanded">
<textarea>Hello World!</textarea>
</div>
</div>
<div class="js-collapsible-input js-description">
<div class="js-collapsed">
<input type="text" />
</div>
<div class="js-expanded d-none">
<textarea></textarea>
</div>
</div>
<input type="text" class="js-foo" />
</form>
`);
formEl = document.querySelector('form');
titleEl = formEl.querySelector('.js-title');
descriptionEl = formEl.querySelector('.js-description');
fooEl = formEl.querySelector('.js-foo');
setupCollapsibleInputs();
});
const findInput = el => el.querySelector('textarea,input');
const findCollapsed = el => el.querySelector('.js-collapsed');
const findExpanded = el => el.querySelector('.js-expanded');
const findCollapsedInput = el => findInput(findCollapsed(el));
const findExpandedInput = el => findInput(findExpanded(el));
const focusIn = target => target.dispatchEvent(new Event('focusin', { bubbles: true }));
const expectIsCollapsed = (el, isCollapsed) => {
expect(findCollapsed(el).classList.contains('d-none')).toEqual(!isCollapsed);
expect(findExpanded(el).classList.contains('d-none')).toEqual(isCollapsed);
};
describe('when collapsed', () => {
it('is collapsed', () => {
expectIsCollapsed(descriptionEl, true);
});
describe('when focused', () => {
beforeEach(() => {
focusIn(findCollapsedInput(descriptionEl));
});
it('is expanded', () => {
expectIsCollapsed(descriptionEl, false);
});
describe.each`
desc | value | isCollapsed
${'is collapsed'} | ${''} | ${true}
${'stays open if given value'} | ${'Hello world!'} | ${false}
`('when loses focus', ({ desc, value, isCollapsed }) => {
it(desc, () => {
findExpandedInput(descriptionEl).value = value;
focusIn(fooEl);
expectIsCollapsed(descriptionEl, isCollapsed);
});
});
});
});
describe('when expanded and has value', () => {
it('does not collapse, when focusing out', () => {
expectIsCollapsed(titleEl, false);
focusIn(fooEl);
expectIsCollapsed(titleEl, false);
});
describe('and loses value', () => {
beforeEach(() => {
findExpandedInput(titleEl).value = '';
});
it('collapses, when focusing out', () => {
expectIsCollapsed(titleEl, false);
focusIn(fooEl);
expectIsCollapsed(titleEl, true);
});
});
});
});
|
