测试组件，这取决于路由参数 [英] Testing a component, which depends on a route param

问题描述

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

I have a question about testing a routed component in angular2.

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

Here is a simple component, which depends on a route with a parameter 'foo'. The attribute foo in the component will be set to the value of the parameter.

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'）; 。

Now I want to test, that if the component will be created with the route, the param will be set correctly. So somewhere I want to have 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'。。

My problem is that I don't know how to wait, until resolving of the route is finished, and I can do an expect(). And in this example the test fails and it says "Expected undefined to be '3'.".

有人可以帮助我吗？！

谢谢！

推荐答案

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

Okay, reading a little bit in the angular2 testing documentation, I saw their ActivatedRouteStub class. I have created this stub class, and have replaced my original mock with this new class. Now it is working (recognize the line mockActivatedRoute.testParams = {foo: '3'}; in the second beforeEach).

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');
    });
});

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

Do you think this is the right way?

这篇关于测试组件，这取决于路由参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！