/
index.test.js
124 lines (108 loc) · 3.33 KB
/
index.test.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
124
/**
* WordPress dependencies
*/
import domReady from '@wordpress/dom-ready';
/**
* Internal dependencies
*/
import { setup, speak } from '../';
import clear from '../clear';
import filterMessage from '../filter-message';
jest.mock( '../clear', () => {
return jest.fn();
} );
jest.mock( '@wordpress/dom-ready', () => {
return jest.fn( ( callback ) => {
callback();
} );
} );
jest.mock( '../filter-message', () => {
return jest.fn( ( message ) => {
return message;
} );
} );
describe( 'speak', () => {
let containerPolite = document.getElementById( 'a11y-speak-polite' );
let containerAssertive = document.getElementById( 'a11y-speak-assertive' );
beforeEach( () => {
containerPolite.textContent = '';
containerAssertive.textContent = '';
} );
describe( 'on import', () => {
it( 'should call domReady', () => {
expect( domReady ).toHaveBeenCalled();
} );
} );
describe( 'in default mode', () => {
it( 'should set the textcontent of the polite aria-live region', () => {
speak( 'default message' );
expect( containerPolite.textContent ).toBe( 'default message' );
expect( containerAssertive.textContent ).toBe( '' );
expect( clear ).toHaveBeenCalled();
expect( filterMessage ).toHaveBeenCalledWith( 'default message' );
} );
} );
describe( 'in assertive mode', () => {
it( 'should set the textcontent of the assertive aria-live region', () => {
speak( 'assertive message', 'assertive' );
expect( containerPolite.textContent ).toBe( '' );
expect( containerAssertive.textContent ).toBe(
'assertive message'
);
} );
} );
describe( 'in explicit polite mode', () => {
it( 'should set the textcontent of the polite aria-live region', () => {
speak( 'polite message', 'polite' );
expect( containerPolite.textContent ).toBe( 'polite message' );
expect( containerAssertive.textContent ).toBe( '' );
} );
} );
describe( 'when somehow the assertive container is not present', () => {
beforeEach( () => {
document.getElementById( 'a11y-speak-assertive' ).remove();
} );
afterEach( () => {
setup();
containerAssertive = document.getElementById(
'a11y-speak-assertive'
);
} );
it( 'should set the textcontent of the polite aria-live region', () => {
speak( 'message', 'assertive' );
expect( containerPolite.textContent ).toBe( 'message' );
expect(
document.getElementById( 'a11y-speak-assertive' )
).toBeNull();
} );
} );
describe( 'when somehow the both containers are not present', () => {
beforeEach( () => {
containerAssertive.remove();
containerPolite.remove();
} );
afterEach( () => {
setup();
containerPolite = document.getElementById( 'a11y-speak-polite' );
containerAssertive = document.getElementById(
'a11y-speak-assertive'
);
} );
it( 'should set the textcontent of the polite aria-live region', () => {
expect( document.getElementById( 'a11y-speak-polite' ) ).toBeNull();
expect(
document.getElementById( 'a11y-speak-assertive' )
).toBeNull();
} );
} );
describe( 'setup when the elements already exist', () => {
it( 'should not create the aria live regions again', () => {
const before =
document.getElementsByClassName( 'a11y-speak-region' ).length;
setup();
const after =
document.getElementsByClassName( 'a11y-speak-region' ).length;
expect( before ).toBe( after );
} );
} );
} );