如何测试注入 ChangeDetectorRef 的管道

Question

我有一个这样的烟斗：

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

    constructor(private _ref:ChangeDetectorRef) {
         _ref.markForCheck();
    }

    public transform(input: string | number) {
         return 'something';
    }

}

这是我对该管道的测试规范：

describe('Pipe: MyPipe', () => {
    let changeDetector: ChangeDetectorRefMock;
    let pipe: MyPipe;
    beforeEach(async() => {
        await TestBed.configureTestingModule({
            providers: [
                MyPipe,
                {
                    provide: ChangeDetectorRef,
                    useClass: ChangeDetectorRefMock
                }
            ];
        }).compileComponents();
        changeDetector = TestBed.inject(ChangeDetectorRef) as ChangeDetectorRefMock;
        pipe = TestBed.inject(MyPipe); // <-- error is thrown (see below)
    });

    it('should create', () => {
        expect(pipe).toBeTruthy();
    });
});

@Injectable()
class ChangeDetectorRefMock {
    public detectChanges(): void {}
}

如果我运行 testspec，我收到第 pipe = TestBed.inject(MyPipe); 行的以下错误：

TypeError: Cannot read properties of null (reading 'type')
    at createViewRef (C:\interne\VEBLuZ\packages\core\src\change_detection\change_detector_ref.ts:163:20)
    [...]
    at C:\exampleProject\libs\example-lib\src\pipe\my.pipe.spec.ts:22:20

如何通过注入 ChangeDetectorRef 为该管道编写测试类？

Answer 1

答案很简单！您不注入管道，而是通过它的构造函数创建它：

 pipe = new MyPipe(changeDetector);

如何测试注入 ChangeDetectorRef 的管道

How to test pipe injecting the ChangeDetectorRef

typescript

angular