-
Notifications
You must be signed in to change notification settings - Fork 922
/
footer.spec.js
executable file
·123 lines (105 loc) · 3.13 KB
/
footer.spec.js
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
113
114
115
116
117
118
119
120
121
122
123
const assert = require('assert');
const fs = require('fs');
const path = require('path');
const behavior = require('../../../src/js/components/footer');
const TEMPLATE = fs.readFileSync(path.join(__dirname, '/template.html'));
const { DEBOUNCE_RATE } = behavior;
const HIDDEN = 'hidden';
const PRIMARY_CONTENT_SELECTOR = '.usa-footer--big .usa-footer__primary-content--collapsible';
const BUTTON_SELECTOR = '.usa-footer__primary-link';
/**
* Resize the window's width, then dispatch a
* 'resize' event after the debounce rate elapses.
* Returns a promise so that you can return it in a
* test, and mocha will wait until it's resolved.
*
* @param {number} width
* @return {Promise}
*/
const resizeTo = width => new Promise((resolve) => {
if (width !== window.innerWidth) {
window.innerWidth = width;
window.dispatchEvent(new CustomEvent('resize'));
}
setTimeout(resolve, DEBOUNCE_RATE + 10);
});
const assertHidden = (el, hidden) => {
assert.equal(
el.classList.contains(HIDDEN),
hidden,
`not hidden: ${el.nodeName} (${el.className})`
);
};
describe('big footer accordion', () => {
const { body } = document;
let buttons;
let lists;
beforeEach(() => {
body.innerHTML = TEMPLATE;
lists = document.querySelectorAll(PRIMARY_CONTENT_SELECTOR);
buttons = document.querySelectorAll(BUTTON_SELECTOR);
window.innerWidth = 1024;
behavior.on(body);
});
afterEach(() => {
body.innerHTML = '';
behavior.off(body);
});
it('defines a max. width', () => {
assert(typeof behavior.HIDE_MAX_WIDTH === 'number', 'no value defined');
});
it('collapses at small screens', () => {
return resizeTo(400)
.then(() => {
assertHidden(lists[ 0 ], true);
});
});
it('collapses then expands again on larger screens', () => {
return resizeTo(400)
.then(() => resizeTo(1024))
.then(() => {
assertHidden(lists[ 0 ], false);
});
});
it('opens panel when clicked', () => {
return resizeTo(400)
.then(() => {
buttons[ 0 ].click();
assertHidden(lists[ 0 ], false);
});
});
it('does not open panels when clicked on larger screens', () => {
buttons[ 0 ].click();
assertHidden(lists[ 0 ], false);
});
it('closes panel on subsequent click', () => {
return resizeTo(800)
.then(() => resizeTo(400))
.then(() => {
buttons[0].click();
assertHidden(lists[ 0 ], false);
buttons[ 0 ].click();
assertHidden(lists[ 0 ], true);
});
});
it('closes other panels on small screens', () => {
return resizeTo(800)
.then(() => resizeTo(400))
.then(() => {
buttons[0].click();
assertHidden(lists[ 0 ], false);
assertHidden(lists[ 1 ], true);
assertHidden(lists[ 2 ], true);
buttons[1].click();
assertHidden(lists[ 0 ], true);
assertHidden(lists[ 1 ], false);
assertHidden(lists[ 2 ], true);
});
});
it('does not close other panels on larger screens', () => {
buttons[0].click();
assertHidden(lists[ 0 ], false);
assertHidden(lists[ 1 ], false);
assertHidden(lists[ 2 ], false);
});
});