@@ -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