@@ -34,90 +34,118 @@ describe('FocusOriginMonitor', () => {
34
34
focusOriginMonitor.registerElementForFocusClasses(buttonElement, buttonRenderer);
35
35
}));
36
36
37
- it('manually registered element should receive focus classes', () => {
37
+ it('manually registered element should receive focus classes', async( () => {
38
38
buttonElement.focus();
39
39
fixture.detectChanges();
40
40
41
- expect(buttonElement.classList.contains('cdk-focused'))
42
- .toBe(true, 'button should have cdk-focused class');
43
- });
41
+ setTimeout(() => {
42
+ fixture.detectChanges();
43
+
44
+ expect(buttonElement.classList.contains('cdk-focused'))
45
+ .toBe(true, 'button should have cdk-focused class');
46
+ }, 0);
47
+ }));
44
48
45
- it('should detect focus via keyboard', () => {
49
+ it('should detect focus via keyboard', async( () => {
46
50
// Simulate focus via keyboard.
47
51
dispatchKeydownEvent(document, TAB);
48
52
buttonElement.focus();
49
53
fixture.detectChanges();
50
54
51
- expect(buttonElement.classList.length)
52
- .toBe(2, 'button should have exactly 2 focus classes');
53
- expect(buttonElement.classList.contains('cdk-focused'))
54
- .toBe(true, 'button should have cdk-focused class');
55
- expect(buttonElement.classList.contains('cdk-keyboard-focused'))
56
- .toBe(true, 'button should have cdk-keyboard-focused class');
57
- });
55
+ setTimeout(() => {
56
+ fixture.detectChanges();
57
+
58
+ expect(buttonElement.classList.length)
59
+ .toBe(2, 'button should have exactly 2 focus classes');
60
+ expect(buttonElement.classList.contains('cdk-focused'))
61
+ .toBe(true, 'button should have cdk-focused class');
62
+ expect(buttonElement.classList.contains('cdk-keyboard-focused'))
63
+ .toBe(true, 'button should have cdk-keyboard-focused class');
64
+ }, 0);
65
+ }));
58
66
59
- it('should detect focus via mouse', () => {
67
+ it('should detect focus via mouse', async( () => {
60
68
// Simulate focus via mouse.
61
69
dispatchMousedownEvent(document);
62
70
buttonElement.focus();
63
71
fixture.detectChanges();
64
72
65
- expect(buttonElement.classList.length)
66
- .toBe(2, 'button should have exactly 2 focus classes');
67
- expect(buttonElement.classList.contains('cdk-focused'))
68
- .toBe(true, 'button should have cdk-focused class');
69
- expect(buttonElement.classList.contains('cdk-mouse-focused'))
70
- .toBe(true, 'button should have cdk-mouse-focused class');
71
- });
73
+ setTimeout(() => {
74
+ fixture.detectChanges();
75
+
76
+ expect(buttonElement.classList.length)
77
+ .toBe(2, 'button should have exactly 2 focus classes');
78
+ expect(buttonElement.classList.contains('cdk-focused'))
79
+ .toBe(true, 'button should have cdk-focused class');
80
+ expect(buttonElement.classList.contains('cdk-mouse-focused'))
81
+ .toBe(true, 'button should have cdk-mouse-focused class');
82
+ }, 0);
83
+ }));
72
84
73
- it('should detect programmatic focus', () => {
85
+ it('should detect programmatic focus', async( () => {
74
86
// Programmatically focus.
75
87
buttonElement.focus();
76
88
fixture.detectChanges();
77
89
78
- expect(buttonElement.classList.length)
79
- .toBe(2, 'button should have exactly 2 focus classes');
80
- expect(buttonElement.classList.contains('cdk-focused'))
81
- .toBe(true, 'button should have cdk-focused class');
82
- expect(buttonElement.classList.contains('cdk-program-focused'))
83
- .toBe(true, 'button should have cdk-program-focused class');
84
- });
90
+ setTimeout(() => {
91
+ fixture.detectChanges();
92
+
93
+ expect(buttonElement.classList.length)
94
+ .toBe(2, 'button should have exactly 2 focus classes');
95
+ expect(buttonElement.classList.contains('cdk-focused'))
96
+ .toBe(true, 'button should have cdk-focused class');
97
+ expect(buttonElement.classList.contains('cdk-program-focused'))
98
+ .toBe(true, 'button should have cdk-program-focused class');
99
+ }, 0);
100
+ }));
85
101
86
- it('focusVia keyboard should simulate keyboard focus', () => {
102
+ it('focusVia keyboard should simulate keyboard focus', async( () => {
87
103
focusOriginMonitor.focusVia(buttonElement, buttonRenderer, 'keyboard');
88
104
fixture.detectChanges();
89
105
90
- expect(buttonElement.classList.length)
91
- .toBe(2, 'button should have exactly 2 focus classes');
92
- expect(buttonElement.classList.contains('cdk-focused'))
93
- .toBe(true, 'button should have cdk-focused class');
94
- expect(buttonElement.classList.contains('cdk-keyboard-focused'))
95
- .toBe(true, 'button should have cdk-keyboard-focused class');
96
- });
106
+ setTimeout(() => {
107
+ fixture.detectChanges();
97
108
98
- it('focusVia mouse should simulate mouse focus', () => {
109
+ expect(buttonElement.classList.length)
110
+ .toBe(2, 'button should have exactly 2 focus classes');
111
+ expect(buttonElement.classList.contains('cdk-focused'))
112
+ .toBe(true, 'button should have cdk-focused class');
113
+ expect(buttonElement.classList.contains('cdk-keyboard-focused'))
114
+ .toBe(true, 'button should have cdk-keyboard-focused class');
115
+ }, 0);
116
+ }));
117
+
118
+ it('focusVia mouse should simulate mouse focus', async(() => {
99
119
focusOriginMonitor.focusVia(buttonElement, buttonRenderer, 'mouse');
100
120
fixture.detectChanges();
101
121
102
- expect(buttonElement.classList.length)
103
- .toBe(2, 'button should have exactly 2 focus classes');
104
- expect(buttonElement.classList.contains('cdk-focused'))
105
- .toBe(true, 'button should have cdk-focused class');
106
- expect(buttonElement.classList.contains('cdk-mouse-focused'))
107
- .toBe(true, 'button should have cdk-mouse-focused class');
108
- });
122
+ setTimeout(() => {
123
+ fixture.detectChanges();
109
124
110
- it('focusVia program should simulate programmatic focus', () => {
125
+ expect(buttonElement.classList.length)
126
+ .toBe(2, 'button should have exactly 2 focus classes');
127
+ expect(buttonElement.classList.contains('cdk-focused'))
128
+ .toBe(true, 'button should have cdk-focused class');
129
+ expect(buttonElement.classList.contains('cdk-mouse-focused'))
130
+ .toBe(true, 'button should have cdk-mouse-focused class');
131
+ }, 0);
132
+ }));
133
+
134
+ it('focusVia program should simulate programmatic focus', async(() => {
111
135
focusOriginMonitor.focusVia(buttonElement, buttonRenderer, 'program');
112
136
fixture.detectChanges();
113
137
114
- expect(buttonElement.classList.length)
115
- .toBe(2, 'button should have exactly 2 focus classes');
116
- expect(buttonElement.classList.contains('cdk-focused'))
117
- .toBe(true, 'button should have cdk-focused class');
118
- expect(buttonElement.classList.contains('cdk-program-focused'))
119
- .toBe(true, 'button should have cdk-program-focused class');
120
- });
138
+ setTimeout(() => {
139
+ fixture.detectChanges();
140
+
141
+ expect(buttonElement.classList.length)
142
+ .toBe(2, 'button should have exactly 2 focus classes');
143
+ expect(buttonElement.classList.contains('cdk-focused'))
144
+ .toBe(true, 'button should have cdk-focused class');
145
+ expect(buttonElement.classList.contains('cdk-program-focused'))
146
+ .toBe(true, 'button should have cdk-program-focused class');
147
+ }, 0);
148
+ }));
121
149
});
122
150
123
151
@@ -143,50 +171,67 @@ describe('cdkFocusClasses', () => {
143
171
buttonElement = fixture.debugElement.query(By.css('button')).nativeElement;
144
172
});
145
173
174
+ afterEach(() => {
175
+ buttonElement.blur();
176
+ fixture.detectChanges();
177
+ });
178
+
146
179
it('should initially not be focused', () => {
147
180
expect(buttonElement.classList.length).toBe(0, 'button should not have focus classes');
148
181
});
149
182
150
- it('should detect focus via keyboard', () => {
183
+ it('should detect focus via keyboard', async( () => {
151
184
// Simulate focus via keyboard.
152
185
dispatchKeydownEvent(document, TAB);
153
186
buttonElement.focus();
154
187
fixture.detectChanges();
155
188
156
- expect(buttonElement.classList.length)
157
- .toBe(2, 'button should have exactly 2 focus classes');
158
- expect(buttonElement.classList.contains('cdk-focused'))
159
- .toBe(true, 'button should have cdk-focused class');
160
- expect(buttonElement.classList.contains('cdk-keyboard-focused'))
161
- .toBe(true, 'button should have cdk-keyboard-focused class');
162
- });
189
+ setTimeout(() => {
190
+ fixture.detectChanges();
163
191
164
- it('should detect focus via mouse', () => {
192
+ expect(buttonElement.classList.length)
193
+ .toBe(2, 'button should have exactly 2 focus classes');
194
+ expect(buttonElement.classList.contains('cdk-focused'))
195
+ .toBe(true, 'button should have cdk-focused class');
196
+ expect(buttonElement.classList.contains('cdk-keyboard-focused'))
197
+ .toBe(true, 'button should have cdk-keyboard-focused class');
198
+ }, 0);
199
+ }));
200
+
201
+ it('should detect focus via mouse', async(() => {
165
202
// Simulate focus via mouse.
166
203
dispatchMousedownEvent(document);
167
204
buttonElement.focus();
168
205
fixture.detectChanges();
169
206
170
- expect(buttonElement.classList.length)
171
- .toBe(2, 'button should have exactly 2 focus classes');
172
- expect(buttonElement.classList.contains('cdk-focused'))
173
- .toBe(true, 'button should have cdk-focused class');
174
- expect(buttonElement.classList.contains('cdk-mouse-focused'))
175
- .toBe(true, 'button should have cdk-mouse-focused class');
176
- });
207
+ setTimeout(() => {
208
+ fixture.detectChanges();
177
209
178
- it('should detect programmatic focus', () => {
210
+ expect(buttonElement.classList.length)
211
+ .toBe(2, 'button should have exactly 2 focus classes');
212
+ expect(buttonElement.classList.contains('cdk-focused'))
213
+ .toBe(true, 'button should have cdk-focused class');
214
+ expect(buttonElement.classList.contains('cdk-mouse-focused'))
215
+ .toBe(true, 'button should have cdk-mouse-focused class');
216
+ }, 0);
217
+ }));
218
+
219
+ it('should detect programmatic focus', async(() => {
179
220
// Programmatically focus.
180
221
buttonElement.focus();
181
222
fixture.detectChanges();
182
223
224
+ setTimeout(() => {
225
+ fixture.detectChanges();
226
+
183
227
expect(buttonElement.classList.length)
184
228
.toBe(2, 'button should have exactly 2 focus classes');
185
229
expect(buttonElement.classList.contains('cdk-focused'))
186
230
.toBe(true, 'button should have cdk-focused class');
187
231
expect(buttonElement.classList.contains('cdk-program-focused'))
188
232
.toBe(true, 'button should have cdk-program-focused class');
189
- });
233
+ }, 0);
234
+ }));
190
235
});
191
236
192
237
0 commit comments