angular – 测试组件,这取决于路径参数

发布时间：2020-12-17 17:32:40 所属栏目：安全来源：网络整理

导读：我有一个关于在an??gular2中测试路由组件的问题. 这是一个简单的组件,它依赖于带有参数’foo’的路由.组件中的属性foo将设置为参数的值. import {Component,OnInit} from '@angular/core';import {ActivatedRoute,Params} from '@angular/router';@Component

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

这是一个简单的组件,它依赖于带有参数’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'];
        });
    }
}

现在我想测试一下,如果使用路径创建组件,则将正确设置param.所以我想要的地方(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′.”.

有谁可以帮助我吗？！

谢谢！

解决方法

好的,在angular2测试文档中稍微阅读一下,我看到了他们的ActivatedRouteStub类.我创建了这个存根类,并用这个新类替换了我的原始模拟.现在它正在工作(识别行mockActivatedRoute.testParams = {foo：’3′};在第二个beforeEach中.

import {TestBed,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',mockActivatedRoute;

    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;
    let debugElement: DebugElement;
    let element: HTMLElement;

    beforeEach(async(() => {
        mockActivatedRoute = new ActivatedRouteStub();

        TestBed.configureTestingModule({
            declarations: [
                MyComponent
            ],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');
    });
});

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!