chore: update specs to TestBed

[Foxandxss]

NOT to merge until angular/zone.js#404 is fixed.

[Foxandxss]

Fixed, @filipesilva review please.

[filipesilva]

Can you separate these into a similar setup as before? It's usually nicer to see:

System.import('systemjs.config.js')
.then(() => Promise.all([
System.import('@angular/core/testing'),
System.import('@angular/platform-browser-dynamic/testing')
]))
.then((providers) => {
var coreTesting = providers[0];
var browserTesting = providers[1];
coreTesting.TestBed.initTestEnvironment(
browserTesting.BrowserDynamicTestingModule, browserTesting.platformBrowserDynamicTesting());
})
.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);

[filipesilva]

Have that nit, otherswise LGTM.

[Foxandxss]

Changed that.

[psnider]

I was about to report an issue that the karma tests don't work, but then I saw your changes here, and I integrated them into my workspace.

However, I'm still getting failures when I run npm test from part 1 of Tour of Heroes tutorial, The Hero Editor.

I created a new repo for QuickStart:

git clone git@github.com:angular/quickstart.git
cd quickstart/
npm install
npm test

And npm test runs correctly.

However, once I add the files from part 1 of the Tour-of-Heroes, the tests fail.
Note that I modified the last spec test in app.component.spec.ts to look for "Tour of Heroes".
It appears that there is still some problem with the test harness.
Can you please advise me?

 Chrome 52.0.2743 (Mac OS X 10.11.6) AppComponent with TCB should instantiate component FAILED
[1] Error: Template parse errors:
[1] Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
[1] <div>
[1] <label>name: </label>
[1] <input [ERROR ->][(ngModel)]="hero.name" placeholder="name">
[1] </div>
[1] "): AppComponent@6:13
[1] at new BaseException (/private/tmp/lwpc/quickstart/node_modules/@angular/compiler/src/facade/exceptions.js:27:23)
[1] at TemplateParser.parse (/private/tmp/lwpc/quickstart/node_modules/@angular/compiler/src/template_parser/template_parser.js:98:19)
[1] at RuntimeCompiler._compileTemplate (/private/tmp/lwpc/quickstart/node_modules/@angular/compiler/src/runtime_compiler.js:246:51)
[1] at eval (/private/tmp/lwpc/quickstart/node_modules/@angular/compiler/src/runtime_compiler.js:174:83)
[1] at Set.forEach (native)
[1] at compile (/private/tmp/lwpc/quickstart/node_modules/@angular/compiler/src/runtime_compiler.js:174:47)
[1] at RuntimeCompiler._compileComponents (/private/tmp/lwpc/quickstart/node_modules/@angular/compiler/src/runtime_compiler.js:176:13)
[1] at RuntimeCompiler._compileModuleAndAllComponents (/private/tmp/lwpc/quickstart/node_modules/@angular/compiler/src/runtime_compiler.js:78:37)
[1] at RuntimeCompiler.compileModuleAndAllComponentsSync (/private/tmp/lwpc/quickstart/node_modules/@angular/compiler/src/runtime_compiler.js:52:21)
[1] at TestingCompilerImpl.compileModuleAndAllComponentsSync (/private/tmp/lwpc/quickstart/node_modules/@angular/compiler/testing.js:71:31)
[1] at TestBed._initIfNeeded (/private/tmp/lwpc/quickstart/node_modules/@angular/core/testing/test_bed.js:215:36)
[1] at TestBed.createComponent (/private/tmp/lwpc/quickstart/node_modules/@angular/core/testing/test_bed.js:296:14)
[1] at Function.TestBed.createComponent (/private/tmp/lwpc/quickstart/node_modules/@angular/core/testing/test_bed.js:126:29)
[1] at Object.eval (/private/tmp/lwpc/quickstart/app/app.component.spec.js:18:41)
[1] at ZoneDelegate.invoke (/private/tmp/lwpc/quickstart/node_modules/zone.js/dist/zone.js:332:29)
[1] at Zone.run (/private/tmp/lwpc/quickstart/node_modules/zone.js/dist/zone.js:225:44)
[1] at /private/tmp/lwpc/quickstart/node_modules/zone.js/dist/zone.js:591:58
[1] at ZoneDelegate.invokeTask (/private/tmp/lwpc/quickstart/node_modules/zone.js/dist/zone.js:365:38)
[1] at Zone.runTask (/private/tmp/lwpc/quickstart/node_modules/zone.js/dist/zone.js:265:48)
[1] at drainMicroTaskQueue (/private/tmp/lwpc/quickstart/node_modules/zone.js/dist/zone.js:497:36)
[1] at XMLHttpRequest.ZoneTask.invoke (/private/tmp/lwpc/quickstart/node_modules/zone.js/dist/zone.js:437:26)

[psnider]

Found a solution!

To app.component.ts, I added at the top:

import { FORM_DIRECTIVES } from '@angular/forms'; 

