Angular + Jasmine：无法监视ActivatedRoute.queryParams

Question

如何监视预期返回Observable的存根角度服务方法，例如ActivatedRoute.queryParams。这是我失败的规范：

import { TestBed, ComponentFixture } from "@angular/core/testing";
import { RivalChartComponent } from "./rival-chart-component";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { ActivatedRoute, RouterModule, Router } from "@angular/router";
import { appRoutes } from "../app.routes";
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/observable/of';

describe('RivalChartComponent', () => {

    let component: RivalChartComponent;
    let fixture: ComponentFixture<RivalChartComponent>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [
                RivalChartComponent
            ],
            imports: [FormsModule, ReactiveFormsModule],
            providers: [
                {provide: ActivatedRoute, useValue: {queryParams: Observable.of({tags:'all'})}},
                {provide: Router, useValue: {}}
            ]
        });
        fixture = TestBed.createComponent(RivalChartComponent);
        component = fixture.componentInstance;
    });

    it('should init selectedTags as empty string when no query parameter is set', () => {
        spyOn(fixture.debugElement.injector.get(ActivatedRoute), 'queryParams').and.returnValue(Observable.of({tags:null}));
        component.ngOnInit();
        expect(component.selectedTags.value).toEqual('')
    });

});

这里是相应的源代码：

import { Component, OnInit } from '@angular/core';
import { Rival } from '../domain/rival';
import { Route, ActivatedRoute, Router } from '@angular/router';
import { FormGroup, FormControl } from '@angular/forms';
import { CompairValidators } from '../validators/CompairValidators';

@Component({
    moduleId: module.id,
    selector: 'cp-rival-chart',
    templateUrl: 'rival-chart.html'

})
export class RivalChartComponent implements OnInit {

    rivals: Array<Rival> = [];
    selectedTags: FormControl;

    constructor(private route: ActivatedRoute, private router: Router) {
        this.selectedTags = new FormControl('', CompairValidators.trimmedArrayMinLengthValidator(3,1));
    }

    ngOnInit() {
        this.updateInputFromQueryParams();
    }

    updateInputFromQueryParams() {
        this.route.queryParams.subscribe((params) => {
            this.selectedTags.patchValue(this.createInputTagsFromUrlTags(params.tags));
        });
    }

    createInputTagsFromUrlTags(tags: String): string {
        if (!tags) {
            return '';
        }
        const tagsArray = tags.split('+');
        const cleanedTags = tagsArray
            .filter((tag) => tag && tag.trim());
        return '#' + cleanedTags.join(' #');
    }

}

该代码应该从ActivatedRoute服务给出的查询参数named tags初始化selectedTags FormControl。如果没有给出查询参数，则应使用空String初始化selectedTags。为了测试它，我想监视ActivatedRoutes.queryParams方法并为键标签返回一个空字符串，但不幸的是它不起作用。而是调用最初传递的ActivatedRoute存根的Observable，它返回键标记的字符串'all'。因此，我的测试失败，并显示以下消息：

预期'#all'等于''。

您可能会想为什么ActivatedRoute存根不会直接返回空字符串或空字符串。那是因为我的规范中实际上有其他测试，我没有在这里添加，以便专注于我的主要问题。

Answer 1

你的测试应该在async测试区内执行，以处理Observable和Promise。有几种方法可以做到这一点

• fakeAsync
• 异步
• 完成如此处所述https://angular.io/guide/testing#component-with-async-service

以下是async关键字的示例：

it('should init selectedTags as empty string when no query parameter is set', async(() => {
        spyOn(fixture.debugElement.injector.get(ActivatedRoute), 'queryParams').and.returnValue(Observable.of({tags:null}));
        component.ngOnInit();
        expect(component.selectedTags.value).toEqual('')
    }));