angular - Angular 8 测试 - 未找到 Devextreme Grid 子节点

Question

我想用 Angular 8 测试 Devextreme 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>

测试

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未定义，尽管 Karma 测试在测试浏览器中正确呈现行 。

Answer 1

我最终通过反复试验使它工作：

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

} );