From 12984fda55851e6bd53512a287bcb3a84767769b Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Fri, 20 May 2016 01:09:45 -0700 Subject: [PATCH] docs(testing): update samples & test config to RC1 --- public/docs/_examples/karma-test-shim.js | 161 +++++++++--------- public/docs/_examples/karma.conf.js | 28 ++- .../testing/ts/app/app.component.spec.ts | 8 +- .../_examples/testing/ts/app/app.component.ts | 4 +- .../testing/ts/app/bad-tests.spec.ts | 11 +- .../docs/_examples/testing/ts/app/bag.spec.ts | 12 +- .../ts/app/dashboard.component.spec.ts | 6 +- .../testing/ts/app/dashboard.component.ts | 2 +- .../testing/ts/app/hero-detail.component.ts | 2 +- .../testing/ts/app/heroes.component.ts | 4 +- .../testing/ts/app/http-hero.service.spec.ts | 8 +- .../_examples/testing/ts/app/mock-router.ts | 4 +- public/docs/_examples/wallaby.js | 109 +++++++----- 13 files changed, 199 insertions(+), 160 deletions(-) diff --git a/public/docs/_examples/karma-test-shim.js b/public/docs/_examples/karma-test-shim.js index e2aff07852..4d1e76371d 100644 --- a/public/docs/_examples/karma-test-shim.js +++ b/public/docs/_examples/karma-test-shim.js @@ -1,90 +1,93 @@ -/*global jasmine, __karma__, window*/ -(function () { - -// Error.stackTraceLimit = Infinity; - +// /*global jasmine, __karma__, window*/ +Error.stackTraceLimit = Infinity; jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; -// Cancel Karma's synchronous start, -// we call `__karma__.start()` later, once all the specs are loaded. -__karma__.loaded = function () { }; +__karma__.loaded = function () { +}; -// SET THE RUNTIME APPLICATION ROOT HERE -var appRoot ='app'; // no trailing slash! - -// RegExp for client application base path within karma (which always starts 'base\') -var karmaBase = '^\/base\/'; // RegEx string for base of karma folders -var appPackage = 'base/' + appRoot; //e.g., base/app -var appRootRe = new RegExp(karmaBase + appRoot + '\/'); -var onlyAppFilesRe = new RegExp(karmaBase + appRoot + '\/(?!.*\.spec\.js$)([a-z0-9-_\.\/]+)\.js$'); - -var moduleNames = []; - -// Configure systemjs packages to use the .js extension for imports from the app folder -var packages = {}; -packages[appPackage] = { - defaultExtension: false, - format: 'register', - map: Object.keys(window.__karma__.files) - .filter(onlyAppFiles) - // Create local module name mapping to karma file path for app files - // with karma's fingerprint in query string, e.g.: - // './hero.service': '/base/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e' - .reduce(function (pathsMapping, appPath) { - var moduleName = appPath.replace(appRootRe, './').replace(/\.js$/, ''); - pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]; - return pathsMapping; - }, {}) - } - -System.config({ packages: packages }); - -// Configure Angular for the browser and -// with test versions of the platform providers - Promise.all([ - System.import('angular2/testing'), - System.import('angular2/platform/testing/browser') - ]) - .then(function (results) { - var testing = results[0]; - var browser = results[1]; - testing.setBaseTestProviders( - browser.TEST_BROWSER_PLATFORM_PROVIDERS, - browser.TEST_BROWSER_APPLICATION_PROVIDERS); - - // Load all spec files - // (e.g. 'base/app/hero.service.spec.js') - return Promise.all( - Object.keys(window.__karma__.files) - .filter(onlySpecFiles) - .map(function (moduleName) { - moduleNames.push(moduleName); - return System.import(moduleName); - })); - }) - - .then(success, fail); - -////// Helpers ////// - -function onlyAppFiles(filePath) { - return onlyAppFilesRe.test(filePath); +function isJsFile(path) { + return path.slice(-3) == '.js'; } -function onlySpecFiles(filePath) { - return /\.spec\.js$/.test(filePath); +function isSpecFile(path) { + return /\.spec\.js$/.test(path); } -function success () { - console.log( - 'Spec files loaded:\n ' + - moduleNames.join('\n ') + - '\nStarting Jasmine testrunner'); - __karma__.start(); +function isBuiltFile(path) { + var builtPath = '/base/app/'; + return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath); } -function fail(error) { - __karma__.error(error.stack || error); +var allSpecFiles = Object.keys(window.__karma__.files) + .filter(isSpecFile) + .filter(isBuiltFile); + +////////////////////////// +// Load our SystemJS configuration. + +// map tells the System loader where to look for things +var map = { + 'app': 'app', + + '@angular': 'node_modules/@angular', + 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', + 'rxjs': 'node_modules/rxjs' +}; + +// packages tells the System loader how to load when no filename and/or no extension +var packages = { + 'app': { main: 'main.js', defaultExtension: 'js' }, + 'rxjs': { defaultExtension: 'js' }, + 'angular2-in-memory-web-api': { defaultExtension: 'js' }, +}; + +var ngPackageNames = [ + 'common', + 'compiler', + 'core', + 'http', + 'platform-browser', + 'platform-browser-dynamic', + 'router', + 'router-deprecated', + 'upgrade', +]; + +// Add package entries for angular packages +ngPackageNames.forEach(function(pkgName) { + + // Bundled (~40 requests): DOESN'T WORK IN KARMA OR WALLABY (YET?) + //packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' }; + + // Individual files (~300 requests): + packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; +}); + +var config = { + baseURL: '/base', + map: map, + packages: packages } -})(); +System.config(config); +////////////// + +Promise.all([ + System.import('@angular/core/testing'), + System.import('@angular/platform-browser-dynamic/testing') +]).then(function (providers) { + var testing = providers[0]; + var testingBrowser = providers[1]; + + testing.setBaseTestProviders( + testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, + testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS); + +}).then(function() { + // Finally, load all spec files. + // This will run the tests directly. + return Promise.all( + allSpecFiles.map(function (moduleName) { + return System.import(moduleName); + })); +}).then(__karma__.start, __karma__.error); diff --git a/public/docs/_examples/karma.conf.js b/public/docs/_examples/karma.conf.js index b9bea32636..d39e2ffac8 100644 --- a/public/docs/_examples/karma.conf.js +++ b/public/docs/_examples/karma.conf.js @@ -21,34 +21,30 @@ module.exports = function(config) { } }, files: [ - // Polyfills. - 'node_modules/code-js/client/shim.min.js', + // System.js for module loading + 'node_modules/systemjs/dist/system.src.js', - // Zone.js dependencies - // Note - do not include zone.js itself here, it is already - // included in angular2-polyfills + // Polyfills + 'node_modules/core-js/client/shim.js', + + // Reflect and Zone.js + 'node_modules/reflect-metadata/Reflect.js', 'node_modules/zone.js/dist/zone.js', 'node_modules/zone.js/dist/jasmine-patch.js', 'node_modules/zone.js/dist/async-test.js', 'node_modules/zone.js/dist/fake-async-test.js', - { pattern: 'node_modules/reflect-metadata/Reflect.js', included: true, watched: false }, - { pattern: 'https://code.angularjs.org/tools/system.js', included: true, watched: false }, - // RxJs. { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, - {pattern: 'karma-test-shim.js', included: true, watched: true}, - {pattern: 'built/test/matchers.js', included: true, watched: true}, + // Angular 2 itself and the testing library + {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false}, + {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false}, - // paths loaded via module imports - {pattern: 'built/**/*.js', included: false, watched: true}, + 'karma-test-shim.js', - {pattern: 'node_modules/@angular/**/*.js', included: false, watched: true}, - {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: true}, - - // transpiled application & spec code paths to be loaded via module imports + // transpiled application & spec code paths loaded via module imports {pattern: appBase + '**/*.js', included: false, watched: true}, // asset (HTML & CSS) paths loaded via Angular's component compiler diff --git a/public/docs/_examples/testing/ts/app/app.component.spec.ts b/public/docs/_examples/testing/ts/app/app.component.spec.ts index 1cabad6050..2b53c38dcc 100644 --- a/public/docs/_examples/testing/ts/app/app.component.spec.ts +++ b/public/docs/_examples/testing/ts/app/app.component.spec.ts @@ -8,8 +8,10 @@ import { beforeEach, beforeEachProviders, describe, ddescribe, xdescribe, expect, it, iit, xit, - async, inject, ComponentFixture, TestComponentBuilder -} from '@angular/testing'; + async, inject +} from '@angular/core/testing'; + +import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing'; import { Hero, HeroService, MockHeroService } from './mock-hero.service'; @@ -18,7 +20,7 @@ import { Router, MockRouter, RouterOutlet, MockRouterOutlet} from './mock-router'; describe('AppComponent', () => { - let fixture: ComponentFixture; + let fixture: ComponentFixture; let comp: AppComponent; beforeEach(async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { diff --git a/public/docs/_examples/testing/ts/app/app.component.ts b/public/docs/_examples/testing/ts/app/app.component.ts index 8b1d897411..bf10177937 100644 --- a/public/docs/_examples/testing/ts/app/app.component.ts +++ b/public/docs/_examples/testing/ts/app/app.component.ts @@ -3,10 +3,10 @@ import { Component } from '@angular/core'; // Can't test with ROUTER_DIRECTIVES yet -// import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router'; +// import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; import { RouteConfig, RouterLink, - RouterOutlet, ROUTER_PROVIDERS } from '@angular/router'; + RouterOutlet, ROUTER_PROVIDERS } from '@angular/router-deprecated'; import { DashboardComponent } from './dashboard.component'; import { HeroesComponent } from './heroes.component'; diff --git a/public/docs/_examples/testing/ts/app/bad-tests.spec.ts b/public/docs/_examples/testing/ts/app/bad-tests.spec.ts index a2158f873d..eaeab08128 100644 --- a/public/docs/_examples/testing/ts/app/bad-tests.spec.ts +++ b/public/docs/_examples/testing/ts/app/bad-tests.spec.ts @@ -19,12 +19,13 @@ import { DebugElement } from '@angular/core'; import { By } from '@angular/platform-browser'; import { - beforeEach, beforeEachProviders, withProviders, + beforeEach, beforeEachProviders, describe, ddescribe, xdescribe, expect, it, iit, xit, - async, inject, fakeAsync, tick, - ComponentFixture, TestComponentBuilder -} from '@angular/testing'; + async, inject +} from '@angular/core/testing'; + +import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing'; import { provide } from '@angular/core'; import { ViewMetadata } from '@angular/core'; @@ -90,7 +91,7 @@ xdescribe('async & inject testing errors', () => { let itPromise = patchJasmineIt(); it('should fail with an error from a promise', async(() => { - return Promise.reject('baz') + return Promise.reject('baz'); })); itPromise.then( diff --git a/public/docs/_examples/testing/ts/app/bag.spec.ts b/public/docs/_examples/testing/ts/app/bag.spec.ts index 0d27516eb8..c6eae1bc77 100644 --- a/public/docs/_examples/testing/ts/app/bag.spec.ts +++ b/public/docs/_examples/testing/ts/app/bag.spec.ts @@ -16,12 +16,14 @@ import { DebugElement } from '@angular/core'; import { By } from '@angular/platform-browser'; import { - beforeEach, beforeEachProviders, withProviders, + beforeEach, beforeEachProviders, describe, ddescribe, xdescribe, expect, it, iit, xit, - async, inject, fakeAsync, tick, - ComponentFixture, TestComponentBuilder -} from '@angular/testing'; + async, inject, + fakeAsync, tick, withProviders +} from '@angular/core/testing'; + +import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing'; import { provide } from '@angular/core'; import { ViewMetadata } from '@angular/core'; @@ -349,7 +351,7 @@ describe('test component builder', function() { })), 10000); // Long timeout because this test makes an actual XHR. describe('(lifecycle hooks w/ MyIfParentComp)', () => { - let fixture: ComponentFixture; + let fixture: ComponentFixture; let parent: MyIfParentComp; let child: MyIfChildComp; diff --git a/public/docs/_examples/testing/ts/app/dashboard.component.spec.ts b/public/docs/_examples/testing/ts/app/dashboard.component.spec.ts index af7108cc92..5dd61bc8f3 100644 --- a/public/docs/_examples/testing/ts/app/dashboard.component.spec.ts +++ b/public/docs/_examples/testing/ts/app/dashboard.component.spec.ts @@ -8,8 +8,10 @@ import { beforeEach, beforeEachProviders, describe, ddescribe, xdescribe, expect, it, iit, xit, - async, inject, TestComponentBuilder -} from '@angular/testing'; + async, inject +} from '@angular/core/testing'; + +import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing'; import { Hero, HeroService, MockHeroService } from './mock-hero.service'; import { Router, MockRouter } from './mock-router'; diff --git a/public/docs/_examples/testing/ts/app/dashboard.component.ts b/public/docs/_examples/testing/ts/app/dashboard.component.ts index 73edbd98ad..69a9c5cce6 100644 --- a/public/docs/_examples/testing/ts/app/dashboard.component.ts +++ b/public/docs/_examples/testing/ts/app/dashboard.component.ts @@ -2,7 +2,7 @@ // #docregion import { Component, OnInit } from '@angular/core'; // #docregion import-router -import { Router } from '@angular/router'; +import { Router } from '@angular/router-deprecated'; // #enddocregion import-router import { Hero } from './hero'; diff --git a/public/docs/_examples/testing/ts/app/hero-detail.component.ts b/public/docs/_examples/testing/ts/app/hero-detail.component.ts index 98c0271bf5..3e1eaf4cd8 100644 --- a/public/docs/_examples/testing/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/testing/ts/app/hero-detail.component.ts @@ -5,7 +5,7 @@ import { Component, OnInit } from '@angular/core'; // #enddocregion import-oninit // #docregion import-route-params -import {RouteParams} from '@angular/router'; +import {RouteParams} from '@angular/router-deprecated'; // #enddocregion import-route-params import { Hero } from './hero'; diff --git a/public/docs/_examples/testing/ts/app/heroes.component.ts b/public/docs/_examples/testing/ts/app/heroes.component.ts index d539c1c21e..1e2651f256 100644 --- a/public/docs/_examples/testing/ts/app/heroes.component.ts +++ b/public/docs/_examples/testing/ts/app/heroes.component.ts @@ -1,7 +1,7 @@ // #docplaster // #docregion import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; +import { Router } from '@angular/router-deprecated'; import { Hero } from './hero'; import { HeroDetailComponent } from './hero-detail.component'; @@ -47,4 +47,4 @@ export class HeroesComponent implements OnInit { } // #enddocregion heroes-component-renaming // #enddocregion class -// #enddocregion \ No newline at end of file +// #enddocregion diff --git a/public/docs/_examples/testing/ts/app/http-hero.service.spec.ts b/public/docs/_examples/testing/ts/app/http-hero.service.spec.ts index 1ddbb4190d..c80758e680 100644 --- a/public/docs/_examples/testing/ts/app/http-hero.service.spec.ts +++ b/public/docs/_examples/testing/ts/app/http-hero.service.spec.ts @@ -1,10 +1,12 @@ /* tslint:disable:no-unused-variable */ import { - beforeEach, beforeEachProviders, withProviders, + beforeEach, beforeEachProviders, describe, ddescribe, xdescribe, expect, it, iit, xit, - async, inject, TestComponentBuilder -} from '@angular/testing'; + async, inject, withProviders +} from '@angular/core/testing'; + +import { TestComponentBuilder } from '@angular/compiler/testing'; import { provide } from '@angular/core'; diff --git a/public/docs/_examples/testing/ts/app/mock-router.ts b/public/docs/_examples/testing/ts/app/mock-router.ts index d10eac06c0..547629f53d 100644 --- a/public/docs/_examples/testing/ts/app/mock-router.ts +++ b/public/docs/_examples/testing/ts/app/mock-router.ts @@ -1,10 +1,10 @@ -export * from '@angular/router'; +export * from '@angular/router-deprecated'; import { Directive, DynamicComponentLoader, ViewContainerRef, Injectable, Optional, Input } from '@angular/core'; import { ComponentInstruction, Instruction, - Router, RouterOutlet} from '@angular/router'; + Router, RouterOutlet} from '@angular/router-deprecated'; let _resolveToTrue = Promise.resolve(true); diff --git a/public/docs/_examples/wallaby.js b/public/docs/_examples/wallaby.js index 7da9b779dd..7a5f259aca 100644 --- a/public/docs/_examples/wallaby.js +++ b/public/docs/_examples/wallaby.js @@ -1,27 +1,25 @@ // Configuration for the Wallaby Visual Studio Code testing extension // https://marketplace.visualstudio.com/items?itemName=WallabyJs.wallaby-vscode // Note: Wallaby is not open source and costs money + module.exports = function () { return { files: [ // System.js for module loading - {pattern: 'node_modules/systemjs/dist/system-polyfills.js', instrument: false}, {pattern: 'node_modules/systemjs/dist/system.js', instrument: false}, // Polyfills - {pattern: 'node_modules/code-js/client/shim.min.js', instrument: false}, - {pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', instrument: false}, + {pattern: 'node_modules/core-js/client/shim.min.js', instrument: false}, - // Zone.js dependencies - // Note - do not include zone.js itself or long-stack-trace-zone.js` here as - // they are included already in angular2-polyfills + // Reflect, Zone.js, and test shims + // Rx.js, Angular 2 itself, and the testing library not here because loaded by systemjs + {pattern: 'node_modules/reflect-metadata/Reflect.js', instrument: false}, + {pattern: 'node_modules/zone.js/dist/zone.js', instrument: false}, {pattern: 'node_modules/zone.js/dist/jasmine-patch.js', instrument: false}, {pattern: 'node_modules/zone.js/dist/async-test.js', instrument: false}, {pattern: 'node_modules/zone.js/dist/fake-async-test.js', instrument: false}, - // Rx.js, Angular 2 itself, and the testing library not here because loaded by systemjs - {pattern: 'app/**/*+(ts|html|css)', load: false}, {pattern: 'app/**/*.spec.ts', ignore: true} ], @@ -36,41 +34,24 @@ module.exports = function () { testFramework: 'jasmine', + debug: true, + bootstrap: function (wallaby) { wallaby.delayStart(); + systemConfig(); - System.config({ - defaultJSExtensions: true, - packages: { - app: { - meta: { - '*': { - scriptLoad: true - } - } - } - }, - paths: { - 'npm:*': 'node_modules/*' - }, - map: { - 'angular2': 'npm:angular2', - 'rxjs': 'npm:rxjs' - } - }); - - // Configure Angular for the browser and - // with test versions of the platform providers Promise.all([ - System.import('angular2/testing'), - System.import('angular2/platform/testing/browser') + System.import('@angular/core/testing'), + System.import('@angular/platform-browser-dynamic/testing') ]) - .then(function (results) { - var testing = results[0]; - var browser = results[1]; + .then(function (providers) { + var testing = providers[0]; + var testingBrowser = providers[1]; + testing.setBaseTestProviders( - browser.TEST_BROWSER_PLATFORM_PROVIDERS, - browser.TEST_BROWSER_APPLICATION_PROVIDERS); + testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, + testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS); + // Load all spec files return Promise.all(wallaby.tests.map(function (specFile) { @@ -85,8 +66,58 @@ module.exports = function () { throw e; }, 0); }); - }, - debug: true + ////////////////////////// + // SystemJS configuration. + function systemConfig() { + + // map tells the System loader where to look for things + var map = { + 'app': 'app', + + '@angular': 'node_modules/@angular', + 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', + 'rxjs': 'node_modules/rxjs' + }; + + // packages tells the System loader how to load when no filename and/or no extension + var packages = { + 'app': { main: 'main.js', defaultExtension: 'js' }, + 'rxjs': { defaultExtension: 'js' }, + 'angular2-in-memory-web-api': { defaultExtension: 'js' }, + }; + + var ngPackageNames = [ + 'common', + 'compiler', + 'core', + 'http', + 'platform-browser', + 'platform-browser-dynamic', + 'router', + 'router-deprecated', + 'upgrade', + ]; + + // Add package entries for angular packages + ngPackageNames.forEach(function(pkgName) { + + // Bundled (~40 requests): DOESN'T WORK IN WALLABY OR KARMA (YET?) + // packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' }; + + // Individual files (~300 requests): + packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; + }); + + var config = { + map: map, + packages: packages + } + + System.config(config); + } + ////////////////// + } }; + };