I'm trying to understand unit testing in Angular2 v2.0.0. I used angular-cli to generate a project, and am running unit tests by launching 'ng test'. The cli generates a sample component including tests.
I have expanded the sample component test by trying to create a host component in which I might test future custom components. Similar to the method I found here:
unit testing using host components
The problem is that after instantiating the test component, it fails a test to look for a bound value inside the test component. It's the last test in the sequence here.
/* tslint:disable:no-unused-variable */
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { Component, Input, OnInit } from '@angular/core';
// let's create a host component to test subcomponents
@Component({
template: `<span>{{testitemname}}</span>`
})
class TestComponent {
testitemname: 'testitem';
testitemtags: ['tag1', 'tag2', 'tag3'];
}
describe('App: Testhostcomp', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
TestComponent
],
});
});
it('should create the app', async(() => {
let fixture = TestBed.createComponent(AppComponent);
let app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it(`should have as title 'app works!'`, async(() => {
let fixture = TestBed.createComponent(AppComponent);
let app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app works!');
}));
it('should render title in a h1 tag', async(() => {
let fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
let compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('app works!');
}));
// this test fails
it('should render the property value inside the test component', async(() => {
let fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
let compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('span').textContent).toContain('testitem');
}));
});
It fails with the following error:
26 10 2016 10:48:15.456:INFO [Chrome 54.0.2840 (Windows 7 0.0.0)]: Connected on socket /#mcN6GltigqminZ3yAAAA with id 34237141
Chrome 54.0.2840 (Windows 7 0.0.0) App: Testhostcomp should render the property value inside the test component FAILED
Expected '' to contain 'testitem'.
at webpack:///C:/Angular2Projects/testhostcomp/src/app/app.component.spec.ts:49:55 <- src/test.ts:12000:60
at ZoneDelegate.invoke (webpack:///C:/Angular2Projects/testhostcomp/~/zone.js/dist/zone.js:232:0 <- src/test.ts:20985:26)
at AsyncTestZoneSpec.onInvoke (webpack:///C:/Angular2Projects/testhostcomp/~/zone.js/dist/async-test.js:49:0 <- src/test.ts:13735:39)
at ProxyZoneSpec.onInvoke (webpack:///C:/Angular2Projects/testhostcomp/~/zone.js/dist/proxy.js:76:0 <- src/test.ts:14427:39)
Chrome 54.0.2840 (Windows 7 0.0.0): Executed 4 of 4 (1 FAILED) (0 secs / 0.196 secs)
Chrome 54.0.2840 (Windows 7 0.0.0) App: Testhostcomp should render the property value inside the test component FAILED
Expected '' to contain 'testitem'.
at webpack:///C:/Angular2Projects/testhostcomp/src/app/app.component.spec.ts:49:55 <- src/test.ts:12000:60
at ZoneDelegate.invoke (webpack:///C:/Angular2Projects/testhostcomp/~/zone.js/dist/zone.js:232:0 <- src/test.ts:20985:26)
at AsyncTestZoneSpec.onInvoke (webpack:///C:/Angular2Projects/testhostcomp/~/zone.js/dist/async-test.js:49:0 <- src/test.ts:13735:39)
Chrome 54.0.2840 (Windows 7 0.0.0): Executed 4 of 4 (1 FAILED) (0.273 secs / 0.196 secs)
I noticed that when I changed {{testitemname}} to 'testitem', the test passes. So I think it might have something to do with binding? I don't understand why this doesn't work. Thank you in advance for your help.
[1]: https://angular.io/docs/ts/latest/guide/testing.html#!#component-inside-test-host "host components"
