Тестирование Angular 8 - Devextreme Grid getDataSource () не работает с сохранением состояния - PullRequest
Новая
       50

Тестирование Angular 8 - Devextreme Grid getDataSource () не работает с сохранением состояния

0 голосов
/ 09 июля 2019

Я пишу тест Angular 8, который проверяет, правильно ли dx-data-grid выводит и отображает данные.Вот как примерно выглядит моя установка:

HTML 

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

... тест пройден!

Ответы [ 2 ]

0 голосов
/ 19 июля 2019

Виджет dx-data-grid загружает состояние из localStorage в setTimeout. Попробуйте использовать fakeAsync () и tick () для имитации времени в тесте.

0 голосов
/ 18 июля 2019

Я в основном нашел обходной путь, но я не очень доволен им: 

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

Похоже, что сетка не полностью инициализирована, когда я хочу загрузить ее данные.

...