Skip to content

Commit 1b97f7a

Browse files
mmalerbammalerba
committed
addressed comments
1 parent 46d8cab commit 1b97f7a

File tree

5 files changed

+135
-161
lines changed

5 files changed

+135
-161
lines changed

‎src/lib/core/style/focus-classes.spec.ts‎

Lines changed: 115 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -34,90 +34,118 @@ describe('FocusOriginMonitor', () => {
3434
focusOriginMonitor.registerElementForFocusClasses(buttonElement, buttonRenderer);
3535
}));
3636

37-
it('manually registered element should receive focus classes', () => {
37+
it('manually registered element should receive focus classes', async(() => {
3838
buttonElement.focus();
3939
fixture.detectChanges();
4040

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+
}));
4448

45-
it('should detect focus via keyboard', () => {
49+
it('should detect focus via keyboard', async(() => {
4650
// Simulate focus via keyboard.
4751
dispatchKeydownEvent(document, TAB);
4852
buttonElement.focus();
4953
fixture.detectChanges();
5054

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+
}));
5866

59-
it('should detect focus via mouse', () => {
67+
it('should detect focus via mouse', async(() => {
6068
// Simulate focus via mouse.
6169
dispatchMousedownEvent(document);
6270
buttonElement.focus();
6371
fixture.detectChanges();
6472

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+
}));
7284

73-
it('should detect programmatic focus', () => {
85+
it('should detect programmatic focus', async(() => {
7486
// Programmatically focus.
7587
buttonElement.focus();
7688
fixture.detectChanges();
7789

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+
}));
85101

86-
it('focusVia keyboard should simulate keyboard focus', () => {
102+
it('focusVia keyboard should simulate keyboard focus', async(() => {
87103
focusOriginMonitor.focusVia(buttonElement, buttonRenderer, 'keyboard');
88104
fixture.detectChanges();
89105

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();
97108

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(() => {
99119
focusOriginMonitor.focusVia(buttonElement, buttonRenderer, 'mouse');
100120
fixture.detectChanges();
101121

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();
109124

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(() => {
111135
focusOriginMonitor.focusVia(buttonElement, buttonRenderer, 'program');
112136
fixture.detectChanges();
113137

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+
}));
121149
});
122150

123151

@@ -143,50 +171,67 @@ describe('cdkFocusClasses', () => {
143171
buttonElement = fixture.debugElement.query(By.css('button')).nativeElement;
144172
});
145173

174+
afterEach(() => {
175+
buttonElement.blur();
176+
fixture.detectChanges();
177+
});
178+
146179
it('should initially not be focused', () => {
147180
expect(buttonElement.classList.length).toBe(0, 'button should not have focus classes');
148181
});
149182

150-
it('should detect focus via keyboard', () => {
183+
it('should detect focus via keyboard', async(() => {
151184
// Simulate focus via keyboard.
152185
dispatchKeydownEvent(document, TAB);
153186
buttonElement.focus();
154187
fixture.detectChanges();
155188

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();
163191

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(() => {
165202
// Simulate focus via mouse.
166203
dispatchMousedownEvent(document);
167204
buttonElement.focus();
168205
fixture.detectChanges();
169206

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();
177209

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(() => {
179220
// Programmatically focus.
180221
buttonElement.focus();
181222
fixture.detectChanges();
182223

224+
setTimeout(() => {
225+
fixture.detectChanges();
226+
183227
expect(buttonElement.classList.length)
184228
.toBe(2, 'button should have exactly 2 focus classes');
185229
expect(buttonElement.classList.contains('cdk-focused'))
186230
.toBe(true, 'button should have cdk-focused class');
187231
expect(buttonElement.classList.contains('cdk-program-focused'))
188232
.toBe(true, 'button should have cdk-program-focused class');
189-
});
233+
}, 0);
234+
}));
190235
});
191236

192237

‎src/lib/core/style/focus-classes.ts‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,20 +23,8 @@ export class FocusOriginMonitor {
2323

2424
/** Register an element to receive focus classes. */
2525
registerElementForFocusClasses(element: Element, renderer: Renderer) {
26-
renderer.listen(element, 'focus', () => {
27-
renderer.setElementClass(element, 'cdk-focused', true);
28-
renderer.setElementClass(element, 'cdk-keyboard-focused', this._origin == 'keyboard');
29-
renderer.setElementClass(element, 'cdk-mouse-focused', this._origin == 'mouse');
30-
renderer.setElementClass(element, 'cdk-program-focused',
31-
!this._origin || this._origin == 'program');
32-
});
33-
34-
renderer.listen(element, 'blur', () => {
35-
renderer.setElementClass(element, 'cdk-focused', false);
36-
renderer.setElementClass(element, 'cdk-keyboard-focused', false);
37-
renderer.setElementClass(element, 'cdk-mouse-focused', false);
38-
renderer.setElementClass(element, 'cdk-program-focused', false);
39-
});
26+
element.addEventListener('focus', () => this._onFocus(element, renderer), true);
27+
element.addEventListener('blur', () => this._onBlur(element, renderer), true);
4028
}
4129

4230
/** Focuses the element via the specified focus origin. */
@@ -50,6 +38,24 @@ export class FocusOriginMonitor {
5038
this._origin = origin;
5139
setTimeout(() => this._origin = null, 0);
5240
}
41+
42+
/** Handles focus events on a registered element. */
43+
private _onFocus(element: Element, renderer: Renderer) {
44+
renderer.setElementClass(element, 'cdk-focused', true);
45+
renderer.setElementClass(element, 'cdk-keyboard-focused', this._origin == 'keyboard');
46+
renderer.setElementClass(element, 'cdk-mouse-focused', this._origin == 'mouse');
47+
renderer.setElementClass(element, 'cdk-program-focused',
48+
!this._origin || this._origin == 'program');
49+
this._origin = null;
50+
}
51+
52+
/** Handles blur events on a registered element. */
53+
private _onBlur(element: Element, renderer: Renderer) {
54+
renderer.setElementClass(element, 'cdk-focused', false);
55+
renderer.setElementClass(element, 'cdk-keyboard-focused', false);
56+
renderer.setElementClass(element, 'cdk-mouse-focused', false);
57+
renderer.setElementClass(element, 'cdk-program-focused', false);
58+
}
5359
}
5460

5561

‎src/lib/core/style/perf_results‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎src/lib/core/style/schedule_async_perf.html‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎src/lib/core/style/timestamp_perf.html‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

0 commit comments

Comments
 (0)