Тест Angular 8 - не найдены дочерние узлы Devextreme Grid - PullRequest
Новая
       34

Тест Angular 8 - не найдены дочерние узлы Devextreme Grid

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

Я хочу протестировать Devextreme Grid с Angular 8. Вот как примерно выглядит моя установка:

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>

Test 

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

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

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

    beforeEach(() => {
        component.data= mockData;
        fixture.detectChanges();
    });

    beforeEach(() => {
        dxGridElement = fixture.debugElement.query(By.css('#grid'));
        dxGrid = <DxDataGridComponent>dxGridElement.componentInstance;
        dxGrid.instance.option('loadingTimeout', undefined);
        dxGrid.instance.getDataSource().load();
        fixture.detectChanges();
    });

    it('should render the table rows', () => {
        const rows = fixture.debugElement.queryAll(By.css('tr.dx-data-row'));
        // rows is not defined
        expect(rows.length).toBe(mockData.length);
    });

});

rows не определены, хотя тест Карма правильно отображает строки в браузере тестов.rows are rendered in the test browser

1 Ответ

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

Я в итоге заставил его работать методом проб и ошибок:

HTML 

<dx-data-grid id="grid" [dataSource]="data">
  <dxi-column dataField="field1"></dxi-column>
  <dxi-column dataField="field2"></dxi-column>
</dx-data-grid>

Машинопись 

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

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

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


    it( 'should list and render all items', () => {
        component.items = mockItems;
        component.selectedItems = [];
        fixture.detectChanges();

        const dxGridElement = fixture.debugElement.query( By.css( '#grid' ) );
        dxGridElement.componentInstance.instance.option( 'loadingTimeout', undefined );
        dxGridElement.componentInstance.instance.getDataSource().load();
        const dataSource: Item[] = dxGridElement.componentInstance.dataSource as Item[];
        const rows = dxGridElement.nativeElement.querySelectorAll( 'tr.dx-data-row' );

        expect( dataSource.length ).toBe( mockItems.length );
        mockItems.forEach( i => expect( dataSource ).toContain( i ) );
        expect( rows.length ).toBe( mockItems.length );
    } );

} );
...