angular - PrimeNG DataTable 中的单元测试 ng-template 内容

Question

我有组件

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'] },
    ];

}

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

<p-dataTable #dt [value]="values" expandableRows="true">
    <p-column expander="true" styleClass="expander-column"></p-column>
    <p-column field="description" header="Description"></p-column>

    <ng-template let-rowData pTemplate="rowexpansion">
        <ul *ngIf="rowData.resolution">
            <li *ngFor="let resolution of rowData.resolution">{{ resolution }}</li>
        </ul>
    </ng-template>
</p-dataTable>

我知道如何测试普通列：

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

});

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

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