我正在测试一个有构造函数的Angular Pipe的第一个障碍。
我的管道如下:
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
来提高效率是正确的。但这不是这个问题的主题。
需要构造函数的事实,我相信这个简单测试失败的根源是:
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
需要在测试中注入,因为错误消息表明它是undefined
。
我是否正确行,我应该如何为管道编写一个简单的测试?
我试图将IterableDiffers
注入正在测试的管道中;虽然这已经纠正了上一个错误,但我没有面对新的Error: Can't resolve all parameters for IterableDiffers: (?).
在终端中,显示错误Cannot invoke an expression whose type lacks a call signature. Type 'IterableDiffers' has no compatible call signatures.
。
两者都用不同的语言描述同样的问题。
我的更新测试是:
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();
}));
});
非常感谢任何和所有帮助。
答案 0 :(得分:3)
我几乎在那里进行了更新的测试。您无需提供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' ]);
}));
});
我还注意到if
中有一个不必要的reverse.pipe.spec.ts
语句:
// TODO: Throw an error if `array` isn't an Array
if (Array.isArray(array) === false) return [];
transform
的第一个参数始终是Array
;当然,如果参数不是TypeError
,那么TypeScript编译器会抛出Array
。
为了完整性,我的管道是:
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;
}
}