Angular PrimeNG数据表中的单元测试ng模板内容

我有一个组件

import { Component, Input } from '@angular/core';

@Component({
    selector: 'app-log-content-panel',
    templateUrl: './log-content.component.html'
})
export class LogContentComponent {

    values = [
        { description: 'description 1', resolution: ['resolution1-1', 'resolution1-2'] },
        { description: 'description 2', resolution: ['resolution2-1', 'resolution2-2'] },
        { description: 'description 3', resolution: ['resolution3-1', 'resolution3-2'] },
    ];

}

带模板（使用带可扩展列的Priming数据表）

{{resolution}

我知道如何测试普通列：

describe('LogContentComponent', () => {

    let component: LogContentComponent;
    let fixture: ComponentFixture<LogContentComponent>;
    let de: DebugElement;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [LogContentComponent]
            , imports: [DataTableModule]
        }).compileComponents().then(() => {
            fixture = TestBed.createComponent(LogContentComponent);
            component = fixture.componentInstance;
            de = fixture.debugElement;
        });
    }));

    fit('should render table', () => {
        let value = { description: 'description  test 1', resolution: ['resolution test 1-1', 'resolution test 1-2'] };
        component.values = [value];
        fixture.detectChanges();
        const dt = fixture.debugElement.queryAll(By.css('fj-dataTable'))[0];
        const cols = dt.queryAll(By.css('td'));
        const colsText = cols.map(function (x) { return x.nativeElement.textContent.trim(); });
        expect(cols.length).toEqual(2);
        // cols[0] - expander
        let col = 1;
        expect(colsText[col++]).toBe(value.description);

        let b = By;
        // let c = component;
        // console.log(cols);
        // console.log(colsText);
        // debugger;
    });

});

description（'LogContentComponent'，（）=>{
let组件：LogContentComponent；
let夹具：组件夹具；
设de:DebugElement；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[LogContentComponent]
，导入：[DataTableModule]
}).compileComponents（）。然后（（）=>{
fixture=TestBed.createComponent（LogContentComponent）；
组件=fixture.componentInstance；
de=fixture.debugElement；
});
}));
fit（'应呈现表格'，（）=>{
让值={description:'描述测试1'，分辨率：['分辨率测试1-1'，'分辨率测试1-2']}；
component.values=[value]；
fixture.detectChanges（）；
const dt=fixture.debugElement.queryAll（By.css（'fj-dataTable'））[0]；
const cols=dt.queryAll（By.css（'td'）；
const colsText=cols.map（函数（x）{return x.nativeElement.textContent.trim（）；}）；
期望值（列长）、toEqual（2）；
//cols[0]-扩展器
设col=1；
expect（colsText[col++]）.toBe（value.description）；
设b=By；
//设c=分量；
//控制台日志（cols）；
//console.log（colsText）；
//调试器；
});
});

如何测试可展开列中呈现的内容？我在DOM中找不到它。此DOM来自Chrome（调试器中断时获取）：

描述
描述测试1

您是否看到一个元素

tr

具有类

ui扩展行内容

@bunyaminockuner

fixture.debugElement.queryAll（By.css（'.ui扩展行内容'））

返回空数组。在测试过程中点击调试器时，我在开发者工具中也看不到它。@koral当你说DOM元素时，你指的是哪个元素？

describe('LogContentComponent', () => {

    let component: LogContentComponent;
    let fixture: ComponentFixture<LogContentComponent>;
    let de: DebugElement;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [LogContentComponent]
            , imports: [DataTableModule]
        }).compileComponents().then(() => {
            fixture = TestBed.createComponent(LogContentComponent);
            component = fixture.componentInstance;
            de = fixture.debugElement;
        });
    }));

    fit('should render table', () => {
        let value = { description: 'description  test 1', resolution: ['resolution test 1-1', 'resolution test 1-2'] };
        component.values = [value];
        fixture.detectChanges();
        const dt = fixture.debugElement.queryAll(By.css('fj-dataTable'))[0];
        const cols = dt.queryAll(By.css('td'));
        const colsText = cols.map(function (x) { return x.nativeElement.textContent.trim(); });
        expect(cols.length).toEqual(2);
        // cols[0] - expander
        let col = 1;
        expect(colsText[col++]).toBe(value.description);

        let b = By;
        // let c = component;
        // console.log(cols);
        // console.log(colsText);
        // debugger;
    });

});

