角8测试-不使用状态存储的Devextreme ()

Question

我正在编写一个角8测试，以检查dx-data-grid是否正确地列出和呈现数据。下面是我的设置大致的样子：

<dx-data-grid id="grid" [dataSource]="data">
  <dxo-state-storing [enabled]="true" type="localStorage" storageKey="storage-key"></dxo-state-storing>
  <dxi-column dataField="field1"></dxi-column>
  <dxi-column dataField="field2"></dxi-column>
</dx-data-grid>

类型标

export class MyComponent {
    @Input() data;
}

测试

describe('MyComponent', () => {
    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({ /* ... */ }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should list all items', () => {
        component.data= mockData;
        fixture.detectChanges();

        const gridElement = fixture.debugElement.query(
            By.css('#grid')
        );
        const dxGrid = <DxDataGridComponent>gridElement.componentInstance;
        dxGrid.instance.option('loadingTimeout', undefined);

        // Here is where the error occurs
        // dxGrid.instance.getDataSource() is undefined
        dxGrid.instance.getDataSource().load();

        const dataSource = dxGrid.dataSource;
        expect(dataSource.length).toBe(mockData.length);
        mockData.forEach(i => expect(dataSource).toContain(i));
    });

});

上面显示的测试失败，出现以下错误

TypeError: Cannot read property 'load' of undefined

但是，我们从模板中删除以下html：

<dxo-state-storing [enabled]="true" type="localStorage" storageKey="storage-key"></dxo-state-storing>

...the考试合格！

Answer 1

dx-数据网格小部件从localStorage在setTimeout中加载状态。尝试使用fakeAsync()和抽签()来模拟测试中的时间。

Answer 2

我基本上找到了一个解决办法，但我对此并不满意：

it('should list all items', async () => {
    component.data= mockData;
    fixture.detectChanges();

    // workaround
    await new Promise( resolve => setTimeout( () => resolve(), 0 ) );
    // ---

    const gridElement = fixture.debugElement.query(By.css('#grid'));
    const dxGrid = <DxDataGridComponent>gridElement.componentInstance;
    dxGrid.instance.option('loadingTimeout', undefined);
    dxGrid.instance.getDataSource().load();

    const dataSource = dxGrid.dataSource;
    expect(dataSource.length).toBe(mockData.length);
    mockData.forEach(i => expect(dataSource).toContain(i));
});

所以，当我想要加载它的数据时，网格似乎没有被完全初始化。