honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

e2e(router): fix test for canceling of crisis detail change (#3379) 

- Await for alert dialog and use it in test for canceling crisis detail change.
- Tests now use async/await. It makes them easier to read.
- Remove "money patch" alerter comment.
This commit is contained in:
Patrice Chalin 2017-03-16 09:34:28 -07:00 committed by Filipe Silva
parent c2bb6ad935
commit 557200be4f
2 changed files with 110 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

218
public/docs/_examples/router/e2e-spec.ts
View File

@ -1,30 +1,34 @@
'use strict'; // necessary for es6 output in node 'use strict'; // necessary for es6 output in node
import { browser, element, by, ElementFinder } from 'protractor'; import { browser, element, by, ExpectedConditions } from 'protractor';
describe('Router', function () { const numDashboardTabs = 5;
const numCrises = 4;
const numHeroes = 6;
const EC = ExpectedConditions;
beforeAll(function () { describe('Router', () => {
browser.get('');
}); beforeAll(() => browser.get(''));
function getPageStruct() { function getPageStruct() {
let hrefEles = element.all(by.css('my-app a')); const hrefEles = element.all(by.css('my-app a'));
const crisisDetail = element.all(by.css('my-app > ng-component > ng-component > ng-component > div')).first();
const heroDetail = element(by.css('my-app > ng-component > div'));
return { return {
hrefs: hrefEles, hrefs: hrefEles,
routerParent: element(by.css('my-app > ng-component')), activeHref: element(by.css('my-app a.active')),
routerTitle: element(by.css('my-app > ng-component > h2')),
crisisHref: hrefEles.get(0), crisisHref: hrefEles.get(0),
crisisList: element.all(by.css('my-app > ng-component > ng-component li')), crisisList: element.all(by.css('my-app > ng-component > ng-component li')),
crisisDetail: element(by.css('my-app > ng-component > ng-component > ng-component > div')), crisisDetail: crisisDetail,
crisisDetailTitle: element(by.css('my-app > ng-component > ng-component > ng-component > div > h3')), crisisDetailTitle: crisisDetail.element(by.xpath('*[1]')),
heroesHref: hrefEles.get(1), heroesHref: hrefEles.get(1),
heroesList: element.all(by.css('my-app > ng-component li')), heroesList: element.all(by.css('my-app > ng-component li')),
heroDetail: element(by.css('my-app > ng-component > div')), heroDetail: heroDetail,
heroDetailTitle: element(by.css('my-app > ng-component > div > h3')), heroDetailTitle: heroDetail.element(by.xpath('*[1]')),
adminHref: hrefEles.get(2), adminHref: hrefEles.get(2),
adminPreloadList: element.all(by.css('my-app > ng-component > ng-component > ul > li')), adminPreloadList: element.all(by.css('my-app > ng-component > ng-component > ul > li')),
@ -39,9 +43,9 @@ describe('Router', function () {
}; };
} }
it('should be able to see the start screen', function () { it('has expected dashboard tabs', () => {
let page = getPageStruct(); const page = getPageStruct();
expect(page.hrefs.count()).toEqual(5, 'should be 5 dashboard choices'); expect(page.hrefs.count()).toEqual(numDashboardTabs, 'dashboard tab count');
expect(page.crisisHref.getText()).toEqual('Crisis Center'); expect(page.crisisHref.getText()).toEqual('Crisis Center');
expect(page.heroesHref.getText()).toEqual('Heroes'); expect(page.heroesHref.getText()).toEqual('Heroes');
expect(page.adminHref.getText()).toEqual('Admin'); expect(page.adminHref.getText()).toEqual('Admin');
@ -49,118 +53,110 @@ describe('Router', function () {
expect(page.contactHref.getText()).toEqual('Contact'); expect(page.contactHref.getText()).toEqual('Contact');
}); });
it('should be able to see crises center items', function () { it('has heroes selected as opening tab', () => {
let page = getPageStruct(); const page = getPageStruct();
page.crisisHref.click().then(function() { expect(page.activeHref.getText()).toEqual('Heroes');
expect(page.crisisList.count()).toBe(4, 'should be 4 crisis center entries at start');
});
}); });
it('should be able to see hero items', function () { it('has crises center items', async () => {
let page = getPageStruct(); const page = getPageStruct();
page.heroesHref.click().then(function() { await page.crisisHref.click();
expect(page.routerTitle.getText()).toContain('HEROES'); expect(page.activeHref.getText()).toEqual('Crisis Center');
expect(page.heroesList.count()).toBe(6, 'should be 6 heroes'); expect(page.crisisList.count()).toBe(numCrises, 'crisis list count');
});
}); });
it('should be able to toggle the views', function () { it('has hero items', async () => {
let page = getPageStruct(); const page = getPageStruct();
page.crisisHref.click().then(function() { await page.heroesHref.click();
expect(page.crisisList.count()).toBe(4, 'should be 4 crisis center entries'); expect(page.activeHref.getText()).toEqual('Heroes');
return page.heroesHref.click(); expect(page.heroesList.count()).toBe(numHeroes, 'hero list count');
}).then(function() {
expect(page.heroesList.count()).toBe(6, 'should be 6 heroes');
});
}); });
it('should be able to edit and save details from the crisis center view', function () { it('toggles views', async () => {
let page = getPageStruct(); const page = getPageStruct();
page.crisisHref.click().then(function() { await page.crisisHref.click();
crisisCenterEdit(2, true); expect(page.activeHref.getText()).toEqual('Crisis Center');
}); expect(page.crisisList.count()).toBe(numCrises, 'crisis list count');
await page.heroesHref.click();
expect(page.activeHref.getText()).toEqual('Heroes');
expect(page.heroesList.count()).toBe(numHeroes, 'hero list count');
}); });
xit('should be able to edit and cancel details from the crisis center view', function () { it('saves changed crisis details', async () => {
let page = getPageStruct(); const page = getPageStruct();
page.crisisHref.click().then(function() { await page.crisisHref.click();
crisisCenterEdit(3, false); await crisisCenterEdit(2, true);
});
}); });
it('should be able to edit and save details from the heroes view', function () { it('can cancel changed crisis details', async () => {
let page = getPageStruct(); const page = getPageStruct();
let heroEle: ElementFinder; await page.crisisHref.click();
let heroText: string; await crisisCenterEdit(3, false);
page.heroesHref.click().then(function() {
heroEle = page.heroesList.get(4);
return heroEle.getText();
}).then(function(text: string) {
expect(text.length).toBeGreaterThan(0, 'should have some text');
// remove leading id from text
heroText = text.substr(text.indexOf(' ')).trim();
return heroEle.click();
}).then(function() {
expect(page.heroesList.count()).toBe(0, 'should no longer see crisis center entries');
expect(page.heroDetail.isPresent()).toBe(true, 'should be able to see crisis detail');
expect(page.heroDetailTitle.getText()).toContain(heroText);
let inputEle = page.heroDetail.element(by.css('input'));
inputEle.sendKeys('-foo');
expect(page.heroDetailTitle.getText()).toContain(heroText + '-foo');
let buttonEle = page.heroDetail.element(by.css('button'));
return buttonEle.click();
}).then(function() {
expect(heroEle.getText()).toContain(heroText + '-foo');
});
}); });
it('should be able to see the preloaded modules', function () { it('saves changed hero details', async () => {
let page = getPageStruct(); const page = getPageStruct();
page.loginHref.click().then(function() { await page.heroesHref.click();
return page.loginButton.click(); const heroEle = page.heroesList.get(4);
}).then(function() { let text = await heroEle.getText();
expect(page.adminPreloadList.count()).toBe(1, 'should be 1 preloaded module'); expect(text.length).toBeGreaterThan(0, 'hero item text length');
expect(page.adminPreloadList.first().getText()).toBe('crisis-center', 'first preload should be crisis center'); // remove leading id from text
}); const heroText = text.substr(text.indexOf(' ')).trim();
await heroEle.click();
expect(page.heroesList.count()).toBe(0, 'hero list count');
expect(page.heroDetail.isPresent()).toBe(true, 'hero detail');
expect(page.heroDetailTitle.getText()).toContain(heroText);
let inputEle = page.heroDetail.element(by.css('input'));
await inputEle.sendKeys('-foo');
expect(page.heroDetailTitle.getText()).toContain(heroText + '-foo');
let buttonEle = page.heroDetail.element(by.css('button'));
await buttonEle.click();
expect(heroEle.getText()).toContain(heroText + '-foo');
}); });
it('should be able to see the secondary route', function () { it('sees preloaded modules', async () => {
let page = getPageStruct(); const page = getPageStruct();
page.heroesHref.click().then(function() { await page.loginHref.click();
return page.contactHref.click(); await page.loginButton.click();
}).then(function() { const list = page.adminPreloadList;
expect(page.outletComponents.count()).toBe(2, 'should be 2 displayed routes'); expect(list.count()).toBe(1, 'preloaded module');
}); expect(await list.first().getText()).toBe('crisis-center', 'first preloaded module');
}); });
function crisisCenterEdit(index: number, shouldSave: boolean) { it('sees the secondary route', async () => {
let page = getPageStruct(); const page = getPageStruct();
let crisisEle: ElementFinder; await page.heroesHref.click();
let crisisText: string; await page.contactHref.click();
page.crisisHref.click() expect(page.outletComponents.count()).toBe(2, 'route count');
.then(function () { });
crisisEle = page.crisisList.get(index);
return crisisEle.getText(); async function crisisCenterEdit(index: number, save: boolean) {
}).then(function(text: string) { const page = getPageStruct();
expect(text.length).toBeGreaterThan(0, 'should have some text'); await page.crisisHref.click();
// remove leading id from text let crisisEle = page.crisisList.get(index);
crisisText = text.substr(text.indexOf(' ')).trim(); let text = await crisisEle.getText();
return crisisEle.click(); expect(text.length).toBeGreaterThan(0, 'crisis item text length');
}).then(function () { // remove leading id from text
expect(page.crisisDetail.isPresent()).toBe(true, 'should be able to see crisis detail'); const crisisText = text.substr(text.indexOf(' ')).trim();
expect(page.crisisDetailTitle.getText()).toContain(crisisText);
let inputEle = page.crisisDetail.element(by.css('input')); await crisisEle.click();
inputEle.sendKeys('-foo'); expect(page.crisisDetail.isPresent()).toBe(true, 'crisis detail present');
expect(page.crisisDetailTitle.getText()).toContain(crisisText + '-foo'); expect(page.crisisDetailTitle.getText()).toContain(crisisText);
let buttonEle = page.crisisDetail.element(by.cssContainingText('button', shouldSave ? 'Save' : 'Cancel')); let inputEle = page.crisisDetail.element(by.css('input'));
return buttonEle.click(); await inputEle.sendKeys('-foo');
}).then(function () {
if (shouldSave) { let buttonEle = page.crisisDetail.element(by.buttonText(save ? 'Save' : 'Cancel'));
expect(crisisEle.getText()).toContain(crisisText + '-foo'); await buttonEle.click();
} else { crisisEle = page.crisisList.get(index);
expect(crisisEle.getText()).not.toContain(crisisText + '-foo'); if (save) {
} expect(crisisEle.getText()).toEqual(crisisText + '-foo');
}); } else {
await browser.wait(EC.alertIsPresent(), 4000);
await browser.switchTo().alert().accept();
expect(crisisEle.getText()).toEqual(crisisText);
}
} }
}); });

11
public/docs/_examples/template-syntax/ts/src/app/app.component.ts
View File

@ -5,11 +5,6 @@ import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren }
import { Hero } from './hero'; import { Hero } from './hero';
// Alerter fn: monkey patch during test
export function alerter(msg?: string) {
window.alert(msg);
}
export enum Color {Red, Green, Blue}; export enum Color {Red, Green, Blue};
/** /**
@ -38,13 +33,13 @@ export class AppComponent implements AfterViewInit, OnInit {
@ViewChildren('withTrackBy') heroesWithTrackBy: QueryList<ElementRef>; @ViewChildren('withTrackBy') heroesWithTrackBy: QueryList<ElementRef>;
actionName = 'Go for it'; actionName = 'Go for it';
alert = alerter;
badCurly = 'bad curly'; badCurly = 'bad curly';
classes = 'special'; classes = 'special';
help = ''; help = '';
callFax(value: string) {this.alert(`Faxing ${value} ...`); } alert(msg?: string) { window.alert(msg); }
callPhone(value: string) {this.alert(`Calling ${value} ...`); } callFax(value: string) { this.alert(`Faxing ${value} ...`); }
callPhone(value: string) { this.alert(`Calling ${value} ...`); }
canSave = true; canSave = true;
changeIds() { changeIds() {