使用angular2材料组件在angular2.0中运行ng测试时失败的测试用例
我在应用程序中使用angular2.0 我安装了angular2材料组件,并导入所需模块 我试着为我的一个组件编写测试用例 //关于.component.html使用angular2材料组件在angular2.0中运行ng测试时失败的测试用例,angular,angular2-testing,angular2-material,Angular,Angular2 Testing,Angular2 Material,我在应用程序中使用angular2.0 我安装了angular2材料组件,并导入所需模块 我试着为我的一个组件编写测试用例 //关于.component.html <md-card> <h3>{{title}}</h3> <md-card-content> <button md-raised-button class="md-raised md-primary primary-bg" (click)="f
<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>
//关于.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 >
...................
}));
});
当我进行ng测试时,我得到:
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)
错误:模板分析错误:
“md卡内容”不是已知元素:
1.如果“md卡内容”是一个角度组件,则验证它是否为角度组件
本模块的一部分。
2.如果“md卡内容”是Web组件,则添加“自定义元素”
EMA“到该组件的'@NgModule.schema'以抑制消息。
AboutComponent@34:4
“md卡”不是已知元素:
1.如果“md卡”是一个角度组件,则验证它是
这个模块。
2.如果“md卡”是Web组件,则将“自定义元素\架构”添加到
此组件的'@NgModule.schema'用于抑制消息。AboutComponent@32:0
在TemplateParser.parse(http://localhost:9876/_karma_webpack_/0.bun
(见附件js:7320:19)
在运行时编译器上(http://localhost:9876/_karma_we
bpack_/0.bundle.js:15619:51)
在http://localhost:9876/_karma_webpack_/0.bundle.js:15542:83
at Set.forEach(本机)
编译时(http://localhost:9876/_karma_webpack_/0.bundle.js:15542:
47)
在运行时编译器上(http://localhost:9876/_karma_
webpack\uu0.bundle.js:15544:13)
在运行时编译器上。\编译emoduleandallcomponents(http://localhost:
9876/_karma_网页u/0.bundle.js:15461:37)
在RuntimeCompiler.CompileModule和AllComponents同步(http://localho
st:9876/_karma_网页u/0.bundle.js:15449:21)
在测试CompilerImpl.CompileModule和所有组件时同步(http://loc
alhost:9876/_karma_webpack u/0.bundle.js:20491:35)
在试验台上。如果需要(webpack:///D:/myFolder/transfer(9) /转移/~
/@angular/core/bundles/core testing.umd.js:1059:0与将MdWhateverModule
导入主应用程序的方式相同,还应将其导入测试台配置
TestBed.configureTestingModule({
imports: [ MdWhateverModule ],
declarations: [ AboutComponent ]
})
使用测试平台,您基本上是从零开始为测试环境创建模块。因此,您需要包括将用于测试AboutComponent
的所有内容。谢谢,如果我在about component中有其他组件,让我们说一下about11.component,about22.component,并在about.c中使用它们component.html使用选择器以及如何测试它们,您需要声明它们的最佳方法是什么,或者如果您不关心测试它们的功能,您可以使用schema:CUSTOM\u ELEMENTS\u schema
忽略它们。或者您可以创建虚拟组件来代替它们,并将它们添加到声明中可能的dupl副本
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)
TestBed.configureTestingModule({
imports: [ MdWhateverModule ],
declarations: [ AboutComponent ]
})