Skip to content

Commit b5e72f2

Browse files
crisbetotinayuangao
crisbeto
authored and
tinayuangao
committed
refactor: remove the OverlayContainer stubs from all of the tests (#8674)
Gets rid of all the manual stubs of the `OverlayContainer` in the tests and replaces them with getting the container through DI. This removes some boilerplate and should make things less prone to breaking if we make any changes to the container.
1 parent b4ce5ec commit b5e72f2

File tree

8 files changed

+69
-95
lines changed

8 files changed

+69
-95
lines changed

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

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {dispatchKeyboardEvent} from '@angular/cdk/testing';
33
import {ESCAPE} from '@angular/cdk/keycodes';
44
import {Component, NgModule} from '@angular/core';
55
import {Overlay} from '../overlay';
6-
import {OverlayContainer} from '../overlay-container';
76
import {OverlayModule} from '../index';
87
import {OverlayKeyboardDispatcher} from './overlay-keyboard-dispatcher';
98
import {ComponentPortal} from '@angular/cdk/portal';
@@ -12,17 +11,10 @@ import {ComponentPortal} from '@angular/cdk/portal';
1211
describe('OverlayKeyboardDispatcher', () => {
1312
let keyboardDispatcher: OverlayKeyboardDispatcher;
1413
let overlay: Overlay;
15-
let overlayContainerElement: HTMLElement;
1614

1715
beforeEach(() => {
1816
TestBed.configureTestingModule({
1917
imports: [OverlayModule, TestComponentModule],
20-
providers: [
21-
{provide: OverlayContainer, useFactory: () => {
22-
overlayContainerElement = document.createElement('div');
23-
return {getContainerElement: () => overlayContainerElement};
24-
}}
25-
],
2618
});
2719
});
2820

‎src/cdk/overlay/overlay.spec.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,23 +22,19 @@ describe('Overlay', () => {
2222
let componentPortal: ComponentPortal<PizzaMsg>;
2323
let templatePortal: TemplatePortal<any>;
2424
let overlayContainerElement: HTMLElement;
25+
let overlayContainer: OverlayContainer;
2526
let viewContainerFixture: ComponentFixture<TestComponentWithTemplatePortals>;
2627

2728
beforeEach(async(() => {
2829
TestBed.configureTestingModule({
29-
imports: [OverlayModule, PortalModule, OverlayTestModule],
30-
providers: [{
31-
provide: OverlayContainer,
32-
useFactory: () => {
33-
overlayContainerElement = document.createElement('div');
34-
return {getContainerElement: () => overlayContainerElement};
35-
}
36-
}]
30+
imports: [OverlayModule, PortalModule, OverlayTestModule]
3731
}).compileComponents();
3832
}));
3933

40-
beforeEach(inject([Overlay], (o: Overlay) => {
34+
beforeEach(inject([Overlay, OverlayContainer], (o: Overlay, oc: OverlayContainer) => {
4135
overlay = o;
36+
overlayContainer = oc;
37+
overlayContainerElement = oc.getContainerElement();
4238

4339
let fixture = TestBed.createComponent(TestComponentWithTemplatePortals);
4440
fixture.detectChanges();
@@ -47,6 +43,10 @@ describe('Overlay', () => {
4743
viewContainerFixture = fixture;
4844
}));
4945

46+
afterEach(() => {
47+
overlayContainer.ngOnDestroy();
48+
});
49+
5050
it('should load a component into an overlay', () => {
5151
let overlayRef = overlay.create();
5252
overlayRef.attach(componentPortal);

‎src/cdk/overlay/position/connected-position-strategy.spec.ts

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import {TestBed, inject} from '@angular/core/testing';
33
import {OverlayPositionBuilder} from './overlay-position-builder';
44
import {CdkScrollable} from '@angular/cdk/scrolling';
55
import {Subscription} from 'rxjs/Subscription';
6+
import {ScrollDispatchModule} from '@angular/cdk/scrolling';
67
import {
78
OverlayModule,
89
Overlay,
910
OverlayRef,
11+
OverlayContainer,
1012
ConnectedPositionStrategy,
1113
ConnectedOverlayPositionChange,
1214
} from '../index';
@@ -22,15 +24,23 @@ const DEFAULT_WIDTH = 60;
2224

2325
describe('ConnectedPositionStrategy', () => {
2426
let positionBuilder: OverlayPositionBuilder;
27+
let overlayContainer: OverlayContainer;
28+
let overlayContainerElement: HTMLElement;
2529

2630
beforeEach(() => {
27-
TestBed.configureTestingModule({imports: [OverlayModule]});
31+
TestBed.configureTestingModule({imports: [ScrollDispatchModule, OverlayModule]});
2832

29-
inject([Overlay], (overlay: Overlay) => {
33+
inject([Overlay, OverlayContainer], (overlay: Overlay, oc: OverlayContainer) => {
3034
positionBuilder = overlay.position();
35+
overlayContainer = oc;
36+
overlayContainerElement = oc.getContainerElement();
3137
})();
3238
});
3339

40+
afterEach(() => {
41+
overlayContainer.ngOnDestroy();
42+
});
43+
3444
describe('with origin on document body', () => {
3545
const ORIGIN_HEIGHT = DEFAULT_HEIGHT;
3646
const ORIGIN_WIDTH = DEFAULT_WIDTH;
@@ -39,7 +49,6 @@ describe('ConnectedPositionStrategy', () => {
3949

4050
let originElement: HTMLElement;
4151
let overlayElement: HTMLElement;
42-
let overlayContainerElement: HTMLElement;
4352
let strategy: ConnectedPositionStrategy;
4453
let fakeElementRef: ElementRef;
4554

@@ -50,17 +59,14 @@ describe('ConnectedPositionStrategy', () => {
5059
beforeEach(() => {
5160
// The origin and overlay elements need to be in the document body in order to have geometry.
5261
originElement = createPositionedBlockElement();
53-
overlayContainerElement = createOverlayContainer();
5462
overlayElement = createPositionedBlockElement();
5563
document.body.appendChild(originElement);
56-
document.body.appendChild(overlayContainerElement);
5764
overlayContainerElement.appendChild(overlayElement);
5865
fakeElementRef = new ElementRef(originElement);
5966
});
6067

6168
afterEach(() => {
6269
document.body.removeChild(originElement);
63-
document.body.removeChild(overlayContainerElement);
6470

6571
// Reset the origin geometry after each test so we don't accidently keep state between tests.
6672
originRect = null;
@@ -543,7 +549,6 @@ describe('ConnectedPositionStrategy', () => {
543549

544550
describe('onPositionChange with scrollable view properties', () => {
545551
let overlayElement: HTMLElement;
546-
let overlayContainerElement: HTMLElement;
547552
let strategy: ConnectedPositionStrategy;
548553

549554
let scrollable: HTMLDivElement;
@@ -553,9 +558,7 @@ describe('ConnectedPositionStrategy', () => {
553558

554559
beforeEach(() => {
555560
// Set up the overlay
556-
overlayContainerElement = createOverlayContainer();
557561
overlayElement = createPositionedBlockElement();
558-
document.body.appendChild(overlayContainerElement);
559562
overlayContainerElement.appendChild(overlayElement);
560563

561564
// Set up the origin
@@ -584,7 +587,6 @@ describe('ConnectedPositionStrategy', () => {
584587
afterEach(() => {
585588
onPositionChangeSubscription.unsubscribe();
586589
document.body.removeChild(scrollable);
587-
document.body.removeChild(overlayContainerElement);
588590
});
589591

590592
it('should not have origin or overlay clipped or out of view without scroll', () => {
@@ -646,24 +648,20 @@ describe('ConnectedPositionStrategy', () => {
646648
describe('positioning properties', () => {
647649
let originElement: HTMLElement;
648650
let overlayElement: HTMLElement;
649-
let overlayContainerElement: HTMLElement;
650651
let strategy: ConnectedPositionStrategy;
651652
let fakeElementRef: ElementRef;
652653

653654
beforeEach(() => {
654655
// The origin and overlay elements need to be in the document body in order to have geometry.
655656
originElement = createPositionedBlockElement();
656-
overlayContainerElement = createOverlayContainer();
657657
overlayElement = createPositionedBlockElement();
658658
document.body.appendChild(originElement);
659-
document.body.appendChild(overlayContainerElement);
660659
overlayContainerElement.appendChild(overlayElement);
661660
fakeElementRef = new ElementRef(originElement);
662661
});
663662

664663
afterEach(() => {
665664
document.body.removeChild(originElement);
666-
document.body.removeChild(overlayContainerElement);
667665
});
668666

669667
describe('in ltr', () => {
@@ -771,13 +769,6 @@ function createBlockElement() {
771769
return element;
772770
}
773771

774-
/** Creates the wrapper for all of the overlays. */
775-
function createOverlayContainer() {
776-
let element = document.createElement('div');
777-
element.classList.add('cdk-overlay-container');
778-
return element;
779-
}
780-
781772
/** Creates an overflow container with a set height and width with margin. */
782773
function createOverflowContainerElement() {
783774
let element = document.createElement('div');

‎src/lib/autocomplete/autocomplete.spec.ts

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
ViewChild,
2020
ViewChildren,
2121
} from '@angular/core';
22-
import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
22+
import {async, ComponentFixture, fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
2323
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
2424
import {MatOption} from '@angular/material/core';
2525
import {MatFormField, MatFormFieldModule} from '@angular/material/form-field';
@@ -39,6 +39,7 @@ import {
3939

4040

4141
describe('MatAutocomplete', () => {
42+
let overlayContainer: OverlayContainer;
4243
let overlayContainerElement: HTMLElement;
4344
let dir: Direction;
4445
let scrolledSubject = new Subject();
@@ -68,18 +69,6 @@ describe('MatAutocomplete', () => {
6869
AutocompleteWithSelectEvent,
6970
],
7071
providers: [
71-
{provide: OverlayContainer, useFactory: () => {
72-
overlayContainerElement = document.createElement('div');
73-
overlayContainerElement.classList.add('cdk-overlay-container');
74-
75-
document.body.appendChild(overlayContainerElement);
76-
77-
// remove body padding to keep consistent cross-browser
78-
document.body.style.padding = '0';
79-
document.body.style.margin = '0';
80-
81-
return {getContainerElement: () => overlayContainerElement};
82-
}},
8372
{provide: Directionality, useFactory: () => ({value: dir})},
8473
{provide: ScrollDispatcher, useFactory: () => ({
8574
scrolled: () => scrolledSubject.asObservable()
@@ -88,10 +77,15 @@ describe('MatAutocomplete', () => {
8877
});
8978

9079
TestBed.compileComponents();
80+
81+
inject([OverlayContainer], (oc: OverlayContainer) => {
82+
overlayContainer = oc;
83+
overlayContainerElement = oc.getContainerElement();
84+
})();
9185
}));
9286

9387
afterEach(() => {
94-
document.body.removeChild(overlayContainerElement);
88+
overlayContainer.ngOnDestroy();
9589
});
9690

9791
describe('panel toggling', () => {

‎src/lib/dialog/dialog.spec.ts

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {MAT_DIALOG_DATA, MatDialog, MatDialogModule, MatDialogRef} from './index
3232

3333
describe('MatDialog', () => {
3434
let dialog: MatDialog;
35+
let overlayContainer: OverlayContainer;
3536
let overlayContainerElement: HTMLElement;
3637

3738
let testViewContainerRef: ViewContainerRef;
@@ -42,21 +43,24 @@ describe('MatDialog', () => {
4243
TestBed.configureTestingModule({
4344
imports: [MatDialogModule, DialogTestModule],
4445
providers: [
45-
{provide: OverlayContainer, useFactory: () => {
46-
overlayContainerElement = document.createElement('div');
47-
return {getContainerElement: () => overlayContainerElement};
48-
}},
4946
{provide: Location, useClass: SpyLocation}
5047
],
5148
});
5249

5350
TestBed.compileComponents();
5451
}));
5552

56-
beforeEach(inject([MatDialog, Location], (d: MatDialog, l: Location) => {
57-
dialog = d;
58-
mockLocation = l as SpyLocation;
59-
}));
53+
beforeEach(inject([MatDialog, Location, OverlayContainer],
54+
(d: MatDialog, l: Location, oc: OverlayContainer) => {
55+
dialog = d;
56+
mockLocation = l as SpyLocation;
57+
overlayContainer = oc;
58+
overlayContainerElement = oc.getContainerElement();
59+
}));
60+
61+
afterEach(() => {
62+
overlayContainer.ngOnDestroy();
63+
});
6064

6165
beforeEach(() => {
6266
viewContainerFixture = TestBed.createComponent(ComponentWithChildViewContainer);
@@ -181,18 +185,21 @@ describe('MatDialog', () => {
181185
it('should close a dialog and get back a result before it is closed', fakeAsync(() => {
182186
const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
183187

188+
flush();
189+
viewContainerFixture.detectChanges();
190+
184191
// beforeClose should emit before dialog container is destroyed
185192
const beforeCloseHandler = jasmine.createSpy('beforeClose callback').and.callFake(() => {
186193
expect(overlayContainerElement.querySelector('mat-dialog-container'))
187194
.not.toBeNull('dialog container exists when beforeClose is called');
188195
});
189196

190197
dialogRef.beforeClose().subscribe(beforeCloseHandler);
191-
dialogRef.close('Bulbasaurus');
198+
dialogRef.close('Bulbasaur');
192199
viewContainerFixture.detectChanges();
193200
flush();
194201

195-
expect(beforeCloseHandler).toHaveBeenCalledWith('Bulbasaurus');
202+
expect(beforeCloseHandler).toHaveBeenCalledWith('Bulbasaur');
196203
expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull();
197204
}));
198205

‎src/lib/menu/menu.spec.ts

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
1+
import {async, ComponentFixture, fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
22
import {By} from '@angular/platform-browser';
33
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
44
import {
@@ -38,6 +38,7 @@ import {
3838

3939

4040
describe('MatMenu', () => {
41+
let overlayContainer: OverlayContainer;
4142
let overlayContainerElement: HTMLElement;
4243
let dir: Direction;
4344

@@ -57,25 +58,20 @@ describe('MatMenu', () => {
5758
FakeIcon
5859
],
5960
providers: [
60-
{provide: OverlayContainer, useFactory: () => {
61-
overlayContainerElement = document.createElement('div');
62-
overlayContainerElement.classList.add('cdk-overlay-container');
63-
document.body.appendChild(overlayContainerElement);
64-
65-
// remove body padding to keep consistent cross-browser
66-
document.body.style.padding = '0';
67-
document.body.style.margin = '0';
68-
return {getContainerElement: () => overlayContainerElement};
69-
}},
7061
{provide: Directionality, useFactory: () => ({value: dir})}
7162
]
7263
});
7364

7465
TestBed.compileComponents();
66+
67+
inject([OverlayContainer], (oc: OverlayContainer) => {
68+
overlayContainer = oc;
69+
overlayContainerElement = oc.getContainerElement();
70+
})();
7571
}));
7672

7773
afterEach(() => {
78-
document.body.removeChild(overlayContainerElement);
74+
overlayContainer.ngOnDestroy();
7975
});
8076

8177
it('should open the menu as an idempotent operation', () => {

0 commit comments

Comments
 (0)