如何对依赖于RC3路由器的组件进行单元测试？
如何对依赖于RC3路由器的组件进行单元测试？
提问于 2016-07-01 08:56:40
我正在尝试让单元测试与RC1一起使用“新的”路由器。我如何在3.0.0-alpha.8上实现这一点？
我的依赖关系：
"@angular/common": "2.0.0-rc.3",
"@angular/compiler": "2.0.0-rc.3",
"@angular/core": "2.0.0-rc.3",
"@angular/forms": "0.2.0",
"@angular/platform-browser": "2.0.0-rc.3",
"@angular/platform-browser-dynamic": "2.0.0-rc.3",
"@angular/router": "3.0.0-beta.2",我想测试使用指令的的组件routerLink：
import {ROUTER_DIRECTIVES} from '@angular/router';
@Component({
selector: 'app-topmenu',
template: require('./app-topmenu.tpl.html'),
directives: [ROUTER_DIRECTIVES]
})
export class TopMenu {<nav class="app-top-menu">
<a *ngFor="let link of links" [routerLink]="link.route">{{link.text}}</a>
</nav>以前，在使用rc1时，我使用这样的方法对组件进行单元测试：
import {Location} from '@angular/common';
import {SpyLocation} from '@angular/common/testing';
import {Router, RouteRegistry, ROUTER_DIRECTIVES, ROUTER_PRIMARY_COMPONENT} from '@angular/router-deprecated';
import {RootRouter} from '@angular/router-deprecated/src/router';
describe('Router link capabilities', () => {
beforeEachProviders(() => [
RouteRegistry,
{ provide: Location, useClass: SpyLocation },
{ provide: ROUTER_PRIMARY_COMPONENT, useValue: TestComponent },
{ provide: Router, useClass: RootRouter }
]);
it('creates routerLinks with the expected URLs', fakeAsync(
inject([TestComponentBuilder, Location], (tcb: TestComponentBuilder, spyLocation: SpyLocation) => {
tcb.overrideTemplate(TestComponent, `
<app-top-menu [links]='[
{ text: "A", route: ["/TestA/TestB/TestC"] },
{ text: "B", route: ["/TestA", "TestB", "TestC"] }
]'></app-top-menu>
<router-outlet></router-outlet>
`).createAsync(TestComponent)
.then((fixture: ComponentFixture<TestComponent>) => {
fixture.detectChanges();
spyLocation.simulateUrlPop('url-a/url-b/url-c');
tick();
fixture.detectChanges();
let nativeLinks: HTMLAnchorElement[] = fixture.nativeElement.querySelectorAll('a');
expect(nativeLinks.length).toBe(2);
expect(nativeLinks[0].textContent).toBe('A');
expect(nativeLinks[1].textContent).toBe('B');
});
})
));
});当我试图将routerLink导入从@angular/router-deprecated切换到从@angular/router导入ROUTER_DIRECTIVES时，我会收到一个错误：
ORIGINAL EXCEPTION: Platforms have to be created via `createPlatform`!我可以在网上找到的关于测试“新的”路由器和createPlatform消息的所有文档都提到了提供ROUTER_FAKE_PROVIDERS (似乎包含在rc2中，但随rc3一起提供)：
import {ROUTER_FAKE_PROVIDERS} from '@angular/router/testing';
// ^ [ts] Cannot find module '@angular/router/testing'.在.d.ts文件夹中搜索编译后的node_modules/@angular/router文件时，我也没有找到任何对测试/模拟/假货的引用。
是否有人迁移到rc3并开始工作了？
回答 1
Stack Overflow用户
发布于 2016-07-06 09:07:51
要测试RC3 (3.0.0-alpha.*)路由器，您需要做一些与以前版本中的路由器设置方式不同的事情。
您需要定义这样的RouterConfig：
import {provideRouter, RouterConfig} from '@angular/router';
export const APP_ROUTES : RouterConfig = [
{path: '', component: AppComponent},
// more paths
];
export const APP_ROUTE_PROVIDERS = [
provideRouter(APP_ROUTES)
];然后在你的测试文件中
import {ActivatedRoute, RouterConfig, Router} from '@angular/router';
class MockRouter { createUrlTree() {} }
class MockActivatedRoute { }
beforeEachProviders(() => [
provide(Router, { useClass: MockRouter }),
provide(ActivatedRoute, { useClass: MockActivatedRoute }),
]);
describe(){
// etc
}您的路由器现在是可测试的。
对于RC4：
import {ActivatedRoute, RouterConfig, Router} from '@angular/router';
class MockRouter { createUrlTree() {} }
class MockActivatedRoute { }
describe(){
beforeEach(() => [
addProviders([
provide(Router, { useClass: MockRouter }),
provide(ActivatedRoute, { useClass: MockActivatedRoute }),
]);
]);
//etc
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38141176
复制相关文章
相似问题
腾讯云开发者
