測試用例angular2.0與

Question

我在我的應用程序

我安裝angular2材料成分和需要的模塊採用進口angular2.0 angular2材料組件的運行NG測試時，

我試着寫失敗測試用例我的部件之一

//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" 
    } 

... 

當我做ng test，我得到：

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) 

是有沒有辦法解決這個問題？

Answer 1

導入的MdWhateverModule到主應用程序相同的方式，你也應該將其導入到測試臺配置

TestBed.configureTestingModule({ 
    imports: [ MdWhateverModule ], 
    declarations: [ AboutComponent ] 
}) 

使用試驗檯，你幾乎從零開始創建一個模塊爲測試環境。所以你需要包含你要用於這個AboutComponent測試的所有東西。