使用扩展面板对我的 angular material 数据 table 进行单元测试要么不运行要么检测动画结束？

Question

我有一个大型可重用组件，它包含 material 数据 table。我的问题是我的单元测试需要检查允许包装器设置每个扩展行的初始状态（打开/关闭）的逻辑，我无法判断点击事件是运行还是 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 匹配此以生成数据 table 是：

<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

配对的异步函数

使用扩展面板对我的 angular material 数据 table 进行单元测试要么不运行要么检测动画结束？

unit testing my angular material data table with an expansion panel either does not run or detect finish of animation?

unit-testing

karma-jasmine

angular-material2

angular

使用扩展面板对我的 angular material 数据 table 进行单元测试要么不 运行 要么检测动画结束？

unit testing my angular material data table with an expansion panel either does not run or detect finish of animation?

unit-testing

karma-jasmine

angular-material2

angular

使用扩展面板对我的 angular material 数据 table 进行单元测试要么不运行要么检测动画结束？