如何注入 IterableDiffers “服务"进入单元测试 [英] how to inject IterableDiffers "service" into a unit test

问题描述

我正在尝试为位于 https://github.com/的这个组件添加单元测试czeckd/angular-dual-listbox....但是我得到了一个错误，因为该组件依赖于类型:IterableDiffers"

I am trying add unit tests for this component located in https://github.com/czeckd/angular-dual-listbox.... But I got an error because the component has a dependency with the type: "IterableDiffers"

export class DualListComponent implements DoCheck, OnChanges { ....
constructor(private differs: IterableDiffers) {} ...

我的第一次尝试看起来像这样:

My first try looks like on this way:

import { async, ComponentFixture, TestBed} from '@angular/core/testing';

import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { TranslateModule } from 'ng2-translate/ng2-translate';
import { DualListComponent } from './dual-list.component';

describe('DashboardHeroComponent when tested directly', () => {

    let comp: DualListComponent;
    let fixture: ComponentFixture<DualListComponent>;
    let heroEl: DebugElement;

    // async beforeEach
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [DualListComponent],
            imports: [ TranslateModule.forRoot()]
        })
            .compileComponents(); // compile template and css
    }));

    // synchronous beforeEach
    beforeEach(() => {

        let srouce: Array < any > = [
            { key: 1, station: 'Antonito', state: 'CO' },
            { key: 2, station: 'Big Horn', state: 'NM' },
            { key: 3, station: 'Sublette', state: 'NM' },
            { key: 32, station: 'Eureka', state: 'CO' }
        ];
        fixture = TestBed.createComponent(DualListComponent);
        comp = fixture.componentInstance;
        heroEl = fixture.debugElement.query(By.css('.hero')); // find hero element

        comp.key = 'key';
        comp.display = 'station';
        comp.source = srouce;
        comp.destination = [];
        fixture.detectChanges(); // trigger initial data binding
    });

    it('should display hero name', () => {
        expect(comp.available.list.length).toEqual(4);
    });
});

运行后我得到的错误是:

And the error what I got after run ;"npm test" is:

TypeError: Cannot read property 'diff' of undefined   

错误信息本身并不太清楚，但原因是因为尝试使用对象不同"应该在构造函数中加载的内容.

the error message is not too clear itself but the reason is because try use the object "differs" what should be load in the constructor.

知道如何在测试中添加它吗?

any idea how to add it in the test?

更新 1按照 Tiep Phan 的说明并插入IterableDiffers"作为提供者之后……我遇到了问题:无法解析 IterableDiffers 的所有参数"……我可以理解错误但不知道如何解决它...错误基本上是因为 IterableDiffers 类的构造函数接受类型为IterableDifferFactory"的数组.

update 1 after follow the instructions from Tiep Phan and insert "IterableDiffers" as a provider ... I got the issue: "Can't resolve all parameters for IterableDiffers"... I can understand the error but don't know how to solve it...the error basically is because the constructor of IterableDiffers class accept an array of type "IterableDifferFactory".

constructor(factories: IterableDifferFactory[]);

推荐答案

我不明白你为什么要注入 IterableDiffers.效果很好.

I don't understant why you want to inject IterableDiffers. It works well.

你的错误发生在这里

buildAvailable(source:Array<any>) : boolean {
    let sourceChanges = this.sourceDiffer.diff(source);

this.sourceDiffer 未定义.如果您查看源代码，您会注意到 sourceDiffer 是在 ngOnChanges 中初始化的.所以你需要调用 ngOnChanges

this.sourceDiffer is undefined. If you take a look at source code you can notice that sourceDiffer is initialized within ngOnChanges. So you need to call ngOnChanges

看看这篇文章https://medium.com/@christophkrautz/testing-ngonchanges-in-angular-components-bbb3b4650ee8

以下是您案例的示例:

fixture = TestBed.createComponent(DualListComponent);
comp = fixture.componentInstance;
heroEl = fixture.debugElement.query(By.css('.hero')); // find hero element
comp.key = 'key';
comp.display = 'station';
comp.source = srouce;
comp.destination = [];

comp.ngOnChanges({ // add this
    source: new SimpleChange(null, srouce, true)
});

在 Plunker 示例

See it in action in Plunker Example

另一种方法是使用上面文章中描述的临时组件.

Another way is using temporary component as described in article above.

这篇关于如何注入 IterableDiffers “服务"进入单元测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！