Skip to content

Commit c255a70

Browse files
crisbetokara
authored andcommitted
test(dialog): add e2e tests (#1828)
Fixes #1642.
1 parent 281bfa1 commit c255a70

File tree

6 files changed

+158
-3
lines changed

6 files changed

+158
-3
lines changed

e2e/components/dialog/dialog.e2e.ts

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
describe('dialog', () => {
2+
beforeEach(() => browser.get('/dialog'));
3+
4+
it('should open a dialog', () => {
5+
element(by.id('default')).click();
6+
waitForDialog().then(isPresent => expect(isPresent).toBe(true));
7+
});
8+
9+
it('should close by clicking on the backdrop', () => {
10+
element(by.id('default')).click();
11+
12+
waitForDialog().then(() => {
13+
clickOnBackrop();
14+
waitForDialog().then(isPresent => expect(isPresent).toBe(false));
15+
});
16+
});
17+
18+
it('should close by pressing escape', () => {
19+
element(by.id('default')).click();
20+
21+
waitForDialog().then(() => {
22+
pressEscape();
23+
waitForDialog().then(isPresent => expect(isPresent).toBe(false));
24+
});
25+
});
26+
27+
it('should close by clicking on the "close" button', () => {
28+
element(by.id('default')).click();
29+
30+
waitForDialog().then(() => {
31+
element(by.id('close')).click();
32+
waitForDialog().then(isPresent => expect(isPresent).toBe(false));
33+
});
34+
});
35+
36+
it('should focus the first focusable element', () => {
37+
element(by.id('default')).click();
38+
39+
waitForDialog().then(() => {
40+
expectFocusOn(element(by.css('md-dialog-container input')));
41+
});
42+
});
43+
44+
it('should restore focus to the element that opened the dialog', () => {
45+
let openButton = element(by.id('default'));
46+
47+
openButton.click();
48+
49+
waitForDialog().then(() => {
50+
clickOnBackrop();
51+
expectFocusOn(openButton);
52+
});
53+
});
54+
55+
it('should prevent tabbing out of the dialog', () => {
56+
element(by.id('default')).click();
57+
58+
waitForDialog().then(() => {
59+
let tab = protractor.Key.TAB;
60+
61+
browser.actions().sendKeys(tab, tab, tab).perform();
62+
expectFocusOn(element(by.id('close')));
63+
});
64+
});
65+
66+
it('should be able to prevent closing by clicking on the backdrop', () => {
67+
element(by.id('disabled')).click();
68+
69+
waitForDialog().then(() => {
70+
clickOnBackrop();
71+
waitForDialog().then(isPresent => expect(isPresent).toBe(true));
72+
});
73+
});
74+
75+
it('should be able to prevent closing by pressing escape', () => {
76+
element(by.id('disabled')).click();
77+
78+
waitForDialog().then(() => {
79+
pressEscape();
80+
waitForDialog().then(isPresent => expect(isPresent).toBe(true));
81+
});
82+
});
83+
84+
function waitForDialog() {
85+
return browser.isElementPresent(by.css('md-dialog-container'));
86+
}
87+
88+
function clickOnBackrop() {
89+
browser.actions()
90+
// We need to move the cursor to the top left so
91+
// the dialog doesn't receive the click accidentally.
92+
.mouseMove(element(by.css('.md-overlay-backdrop')).getWebElement(), { x: 0, y: 0 })
93+
.click()
94+
.perform();
95+
}
96+
97+
function pressEscape() {
98+
browser.actions().sendKeys(protractor.Key.ESCAPE).perform();
99+
}
100+
101+
// TODO(crisbeto): should be moved to a common util. copied from the menu e2e setup.
102+
function expectFocusOn(el: any): void {
103+
expect(browser.driver.switchTo().activeElement().getInnerHtml()).toBe(el.getInnerHtml());
104+
}
105+
});

src/e2e-app/dialog/dialog-e2e.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<button id="default" (click)="openDefault()">DEFAULT</button>
2+
<button id="disabled" (click)="openDisabled()">DISABLED</button>

src/e2e-app/dialog/dialog-e2e.ts

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import {Component} from '@angular/core';
2+
import {MdDialog, MdDialogRef, MdDialogConfig} from '@angular/material';
3+
4+
@Component({
5+
selector: 'dialog-e2e',
6+
moduleId: module.id,
7+
templateUrl: 'dialog-e2e.html'
8+
})
9+
export class DialogE2E {
10+
dialogRef: MdDialogRef<TestDialog>;
11+
12+
constructor (private _dialog: MdDialog) { }
13+
14+
private _openDialog(config?: MdDialogConfig) {
15+
this.dialogRef = this._dialog.open(TestDialog, config);
16+
17+
this.dialogRef.afterClosed().subscribe(() => {
18+
this.dialogRef = null;
19+
});
20+
}
21+
22+
openDefault() {
23+
this._openDialog();
24+
}
25+
26+
openDisabled() {
27+
this._openDialog({
28+
disableClose: true
29+
});
30+
}
31+
}
32+
33+
@Component({
34+
selector: 'dialog-e2e-test',
35+
template: `
36+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
37+
<input/>
38+
<button type="button" (click)="dialogRef.close()" id="close">CLOSE</button>`
39+
})
40+
export class TestDialog {
41+
constructor(public dialogRef: MdDialogRef<TestDialog>) { }
42+
}

src/e2e-app/e2e-app-module.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {ButtonE2E} from './button/button-e2e';
88
import {MenuE2E} from './menu/menu-e2e';
99
import {SimpleRadioButtons} from './radio/radio-e2e';
1010
import {BasicTabs} from './tabs/tabs-e2e';
11+
import {DialogE2E, TestDialog} from './dialog/dialog-e2e';
1112
import {MaterialModule} from '@angular/material';
1213
import {E2E_APP_ROUTES} from './e2e-app/routes';
1314

@@ -27,10 +28,13 @@ import {E2E_APP_ROUTES} from './e2e-app/routes';
2728
SimpleRadioButtons,
2829
SimpleCheckboxes,
2930
Home,
31+
DialogE2E,
32+
TestDialog,
3033
],
3134
bootstrap: [E2EApp],
3235
providers: [
3336
{provide: AnimationDriver, useValue: AnimationDriver.NOOP}
34-
]
37+
],
38+
entryComponents: [TestDialog]
3539
})
3640
export class E2eAppModule { }

