From ed2ebeb52a461317355c5895943d2c826ec93d88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Wed, 7 Sep 2016 16:04:33 -0700 Subject: [PATCH] fix(build): test example directories with unit and e2e tests (#11296) --- build.sh | 2 + gulpfile.js | 13 +++++++ karma-js.conf.js | 3 +- .../@angular/examples/_common/bootstrap.ts | 17 +++++++++ modules/@angular/examples/_common/e2e_util.ts | 25 ++++++++++++ modules/@angular/examples/_common/index.html | 16 ++++++++ .../@angular/examples/_common/main-dynamic.ts | 11 ++++++ modules/@angular/examples/_common/module.d.ts | 19 ++++++++++ .../examples/_common/system-config.ts | 28 ++++++++++++++ modules/@angular/examples/animate/ts/.gitkeep | 0 modules/@angular/examples/build.sh | 36 ++++++++++++++++++ .../animation/ts/dsl/animation_example.ts | 10 ++++- .../ts/dsl/e2e_test/animation_example_spec.ts | 29 ++++++++++++++ .../examples/core/animation/ts/dsl/module.ts | 8 ++++ modules/@angular/examples/test.sh | 8 ++++ modules/@angular/examples/tsconfig.json | 29 ++++++++++++++ modules/tsconfig.json | 1 + protractor-e2e.conf.js | 1 + protractor-examples-e2e.conf.js | 38 +++++++++++++++++++ scripts/ci-lite/test_e2e.sh | 2 + 20 files changed, 293 insertions(+), 3 deletions(-) create mode 100644 modules/@angular/examples/_common/bootstrap.ts create mode 100644 modules/@angular/examples/_common/e2e_util.ts create mode 100644 modules/@angular/examples/_common/index.html create mode 100644 modules/@angular/examples/_common/main-dynamic.ts create mode 100644 modules/@angular/examples/_common/module.d.ts create mode 100644 modules/@angular/examples/_common/system-config.ts delete mode 100644 modules/@angular/examples/animate/ts/.gitkeep create mode 100755 modules/@angular/examples/build.sh create mode 100644 modules/@angular/examples/core/animation/ts/dsl/e2e_test/animation_example_spec.ts create mode 100644 modules/@angular/examples/core/animation/ts/dsl/module.ts create mode 100755 modules/@angular/examples/test.sh create mode 100644 modules/@angular/examples/tsconfig.json create mode 100644 protractor-examples-e2e.conf.js diff --git a/build.sh b/build.sh index bf466d076f..2eee5cef5d 100755 --- a/build.sh +++ b/build.sh @@ -130,3 +130,5 @@ do fi done + +./modules/@angular/examples/build.sh diff --git a/gulpfile.js b/gulpfile.js index 9f4eb31fb3..46dcc9cbb2 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -142,6 +142,19 @@ gulp.task('serve', () => { }); }); +gulp.task('serve-examples', () => { + let connect = require('gulp-connect'); + let cors = require('cors'); + + connect.server({ + root: `${__dirname}/dist/examples`, + port: 8001, + livereload: false, + open: false, + middleware: (connect, opt) => [cors()] + }); +}); + gulp.task('changelog', () => { const conventionalChangelog = require('gulp-conventional-changelog'); diff --git a/karma-js.conf.js b/karma-js.conf.js index 6ce8b33a37..7a4d3cedc1 100644 --- a/karma-js.conf.js +++ b/karma-js.conf.js @@ -43,7 +43,8 @@ module.exports = function(config) { 'dist/all/@angular/compiler-cli/**', 'dist/all/@angular/benchpress/**', 'dist/all/angular1_router.js', - 'dist/all/@angular/platform-browser/testing/e2e_util.js' + 'dist/all/@angular/platform-browser/testing/e2e_util.js', + 'dist/examples/**/e2e_test/**' ], customLaunchers: browserProvidersConf.customLaunchers, diff --git a/modules/@angular/examples/_common/bootstrap.ts b/modules/@angular/examples/_common/bootstrap.ts new file mode 100644 index 0000000000..4fb6e64711 --- /dev/null +++ b/modules/@angular/examples/_common/bootstrap.ts @@ -0,0 +1,17 @@ +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ +(function(global: any) { + writeScriptTag('/vendor/zone.js'); + writeScriptTag('/vendor/system.js'); + writeScriptTag('/vendor/Reflect.js'); + writeScriptTag('/_common/system-config.js'); + + function writeScriptTag(scriptUrl: string, onload: string = '') { + document.write(''); + } +}(window)); diff --git a/modules/@angular/examples/_common/e2e_util.ts b/modules/@angular/examples/_common/e2e_util.ts new file mode 100644 index 0000000000..38eca95ec1 --- /dev/null +++ b/modules/@angular/examples/_common/e2e_util.ts @@ -0,0 +1,25 @@ +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ +import * as webdriver from 'selenium-webdriver'; +declare var browser: any; +declare var expect: any; + +// TODO (juliemr): remove this method once this becomes a protractor plugin +export function verifyNoBrowserErrors() { + browser.manage().logs().get('browser').then(function(browserLog) { + var errors: any[] = []; + browserLog.filter(logEntry => { + var msg = logEntry.message; + console.log('>> ' + msg); + if (logEntry.level.value >= webdriver.logging.Level.INFO.value) { + errors.push(msg); + } + }); + expect(errors).toEqual([]); + }); +} diff --git a/modules/@angular/examples/_common/index.html b/modules/@angular/examples/_common/index.html new file mode 100644 index 0000000000..d062766baf --- /dev/null +++ b/modules/@angular/examples/_common/index.html @@ -0,0 +1,16 @@ + + + + + + + + + + + loading... + + + diff --git a/modules/@angular/examples/_common/main-dynamic.ts b/modules/@angular/examples/_common/main-dynamic.ts new file mode 100644 index 0000000000..d57b0fa392 --- /dev/null +++ b/modules/@angular/examples/_common/main-dynamic.ts @@ -0,0 +1,11 @@ +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {AppModule} from './module'; + +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/modules/@angular/examples/_common/module.d.ts b/modules/@angular/examples/_common/module.d.ts new file mode 100644 index 0000000000..9038a8f4ac --- /dev/null +++ b/modules/@angular/examples/_common/module.d.ts @@ -0,0 +1,19 @@ +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +/* + +DO NOT DELETE THIS FILE +======================= + +The purpose of this file is to allow `main-dynamic.ts` to be tsc-compiled +BEFORE it is copied over to each of the associated example directories +within `dist/examples`. + + */ +export class AppModule {}; diff --git a/modules/@angular/examples/_common/system-config.ts b/modules/@angular/examples/_common/system-config.ts new file mode 100644 index 0000000000..fcab1039db --- /dev/null +++ b/modules/@angular/examples/_common/system-config.ts @@ -0,0 +1,28 @@ +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ +System.config({ + defaultJSExtensions: true, + map: { + '@angular/common': '/vendor/@angular/common/bundles/common.umd.js', + '@angular/compiler': '/vendor/@angular/compiler/bundles/compiler.umd.js', + '@angular/core': '/vendor/@angular/core/bundles/core.umd.js', + '@angular/forms': '/vendor/@angular/forms/bundles/forms.umd.js', + '@angular/http': '/vendor/@angular/forms/bundles/http.umd.js', + '@angular/platform-browser': + '/vendor/@angular/platform-browser/bundles/platform-browser.umd.js', + '@angular/platform-browser-dynamic': + '/vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', + '@angular/router': '/vendor/@angular/router/bundles/router.umd.js', + '@angular/upgrade': '/vendor/@angular/upgrade/bundles/upgrade.umd.js', + 'rxjs': '/vendor/rxjs', + }, + packages: { + // rxjs: {format: 'cjs', exports: 'Rx' } + rxjs: {defaultExtension: 'js'} + } +}); diff --git a/modules/@angular/examples/animate/ts/.gitkeep b/modules/@angular/examples/animate/ts/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/modules/@angular/examples/build.sh b/modules/@angular/examples/build.sh new file mode 100755 index 0000000000..e49a0b14d3 --- /dev/null +++ b/modules/@angular/examples/build.sh @@ -0,0 +1,36 @@ +#!/bin/sh + +# +# This script is used to compile and copy the contents for each of +# example directories over to the dist/examples directory so that they +# can be tested with karma and protractor. The `gulp serve-examples` command +# can be used to run each of the examples in isolation via http as well. +# + +cd `dirname $0` + +DIST="../../../dist/examples"; +rm -rf -- $DIST +$(npm bin)/tsc -p . + +mkdir $DIST/vendor/ + +ln -s ../../../dist/packages-dist/ $DIST/vendor/@angular + +for FILE in \ + ../../../node_modules/zone.js/dist/zone.js \ + ../../../node_modules/systemjs/dist/system.js \ + ../../../node_modules/reflect-metadata/Reflect.js \ + ../../../node_modules/rxjs +do + ln -s $FILE $DIST/vendor/`basename $FILE` +done + +for MODULE in `find . -name module.ts`; do + FINAL_DIR_PATH=$DIST/`dirname $MODULE` + + echo "==== $MODULE" + cp _common/*.html $FINAL_DIR_PATH + cp $DIST/_common/*.js $FINAL_DIR_PATH + cp $DIST/_common/*.js.map $FINAL_DIR_PATH +done diff --git a/modules/@angular/examples/core/animation/ts/dsl/animation_example.ts b/modules/@angular/examples/core/animation/ts/dsl/animation_example.ts index 752ee1309a..91a71c6d86 100644 --- a/modules/@angular/examples/core/animation/ts/dsl/animation_example.ts +++ b/modules/@angular/examples/core/animation/ts/dsl/animation_example.ts @@ -7,10 +7,11 @@ */ // #docregion Component -import {Component, animate, state, style, transition, trigger} from '@angular/core'; +import {Component, NgModule, animate, state, style, transition, trigger} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; @Component({ - selector: 'my-expando', + selector: 'example-app', styles: [` .toggle-container { background-color:white; @@ -46,4 +47,9 @@ export class MyExpandoCmp { expand() { this.stateExpression = 'expanded'; } collapse() { this.stateExpression = 'collapsed'; } } + +@NgModule({imports: [BrowserModule], declarations: [MyExpandoCmp], bootstrap: [MyExpandoCmp]}) +export class AppModule { +} + // #enddocregion diff --git a/modules/@angular/examples/core/animation/ts/dsl/e2e_test/animation_example_spec.ts b/modules/@angular/examples/core/animation/ts/dsl/e2e_test/animation_example_spec.ts new file mode 100644 index 0000000000..351dcb7591 --- /dev/null +++ b/modules/@angular/examples/core/animation/ts/dsl/e2e_test/animation_example_spec.ts @@ -0,0 +1,29 @@ +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {verifyNoBrowserErrors} from '../../../../../_common/e2e_util'; + +function waitForElement(selector: string) { + var EC = (protractor).ExpectedConditions; + // Waits for the element with id 'abc' to be present on the dom. + browser.wait(EC.presenceOf($(selector)), 20000); +} + +describe('animation example', () => { + afterEach(verifyNoBrowserErrors); + + describe('index view', () => { + var URL = '/core/animation/ts/dsl/index.html'; + + it('should list out the current collection of items', () => { + browser.get(URL); + waitForElement('.toggle-container'); + expect(element.all(by.css('.toggle-container')).get(0).getText()).toEqual('Look at this box'); + }); + }); +}); diff --git a/modules/@angular/examples/core/animation/ts/dsl/module.ts b/modules/@angular/examples/core/animation/ts/dsl/module.ts new file mode 100644 index 0000000000..6420007c73 --- /dev/null +++ b/modules/@angular/examples/core/animation/ts/dsl/module.ts @@ -0,0 +1,8 @@ +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ +export {AppModule} from './animation_example'; diff --git a/modules/@angular/examples/test.sh b/modules/@angular/examples/test.sh new file mode 100755 index 0000000000..fdcd626d38 --- /dev/null +++ b/modules/@angular/examples/test.sh @@ -0,0 +1,8 @@ +#!/bin/sh + +cd `dirname $0` +./build.sh + +gulp serve-examples & + +(cd ../../../ && NODE_PATH=$NODE_PATH:dist/all $(npm bin)/protractor protractor-examples-e2e.conf.js --bundles=true) diff --git a/modules/@angular/examples/tsconfig.json b/modules/@angular/examples/tsconfig.json new file mode 100644 index 0000000000..6cb84ba05b --- /dev/null +++ b/modules/@angular/examples/tsconfig.json @@ -0,0 +1,29 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "stripInternal": true, + "experimentalDecorators": true, + "module": "commonjs", + "moduleResolution": "node", + "outDir": "../../../dist/examples", + "paths": { + "@angular/*": ["../../../dist/packages-dist/*"], + "rxjs/*": ["../../../node_modules/rxjs/*"] + }, + "rootDir": ".", + "sourceMap": true, + "inlineSources": true, + "target": "es5", + "lib": ["es2015", "dom"], + "skipLibCheck": true, + "types": ["jasmine", "protractor", "node"] + }, + "include": [ + "./_common/*.ts", + "./**/module.ts", + "./**/test/*.ts", + "./**/e2e_test/*.ts", + "../../../node_modules/zone.js/dist/zone.js.d.ts", + "../../system.d.ts" + ] +} diff --git a/modules/tsconfig.json b/modules/tsconfig.json index 550608e1d4..20400f74c4 100644 --- a/modules/tsconfig.json +++ b/modules/tsconfig.json @@ -30,6 +30,7 @@ "benchmarks_external", "payload_tests", "rollup-test", + "@angular/examples/**/*.ts", "@angular/compiler-cli/integrationtest" ] } diff --git a/protractor-e2e.conf.js b/protractor-e2e.conf.js index 35999654de..685fe883d9 100644 --- a/protractor-e2e.conf.js +++ b/protractor-e2e.conf.js @@ -26,6 +26,7 @@ exports.config = { 'dist/all/**/e2e_test/**/*_spec.js' ], exclude: [ + 'dist/all/@angular/examples/**', '**/key_events/**', // can't tell why this is failing '**/sourcemap/**' // fails only on travis ], diff --git a/protractor-examples-e2e.conf.js b/protractor-examples-e2e.conf.js new file mode 100644 index 0000000000..69fb4243cc --- /dev/null +++ b/protractor-examples-e2e.conf.js @@ -0,0 +1,38 @@ +// Make sure that the command line is read as the first thing +// as this could exit node if the help script should be printed. +require('./dist/all/e2e_util/e2e_util').readCommandLine(); + +var BROWSER_OPTIONS = { + LocalChrome: { + 'browserName': 'chrome' + }, + ChromeOnTravis: { + browserName: 'chrome', + chromeOptions: { + 'args': ['--no-sandbox'], + 'binary': process.env.CHROME_BIN + } + } +}; + +exports.config = { + onPrepare: function() { + beforeEach(function() { + browser.ignoreSynchronization = false; + }); + }, + allScriptsTimeout: 11000, + specs: [ + 'dist/examples/**/e2e_test/*_spec.js' + ], + capabilities: process.env.TRAVIS ? BROWSER_OPTIONS.ChromeOnTravis : BROWSER_OPTIONS.LocalChrome, + directConnect: true, + baseUrl: 'http://localhost:8001/', + framework: 'jasmine2', + jasmineNodeOpts: { + showColors: true, + defaultTimeoutInterval: 60000, + print: function(msg) { console.log(msg)} + }, + useAllAngular2AppRoots: true +}; diff --git a/scripts/ci-lite/test_e2e.sh b/scripts/ci-lite/test_e2e.sh index 0f3edeb143..ae68d17ed7 100755 --- a/scripts/ci-lite/test_e2e.sh +++ b/scripts/ci-lite/test_e2e.sh @@ -31,11 +31,13 @@ $(npm bin)/gulp check-cycle echo 'travis_fold:start:test.e2e.localChrome' cd dist/ $(npm bin)/gulp serve & +$(npm bin)/gulp serve-examples & cd .. if [[ ${TRAVIS} ]]; then sh -e /etc/init.d/xvfb start fi NODE_PATH=$NODE_PATH:./dist/all $(npm bin)/protractor ./protractor-e2e.conf.js --bundles=true +NODE_PATH=$NODE_PATH:./dist/all $(npm bin)/protractor ./protractor-examples-e2e.conf.js --bundles=true NODE_PATH=$NODE_PATH:./dist/all $(npm bin)/protractor ./protractor-perf.conf.js --bundles=true --dryrun echo 'travis_fold:end:test.e2e.localChrome'