gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 16:05:20 24 4
gpt4 key购买 nike

我有一个大型可重用组件,用于包装 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'));
}

最佳答案

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

关于angular - 使用扩展面板对我的 Angular Material 数据表进行单元测试无法运行或检测不到动画完成?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53416821/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com