src/e2e-app/e2e-app/e2e-app.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<a md-list-item [routerLink]="['button']">Button</a>
22
<a md-list-item [routerLink]="['checkbox']">Checkbox</a>
3+
<a md-list-item [routerLink]="['dialog']">Dialog</a>
34
<a md-list-item [routerLink]="['icon']">Icon</a>
45
<a md-list-item [routerLink]="['menu']">Menu</a>
56
<a md-list-item [routerLink]="['radio']">Radios</a>

src/e2e-app/e2e-app/routes.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {IconE2E} from '../icon/icon-e2e';
66
import {MenuE2E} from '../menu/menu-e2e';
77
import {SimpleRadioButtons} from '../radio/radio-e2e';
88
import {SimpleCheckboxes} from '../checkbox/checkbox-e2e';
9+
import {DialogE2E} from '../dialog/dialog-e2e';
910

1011
export const E2E_APP_ROUTES: Routes = [
1112
{path: '', component: Home},
@@ -14,6 +15,6 @@ export const E2E_APP_ROUTES: Routes = [
1415
{path: 'menu', component: MenuE2E},
1516
{path: 'icon', component: IconE2E},
1617
{path: 'radio', component: SimpleRadioButtons},
17-
{path: 'tabs', component: BasicTabs}
18-
18+
{path: 'tabs', component: BasicTabs},
19+
{path: 'dialog', component: DialogE2E},
1920
];

0 commit comments

Comments
 (0)