Question

错误说明

Angular版本：2.3.1

我的单元测试无法创建组件 - 我知道这个问题与[routerLink]和[routerLinkActive]指令有关，因为从模板中删除它们允许测试创建组件。

TEMPLATE

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
  <button class="navbar-toggle" data-toggle="collapse" data-target="#iotahoe-top-navigation">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" [routerLink]="['/']">IoTahoe</a>
</div>
<div class="collapse navbar-collapse" id="iotahoe-top-navigation">
  <ul *ngIf="isAuthenticated()" class="nav navbar-nav navbar-right">
    <li [routerLinkActive]="['active']"><a [routerLink]="['/dashboard']">Dashboard</a></li>
    <li [routerLinkActive]="['active']"><a [routerLink]="['/browse']">Browse</a></li>
    <li [routerLinkActive]="['active']"><a [routerLink]="['/admin']">Admin</a></li>
    <li [routerLinkActive]="['active']"><a (click)="onLogout()" style="cursor: pointer;">Logout</a></li>
  </ul>
</div>

打字稿

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from   '../../authentication/authentication.service';
import { Router } from '@angular/router';

@Component({
moduleId: module.id.toString(),
selector: 'app-top-navbar',
templateUrl: './top-navbar.component.html',
styleUrls: ['./top-navbar.component.css']
})
export class TopNavbarComponent implements OnInit {

constructor(private authenticationService: AuthenticationService, private router: Router) { }

ngOnInit() {
}

isAuthenticated() {
    return this.authenticationService.isLoggedIn;
}

onLogout() {
    this.authenticationService.logout().subscribe(() => {
        return this.router.navigate(['/login']);
    });
}

}

测试规范

/* tslint:disable:no-unused-variable */
import {async, ComponentFixture, TestBed, inject} from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import {DebugElement, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, Component} from '@angular/core';
import { RouterTestingModule } from '@angular/router/testing';
import { Location, CommonModule } from '@angular/common';
import { TopNavbarComponent } from './top-navbar.component';
import { AuthenticationService } from '../../authentication/authentication.service';
import { Router } from '@angular/router';
import {ReactiveFormsModule} from "@angular/forms";

@Component({
template: ''
})
class DummyComponent {
}


describe('TopNavbarComponent', () => {
let component: TopNavbarComponent;
let fixture: ComponentFixture<TopNavbarComponent>;
let authenticationService: AuthenticationService;

beforeEach(async(() => {
    const authenticationServiceStub = {
        isLoggedIn: false
    };

    const routerStub = {
        navigate: jasmine.createSpy('navigate'),
        navigateByUrl: jasmine.createSpy('navigateByUrl')
    };

    TestBed.configureTestingModule({
        declarations: [ TopNavbarComponent, DummyComponent ],
        imports:[CommonModule, ReactiveFormsModule,     RouterTestingModule.withRoutes(
            [
                { path: '/', component:DummyComponent },
                { path: '/login', component:DummyComponent },
                { path: '/dashboard', component:DummyComponent },
                { path: '/browse', component:DummyComponent },
                { path: '/admin', component:DummyComponent }
            ])],
        providers: [
            { provide: AuthenticationService, useValue: authenticationServiceStub },
            { provide: Router, useValue: routerStub }
            ]
    }).compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(TopNavbarComponent);
    component = fixture.componentInstance;
    authenticationService = TestBed.get(AuthenticationService);
    fixture.detectChanges();
});

it('should create', () => {
    expect(component).toBeTruthy();
});
});

错误

zone.js：155未捕获错误：包中出错：407：9：6引起：不能读取未定义的属性“root” 在ViewWrappedError.Error（本机）在ViewWrappedError.ZoneAwareError（localhost：9876 / base / src / test.ts:133296:33）在ViewWrappedError.BaseError [作为构造函数]（localhost：9876 / base / src / test.ts:35630:16）在ViewWrappedError.WrappedError [作为构造函数]（localhost：9876 / base / src / test.ts:35695:16）在新的ViewWrappedError（localhost：9876 / base / src / test.ts:68018:16）在DebugAppView._rethrowWithContext（localhost：9876 / base / src / test.ts:108242:23）在DebugAppView.create（localhost：9876 / base / src / test.ts:108142:18）在DebugAppView.View_TopNavbarComponent_Host0.createInternal（/DynamicTestModule/TopNavbarComponent/host.ngfactory.js:16:19）在DebugAppView.AppView.createHostView（localhost：9876 / base / src / test.ts:107700:21）在DebugAppView.createHostView（localhost：9876 / base / src / test.ts:108156:52）在ComponentFactory.create（localhost：9876 / base / src / test.ts:49830:25）在initComponent（localhost：9876 / base / src / test.ts:6425:53）在ZoneDelegate.invoke（localhost：9876 / base / src / test.ts:132727:26）在ProxyZoneSpec.onInvoke（localhost：9876 / base / src / test.ts:95802:39）在ZoneDelegate.invoke（localhost：9876 / base / src / test.ts:132726:32）Zone.runTask @ zone.js：155ZoneTask.invoke @ zone.js：345data.args。（匿名函数） @ zone.js：1376

Answer 1

routerLink指令需要一个真正的路由器，但你正在嘲笑它。我可以看到你做的几件事：

如果您不打算在测试期间单击链接，那么您可以模拟这些指令只是制作“noop”指令，这样编译器就不会抱怨。 e.g。
```
@Directive({
    selector: '[routerLink], [routerLinkActive]'
})
class DummyRouterLinkDirective {}
```
然后将其添加到测试模块的declarations。有了这个，您根本不需要配置RouterTestingModule。你可以摆脱它。
此外，如果您不打算单击测试，另一个选项（无需创建伪指令）只是忽略缺失指令的错误：
```
schemas: [ NO_ERRORS_SCHEMA ]
```
您可以将其添加到测试模块配置中（如here所示）。在某些情况下这可能不合适，因为它也可能忽略您实际想要检测到的错误，这可能导致难以调试测试。
如果您真的想点击链接并测试路由，那么您可以使用真正的路由器。您可以使用Location查看如何测试导航的示例，如this post中所示。

Answer 2

对我而言，非模拟路由的解决方案有效。但我发现我还需要添加一个

<router-outlet></router-outlet>

使用“routerlink active”组件。

Angular 2单元测试 - 无法读取未定义的属性“root”

2 个答案: