大佬教程收集整理的这篇文章主要介绍了在angular2中测试router-outlet组件,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
//home.component.html
<router-outlet></router-outlet>
//home.component.ts
import { Component,OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { HomeservicE} from './shared/services/home.service'; @Component({ // modulEID: module.id,SELEctor: 'app-home',templateUrl: 'home.component.html',styleUrls: ['home.component.css'],providers:[Homeservice] }) export class HomeComponent implements OnInit { constructor(private service:Homeservice,private route:router) { } ngOnInit() { if(this.service.isAuthenticated()){ this.route.navigateByUrl('dashboard/main'); } } }
//home.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 { HomeComponent } from './home.component'; import { Router} from '@angular/router'; import { Homeservice } from './shared/services/home.service'; class Routerstub { navigateByUrl(url: String) { return url } } class mockHomeservice { isAuthenticated() { return true } } let comp: HomeComponent; let fixture: ComponentFixture<HomeComponent>; describe('Component: HomeComponent',() => { beforeEach(() => { TESTBed.configureTesTingModule({ declarations: [HomeComponent],providers: [ { provide: Router,useClass: Routerstub },{ provide: Homeservice,useClass: mockHomeservice },] }); fixture = TESTBed.createComponent(HomeComponent); comp = fixture.componenTinstance; }); it('should tell ROUTER to navigate to dashboard/main if authencated',inject([Router,Homeservice],(router: Router,homeservice: HomeservicE) => { const spy = spyOn(router,'navigateByUrl'); comp.ngOnInit(); if (homeservice.isAuthenticated()) { const navArgs = spy.calls.first().args[0]; expect(navArgs).toBe('dashboard/main'); } })); });
我收到以下错误
Error: Template parse errors: 'router-outlet' is not a kNown element: 1. If 'router-outlet' is an Angular component,then verify that it is pa rt of this module. 2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_scheR_152_11845@ A" to the '@NgModule.scheR_152_11845@a' of this component to suppress this message. ("<div class=""> [ERROR ->]<router-outlet></router-outlet> </div> "): HomeComponent@1:4 at TemplateParser.parse (http://localhost:9876/_karma_webpack_/0.bun dle.js:21444:19) at RuntimeCompiler._compileTemplate (http://localhost:9876/_karma_we bpack_/0.bundle.js:6569:51) at http://localhost:9876/_karma_webpack_/0.bundle.js:6492:83 at Set.forEach (nativE) at compile (http://localhost:9876/_karma_webpack_/0.bundle.js:6492:4 7) at RuntimeCompiler._compileComponents (http://localhost:9876/_karma_ webpack_/0.bundle.js:6494:13) at RuntimeCompiler._compileModuleAndAllComponents (http://localhost: 9876/_karma_webpack_/0.bundle.js:6411:37) at RuntimeCompiler.compileModuleAndAllComponentsSync (http://localho st:9876/_karma_webpack_/0.bundle.js:6399:21) at TesTingCompilerImpl.compileModuleAndAllComponentsSync (http://loc alhost:9876/_karma_webpack_/0.bundle.js:10203:35) at TESTBed._initIfNeeded (webpack:///D:/myapp/transfer(9)/transfer/~ /@angular/core/bundles/core-tesTing.umd.js:1059:0 <- src/test.ts:4943:40)
我在做什么错?
提前致谢
如果你不关心测试任何实际的实际路由(我注意到模拟路由器),那么你可以让Angular忽略< router-outlet>通过在测试床配置中添加以下元素.
import { CUSTOM_ELEMENTS_scheR_152_11845@A } from '@angular/core'; TESTBed.configureTesTingModule({ scheR_152_11845@as: [ CUSTOM_ELEMENTS_scheR_152_11845@A ] });
只是一个建议.您希望测试组件上的行为,并且行为是在创建组件并对用户进行身份验证时,应该调用路由器导航方法.所以我们应该测试一下调用导航方法.我们怎么做?使用Spies.您可以通过navigateByUrl方法创建一个间谍,然后您可以使用jasmine检查该方法是否被调用
import { getTESTBed } from '@angular/core/tesTing'; class Routerstub { navigateByUrl = jasmine.createSpy('navigateByUrl'); } it('should navigate',() => { fixture.detectChanges(); let router: Router = getTESTBed().get(Router); expect(router.navigateByUrl).toHaveBeenCalledWith('dashboard/main'); });
因为@Component上有提供者:[Homeservice],它会覆盖测试模块配置中的提供者(即模拟).在这种情况下,您应该覆盖组件提供程序
TESTBed.configureTesTingModule({}); TESTBed.overrideComponent(HomeComponent,{ set: { providers: [ { provide: Homeservice,useClass: mockHomeservice } ] } })
以上是大佬教程为你收集整理的在angular2中测试router-outlet组件全部内容,希望文章能够帮你解决在angular2中测试router-outlet组件所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。