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

chore(toh-5): improve e2e test coverage and readability (use async/await) (#2092) 

* chore(toh-5): improve e2e test coverage

Improved test coverage. Also updated tests to make use of async/await
(so tests are more readable).

* lint feedback
This commit is contained in:
Patrice Chalin 2016-08-17 09:18:23 -07:00 committed by Kathy Walrath
parent 35b54383c2
commit c931b56f4a
1 changed files with 162 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

247
public/docs/_examples/toh-5/e2e-spec.ts
View File

@ -1,113 +1,190 @@
/// <reference path='../_protractor/e2e.d.ts' /> /// <reference path='../_protractor/e2e.d.ts' />
'use strict'; 'use strict';
describe('Tutorial', function () {
beforeAll(function () { const expectedH1 = 'Tour of Heroes';
browser.get(''); const expectedTitle = `Angular 2 ${expectedH1}`;
}); const targetHero = { id: 15, name: 'Magneta' };
const targetHeroDashboardIndex = 3;
const nameSuffix = 'X';
const newHeroName = targetHero.name + nameSuffix;
function getPageStruct() { type WPromise<T> = webdriver.promise.Promise<T>;
let hrefEles = element.all(by.css('my-app a'));
class Hero {
id: number;
name: string;
// Factory methods
// Get hero from s formatted as '<id> <name>'.
static fromString(s: string): Hero {
return {
id: +s.substr(0, s.indexOf(' ')),
name: s.substr(s.indexOf(' ') + 1),
};
}
// Get hero id and name from the given detail element.
static async fromDetail(detail: protractor.ElementFinder): Promise<Hero> {
// Get hero id from the first <div>
let _id = await detail.all(by.css('div')).first().getText();
// Get name from the h2
let _name = await detail.element(by.css('h2')).getText();
return {
id: +_id.substr(_id.indexOf(' ') + 1),
name: _name.substr(0, _name.lastIndexOf(' '))
};
}
}
describe('Tutorial part 5', () => {
beforeAll(() => browser.get(''));
function getPageElts() {
let hrefElts = element.all(by.css('my-app a'));
return { return {
hrefs: hrefEles, hrefs: hrefElts,
myDashboardHref: hrefEles.get(0),
myDashboardParent: element(by.css('my-app my-dashboard')),
topHeroes: element.all(by.css('my-app my-dashboard .module.hero')),
myHeroesHref: hrefEles.get(1), myDashboardHref: hrefElts.get(0),
myHeroesParent: element(by.css('my-app my-heroes')), myDashboard: element(by.css('my-app my-dashboard')),
topHeroes: element.all(by.css('my-app my-dashboard > div h4')),
myHeroesHref: hrefElts.get(1),
myHeroes: element(by.css('my-app my-heroes')),
allHeroes: element.all(by.css('my-app my-heroes li')), allHeroes: element.all(by.css('my-app my-heroes li')),
selectedHero: element(by.css('my-app li.selected')),
selectedHeroSubview: element(by.css('my-app my-heroes > div')),
heroDetail: element(by.css('my-app my-hero-detail')) heroDetail: element(by.css('my-app my-hero-detail > div'))
}; };
} }
it('should be able to see the start screen', function () { describe('Initial page', () => {
let page = getPageStruct();
expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices');
expect(page.myDashboardHref.getText()).toEqual('Dashboard');
expect(page.myHeroesHref.getText()).toEqual('Heroes');
});
it('should be able to see dashboard choices', function () { it(`has title '${expectedTitle}'`, () => {
let page = getPageStruct(); expect(browser.getTitle()).toEqual(expectedTitle);
expect(page.topHeroes.count()).toBe(4, 'should be 4 dashboard hero choices'); });
});
it('should be able to toggle the views', function () { it(`has h1 '${expectedH1}'`, () => {
let page = getPageStruct(); expectHeading(1, expectedH1);
});
expect(page.myDashboardParent.element(by.css('h3')).getText()).toEqual('Top Heroes'); const expectedViewNames = ['Dashboard', 'Heroes'];
page.myHeroesHref.click().then(function() { it(`has views ${expectedViewNames}`, () => {
expect(page.myDashboardParent.isPresent()).toBe(false, 'should no longer see dashboard element'); let viewNames = getPageElts().hrefs.map(el => el.getText());
expect(page.allHeroes.count()).toBeGreaterThan(4, 'should be more than 4 heroes shown'); expect(viewNames).toEqual(expectedViewNames);
return page.myDashboardHref.click(); });
}).then(function() {
expect(page.myDashboardParent.isPresent()).toBe(true, 'should once again see the dashboard element'); it('has dashboard as the active view', () => {
let page = getPageElts();
expect(page.myDashboard.isPresent()).toBeTruthy();
}); });
}); });
it('should be able to edit details from "Dashboard" view', function () { describe('Dashboard tests', () => {
let page = getPageStruct();
expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available'); beforeAll(() => browser.get(''));
let heroEle = page.topHeroes.get(3);
let heroDescrEle = heroEle.element(by.css('h4')); it('has top heroes', () => {
let heroDescr: string; let page = getPageElts();
return heroDescrEle.getText().then(function(text) { expect(page.topHeroes.count()).toEqual(4);
heroDescr = text;
return heroEle.click();
}).then(function() {
return editDetails(page, heroDescr, '-foo');
}).then(function() {
expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be back');
expect(heroDescrEle.getText()).toEqual(heroDescr + '-foo');
}); });
it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero);
it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
it(`saves and shows ${newHeroName} in Dashboard`, () => {
element(by.buttonText('Back')).click();
let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
expect(targetHeroElt.getText()).toEqual(newHeroName);
});
}); });
it('should be able to edit details from "Heroes" view', function () { describe('Heroes tests', () => {
let page = getPageStruct();
expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be present'); beforeAll(() => browser.get(''));
let viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details'));
let heroEle: protractor.ElementFinder; it('can switch to Heroes view', () => {
let heroDescr: string; getPageElts().myHeroesHref.click();
page.myHeroesHref.click().then(function() { let page = getPageElts();
expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present'); expect(page.myHeroes.isPresent()).toBeTruthy();
expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be present'); expect(page.allHeroes.count()).toEqual(10, 'number of heroes');
expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should not yet be present');
heroEle = page.allHeroes.get(2);
return heroEle.getText();
}).then(function(text) {
// remove leading 'id' from the element
heroDescr = text.substr(text.indexOf(' ') + 1);
return heroEle.click();
}).then(function() {
expect(viewDetailsButtonEle.isDisplayed()).toBe(true, 'viewDetails button should now be visible');
return viewDetailsButtonEle.click();
}).then(function() {
return editDetails(page, heroDescr, '-bar');
}).then(function() {
expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be back');
expect(heroEle.getText()).toContain(heroDescr + '-bar');
expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should again NOT be present');
}); });
it(`selects and shows ${targetHero.name} as selected in list`, () => {
getHeroLiEltById(targetHero.id).click();
let expectedText = `${targetHero.id} ${targetHero.name}`;
expect(getPageElts().selectedHero.getText()).toBe(expectedText);
});
it('shows selected hero subview', async () => {
let page = getPageElts();
let title = page.selectedHeroSubview.element(by.css('h2')).getText();
let expectedTitle = `${targetHero.name.toUpperCase()} is my hero`;
expect(title).toEqual(expectedTitle);
});
it('can route to hero details', async () => {
element(by.buttonText('View Details')).click();
let page = getPageElts();
expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
let hero = await Hero.fromDetail(page.heroDetail);
expect(hero.id).toEqual(targetHero.id);
expect(hero.name).toEqual(targetHero.name);
});
it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
it(`shows ${newHeroName} in Heroes list`, () => {
element(by.buttonText('Back')).click();
let expectedText = `${targetHero.id} ${newHeroName}`;
expect(getHeroLiEltById(targetHero.id).getText()).toEqual(expectedText);
});
}); });
function editDetails(page: any, origValue: string, textToAdd: string) { async function dashboardSelectTargetHero() {
expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present'); let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
expect(page.myHeroesParent.isPresent()).toBe(false, 'myHeroes element should NOT be present'); expect(targetHeroElt.getText()).toEqual(targetHero.name);
expect(page.heroDetail.isDisplayed()).toBe(true, 'should be able to see hero-details'); targetHeroElt.click();
let inputEle = page.heroDetail.element(by.css('input'));
expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box'); let page = getPageElts();
let backButtonEle = page.heroDetail.element(by.css('button')); expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button'); let hero = await Hero.fromDetail(page.heroDetail);
let detailTextEle = page.heroDetail.element(by.css('div h2')); expect(hero.id).toEqual(targetHero.id);
expect(detailTextEle.getText()).toContain(origValue); expect(hero.name).toEqual(targetHero.name);
return sendKeys(inputEle, textToAdd).then(function () { }
expect(detailTextEle.getText()).toContain(origValue + textToAdd);
return backButtonEle.click(); async function updateHeroNameInDetailView() {
}); // Assumes that the current view is the hero details view.
addToHeroName(nameSuffix);
let page = getPageElts();
let hero = await Hero.fromDetail(page.heroDetail);
expect(hero.id).toEqual(targetHero.id);
expect(hero.name).toEqual(newHeroName);
} }
}); });
function addToHeroName(text: string): WPromise<void> {
let input = element(by.css('input'));
return sendKeys(input, text);
}
function expectHeading(hLevel: number, expectedText: string): void {
let hTag = `h${hLevel}`;
let hText = element(by.css(hTag)).getText();
expect(hText).toEqual(expectedText, hTag);
};
function getHeroLiEltById(id: number) {
let spanForId = element(by.cssContainingText('li span.badge', id.toString()));
return spanForId.element(by.xpath('..'));
}