我是Angular2的新手,特别是在测试方面。我在网上搜索了一个解决方案,但是有太多旧的代码示例不再适用了。所以我来这里问你。
当我用“业力测试”进行测试时。我收到以下错误:
错误:./ NavbarItemComponent类NavbarItemComponent中的错误 - 内联模板:1:1引起:undefined不是对象(评估 config / karma / karma-test-shim.js中的'config.forEach')(第20623行)
app.component.spec.ts
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { NavbarVerticalComponent } from './navbar-vertical/navbar-vertical.component';
import { NavbarItemComponent } from './navbar-item/navbar-item.component';
import { Router } from '@angular/router'
import { RouterTestingModule } from '@angular/router/testing';
class MockRouter extends Router {
navigate = jasmine.createSpy('navigate');
routerState: RouterState;
}
describe('App', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [AppComponent, NavbarVerticalComponent, NavbarItemComponent ],
providers: [
{ provide: Router, useClass: MockRouter }
],
imports: [RouterTestingModule]
});
});
it ('should work', () => {
let fixture = TestBed.createComponent(AppComponent);
expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent');
});
});
答案 0 :(得分:1)
我使用https://angular.io/docs/ts/latest/guide/testing.html#!#router-outlet-component
中的router-stubs.ts文件// export for convenience.
export { ActivatedRoute, Router, RouterLink, RouterOutlet} from '@angular/router';
import { Component, Directive, Injectable, Input } from '@angular/core';
import { NavigationExtras } from '@angular/router';
@Directive({
selector: '[routerLink]',
host: {
'(click)': 'onClick()'
}
})
export class RouterLinkStubDirective {
@Input('routerLink') linkParams: any;
navigatedTo: any = null;
onClick() {
this.navigatedTo = this.linkParams;
}
}
@Component({selector: 'router-outlet', template: ''})
export class RouterOutletStubComponent { }
@Injectable()
export class RouterStub {
navigate(commands: any[], extras?: NavigationExtras) { }
}
// Only implements params and part of snapshot.params
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class ActivatedRouteStub {
// ActivatedRoute.params is Observable
private subject = new BehaviorSubject(this.testParams);
params = this.subject.asObservable();
// Test parameters
private _testParams: {};
get testParams() { return this._testParams; }
set testParams(params: {}) {
this._testParams = params;
this.subject.next(params);
}
// ActivatedRoute.snapshot.params
get snapshot() {
return { params: this.testParams };
}
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
更新后的app.component.spec.ts
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { NavbarVerticalComponent } from './navbar-vertical/navbar-vertical.component';
import { NavbarItemComponent } from './navbar-item/navbar-item.component';
import { Router } from '@angular/router'
import { RouterOutletStubComponent, RouterLinkStubDirective } from './testing/router-stubs';
describe('App', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [AppComponent,
NavbarVerticalComponent,
NavbarItemComponent,
RouterLinkStubDirective,
RouterOutletStubComponent]
});
});
it ('should work', () => {
let fixture = TestBed.createComponent(AppComponent);
expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent');
});
});
现在有效。