<p-datatable _ngcontent-c0="" expandablerows="true" ng-reflect-expandable-rows="true" ng-reflect-value="[object Object]"><div class="ui-datatable ui-widget" ng-reflect-ng-class="[object Object]">
    <!--bindings={}-->
    <!--bindings={}-->
    <!--bindings={}-->
    <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
    <!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="ui-datatable-tablewrapper">
        <table>
            <thead class="ui-datatable-thead">
                <!--bindings={
  "ng-reflect-ng-if": "true"
}--><tr class="ui-state-default" ng-reflect-columns="[object Object],[object Object"><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
    <th class="expander-column ui-state-default ui-unselectable-text" ng-reflect-klass="expander-column" ng-reflect-ng-class="[object Object]">
        <!--bindings={}-->
        <!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="ui-column-title"></span>
        <!--bindings={}-->
        <!--bindings={}-->
        <!--bindings={}-->
        <!--bindings={}-->
        <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
    </th>

    <th class="ui-state-default ui-unselectable-text" ng-reflect-ng-class="[object Object]">
        <!--bindings={}-->
        <!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="ui-column-title">Description</span>
        <!--bindings={}-->
        <!--bindings={}-->
        <!--bindings={}-->
        <!--bindings={}-->
        <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
    </th>
</tr>
                <!--bindings={}-->
            </thead>
            <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
            <tbody class="ui-datatable-data ui-widget-content" ng-reflect-ng-class="[object Object]" ng-reflect-columns="[object Object],[object Object" ng-reflect-data="[object Object]"><!--bindings={
  "ng-reflect-ng-for-of": "[object Object]",
  "ng-reflect-ng-for-track-by": "function (index, item) { retur"
}-->
    <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
    <!--bindings={
  "ng-reflect-ng-if": "true"
}--><tr class="ui-datatable-even ui-widget-content" ng-reflect-ng-class="ui-datatable-even,,,ui-widget-">
        <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
            <!--bindings={
  "ng-reflect-ng-if": "true"
}--><td class="expander-column" ng-reflect-klass="expander-column" ng-reflect-ng-class="[object Object]">
                <!--bindings={}-->
                <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
                <!--bindings={}-->
                <!--bindings={}-->
                <!--bindings={
  "ng-reflect-ng-if": "true"
}--><a href="#">
                    <span class="ui-row-toggler fa fa-fw ui-clickable fa-chevron-circle-right" ng-reflect-klass="ui-row-toggler fa fa-fw ui-cli" ng-reflect-ng-class="fa-chevron-circle-right"></span>
                </a>
                <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
                <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
            </td>

            <!--bindings={
  "ng-reflect-ng-if": "true"
}--><td ng-reflect-ng-class="[object Object]">
                <!--bindings={}-->
                <!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="ui-cell-data">description  test 1</span>
                <!--bindings={}-->
                <!--bindings={}-->
                <!--bindings={}-->
                <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
                <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
            </td>

    </tr>
    <!--bindings={}-->
    <!--bindings={
  "ng-reflect-ng-if": "false"
}-->


<!--bindings={
  "ng-reflect-ng-if": "false"
}--></tbody>
        </table>
    </div>

    <!--bindings={}-->

    <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
    <!--bindings={}-->

    <div class="ui-column-resizer-helper ui-state-highlight" style="display:none"></div>
    <span class="fa fa-arrow-down ui-datatable-reorder-indicator-up" style="position: absolute; display: none;"></span>
    <span class="fa fa-arrow-up ui-datatable-reorder-indicator-down" style="position: absolute; display: none;"></span>
</div></p-datatable>