test(e2e): add support for e2e app and running tests.

.travis.yml

@@ -46,7 +46,6 @@ matrix:
   allow_failures:
   - env: "MODE=saucelabs_optional"
   - env: "MODE=browserstack_optional"
-  - env: "MODE=e2e"
 
 install:
   - npm install

angular-cli-build.js

@@ -25,7 +25,7 @@ module.exports = function(defaults) {
 
 
 /**
- * Build the Broccoli Tree containing all the files used as the input to the Angular2App.
+ * Build the Broccoli Tree containing all the files used as the input to the Demo Angular2App.
  */
 function _buildDemoAppInputTree() {
   return new MergeTree([
@@ -42,6 +42,26 @@ function _buildDemoAppInputTree() {
   ]);
 }
 
+
+/**
+ * Build the Broccoli Tree containing all the files used as the input to the e2e Angular2App.
+ */
+function _buildE2EAppInputTree() {
+  return new MergeTree([
+    new Funnel('typings', {
+      destDir: 'typings'
+    }),
+    new Funnel('src', {
+      include: ['components/**/*', 'core/**/*'],
+      destDir: 'src/e2e-app'
+    }),
+    new Funnel('src/e2e-app', {
+      destDir: 'src/e2e-app'
+    })
+  ]);
+}
+
+
 /**
  * Build the Broccoli Tree that contains the Angular2 App. This picks between E2E, Example or Demo
  * app.
@@ -49,12 +69,28 @@ function _buildDemoAppInputTree() {
  * @returns {Angular2App}
  */
 function _buildAppTree(defaults) {
-  let inputNode = _buildDemoAppInputTree();
+  let inputNode;
+  let sourceDir;
+  switch(process.env['MD_APP']) {
+    case 'e2e':
+      inputNode = _buildE2EAppInputTree();
+      sourceDir = 'src/e2e-app';
+      break;
+    default:
+      inputNode = _buildDemoAppInputTree();
+      sourceDir = 'src/demo-app';
+  }
 
   return new Angular2App(defaults, inputNode, {
-    sourceDir: 'src/demo-app',
-    tsCompiler: {
-    },
+    sourceDir: sourceDir,
+    polyfills: [
+      'vendor/es6-shim/es6-shim.js',
+      'vendor/reflect-metadata/Reflect.js',
+      'vendor/systemjs/dist/system.src.js',
+      'vendor/zone.js/dist/zone.js',
+      'vendor/hammerjs/hammer.min.js'
+    ],
+    tsCompiler: {},
     sassCompiler: {
       includePaths: [
         'src/core/style'
@@ -67,7 +103,8 @@ function _buildAppTree(defaults) {
       'es6-shim/es6-shim.js',
       'reflect-metadata/*.js',
       'rxjs/**/*.js',
-      '@angular/**/*.js'
+      '@angular/**/*.js',
+      'hammerjs/*.min.+(js|js.map)'
     ]
   });
 }

e2e/components/button/button.e2e.ts

@@ -13,5 +13,3 @@ describe('button', function () {
     });
   });
 });
-
-

e2e/index.e2e.ts

@@ -1,5 +1,3 @@
-/// <reference path="e2e.d.ts" />
-
 describe('hello, protractor', function () {
   describe('index', function () {
     browser.get('/');
@@ -8,4 +6,3 @@ describe('hello, protractor', function () {
     });
   });
 });
-

e2e/tsconfig.json

@@ -4,7 +4,6 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "inlineSources": true,
-    "mapRoot": "",
     "module": "commonjs",
     "moduleResolution": "node",
     "noEmitOnError": true,
@@ -15,7 +14,6 @@
     "target": "es5"
   },
   "files": [
-    "index.e2e.ts",
     "e2e.d.ts"
   ]
 }

package.json

@@ -15,7 +15,7 @@
     "tslint": "tslint -c tslint.json 'src/**/*.ts'",
     "typings": "typings install --ambient",
     "postinstall": "npm run typings",
-    "e2e": "protractor test/protractor.conf.js",
+    "e2e": "protractor",
     "inline-resources": "node ./scripts/release/inline-resources.js ./dist/components",
     "deploy": "firebase deploy"
   },
