测试组件，该组件取决于路由参数

Question

我有一个关于在Angular2中测试路由组件的问题。

这是一个简单的组件，取决于带有参数'foo'的路由。组件中的属性foo将设置为参数的值。

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';
@Component({
    selector: 'my-component',
    templateUrl: './my-component.html'
})
export class MyComponent implements OnInit
{
    foo: string;
    constructor(
        private route: ActivatedRoute
    )
    {
    }
    ngOnInit()
    {
        this.route.params.subscribe((params: Params) => {
            this.foo = params['foo'];
        });
    }
}

现在我想测试，如果将组件使用路由创建，则将正确设置参数。所以我想拥有expect(component.foo).toBe('3');。

import {TestBed, ComponentFixture, async} from '@angular/core/testing';
import {DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {Params, ActivatedRoute} from '@angular/router';
import {Observable} from 'rxjs';
import {MyComponent} from './MyComponent';
describe('MyComponent', () => {
    let mockParams, mockActivatedRoute;
    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;
    let debugElement: DebugElement;
    let element: HTMLElement;
    beforeEach(async(() => {
        mockParams = Observable.of<Params>({foo: '3'});
        mockActivatedRoute = {params: mockParams};
        TestBed.configureTestingModule({
            declarations: [
                MyComponent
            ],
            providers: [
                {provide: ActivatedRoute, useValue: mockActivatedRoute}
            ]
        }).compileComponents();
    }));
    beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        debugElement = fixture.debugElement;
        element = debugElement.nativeElement;
        fixture.detectChanges();
    });
    it('should set foo to "3"', () => {
        expect(component.foo).toBe('3');
    });
});

我的问题是我不知道该如何等待，直到解决路线完成为止，我可以做一个expect()。在此示例中，测试失败了，它说"期望不确定为'3'。"。

有人可以帮我吗？！

谢谢！

Answer 1

好吧，在Angular2测试文档中阅读一点，我看到了他们的ActivatedRouteStub类。我创建了这个存根班，并用这个新类代替了我的原始模拟。现在它正在工作（识别第一个之前的第二行mockActivatedRoute.testParams = {foo: '3'};）。

import {TestBed, ComponentFixture, async} from '@angular/core/testing';
import {DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {Params, ActivatedRoute} from '@angular/router';
import {Observable} from 'rxjs';
import {MyComponent} from './MyComponent';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class ActivatedRouteStub
{
    private subject = new BehaviorSubject(this.testParams);
    params = this.subject.asObservable();
    private _testParams: {};
    get testParams() { return this._testParams; }
    set testParams(params: {}) {
        this._testParams = params;
        this.subject.next(params);
    }
}
describe('MyComponent', () => {
    let mockParams, mockActivatedRoute;
    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;
    let debugElement: DebugElement;
    let element: HTMLElement;
    beforeEach(async(() => {
        mockActivatedRoute = new ActivatedRouteStub();
        TestBed.configureTestingModule({
            declarations: [
                MyComponent
            ],
            providers: [
                {provide: ActivatedRoute, useValue: mockActivatedRoute}
            ]
        }).compileComponents();
    }));
    beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        debugElement = fixture.debugElement;
        element = debugElement.nativeElement;
        mockActivatedRoute.testParams = {foo: '3'};
        fixture.detectChanges();
    });
    it('should set foo to "3"', () => {
        expect(component.foo).toBe('3');
    });
});

您认为这是正确的方法吗？