时间戳

首页 > 解决方案 > Angular 6 测试 - 使用另一个自定义服务的管道

angular - Angular 6 测试 - 使用另一个自定义服务的管道

问题描述

我有一个自定义管道，它在其构造函数中引用了另一个自定义服务，并使用了该服务中的一个方法：

import { Pipe, PipeTransform } from "@angular/core";
import { CodeService } from "../Services/code.service";

@Pipe({ name: "codePipe" })
export class CodePipe implements PipeTransform {
    codes: { [key: number]: any } = {};

    constructor(readonly codeService: CodeService) {
        this.getCodesFromService();
    }

    transform(index: number){
        return this.codes[index];
    }

    getCodesFromService() {
        this.codeService.getCodes().subscribe(data => {
            this.codes = data.reduce(
                (codes, code) => {
                    codes[code.index] = code.code;
                    return codes;
                }, {});
        });
    }
}

我想为管道设置一个简单的测试，如下所示：

import { TestBed, inject } from "@angular/core/testing";

import { CodePipe } from "./code.pipe";
import { CodeService } from "../Services/code.service";
import { MockCodeService } from "../Mocks/mock.code.service";

describe("code.pipe", () => {
    let pipe;

    beforeEach(() => TestBed.configureTestingModule({
        providers: [
            CodePipe,
            { provide: CodeService, useClass: MockCodeService}
        ]
    }));

    beforeEach(inject([CodePipe], p => pipe = p ));

    it("should return correct values", () => {
        expect(pipe.transform(0)).toBe("-");
    });
});

模拟服务如下所示：

import { Injectable } from "@angular/core";
import { Observable, Subject } from "rxjs";

@Injectable()
export class MockCodeService {
    getCodes(): Observable<string[]> {
        const result = [
            {index: 0, code: "-"}
        ];

        return Observable.create((observer) => {
            observer.next(result);
            observer.complete();
        });
    }
}

运行测试时在 afterAll 中抛出错误：

{
    "message": "An error was thrown in afterAll\n[object ErrorEvent] thrown",
    "str": "An error was thrown in afterAll\n[object ErrorEvent] thrown"
}

为什么测试不成功？我错过了什么？

标签： angularangular6angular-test

解决方案

someMethod返回一个 observable，Pipe 的transform方法返回这个方法的调用。这仍然是一个可观察的，不能与一个值进行比较。

例如，您可以订阅并比较那里的值：

pipe.transform(null, null).subscribe(res => expect(res).toBe('-'));

推荐阅读