@@ -28,12 +28,13 @@
     "@angular/common": "2.0.0-rc.1",
     "@angular/compiler": "2.0.0-rc.1",
     "@angular/core": "2.0.0-rc.1",
-    "@angular/router": "2.0.0-rc.1",
     "@angular/http": "2.0.0-rc.1",
     "@angular/platform-browser": "2.0.0-rc.1",
     "@angular/platform-browser-dynamic": "2.0.0-rc.1",
+    "@angular/router": "2.0.0-rc.1",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.35.0",
+    "hammerjs": "^2.0.8",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "systemjs": "0.19.26",
@@ -41,7 +42,7 @@
   },
   "devDependencies": {
     "add-stream": "^1.0.0",
-    "angular-cli": "^1.0.0-beta.4",
+    "angular-cli": "^1.0.0-beta.5",
     "broccoli-autoprefixer": "^4.1.0",
     "broccoli-funnel": "^1.0.1",
     "broccoli-merge-trees": "^1.1.1",
@@ -64,7 +65,7 @@
     "sass": "^0.5.0",
     "strip-ansi": "^3.0.0",
     "symlink-or-copy": "^1.0.1",
-    "ts-node": "^0.5.5",
+    "ts-node": "^0.7.3",
     "tslint": "^3.5.0",
     "typescript": "^1.9.0-dev",
     "typings": "^0.8.1",

scripts/ci/build-and-test.sh

@@ -21,7 +21,7 @@ if is_lint; then
 elif is_e2e; then
   ng serve &
   sleep 20
-  npm run e2e
+  ng e2e
 else
   karma start test/karma.conf.js --single-run --no-auto-watch --reporters='dots'
 fi

src/demo-app/index.html

@@ -1,11 +1,17 @@
 <!doctype html>
+{{!-- This file is an handlebar file that gets filled at build time. --}}
 <html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Material2</title>
   <base href="/">
-  {{content-for 'head'}}
+
+  {{!-- Add live-reload support, only in development. --}}
+  {{#unless environment.production}}
+  <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
+  {{/unless}}
+
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="main.css" rel="stylesheet">
@@ -16,14 +22,10 @@
 <body>
   <demo-app>Loading...</demo-app>
 
-  <script src="vendor/es6-shim/es6-shim.js"></script>
-  <script src="vendor/reflect-metadata/Reflect.js"></script>
-  <script src="vendor/systemjs/dist/system-polyfills.js"></script>
-  <script src="vendor/zone.js/dist/zone.js"></script>
-  <script src="vendor/systemjs/dist/system.src.js"></script>
-
-  <!-- HammerJS for gestures -->
-  <script src="https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"></script>
+  {{!-- Add all polyfill scripts. --}}
+  {{#each scripts.polyfills}}
+  <script src="{{.}}"></script>
+  {{/each}}
 
   <script>
     System.import('system-config.js').then(function () {

src/demo-app/typings.d.ts

@@ -1,4 +1,3 @@
 /// <reference path="../../typings/browser.d.ts" />
 
 declare var module: { id: string };
-

src/e2e-app/button/button-e2e.html

@@ -0,0 +1,17 @@
+<section>
+  <div>
+    <p>isDisabled: {{isDisabled}}, clickCounter: <span id="clickCounter">{{clickCounter}}</span></p>
+    <button md-raised-button (click)="isDisabled=!isDisabled" id="disableToggle">Disable buttons</button>
+  </div>
+  <button md-button [disabled]="isDisabled" (click)="clickCounter=clickCounter+1" id="testButton">off</button>
+  <button md-button color="primary" [disabled]="isDisabled">off</button>
+  <a href="http://www.google.com" md-button color="accent" [disabled]="isDisabled">off</a>
+  <button md-raised-button color="primary" [disabled]="isDisabled">off</button>
+  <button md-mini-fab [disabled]="isDisabled">
+    <md-icon class="md-24">check</md-icon>
+  </button>
+
+  <button md-icon-button color="accent" [disabled]="isDisabled">
+    <md-icon class="md-24">favorite</md-icon>
+  </button>
+</section>

src/e2e-app/button/button-e2e.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {MdButton, MdAnchor} from '@angular2-material/button/button';
+import {MdIcon} from '@angular2-material/icon/icon';
+
+@Component({
+  moduleId: module.id,
+  selector: 'button-e2e',
+  templateUrl: 'button-e2e.html',
+  directives: [MdButton, MdAnchor, MdIcon]
+})
+export class ButtonE2E {
+  isDisabled: boolean = false;
+  clickCounter: number = 0;
+}

src/e2e-app/e2e-app/e2e-app.html

@@ -0,0 +1,3 @@
+<a md-list-item [routerLink]="['button']">Button</a>
+
+<router-outlet></router-outlet>

src/e2e-app/e2e-app/e2e-app.ts

@@ -0,0 +1,42 @@
+import {Component} from '@angular/core';
+import {Route, Routes, ROUTER_DIRECTIVES} from '@angular/router';
+
+import {Dir} from '@angular2-material/core/rtl/dir';
+import {MdButton} from '@angular2-material/button/button';
+import {MD_SIDENAV_DIRECTIVES} from '@angular2-material/sidenav/sidenav';
+import {MD_LIST_DIRECTIVES} from '@angular2-material/list/list';
+import {MdIcon} from '@angular2-material/icon/icon';
+import {MdToolbar} from '@angular2-material/toolbar/toolbar';
+
+import {ButtonE2E} from '../button/button-e2e';
+
+
+@Component({
+  selector: 'home',
+  template: `
+    <p>e2e website!</p>
+  `
+})
+export class Home {}
+
+@Component({
+  moduleId: module.id,
+  selector: 'e2e-app',
+  providers: [],
+  templateUrl: 'e2e-app.html',
+  directives: [
+    ROUTER_DIRECTIVES,
+    Dir,
+    MdButton,
+    MdIcon,
+    MD_SIDENAV_DIRECTIVES,
+    MD_LIST_DIRECTIVES,
+    MdToolbar
+  ],
+  pipes: []
+})
+@Routes([
+  new Route({path: '/', component: Home}),
+  new Route({path: '/button', component: ButtonE2E})
+])
+export class E2EApp { }

src/e2e-app/environment.ts

@@ -0,0 +1,7 @@
+// The file for the current environment will overwrite this one during build
+// Different environments can be found in config/environment.{dev|prod}.ts
+// The build system defaults to the dev environment
+
+export const environment = {
+  production: false
+};

src/e2e-app/index.html

@@ -0,0 +1,34 @@
+<!doctype html>
+{{!-- This file is an handlebar file that gets filled at build time. --}}
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Material2</title>
+  <base href="/">
+
+  {{#unless environment.production}}
+  <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
+  {{/unless}}
+
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="main.css" rel="stylesheet">
+
+  <!-- FontAwesome for md-icon demo. -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+</head>
+<body>
+  <e2e-app>Loading...</e2e-app>
+
+  {{#each scripts.polyfills}}
+  <script src="{{.}}"></script>
+  {{/each}}
+
+  <script>
+    System.import('system-config.js').then(function () {
+      System.import('main');
+    }).catch(console.error.bind(console));
+  </script>
+</body>
+</html>

src/e2e-app/main.scss

@@ -0,0 +1,2 @@
+@import "core/overlay/overlay";
+@import "core/live-announcer/live-announcer";

src/e2e-app/main.ts

@@ -0,0 +1,24 @@
+import {bootstrap} from '@angular/platform-browser-dynamic';
+import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
+import {HTTP_PROVIDERS} from '@angular/http';
+import {ROUTER_PROVIDERS} from '@angular/router';
+import {provide} from '@angular/core';
+import {Renderer} from '@angular/core';
+
+import {OVERLAY_CONTAINER_TOKEN} from '@angular2-material/core/overlay/overlay';
+import {MdLiveAnnouncer} from '@angular2-material/core/live-announcer/live-announcer';
+import {createOverlayContainer} from '@angular2-material/core/overlay/overlay-container';
+import {MdGestureConfig} from '@angular2-material/core/gestures/MdGestureConfig';
+import {MdIconRegistry} from '@angular2-material/icon/icon-registry';
+
+import {E2EApp} from './e2e-app/e2e-app';
+
+bootstrap(E2EApp, [
+  ROUTER_PROVIDERS,
+  MdLiveAnnouncer,
+  provide(OVERLAY_CONTAINER_TOKEN, {useValue: createOverlayContainer()}),
+  HTTP_PROVIDERS,
+  MdIconRegistry,
+  Renderer,
+  provide(HAMMER_GESTURE_CONFIG, {useClass: MdGestureConfig})
+]);

src/e2e-app/system-config.ts

@@ -0,0 +1,89 @@
+/***********************************************************************************************
+ * User Configuration.
+ **********************************************************************************************/
+
+System.defaultJSExtensions = true;
+
+
+const components = [
+  'button',
+  'card',
+  'checkbox',
+  'grid-list',
+  'icon',
+  'input',
+  'list',
+  'progress-bar',
+  'progress-circle',
+  'radio',
+  'sidenav',
+  'slide-toggle',
+  'tab-group',
+  'toolbar'
+];
+
+
+/** Map relative paths to URLs. */
+const map: any = {
+  '@angular2-material/core': '/core',
+};
+components.forEach(name => map[`@angular2-material/${name}`] = `/components/${name}`);
+
+
+/** User packages configuration. */
+const packages: any = {
+  '@angular2-material/core': {
+    format: 'cjs',
+    defaultExtension: 'js'
+  }
+};
+components.forEach(name => {
+  packages[`@angular2-material/${name}`] = {
+    format: 'cjs',
+    defaultExtension: 'js'
+  };
+});
+
+////////////////////////////////////////////////////////////////////////////////////////////////
+/***********************************************************************************************
+ * Everything underneath this line is managed by the CLI.
+ **********************************************************************************************/
+const barrels: string[] = [
+  // Angular specific barrels.
+  '@angular/core',
+  '@angular/common',
+  '@angular/compiler',
+  '@angular/http',
+  '@angular/router',
+  '@angular/platform-browser',
+  '@angular/platform-browser-dynamic',
+
+  // Thirdparty barrels.
+  'rxjs',
+
+  // App specific barrels.
+  'app',
+  'app/shared',
+  /** @cli-barrel */
+];
+
+const _cliSystemConfig = {};
+barrels.forEach((barrelName: string) => {
+  (<any> _cliSystemConfig)[barrelName] = { main: 'index' };
+});
+
+/** Type declaration for ambient System. */
+declare var System: any;
+
+// Apply the CLI SystemJS configuration.
+System.config({
+  map: {
+    '@angular': 'vendor/@angular',
+    'rxjs': 'vendor/rxjs',
+    'main': 'main.js'
+  },
+  packages: _cliSystemConfig
+});
+
+// Apply the user's configuration.
+System.config({ map, packages });

src/e2e-app/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "mapRoot": "",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noImplicitAny": true,
+    "outDir": "../../dist/",
+    "rootDir": "..",
+    "sourceMap": true,
+    "target": "es5",
+    "inlineSources": true,
+    "stripInternal": true,
+    "baseUrl": "",
+    "paths": {
+      "@angular2-material/core/*": [
+        "./core/*",
+        "../core/*"
+      ],
+      "@angular2-material/*": [
+        "./components/*",
+        "../components/*"
+      ]
+    }
+  },
+  "files": [
+    "main.ts",
+    "typings.d.ts"
+  ]
+}

src/e2e-app/typings.d.ts

@@ -0,0 +1,4 @@
+/// <reference path="../../typings/browser.d.ts" />
+
+declare var module: { id: string };
+

test/packages

@@ -1 +0,0 @@
-../packages

test/protractor.conf.js

@@ -1,7 +1,11 @@
+const fs = require('fs');
 const path = require('path');
 
-/** Setup TypeScript for our tests. */
-require('ts-node/register');
+// Load ts-node to be able to execute TypeScript files with protractor.
+require('ts-node').register({
+  project: path.join(__dirname, '../e2e/')
+});
+
 
 const E2E_BASE_URL = process.env['E2E_BASE_URL'] || 'http://localhost:4200';
 const config = {