Skip to content

Commit 2a70c98

Browse files
crisbetocrisbeto
committed
refactor(cdk/overlay): switch to tree shakeable overlay APIs
Reworks the module to use the new tree-shakeable APIs for creating overlays.
1 parent 6f603a9 commit 2a70c98

13 files changed

+346
-334
lines changed

‎src/cdk/overlay/dispatchers/overlay-keyboard-dispatcher.spec.ts

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
11
import {ESCAPE} from '../../keycodes';
22
import {ComponentPortal} from '../../portal';
3-
import {ApplicationRef, Component} from '@angular/core';
3+
import {ApplicationRef, Component, Injector} from '@angular/core';
44
import {TestBed} from '@angular/core/testing';
55
import {dispatchKeyboardEvent} from '../../testing/private';
6-
import {Overlay, OverlayModule} from '../index';
6+
import {createOverlayRef} from '../index';
77
import {OverlayKeyboardDispatcher} from './overlay-keyboard-dispatcher';
88

99
describe('OverlayKeyboardDispatcher', () => {
1010
let appRef: ApplicationRef;
1111
let keyboardDispatcher: OverlayKeyboardDispatcher;
12-
let overlay: Overlay;
12+
let injector: Injector;
1313

1414
beforeEach(() => {
15-
TestBed.configureTestingModule({imports: [OverlayModule, TestComponent]});
1615
appRef = TestBed.inject(ApplicationRef);
1716
keyboardDispatcher = TestBed.inject(OverlayKeyboardDispatcher);
18-
overlay = TestBed.inject(Overlay);
17+
injector = TestBed.inject(Injector);
1918
});
2019

2120
it('should track overlays in order as they are attached and detached', () => {
22-
const overlayOne = overlay.create();
23-
const overlayTwo = overlay.create();
21+
const overlayOne = createOverlayRef(injector);
22+
const overlayTwo = createOverlayRef(injector);
2423

2524
// Attach overlays
2625
keyboardDispatcher.add(overlayOne);
@@ -49,8 +48,8 @@ describe('OverlayKeyboardDispatcher', () => {
4948
});
5049

5150
it('should dispatch body keyboard events to the most recently attached overlay', () => {
52-
const overlayOne = overlay.create();
53-
const overlayTwo = overlay.create();
51+
const overlayOne = createOverlayRef(injector);
52+
const overlayTwo = createOverlayRef(injector);
5453
const overlayOneSpy = jasmine.createSpy('overlayOne keyboard event spy');
5554
const overlayTwoSpy = jasmine.createSpy('overlayTwo keyboard event spy');
5655

@@ -69,7 +68,7 @@ describe('OverlayKeyboardDispatcher', () => {
6968
});
7069

7170
it('should not dispatch keyboard events when propagation is stopped', () => {
72-
const overlayRef = overlay.create();
71+
const overlayRef = createOverlayRef(injector);
7372
const spy = jasmine.createSpy('keyboard event spy');
7473
const button = document.createElement('button');
7574

@@ -85,7 +84,7 @@ describe('OverlayKeyboardDispatcher', () => {
8584
});
8685

8786
it('should complete the keydown stream on dispose', () => {
88-
const overlayRef = overlay.create();
87+
const overlayRef = createOverlayRef(injector);
8988
const completeSpy = jasmine.createSpy('keydown complete spy');
9089

9190
overlayRef.keydownEvents().subscribe({complete: completeSpy});
@@ -96,7 +95,7 @@ describe('OverlayKeyboardDispatcher', () => {
9695
});
9796

9897
it('should stop emitting events to detached overlays', () => {
99-
const instance = overlay.create();
98+
const instance = createOverlayRef(injector);
10099
const spy = jasmine.createSpy('keyboard event spy');
101100

102101
instance.attach(new ComponentPortal(TestComponent));
@@ -112,7 +111,7 @@ describe('OverlayKeyboardDispatcher', () => {
112111
});
113112

114113
it('should stop emitting events to disposed overlays', () => {
115-
const instance = overlay.create();
114+
const instance = createOverlayRef(injector);
116115
const spy = jasmine.createSpy('keyboard event spy');
117116

118117
instance.attach(new ComponentPortal(TestComponent));
@@ -128,7 +127,7 @@ describe('OverlayKeyboardDispatcher', () => {
128127
});
129128

130129
it('should dispose of the global keyboard event handler correctly', () => {
131-
const overlayRef = overlay.create();
130+
const overlayRef = createOverlayRef(injector);
132131
const body = document.body;
133132
spyOn(body, 'addEventListener');
134133
spyOn(body, 'removeEventListener');
@@ -145,8 +144,8 @@ describe('OverlayKeyboardDispatcher', () => {
145144
});
146145

147146
it('should skip overlays that do not have keydown event subscriptions', () => {
148-
const overlayOne = overlay.create();
149-
const overlayTwo = overlay.create();
147+
const overlayOne = createOverlayRef(injector);
148+
const overlayTwo = createOverlayRef(injector);
150149
const overlayOneSpy = jasmine.createSpy('overlayOne keyboard event spy');
151150

152151
overlayOne.keydownEvents().subscribe(overlayOneSpy);
@@ -159,8 +158,8 @@ describe('OverlayKeyboardDispatcher', () => {
159158
});
160159

161160
it('should not add the same overlay to the stack multiple times', () => {
162-
const overlayOne = overlay.create();
163-
const overlayTwo = overlay.create();
161+
const overlayOne = createOverlayRef(injector);
162+
const overlayTwo = createOverlayRef(injector);
164163
const overlayOneSpy = jasmine.createSpy('overlayOne keyboard event spy');
165164
const overlayTwoSpy = jasmine.createSpy('overlayTwo keyboard event spy');
166165

@@ -181,7 +180,7 @@ describe('OverlayKeyboardDispatcher', () => {
181180

182181
it('should not run change detection if there are no `keydownEvents` observers', () => {
183182
spyOn(appRef, 'tick');
184-
const overlayRef = overlay.create();
183+
const overlayRef = createOverlayRef(injector);
185184
keyboardDispatcher.add(overlayRef);
186185

187186
expect(appRef.tick).toHaveBeenCalledTimes(0);
@@ -190,8 +189,5 @@ describe('OverlayKeyboardDispatcher', () => {
190189
});
191190
});
192191

193-
@Component({
194-
template: 'Hello',
195-
imports: [OverlayModule],
196-
})
192+
@Component({template: 'Hello'})
197193
class TestComponent {}

‎src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.spec.ts

Lines changed: 30 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
1-
import {ApplicationRef, Component} from '@angular/core';
1+
import {ApplicationRef, Component, Injector} from '@angular/core';
22
import {TestBed} from '@angular/core/testing';
33
import {filter, take} from 'rxjs/operators';
44
import {ComponentPortal} from '../../portal';
55
import {dispatchFakeEvent, dispatchMouseEvent} from '../../testing/private';
6-
import {Overlay, OverlayModule} from '../index';
6+
import {createOverlayRef} from '../index';
77
import {OverlayOutsideClickDispatcher} from './overlay-outside-click-dispatcher';
88

99
describe('OverlayOutsideClickDispatcher', () => {
1010
let appRef: ApplicationRef;
1111
let outsideClickDispatcher: OverlayOutsideClickDispatcher;
12-
let overlay: Overlay;
12+
let injector: Injector;
1313

1414
beforeEach(() => {
15-
TestBed.configureTestingModule({imports: [OverlayModule, TestComponent]});
1615
appRef = TestBed.inject(ApplicationRef);
1716
outsideClickDispatcher = TestBed.inject(OverlayOutsideClickDispatcher);
18-
overlay = TestBed.inject(Overlay);
17+
injector = TestBed.inject(Injector);
1918
});
2019

2120
it('should track overlays in order as they are attached and detached', () => {
22-
const overlayOne = overlay.create();
23-
const overlayTwo = overlay.create();
21+
const overlayOne = createOverlayRef(injector);
22+
const overlayTwo = createOverlayRef(injector);
2423

2524
outsideClickDispatcher.add(overlayOne);
2625
outsideClickDispatcher.add(overlayTwo);
@@ -50,9 +49,9 @@ describe('OverlayOutsideClickDispatcher', () => {
5049
});
5150

5251
it('should dispatch mouse click events to the attached overlays', () => {
53-
const overlayOne = overlay.create();
52+
const overlayOne = createOverlayRef(injector);
5453
overlayOne.attach(new ComponentPortal(TestComponent));
55-
const overlayTwo = overlay.create();
54+
const overlayTwo = createOverlayRef(injector);
5655
overlayTwo.attach(new ComponentPortal(TestComponent));
5756

5857
const overlayOneSpy = jasmine.createSpy('overlayOne mouse click event spy');
@@ -77,9 +76,9 @@ describe('OverlayOutsideClickDispatcher', () => {
7776
});
7877

7978
it('should dispatch auxiliary button click events to the attached overlays', () => {
80-
const overlayOne = overlay.create();
79+
const overlayOne = createOverlayRef(injector);
8180
overlayOne.attach(new ComponentPortal(TestComponent));
82-
const overlayTwo = overlay.create();
81+
const overlayTwo = createOverlayRef(injector);
8382
overlayTwo.attach(new ComponentPortal(TestComponent));
8483

8584
const overlayOneSpy = jasmine.createSpy('overlayOne auxiliary click event spy');
@@ -104,7 +103,7 @@ describe('OverlayOutsideClickDispatcher', () => {
104103
});
105104

106105
it('should dispatch mouse click events to the attached overlays even when propagation is stopped', () => {
107-
const overlayRef = overlay.create();
106+
const overlayRef = createOverlayRef(injector);
108107
overlayRef.attach(new ComponentPortal(TestComponent));
109108
const spy = jasmine.createSpy('overlay mouse click event spy');
110109
overlayRef.outsidePointerEvents().subscribe(spy);
@@ -123,7 +122,7 @@ describe('OverlayOutsideClickDispatcher', () => {
123122
});
124123

125124
it('should dispose of the global click event handler correctly', () => {
126-
const overlayRef = overlay.create();
125+
const overlayRef = createOverlayRef(injector);
127126
const body = document.body;
128127

129128
spyOn(body, 'addEventListener');
@@ -145,8 +144,8 @@ describe('OverlayOutsideClickDispatcher', () => {
145144
});
146145

147146
it('should not add the same overlay to the stack multiple times', () => {
148-
const overlayOne = overlay.create();
149-
const overlayTwo = overlay.create();
147+
const overlayOne = createOverlayRef(injector);
148+
const overlayTwo = createOverlayRef(injector);
150149

151150
outsideClickDispatcher.add(overlayOne);
152151
outsideClickDispatcher.add(overlayTwo);
@@ -160,7 +159,7 @@ describe('OverlayOutsideClickDispatcher', () => {
160159

161160
it('should dispatch the click event when click is on an element outside the overlay', () => {
162161
const portal = new ComponentPortal(TestComponent);
163-
const overlayRef = overlay.create();
162+
const overlayRef = createOverlayRef(injector);
164163
overlayRef.attach(portal);
165164
const button = document.createElement('button');
166165
document.body.appendChild(button);
@@ -177,7 +176,7 @@ describe('OverlayOutsideClickDispatcher', () => {
177176

178177
it('should not dispatch the click event when click is on an element inside the overlay', () => {
179178
const portal = new ComponentPortal(TestComponent);
180-
const overlayRef = overlay.create();
179+
const overlayRef = createOverlayRef(injector);
181180
overlayRef.attach(portal);
182181

183182
const spy = jasmine.createSpy('overlay mouse click event spy');
@@ -194,7 +193,7 @@ describe('OverlayOutsideClickDispatcher', () => {
194193
'released outside of it',
195194
() => {
196195
const portal = new ComponentPortal(TestComponent);
197-
const overlayRef = overlay.create();
196+
const overlayRef = createOverlayRef(injector);
198197
overlayRef.attach(portal);
199198
const context = document.createElement('div');
200199
document.body.appendChild(context);
@@ -216,7 +215,7 @@ describe('OverlayOutsideClickDispatcher', () => {
216215
'released inside of it',
217216
() => {
218217
const portal = new ComponentPortal(TestComponent);
219-
const overlayRef = overlay.create();
218+
const overlayRef = createOverlayRef(injector);
220219
overlayRef.attach(portal);
221220

222221
const spy = jasmine.createSpy('overlay mouse click event spy');
@@ -235,7 +234,7 @@ describe('OverlayOutsideClickDispatcher', () => {
235234
'released outside of it',
236235
() => {
237236
const portal = new ComponentPortal(TestComponent);
238-
const overlayRef = overlay.create();
237+
const overlayRef = createOverlayRef(injector);
239238
overlayRef.attach(portal);
240239
const context = document.createElement('div');
241240
document.body.appendChild(context);
@@ -257,7 +256,7 @@ describe('OverlayOutsideClickDispatcher', () => {
257256
'released inside of it',
258257
() => {
259258
const portal = new ComponentPortal(TestComponent);
260-
const overlayRef = overlay.create();
259+
const overlayRef = createOverlayRef(injector);
261260
overlayRef.attach(portal);
262261
const context = document.createElement('div');
263262
document.body.appendChild(context);
@@ -276,7 +275,7 @@ describe('OverlayOutsideClickDispatcher', () => {
276275

277276
it('should dispatch an event when a context menu is triggered outside the overlay', () => {
278277
const portal = new ComponentPortal(TestComponent);
279-
const overlayRef = overlay.create();
278+
const overlayRef = createOverlayRef(injector);
280279
overlayRef.attach(portal);
281280
const context = document.createElement('div');
282281
document.body.appendChild(context);
@@ -293,7 +292,7 @@ describe('OverlayOutsideClickDispatcher', () => {
293292

294293
it('should not dispatch an event when a context menu is triggered inside the overlay', () => {
295294
const portal = new ComponentPortal(TestComponent);
296-
const overlayRef = overlay.create();
295+
const overlayRef = createOverlayRef(injector);
297296
overlayRef.attach(portal);
298297

299298
const spy = jasmine.createSpy('overlay contextmenu spy');
@@ -306,11 +305,11 @@ describe('OverlayOutsideClickDispatcher', () => {
306305
});
307306

308307
it('should not throw an error when closing out related components via the outsidePointerEvents emitter on background click', () => {
309-
const firstOverlayRef = overlay.create();
308+
const firstOverlayRef = createOverlayRef(injector);
310309
firstOverlayRef.attach(new ComponentPortal(TestComponent));
311-
const secondOverlayRef = overlay.create();
310+
const secondOverlayRef = createOverlayRef(injector);
312311
secondOverlayRef.attach(new ComponentPortal(TestComponent));
313-
const thirdOverlayRef = overlay.create();
312+
const thirdOverlayRef = createOverlayRef(injector);
314313
thirdOverlayRef.attach(new ComponentPortal(TestComponent));
315314

316315
const spy = jasmine.createSpy('background click handler spy').and.callFake(() => {
@@ -338,7 +337,7 @@ describe('OverlayOutsideClickDispatcher', () => {
338337
describe('change detection behavior', () => {
339338
it('should not run change detection if there is no portal attached to the overlay', () => {
340339
spyOn(appRef, 'tick');
341-
const overlayRef = overlay.create();
340+
const overlayRef = createOverlayRef(injector);
342341
outsideClickDispatcher.add(overlayRef);
343342

344343
const context = document.createElement('div');
@@ -353,7 +352,7 @@ describe('OverlayOutsideClickDispatcher', () => {
353352
it('should not run change detection if the click was made outside the overlay but there are no `outsidePointerEvents` observers', () => {
354353
spyOn(appRef, 'tick');
355354
const portal = new ComponentPortal(TestComponent);
356-
const overlayRef = overlay.create();
355+
const overlayRef = createOverlayRef(injector);
357356
overlayRef.attach(portal);
358357
outsideClickDispatcher.add(overlayRef);
359358

@@ -368,7 +367,7 @@ describe('OverlayOutsideClickDispatcher', () => {
368367
it('should not run change detection if the click was made inside the overlay and there are `outsidePointerEvents` observers', () => {
369368
spyOn(appRef, 'tick');
370369
const portal = new ComponentPortal(TestComponent);
371-
const overlayRef = overlay.create();
370+
const overlayRef = createOverlayRef(injector);
372371
overlayRef.attach(portal);
373372
outsideClickDispatcher.add(overlayRef);
374373

@@ -399,7 +398,7 @@ describe('OverlayOutsideClickDispatcher', () => {
399398
renders = 0;
400399
expect(renders).toEqual(0);
401400
const portal = new ComponentPortal(TestComponent);
402-
const overlayRef = overlay.create();
401+
const overlayRef = createOverlayRef(injector);
403402
overlayRef.attach(portal);
404403
outsideClickDispatcher.add(overlayRef);
405404

@@ -421,8 +420,5 @@ describe('OverlayOutsideClickDispatcher', () => {
421420
});
422421
});
423422

424-
@Component({
425-
template: 'Hello',
426-
imports: [OverlayModule],
427-
})
423+
@Component({template: 'Hello'})
428424
class TestComponent {}

0 commit comments

Comments
 (0)