I am using angular2.0 in my application
I installed angular2-material components and imported in required modules
I tried writing test case for one of my components
//about.component.html
<md-card>
<h3>{{title}}</h3>
<md-card-content>
<button md-raised-button class="md-raised md-primary primary-bg" (click)="fnnavigate()">CHOOSE </button>
</md-card-content>
</md-card>
//about.component.ts
import { Component, OnInit } from '@angular/core';
import { Router} from '@angular/router';
@Component({
selector: 'app-about',
templateUrl: 'about.component.html',
styleUrls: ['about.component.css']
})
export class AboutComponent implements OnInit {
constructor(
private router: Router
) { }
title:string="welcome";
ngOnInit() {
}
fnnavigate() {
this.router.navigateByUrl('app/home1');
}
}
//about.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { async, inject } from '@angular/core/testing';
import { AboutComponent } from './about.component';
import { Router} from '@angular/router';
class RouterStub {
navigateByUrl(url: string) { return url }
}
let comp: AboutComponent;
let fixture: ComponentFixture<AboutComponent>;
describe('Component: About', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [AboutComponent],
providers: [
{ provide: Router, useClass: RouterStub }
]
});
fixture = TestBed.createComponent(AboutComponent);
comp = fixture.componentInstance;
});
it('should have title property', () => {
comp.ngOnInit();
expect(comp.title).toBe("welcome");
});
it('should tell ROUTER to navigate when button clicked',
inject([Router], (router: Router) => {
comp.fnNavigate(); // trigger >
...................
}));
});
//package.json
...
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"angulartics2": "^1.1.9",
"core-js": "^2.4.1",
"process-nextick-args": "^1.0.7",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
}
...
when I do ng test
, I get:
Error: Template parse errors:
'md-card-content' is not a known element:
1. If 'md-card-content' is an Angular component, then verify that it is
part of this module.
2. If 'md-card-content' is a Web Component then add "CUSTOM_ELEMENTS_SCH
EMA" to the '@NgModule.schema' of this component to suppress the message.
AboutComponent@34:4
'md-card' is not a known element:
1. If 'md-card' is an Angular component, then verify that it is part of
this module.
2. If 'md-card' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to
the '@NgModule.schema' of this component to suppress the message. AboutComponent@32:0
at TemplateParser.parse (http://localhost:9876/_karma_webpack_/0.bun
dle.js:7320:19)
at RuntimeCompiler._compileTemplate (http://localhost:9876/_karma_we
bpack_/0.bundle.js:15619:51)
at http://localhost:9876/_karma_webpack_/0.bundle.js:15542:83
at Set.forEach (native)
at compile (http://localhost:9876/_karma_webpack_/0.bundle.js:15542:
47)
at RuntimeCompiler._compileComponents (http://localhost:9876/_karma_
webpack_/0.bundle.js:15544:13)
at RuntimeCompiler._compileModuleAndAllComponents (http://localhost:
9876/_karma_webpack_/0.bundle.js:15461:37)
at RuntimeCompiler.compileModuleAndAllComponentsSync (http://localho
st:9876/_karma_webpack_/0.bundle.js:15449:21)
at TestingCompilerImpl.compileModuleAndAllComponentsSync (http://loc
alhost:9876/_karma_webpack_/0.bundle.js:20491:35)
at TestBed._initIfNeeded (webpack:///D:/myFolder/transfer(9)/transfer/~
/@angular/core/bundles/core-testing.umd.js:1059:0 <- src/test.ts:4427:40)
Is there any way to fix this problem ?
The same way you imported the MdWhateverModule
into your main application, you should also import it into the test bed configuration
TestBed.configureTestingModule({
imports: [ MdWhateverModule ],
declarations: [ AboutComponent ]
})
Using the test bed, you're pretty much starting from scratch in creating a module for the test environment. So you need to include everything you're going to use for this test of the AboutComponent
.