and within @Component({, I added

 , directives: [FORM_DIRECTIVES]

Can you please update the part 1 page of the tutorial?

[filipesilva]

@psnider I would avoid that solution, because afaik it will not work in the near future. Instead, what you should do is configure the testing module to import the FormsModule.

TestBed.configureTestingModule({declarations: [AppComponent]});

[psnider]

I couldn't get this to work. I modified app.component.spec.ts:

import { FormsModule } from '@angular/forms';

and

describe('AppComponent with TCB', function () {
beforeEach(() => {
TestBed.configureTestingModule({declarations: [AppComponent, FormsModule]});
});

What am I missing?

and here's the first part of the new error:

 Chrome 52.0.2743 (Mac OS X 10.11.6) AppComponent with TCB should instantiate component FAILED
[1] Error: Unexpected value 'FormsModule' declared by the module 'DynamicTestModule'
[1] at new BaseException (/Users/peter/devel/tutorials/angular2-quickstart-rc5/node_modules/@angular/compiler/src/facade/exceptions.js:27:23)
[1] at eval (/Users/peter/devel/tutorials/angular2-quickstart-rc5/node_modules/@angular/compiler/src/metadata_resolver.js:298:31)
[1] at Array.forEach (native)

[filipesilva]

Well the testing module is like a normal module, right? So let's look at the toh-1 app.module.ts:

// #docregion
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }

Basically, AppComponent expects to be ran in an environment like this module. So I think what you're missing is to use the imports property:

 TestBed.configureTestingModule({
imports: [FormsModule],
declarations: [AppComponent]
});

Not too sure why the BrowserModule isn't needed though. I hope that'll be covered in the upcoming revision of the testing chapter that @wardbell is working on.

[psnider]

Thanks so much, imports: [FormsModule], did the trick.

I'm paying close attention to testing, and want to make sure that all of the tests run at the end of each part of the tutorial.

FWIW, the testing support you have with the QuickStart and tutorial is very valuable to me.
But I struggle when I have to change it for another project structure.
I think I have it working now in: https://github.com/psnider/angular2-quickstart-rc5/tree/restructured
which is for a TypeScript-only micro-service project I'm working on:

• node.js service for people, with Angular2 web-app
• NativeScript mobile-app for people

[filipesilva]

What bits of it make it a struggle, specifically?

[psnider]

The bits that make it a struggle

• How are URLs from the browser transformed by each component of the test system?
• The karma config and system.js config are complex. I'm confused by what configuration fields mean, and what they affect.
• Related config information must be specified in multiple places, but I'm unclear on the differences
• What does /base/ (in karma.conf.js) mean?
• Many symbol names collide, making it difficult to understand scope and usage.

Details

Trying to configure karma and systemjs has been very difficult.
I would appreciate any references you could provide me.

karma
I can't say I understand how karma works yet, and there doesn't seem to be much of a tutorial.
All I've found is: http://karma-runner.github.io/1.0/intro/how-it-works.html,
which is surprisingly terse. It refers to a masters thesis, which I haven't read yet, but I'm looking for something in between, and which is specific to karma.

The karma configuration seems to be much more complex than what is described in http://karma-runner.github.io/1.0/config/configuration-file.html and http://karma-runner.github.io/1.0/config/files.html.

systemjs
I feel I have a better understanding of the system.js loader.
I found the documentation on the https://github.com/systemjs/systemjs to be easier to understand, but it is still a complex component that will take me some fair time and work to understand.

karma and system.js together with angular
In particular, I'd like to understand the details of how browser URLs are sent to the karma server, and how they are resolved. I don't understand what resolution is performed in the browser, and what is performed by the karma server, which paths are relative, and which are from the root. The documentation seems to assume that the reader already understands these things. I also don't understand what the special prefix /base/ refers, and I can't find documentation that discusses this.

Another point of confusion is that the same symbol names are used for many things.
I think that using a separate symbols for each concept would help greatly.
In particular, app has many uses, and I believe many people in the community assume that it's use is required, for example this question. I'm used to web-apps not knowing the file system structure of the server, but it seems like many portions of the URLs are expected to match.

changing the project directory structure
I have several components in one project.
You can find my first attempt in the browser-angular2 component of people-service.
This was basically working, but broke when zone.js upgraded, see issue.
Then as I started to work through this, the tutorial was updated to RC5, so I'm redoing the work to incorporate it.

[filipesilva]

Heya @psnider, we have a revised and very complete Testing guide at https://angular.io/docs/ts/latest/guide/testing.html#!#setup-files. It doesn't answer all of difficulties, but I think it answers most of them.

[wardbell]

@psnider I wince as I read your perfectly reasonable questions. Our testing guide does not yet cover re-configuration of karma and systemjs for a different project structure. It's on our backlog. Your questions here are helpful and will inform our effort to take this necessary next step. What should you do for now? Ah ... I'll be back ;-)

[psnider]

@filipesilva@wardbell
Thanks so much!
For now, my all-TypeScript micro-service project, https://github.com/psnider/people-service, is almost complete!
I'm trying to use best practices for everything, especially testing.

Now I'm only missing one thing:

• karma testing!
  I still have to go over the testing guide you reference above.

I'd greatly appreciate you keeping me up to date with any improvements to the karma documentation!

Please feel free to comment directly on my project, if you like.