angular - 使用扩展面板对我的 Angular Material 数据表进行单元测试无法运行或检测不到动画完成？

Question

我有一个大型可重用组件，用于包装 Material 数据表。我的问题是我的单元测试需要检查允许包装器设置每个扩展行的初始状态(打开/关闭)的逻辑，并且我无法判断单击事件是否正在运行，或者fixture.whenRenderingDone 实际上是否没有等待动画要完成，因为单击的行的高度始终为 0px，即其初始高度。

我的 @component 注释如下所示:

@Component({
    selector: '',
    templateUrl: './.html',
    styleUrls: ['./scss'],
    animations: [
        trigger('detailExpand', [
            state('collapsed', style({ height: '0px', minHeight: '0', display: 'none' })),
            state('expanded', style({ height: '*' })),
            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
        ]),
    ],
})

这是从 Angular 文档中提取的标准(删除了一些文件名)。

与此匹配以生成数据表的 HTML 是:

<ng-container *ngIf="hasExpansionPanel">
   <mat-row *matRowDef="let row; columns: ['expandedDetail']" class="expansion-row no-padding" [@detailExpand]="row == expandedRow || expandAllPanels ? 'expanded' : 'collapsed'"></mat-row>
</ng-container>

测试:

   it('should be able to display a nested table', () => {
            fixture.whenStable().then(() => {
                const standardRows: NodeListOf<HTMLElement> = fixture.nativeElement.querySelectorAll('.standard-row');
                const firstRow: HTMLElement = standardRows[0];

                const expansionRows: NodeListOf<HTMLElement> = fixture.nativeElement.querySelectorAll('.expansion-row');
                const firstExpansionRow: HTMLElement = expansionRows[1];
                const originalPanelRowHeight = firstExpansionRow.clientHeight;

                clickEvent(firstRow);
                fixture.detectChanges();

                fixture.whenRenderingDone().then(() => {
                    // animation
                    expect(originalPanelRowHeight).toBe(0);
                    expect(firstExpansionRow.clientHeight).toBeGreaterThan(0);

                });
            });
        });

测试使用的一些支持代码:

/**
 * Create custom DOM event the old fashioned way
 *
 * https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent
 * Although officially deprecated, some browsers (phantom) don't accept the preferred "new Event(eventName)"
 */
export function newEvent(eventName: string, bubbles = false, cancelable = false) {
    const evt = document.createEvent('CustomEvent');  // MUST be 'CustomEvent'
    evt.initCustomEvent(eventName, bubbles, cancelable, null);
    return evt;
}

export function clickEvent(ele: Element): void {
    ele.dispatchEvent(newEvent('click'));
}

Answer 1

看起来我缺少与fixture.whenstable配对的异步函数