Skip to content
This repository was archived by the owner on Feb 26, 2024. It is now read-only.

chore: update specs to TestBed #184

Merged
merged 1 commit into from
Aug 19, 2016
Merged

Conversation

Foxandxss
Copy link
Member

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

@Foxandxss
Copy link
Member Author

Fixed, @filipesilva review please.

@Foxandxss Foxandxss force-pushed the specs-rc5 branch 3 times, most recently from 35c8f2c to e9fea60 Compare August 17, 2016 21:06
})
.then(__karma__.start, __karma__.error);
System.import('@angular/core/testing')
.then(function (coreTesting) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Contributor

Have that nit, otherswise LGTM.

@Foxandxss
Copy link
Member Author

Changed that.

@Foxandxss Foxandxss merged commit d8b3ba7 into angular:master Aug 19, 2016
@psnider
Copy link

psnider commented Aug 19, 2016

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 [email protected]: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
Copy link

psnider commented Aug 19, 2016

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
Copy link
Contributor

@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
Copy link

psnider commented Aug 19, 2016

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
Copy link
Contributor

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
Copy link

psnider commented Aug 19, 2016

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:

@filipesilva
Copy link
Contributor

filipesilva commented Aug 19, 2016

What bits of it make it a struggle, specifically?

@Foxandxss Foxandxss deleted the specs-rc5 branch August 19, 2016 23:14
@psnider
Copy link

psnider commented Aug 19, 2016

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
Copy link
Contributor

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
Copy link
Contributor

wardbell commented Oct 6, 2016

@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
Copy link

psnider commented Oct 16, 2016

@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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants