Skip to content

Commit 15b34a6

Browse files
crisbetocrisbeto
committed
refactor: remove the OverlayContainer stubs from all of the tests
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 6e865b7 commit 15b34a6

File tree

8 files changed

+69
-98
lines changed

8 files changed

+69
-98
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 & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {ConnectedOverlayPositionChange} from './connected-position';
77
import {CdkScrollable} from '@angular/cdk/scrolling';
88
import {Subscription} from 'rxjs/Subscription';
99
import {ScrollDispatchModule} from '@angular/cdk/scrolling';
10-
import {OverlayRef} from '../overlay-ref';
10+
import {OverlayRef, OverlayContainer, OverlayModule} from '../index';
1111

1212

1313
// Default width and height of the overlay and origin panels throughout these tests.
@@ -19,18 +19,25 @@ const DEFAULT_WIDTH = 60;
1919
// for tests on CI (both SauceLabs and Browserstack).
2020

2121
describe('ConnectedPositionStrategy', () => {
22-
22+
let overlayContainer: OverlayContainer;
23+
let overlayContainerElement: HTMLElement;
2324
let viewportRuler: ViewportRuler;
2425

2526
beforeEach(() => TestBed.configureTestingModule({
26-
imports: [ScrollDispatchModule],
27+
imports: [ScrollDispatchModule, OverlayModule],
2728
providers: [VIEWPORT_RULER_PROVIDER]
2829
}));
2930

30-
beforeEach(inject([ViewportRuler], (_ruler: ViewportRuler) => {
31-
viewportRuler = _ruler;
31+
beforeEach(inject([ViewportRuler, OverlayContainer], (r: ViewportRuler, oc: OverlayContainer) => {
32+
viewportRuler = r;
33+
overlayContainer = oc;
34+
overlayContainerElement = oc.getContainerElement();
3235
}));
3336

37+
afterEach(() => {
38+
overlayContainer.ngOnDestroy();
39+
});
40+
3441
describe('with origin on document body', () => {
3542
const ORIGIN_HEIGHT = DEFAULT_HEIGHT;
3643
const ORIGIN_WIDTH = DEFAULT_WIDTH;
@@ -39,7 +46,6 @@ describe('ConnectedPositionStrategy', () => {
3946

4047
let originElement: HTMLElement;
4148
let overlayElement: HTMLElement;
42-
let overlayContainerElement: HTMLElement;
4349
let strategy: ConnectedPositionStrategy;
4450
let fakeElementRef: ElementRef;
4551
let positionBuilder: OverlayPositionBuilder;
@@ -51,10 +57,8 @@ describe('ConnectedPositionStrategy', () => {
5157
beforeEach(() => {
5258
// The origin and overlay elements need to be in the document body in order to have geometry.
5359
originElement = createPositionedBlockElement();
54-
overlayContainerElement = createOverlayContainer();
5560
overlayElement = createPositionedBlockElement();
5661
document.body.appendChild(originElement);
57-
document.body.appendChild(overlayContainerElement);
5862
overlayContainerElement.appendChild(overlayElement);
5963

6064
fakeElementRef = new FakeElementRef(originElement);
@@ -63,7 +67,6 @@ describe('ConnectedPositionStrategy', () => {
6367

6468
afterEach(() => {
6569
document.body.removeChild(originElement);
66-
document.body.removeChild(overlayContainerElement);
6770

6871
// Reset the origin geometry after each test so we don't accidently keep state between tests.
6972
originRect = null;
@@ -559,7 +562,6 @@ describe('ConnectedPositionStrategy', () => {
559562

560563
describe('onPositionChange with scrollable view properties', () => {
561564
let overlayElement: HTMLElement;
562-
let overlayContainerElement: HTMLElement;
563565
let strategy: ConnectedPositionStrategy;
564566

565567
let scrollable: HTMLDivElement;
@@ -569,9 +571,7 @@ describe('ConnectedPositionStrategy', () => {
569571

570572
beforeEach(() => {
571573
// Set up the overlay
572-
overlayContainerElement = createOverlayContainer();
573574
overlayElement = createPositionedBlockElement();
574-
document.body.appendChild(overlayContainerElement);
575575
overlayContainerElement.appendChild(overlayElement);
576576

577577
// Set up the origin
@@ -601,7 +601,6 @@ describe('ConnectedPositionStrategy', () => {
601601
afterEach(() => {
602602
onPositionChangeSubscription.unsubscribe();
603603
document.body.removeChild(scrollable);
604-
document.body.removeChild(overlayContainerElement);
605604
});
606605

607606
it('should not have origin or overlay clipped or out of view without scroll', () => {
@@ -663,18 +662,15 @@ describe('ConnectedPositionStrategy', () => {
663662
describe('positioning properties', () => {
664663
let originElement: HTMLElement;
665664
let overlayElement: HTMLElement;
666-
let overlayContainerElement: HTMLElement;
667665
let strategy: ConnectedPositionStrategy;
668666
let fakeElementRef: ElementRef;
669667
let positionBuilder: OverlayPositionBuilder;
670668

671669
beforeEach(() => {
672670
// The origin and overlay elements need to be in the document body in order to have geometry.
673671
originElement = createPositionedBlockElement();
674-
overlayContainerElement = createOverlayContainer();
675672
overlayElement = createPositionedBlockElement();
676673
document.body.appendChild(originElement);
677-
document.body.appendChild(overlayContainerElement);
678674
overlayContainerElement.appendChild(overlayElement);
679675

680676
fakeElementRef = new FakeElementRef(originElement);
@@ -683,7 +679,6 @@ describe('ConnectedPositionStrategy', () => {
683679

684680
afterEach(() => {
685681
document.body.removeChild(originElement);
686-
document.body.removeChild(overlayContainerElement);
687682
});
688683

689684
describe('in ltr', () => {
@@ -791,13 +786,6 @@ function createBlockElement() {
791786
return element;
792787
}
793788

794-
/** Creates the wrapper for all of the overlays. */
795-
function createOverlayContainer() {
796-
let element = document.createElement('div');
797-
element.classList.add('cdk-overlay-container');
798-
return element;
799-
}
800-
801789
/** Creates an overflow container with a set height and width with margin. */
802790
function createOverflowContainerElement() {
803791
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)