Angular 8 Test - Devextreme Grid Child Nodes not Found

Question

I want to test a Devextreme Grid with Angular 8. Here is what my setup roughly looks like:

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

});

The rows are not defined, altough the Karma test renders the rows correctly in the test browser.

Answer 1

I eventually made it work by trial and error:

HTML

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

Typescript

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

} );