From cff8876959a1a5087a8d1e99900e0778cd66ad95 Mon Sep 17 00:00:00 2001 From: Torgeir Helgevold Date: Tue, 27 Sep 2016 23:25:03 -0400 Subject: [PATCH 1/3] docs(toh-6-aot): add aot to toh-6 s s s s s --- .../docs/_examples/_boilerplate/package.json | 3 +- .../docs/_examples/_boilerplate/tsconfig.json | 6 +- .../_examples/cb-aot-compiler/ts/.gitignore | 2 +- .../ts/{rollup.js => rollup-config.js} | 0 public/docs/_examples/package.json | 1 + public/docs/_examples/toh-6-aot/e2e-spec.ts | 283 ++++++++++++++++++ .../toh-6-aot/ts/example-config.json | 4 + public/docs/_examples/toh-6-aot/ts/index.html | 24 ++ public/docs/_examples/toh-6/ts/.gitignore | 3 + .../_examples/toh-6/ts/app/app.component.ts | 1 - .../docs/_examples/toh-6/ts/app/main-aot.ts | 6 + public/docs/_examples/toh-6/ts/index.html | 1 + .../docs/_examples/toh-6/ts/rollup-config.js | 21 ++ .../docs/_examples/toh-6/ts/tsconfig-aot.json | 25 ++ public/docs/_examples/tsconfig.json | 6 +- .../docs/ts/latest/cookbook/aot-compiler.jade | 172 +++++++++-- .../cookbooks/aot-compiler/toh6-bundle.png | Bin 0 -> 359687 bytes 17 files changed, 534 insertions(+), 24 deletions(-) rename public/docs/_examples/cb-aot-compiler/ts/{rollup.js => rollup-config.js} (100%) create mode 100644 public/docs/_examples/toh-6-aot/e2e-spec.ts create mode 100644 public/docs/_examples/toh-6-aot/ts/example-config.json create mode 100644 public/docs/_examples/toh-6-aot/ts/index.html create mode 100644 public/docs/_examples/toh-6/ts/app/main-aot.ts create mode 100644 public/docs/_examples/toh-6/ts/rollup-config.js create mode 100644 public/docs/_examples/toh-6/ts/tsconfig-aot.json create mode 100644 public/resources/images/cookbooks/aot-compiler/toh6-bundle.png diff --git a/public/docs/_examples/_boilerplate/package.json b/public/docs/_examples/_boilerplate/package.json index e168cc9b9f..fad1964d5d 100644 --- a/public/docs/_examples/_boilerplate/package.json +++ b/public/docs/_examples/_boilerplate/package.json @@ -17,7 +17,8 @@ "test:webpack": "karma start karma.webpack.conf.js", "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail", "build:cli": "ng build", - "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup.js", + "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js", + "build:toh-aot": "ngc -p ../../toh-6/ts/tsconfig-aot.json && rollup -c ../../toh-6/ts/rollup-config.js", "i18n": "ng-xi18n" }, "keywords": [], diff --git a/public/docs/_examples/_boilerplate/tsconfig.json b/public/docs/_examples/_boilerplate/tsconfig.json index 64548f5b12..fd16da93af 100644 --- a/public/docs/_examples/_boilerplate/tsconfig.json +++ b/public/docs/_examples/_boilerplate/tsconfig.json @@ -10,5 +10,9 @@ "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true, "types": [] - } + }, + "exclude": [ + "node_modules/*", + "*.-aot.ts" + ] } diff --git a/public/docs/_examples/cb-aot-compiler/ts/.gitignore b/public/docs/_examples/cb-aot-compiler/ts/.gitignore index f2e297bbd3..2d0d839865 100644 --- a/public/docs/_examples/cb-aot-compiler/ts/.gitignore +++ b/public/docs/_examples/cb-aot-compiler/ts/.gitignore @@ -2,4 +2,4 @@ **/*.metadata.json dist !app/tsconfig.json -!rollup.js \ No newline at end of file +!rollup-config.js \ No newline at end of file diff --git a/public/docs/_examples/cb-aot-compiler/ts/rollup.js b/public/docs/_examples/cb-aot-compiler/ts/rollup-config.js similarity index 100% rename from public/docs/_examples/cb-aot-compiler/ts/rollup.js rename to public/docs/_examples/cb-aot-compiler/ts/rollup-config.js diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index 3ec650fc69..31792cf4f9 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -74,6 +74,7 @@ "raw-loader": "^0.5.1", "rimraf": "^2.5.4", "rollup-plugin-commonjs": "^4.1.0", + "source-map-explorer": "^1.3.2", "style-loader": "^0.13.1", "ts-loader": "^0.8.2", "ts-node": "^1.3.0", diff --git a/public/docs/_examples/toh-6-aot/e2e-spec.ts b/public/docs/_examples/toh-6-aot/e2e-spec.ts new file mode 100644 index 0000000000..0f3cb4c365 --- /dev/null +++ b/public/docs/_examples/toh-6-aot/e2e-spec.ts @@ -0,0 +1,283 @@ +'use strict'; // necessary for es6 output in node + +import { browser, element, by, ElementFinder, ElementArrayFinder } from 'protractor'; +import { promise } from 'selenium-webdriver'; + +const expectedH1 = 'Tour of Heroes'; +const expectedTitle = `Angular ${expectedH1}`; +const targetHero = { id: 15, name: 'Magneta' }; +const targetHeroDashboardIndex = 3; +const nameSuffix = 'X'; +const newHeroName = targetHero.name + nameSuffix; + +class Hero { + id: number; + name: string; + + // Factory methods + + // Hero from string formatted as ' '. + static fromString(s: string): Hero { + return { + id: +s.substr(0, s.indexOf(' ')), + name: s.substr(s.indexOf(' ') + 1), + }; + } + + // Hero from hero list
  • element. + static async fromLi(li: ElementFinder): Promise { + let strings = await li.all(by.xpath('span')).getText(); + return { id: +strings[0], name: strings[1] }; + } + + // Hero id and name from the given detail element. + static async fromDetail(detail: 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.lastIndexOf(' ')) + }; + } +} + +describe('Tutorial part 6 - AoT Compiled', () => { + + beforeAll(() => browser.get('')); + + function getPageElts() { + let hrefElts = element.all(by.css('my-app a')); + + return { + hrefs: hrefElts, + + myDashboardHref: hrefElts.get(0), + 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')), + selectedHero: element(by.css('my-app li.selected')), + selectedHeroSubview: element(by.css('my-app my-heroes > div:last-child')), + + heroDetail: element(by.css('my-app my-hero-detail > div')), + + searchBox: element(by.css('#search-box')), + searchResults: element.all(by.css('.search-result')) + }; + } + + describe('Initial page', () => { + + it(`has title '${expectedTitle}'`, () => { + expect(browser.getTitle()).toEqual(expectedTitle); + }); + + it(`has h1 '${expectedH1}'`, () => { + expectHeading(1, expectedH1); + }); + + const expectedViewNames = ['Dashboard', 'Heroes']; + it(`has views ${expectedViewNames}`, () => { + let viewNames = getPageElts().hrefs.map((el: ElementFinder) => el.getText()); + expect(viewNames).toEqual(expectedViewNames); + }); + + it('has dashboard as the active view', () => { + let page = getPageElts(); + expect(page.myDashboard.isPresent()).toBeTruthy(); + }); + + }); + + describe('Dashboard tests', () => { + + beforeAll(() => browser.get('')); + + it('has top heroes', () => { + let page = getPageElts(); + expect(page.topHeroes.count()).toEqual(4); + }); + + it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero); + + it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView); + + it(`cancels and shows ${targetHero.name} in Dashboard`, () => { + element(by.buttonText('Back')).click(); + browser.waitForAngular(); // seems necessary to gets tests to past for toh-6 + + let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex); + expect(targetHeroElt.getText()).toEqual(targetHero.name); + }); + + 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('Save')).click(); + browser.waitForAngular(); // seems necessary to gets tests to past for toh-6 + + let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex); + expect(targetHeroElt.getText()).toEqual(newHeroName); + }); + + }); + + describe('Heroes tests', () => { + + beforeAll(() => browser.get('')); + + it('can switch to Heroes view', () => { + getPageElts().myHeroesHref.click(); + let page = getPageElts(); + expect(page.myHeroes.isPresent()).toBeTruthy(); + expect(page.allHeroes.count()).toEqual(10, 'number of heroes'); + }); + + it(`selects and shows ${targetHero.name} as selected in list`, () => { + getHeroLiEltById(targetHero.id).click(); + expect(Hero.fromLi(getPageElts().selectedHero)).toEqual(targetHero); + }); + + it('shows selected hero subview', () => { + 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', () => { + element(by.buttonText('View Details')).click(); + + let page = getPageElts(); + expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); + let hero = Hero.fromDetail(page.heroDetail); + expect(hero).toEqual(targetHero); + }); + + it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView); + + it(`shows ${newHeroName} in Heroes list`, () => { + element(by.buttonText('Save')).click(); + browser.waitForAngular(); // seems necessary to gets tests to past for toh-6 + let expectedHero = {id: targetHero.id, name: newHeroName}; + expect(Hero.fromLi(getHeroLiEltById(targetHero.id))).toEqual(expectedHero); + }); + + it(`deletes ${newHeroName} from Heroes list`, async () => { + const heroesBefore = await toHeroArray(getPageElts().allHeroes); + const li = getHeroLiEltById(targetHero.id); + li.element(by.buttonText('x')).click(); + + const page = getPageElts(); + expect(page.myHeroes.isPresent()).toBeTruthy(); + expect(page.allHeroes.count()).toEqual(9, 'number of heroes'); + const heroesAfter = await toHeroArray(page.allHeroes); + const expectedHeroes = heroesBefore.filter(h => h.name !== newHeroName); + expect(heroesAfter).toEqual(expectedHeroes); + expect(page.selectedHeroSubview.isPresent()).toBeFalsy(); + }); + + it(`adds back ${targetHero.name}`, async () => { + const newHeroName = 'Alice'; + const heroesBefore = await toHeroArray(getPageElts().allHeroes); + const numHeroes = heroesBefore.length; + + element(by.css('input')).sendKeys(newHeroName); + element(by.buttonText('Add')).click(); + + let page = getPageElts(); + let heroesAfter = await toHeroArray(page.allHeroes); + expect(heroesAfter.length).toEqual(numHeroes + 1, 'number of heroes'); + + expect(heroesAfter.slice(0, numHeroes)).toEqual(heroesBefore, 'Old heroes are still there'); + + const maxId = heroesBefore[heroesBefore.length - 1].id; + expect(heroesAfter[numHeroes]).toEqual({id: maxId + 1, name: newHeroName}); + }); + }); + + describe('Progressive hero search', () => { + + beforeAll(() => browser.get('')); + + it(`searches for 'Ma'`, async () => { + getPageElts().searchBox.sendKeys('Ma'); + browser.sleep(1000); + expect(getPageElts().searchResults.count()).toBe(4); + }); + + it(`continues search with 'g'`, async () => { + getPageElts().searchBox.sendKeys('g'); + browser.sleep(1000); + expect(getPageElts().searchResults.count()).toBe(2); + }); + + it(`continues search with 'n' and gets ${targetHero.name}`, async () => { + getPageElts().searchBox.sendKeys('n'); + browser.sleep(1000); + let page = getPageElts(); + expect(page.searchResults.count()).toBe(1); + let hero = page.searchResults.get(0); + expect(hero.getText()).toEqual(targetHero.name); + }); + + it(`navigates to ${targetHero.name} details view`, async () => { + let hero = getPageElts().searchResults.get(0); + expect(hero.getText()).toEqual(targetHero.name); + hero.click(); + + let page = getPageElts(); + expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); + expect(Hero.fromDetail(page.heroDetail)).toEqual(targetHero); + }); + }); + + function dashboardSelectTargetHero() { + let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex); + expect(targetHeroElt.getText()).toEqual(targetHero.name); + targetHeroElt.click(); + browser.waitForAngular(); // seems necessary to gets tests to past for toh-6 + + let page = getPageElts(); + expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); + let hero = Hero.fromDetail(page.heroDetail); + expect(hero).toEqual(targetHero); + } + + async function updateHeroNameInDetailView() { + // Assumes that the current view is the hero details view. + addToHeroName(nameSuffix); + + let hero = await Hero.fromDetail(getPageElts().heroDetail); + expect(hero).toEqual({id: targetHero.id, name: newHeroName}); + } + +}); + +function addToHeroName(text: string): promise.Promise { + let input = element(by.css('input')); + return input.sendKeys(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): ElementFinder { + let spanForId = element(by.cssContainingText('li span.badge', id.toString())); + return spanForId.element(by.xpath('..')); +} + +async function toHeroArray(allHeroes: ElementArrayFinder): Promise { + let promisedHeroes = await allHeroes.map(Hero.fromLi); + // The cast is necessary to get around issuing with the signature of Promise.all() + return > Promise.all(promisedHeroes); +} diff --git a/public/docs/_examples/toh-6-aot/ts/example-config.json b/public/docs/_examples/toh-6-aot/ts/example-config.json new file mode 100644 index 0000000000..5c9b7f102a --- /dev/null +++ b/public/docs/_examples/toh-6-aot/ts/example-config.json @@ -0,0 +1,4 @@ +{ + "build": "build:toh-aot", + "run": "http-server:e2e" +} \ No newline at end of file diff --git a/public/docs/_examples/toh-6-aot/ts/index.html b/public/docs/_examples/toh-6-aot/ts/index.html new file mode 100644 index 0000000000..9a6859b892 --- /dev/null +++ b/public/docs/_examples/toh-6-aot/ts/index.html @@ -0,0 +1,24 @@ + + + + + + Angular Tour of Heroes + + + + + + + + + + + + + + + Loading... + + + diff --git a/public/docs/_examples/toh-6/ts/.gitignore b/public/docs/_examples/toh-6/ts/.gitignore index 2cb7d2a2e9..a84a321517 100644 --- a/public/docs/_examples/toh-6/ts/.gitignore +++ b/public/docs/_examples/toh-6/ts/.gitignore @@ -1 +1,4 @@ **/*.js +aot +**/*.ngfactory.ts +!rollup-config.js diff --git a/public/docs/_examples/toh-6/ts/app/app.component.ts b/public/docs/_examples/toh-6/ts/app/app.component.ts index 01292eb4cd..c9bb797d62 100644 --- a/public/docs/_examples/toh-6/ts/app/app.component.ts +++ b/public/docs/_examples/toh-6/ts/app/app.component.ts @@ -5,7 +5,6 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'my-app', - template: `

    {{title}}