diff --git a/public/docs/_examples/toh-1/e2e-spec.ts b/public/docs/_examples/toh-1/e2e-spec.ts index 9746d080c8..8f0a5f28c4 100644 --- a/public/docs/_examples/toh-1/e2e-spec.ts +++ b/public/docs/_examples/toh-1/e2e-spec.ts @@ -1,27 +1,40 @@ /// 'use strict'; + +import { addToHeroName, Hero, itHasProperTitleAndHeadings, nameSuffix } from './toh-spec-shared'; + describe('Tutorial part 1', () => { - let expectedH1 = 'Tour of Heroes'; - let expectedTitle = `Angular 2 ${expectedH1}`; - let hero = { id: 1, name: 'Windstorm' }; - let expectedH2 = `${hero.name} details!`; + const expectedHero = { id: 1, name: 'Windstorm' }; - beforeEach(() => { - return browser.get(''); - }); + beforeAll(() => browser.get('')); - it(`should have title '${expectedTitle}'`, () => { - expect(browser.getTitle()).toEqual(expectedTitle); + itHasProperTitleAndHeadings(); + + it(`shows initial hero details`, async () => { + let page = getPageElts(); + let hero = await Hero.fromDetail(page.heroDetail); + expect(hero.id).toEqual(expectedHero.id); + expect(hero.name).toEqual(expectedHero.name); }); - it(`should have '${expectedH2}'`, () => { - let text = element(by.css('h2')).getText(); - expect(text).toEqual(expectedH2); + it(`can update hero name`, () => { + addToHeroName(nameSuffix); + // Nothing specific to expect other than lack of exceptions. }); - it(`should have input name '${hero.name}'`, () => { - let name = element(by.css('input')).getAttribute('value'); - expect(name).toEqual(hero.name); + it(`shows updated hero name`, async () => { + let page = getPageElts(); + let hero = await Hero.fromDetail(page.heroDetail); + let newName = expectedHero.name + nameSuffix; + expect(hero.id).toEqual(expectedHero.id); + expect(hero.name).toEqual(newName); }); + }); + +function getPageElts() { + return { + heroDetail: element(by.css('my-app')) + }; +} diff --git a/public/docs/_examples/toh-1/toh-spec-shared.ts b/public/docs/_examples/toh-1/toh-spec-shared.ts new file mode 100644 index 0000000000..7527766bcf --- /dev/null +++ b/public/docs/_examples/toh-1/toh-spec-shared.ts @@ -0,0 +1,56 @@ +/// +'use strict'; + +export type WPromise = webdriver.promise.Promise; + +const expectedH1 = 'Tour of Heroes'; +const expectedTitle = `Angular 2 ${expectedH1}`; + +export class Hero { + id: number; + name: string; + + // Factory methods + + // Get hero from s formatted as ' '. + 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 { + // Get hero id from the first
+ 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.indexOf(' ')) + }; + } +} + +export function expectHeading(hLevel: number, expectedText: string): void { + let hTag = `h${hLevel}`; + let hText = element(by.css(hTag)).getText(); + expect(hText).toEqual(expectedText, hTag); +}; + +export const nameSuffix = 'X'; +export function addToHeroName(text: string): WPromise { + let input = element(by.css('input')); + return sendKeys(input, text); +} + +export function itHasProperTitleAndHeadings() { + it(`has title '${expectedTitle}'`, () => { + expect(browser.getTitle()).toEqual(expectedTitle); + }); + + it(`has h1 '${expectedH1}'`, () => { + expectHeading(1, expectedH1); + }); +} diff --git a/public/docs/_examples/toh-1/ts/index.html b/public/docs/_examples/toh-1/ts/index.html index f784483eaa..e9c099696b 100644 --- a/public/docs/_examples/toh-1/ts/index.html +++ b/public/docs/_examples/toh-1/ts/index.html @@ -17,6 +17,7 @@ + Loading... diff --git a/public/docs/_examples/toh-2/dart/example-config.json b/public/docs/_examples/toh-2/dart/example-config.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/toh-2/e2e-spec.ts b/public/docs/_examples/toh-2/e2e-spec.ts new file mode 100644 index 0000000000..897a2ebc42 --- /dev/null +++ b/public/docs/_examples/toh-2/e2e-spec.ts @@ -0,0 +1,9 @@ +/// +'use strict'; + +import { initalPageAndUpdateHeroTests } from './toh-spec-shared'; + +describe('Tutorial part 2', () => { + beforeAll(() => browser.get('')); + initalPageAndUpdateHeroTests(); +}); diff --git a/public/docs/_examples/toh-2/toh-spec-shared.ts b/public/docs/_examples/toh-2/toh-spec-shared.ts new file mode 100644 index 0000000000..2e66f88b38 --- /dev/null +++ b/public/docs/_examples/toh-2/toh-spec-shared.ts @@ -0,0 +1,86 @@ +/// +'use strict'; + +import { addToHeroName, expectHeading, Hero, itHasProperTitleAndHeadings, nameSuffix } from '../toh-1/toh-spec-shared'; + +export function initalPageAndUpdateHeroTests() { + describe('Initial page', initialPageTests); + describe('Select hero', selectHeroTests); + describe('Update hero', updateHeroTests); +} + +function initialPageTests() { + itHasProperTitleAndHeadings(); + + const expectedH2 = 'My Heroes'; + + it(`has h2 '${expectedH2}'`, () => { + expectHeading(2, expectedH2); + }); + + it('has the right number of heroes', () => { + let page = getPageElts(); + expect(page.heroes.count()).toEqual(10); + }); + + it('has no selected hero and no hero details', function () { + let page = getPageElts(); + expect(page.selected.isPresent()).toBeFalsy('selected hero'); + expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail'); + }); +} + +const targetHero = { id: 16, name: 'RubberMan' }; + +function selectHeroTests() { + it(`selects ${targetHero.name} from hero list`, function () { + let hero = element(by.cssContainingText('li span.badge', targetHero.id.toString())); + hero.click(); + // Nothing specific to expect other than lack of exceptions. + }); + + it(`has selected ${targetHero.name}`, function () { + let page = getPageElts(); + let expectedText = `${targetHero.id} ${targetHero.name}`; + expect(page.selected.getText()).toBe(expectedText); + }); + + it('shows selected hero details', async () => { + let page = getPageElts(); + let hero = await Hero.fromDetail(page.heroDetail); + expect(hero.id).toEqual(targetHero.id); + expect(hero.name).toEqual(targetHero.name); + }); +} + +function updateHeroTests() { + it(`can update hero name`, () => { + addToHeroName(nameSuffix); + // Nothing specific to expect other than lack of exceptions. + }); + + it(`shows updated hero name in details`, async () => { + let page = getPageElts(); + let hero = await Hero.fromDetail(page.heroDetail); + let newName = targetHero.name + nameSuffix; + expect(hero.id).toEqual(targetHero.id); + expect(hero.name).toEqual(newName); + }); + + it(`shows updated hero name in list`, async () => { + let page = getPageElts(); + let hero = Hero.fromString(await page.selected.getText()); + let newName = targetHero.name + nameSuffix; + expect(hero.id).toEqual(targetHero.id); + expect(hero.name).toEqual(newName); + }); + +} + +function getPageElts() { + return { + heroes: element.all(by.css('my-app li')), + selected: element(by.css('my-app li.selected')), + heroDetail: element(by.css('my-app > div, my-app > my-hero-detail > div')) + }; +} diff --git a/public/docs/_examples/toh-2/ts/index.html b/public/docs/_examples/toh-2/ts/index.html index 485409815c..e9c099696b 100644 --- a/public/docs/_examples/toh-2/ts/index.html +++ b/public/docs/_examples/toh-2/ts/index.html @@ -1,7 +1,7 @@ - Angular 2 Tour of Heros + Angular 2 Tour of Heroes diff --git a/public/docs/_examples/toh-3/dart/example-config.json b/public/docs/_examples/toh-3/dart/example-config.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/toh-3/e2e-spec.ts b/public/docs/_examples/toh-3/e2e-spec.ts new file mode 100644 index 0000000000..0eb43d02c2 --- /dev/null +++ b/public/docs/_examples/toh-3/e2e-spec.ts @@ -0,0 +1,9 @@ +/// +'use strict'; + +import { initalPageAndUpdateHeroTests } from '../toh-2/toh-spec-shared'; + +describe('Tutorial part 3', () => { + beforeAll(() => browser.get('')); + initalPageAndUpdateHeroTests(); +}); diff --git a/public/docs/_examples/toh-4/dart/example-config.json b/public/docs/_examples/toh-4/dart/example-config.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/toh-4/dart/web/index.html b/public/docs/_examples/toh-4/dart/web/index.html index 059daeed4c..3c09e8af9d 100644 --- a/public/docs/_examples/toh-4/dart/web/index.html +++ b/public/docs/_examples/toh-4/dart/web/index.html @@ -1,6 +1,10 @@ + Angular 2 Tour of Heroes + + + diff --git a/public/docs/_examples/toh-4/e2e-spec.ts b/public/docs/_examples/toh-4/e2e-spec.ts new file mode 100644 index 0000000000..01d80cdac3 --- /dev/null +++ b/public/docs/_examples/toh-4/e2e-spec.ts @@ -0,0 +1,9 @@ +/// +'use strict'; + +import { initalPageAndUpdateHeroTests } from '../toh-2/toh-spec-shared'; + +describe('Tutorial part 4', () => { + beforeAll(() => browser.get('')); + initalPageAndUpdateHeroTests(); +}); diff --git a/public/docs/_examples/toh-4/ts/app/app.component.1.ts b/public/docs/_examples/toh-4/ts/app/app.component.1.ts index 20ac18a660..9df27d44bd 100644 --- a/public/docs/_examples/toh-4/ts/app/app.component.1.ts +++ b/public/docs/_examples/toh-4/ts/app/app.component.1.ts @@ -34,9 +34,11 @@ export class AppComponent implements OnInit { // #enddocregion heroes-prop selectedHero: Hero; + /* // #docregion new-service heroService = new HeroService(); // don't do this // #enddocregion new-service + */ // #docregion ctor constructor(private heroService: HeroService) { } // #enddocregion ctor