angular - 在 Jasmine 中测试具有构造函数方法的 Angular2 管道

Question

我遇到了测试具有构造函数的 Angular Pipe 的第一个障碍。

我的管道如下:

反向管道.ts

import {
  IterableDiffer,
  IterableDiffers,
  Pipe,
  PipeTransform
} from '@angular/core';

@Pipe({
  name: 'reverse',
  pure: false
})
export class ReversePipe implements PipeTransform {

  private cached: Array<any>;
  private differ: IterableDiffer<Array<any>>;

  constructor(private differs: IterableDiffers) {
    this.differ = this.differs.find([]).create(null);
  }

  transform(array: Array<any>): Array<any> {
    // TODO: Throw an error if `array` isn't an Array
    if (Array.isArray(array) === false) return [];

    const changes = this.differ.diff(array);

    if (changes) this.cached = array.slice().reverse();

    return this.cached;
  }
}

通过几个教程，我相信使用 IterableDiffer 提高效率是正确的。但这不是这个问题的主题。

我认为需要构造函数的事实是这个简单测试失败的根源:

反向.pipe.spec.ts

import { ReversePipe } from './reverse.pipe';

describe('ReversePipe', () => {
  it('create an instance', () => {
    const pipe = new ReversePipe();
    expect(pipe).toBeTruthy();
  });
});

测试失败并出现错误:TypeError: Cannot read property 'find' of undefined

我(可能错误地)假设这是因为 differs 需要在测试中注入(inject)，因为错误消息表明它是 undefined。

我的思路是否正确？我应该如何为管道编写一个简单的测试？

更新

我试图将 IterableDiffers 注入(inject)到被测试的 Pipe 中；虽然这已经纠正了之前的错误，但我没有遇到新的错误 Error: Can't resolve all parameters for IterableDiffers: (?).

在终端中，错误 Cannot invoke an expression which type lacks a call signature。类型“IterableDiffers”没有兼容的调用签名。显示。

两者都在用不同的语言描述同一个问题。

我更新的测试是:

反向.pipe.spec.ts

import { IterableDiffer, IterableDiffers } from '@angular/core';
import { TestBed, inject } from '@angular/core/testing';

import { ReversePipe } from './reverse.pipe';

describe('ReversePipe', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [IterableDiffers]
    });
  });

  // it('create an instance', () => {
  //   const array = [ 1, 2, 3 ];
  //   const pipe = new ReversePipe(new IterableDiffers);
  //   expect(pipe).toBeTruthy();
  // });

  it('create an instance', inject([IterableDiffers], (iterableDiffers: IterableDiffers) => {
    const array = [ 1, 2, 3 ];
    const pipe = new ReversePipe(iterableDiffers);

    expect(pipe).toBeTruthy();
  }));
});

非常感谢任何帮助。

Answer 1

我的更新测试已经快完成了。您无需提供 IterableDiffers:

反向.pipe.spec.ts

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

import { ReversePipe } from './reverse.pipe';

describe('ReversePipe', () => {
  it('should create an instance', inject([ IterableDiffers ], (iterableDiffers: IterableDiffers) => {
    const pipe = new ReversePipe(iterableDiffers);

    expect(pipe).toBeTruthy();
  }));

  it('should reverse the array of type Array<number>', inject([ IterableDiffers ], (iterableDiffers: IterableDiffers) => {
    const array = [ 1, 2, 3 ];
    const pipe = new ReversePipe(iterableDiffers);

    expect(pipe.transform(array)).toEqual([ 3, 2, 1 ]);
  }));

  it('should reverse the array of type Array<string>', inject([ IterableDiffers ], (iterableDiffers: IterableDiffers) => {
    const array = [ 'apple', 'banana', 'clementine' ];
    const pipe = new ReversePipe(iterableDiffers);

    expect(pipe.transform(array)).toEqual([ 'clementine', 'banana', 'apple' ]);
  }));
});

我还注意到我在 reverse.pipe.spec.ts 中有一个不必要的 if 语句:

// TODO: Throw an error if `array` isn't an Array
if (Array.isArray(array) === false) return [];

transform 的第一个参数总是Array；当然，如果参数不是 Array，TypeScript 编译器会抛出一个 TypeError。

为了完整起见，我的 Pipe 是:

反向管道.ts

import {
  IterableDiffer,
  IterableDiffers,
  Pipe,
  PipeTransform
} from '@angular/core';

@Pipe({
  name: 'reverse',
  pure: false
})
export class ReversePipe implements PipeTransform {

  private cached: Array<any>;
  private differ: IterableDiffer<Array<any>>;

  constructor(private differs: IterableDiffers) {
    this.differ = this.differs.find([]).create(null);
  }

  public transform(array: Array<any>): Array<any> {
    const changes = this.differ.diff(array);

    if (changes) this.cached = array.slice().reverse();

    return this.cached;
  }
}