测试在Jasmine中具有构造函数方法的Angular2管道 [英] Test an Angular2 Pipe that has a constructor method in Jasmine

问题描述

我正在测试具有构造函数的Angular Pipe的第一个障碍。

I am falling at the first hurdle testing an Angular Pipe that has a constructor.

我的管道如下：

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 。但这不是这个问题的主题。

I believe through several tutorials that it is correct to use an IterableDiffer for efficiency. But that isn't the topic of this question.

需要一个构造函数的事实，我相信这个简单测试失败的根源是：

The fact that a constructor is required, I believe is the root of this simple test failing:

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

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

测试失败并显示错误： TypeError：无法读取属性'find'未定义的

The test fails with the error: TypeError: Cannot read property 'find' of undefined

这个我（可能是错误的）假设是因为不同需要注入测试作为错误消息表明它是未定义。

This I (probably incorrectly) assume is because differs needs injecting in the test as the error message suggests that it is undefined.

我是否沿着正确的方向行驶我应该如何为Pipe写一个简单的测试？

Am I along the right lines and how should I write a simple test for the Pipe?

我试图注入 IterableDiffers 进入正在测试的管道;虽然这已经纠正了以前的错误，但我没有面对新的错误错误：无法解析IterableDiffers的所有参数:(？）。

I have tried to inject IterableDiffers into the Pipe being tested; while that has rectified the previous error I am not faced with a new one Error: Can't resolve all parameters for IterableDiffers: (?).

在终端中，错误无法调用类型缺少调用签名的表达式。类型'IterableDiffers'没有兼容的呼叫签名。显示。

两者都用不同的语言描述同样的问题。

Both are describing the same problem just in different language.

我更新的测试是：

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

非常感谢任何和所有帮助。

Any and all help is very much appreciated.

推荐答案

我几乎在那里进行了更新的测试。您不需要提供 IterableDiffers ：

I was very nearly there with my updated test. You do not need to provide IterableDiffers:

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中的语句：

I also noticed I had an unnecessary if statement in reverse.pipe.spec.ts:

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

transform 的第一个参数将永远是一个数组;当然，如果参数不是数组，那么TypeScript编译器会抛出 TypeError 。

The first argument of transform would always be an Array; of course, the TypeScript compiler would throw a TypeError if the argument was anything other than an Array.

为了完整性我的管道是：

For completeness my Pipe is:

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

这篇关于测试在Jasmine中具有构造函数方法的Angular2管道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！