在Angular和Jest中使用Ag Grid中的cellRenderer测试值

qnzebej0 于 2023-03-27 发布在 Jest

关注(0)|答案(1)|浏览(212)

我的问题是我需要测试Ag Grid表列中显示的实际值。这些值附带了一个cellRenderer，以根据特定条件对其进行格式化。
在我的Jest测试中，我尝试了很多不同的方法：

使用fixture.debugElement.queryAll(By.css([selector]))，其中[selector]已经是[col-id="amount"]，.currencyFormat，lib-frm-result-indicator-cell-renderer ...没有任何工作（0个元素）。要查询没有cellRenderer的值，返回预期的值。注意，我的cellRenderer值的DOM层次结构如下：
尝试访问方法getCellRendererInstances()。我在这里看到这个方法返回了使用的cellRenderers，我在测试环境之外尝试了它并获得了成功的结果。在我的Jest测试中，component.gridOptions.api或component.gridApi都是undefined。我必须等到gridReady事件被触发：我试过下面这样的方法：

// 1. 
it('cellRenderer is defined', waitForAsync(() => {
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    expect(component.gridOptions.api).toBeDefined();
  })
}))

在这次尝试中，whenStable()正在运行真实的的代码执行，这会导致很多错误，因为不是所有的代码都被模拟了（我必须模拟很多东西才能真正运行我的TS文件）。

// 2.
it('cellRenderer is defined', (done) => {
  component.gridOptions.onGridReady = () => {
    fixture.detectChanges(),
    const cellRenderer = component.gridOptions.api.getCellRendererInstances();
    done();
  }
  
  component.gridOptions.columnDefs = [
    { field: 'name' },
    { field: 'amount', cellRenderer: ResultIndicatorCellRendererComonent }
  ];
  fixture.detectChanges();
)

在第二次尝试时，出现超时错误。
那么，要怎么做呢？我是不是漏掉了什么？这可能吗？

jestjs

来源：https://stackoverflow.com/questions/75822157/test-values-with-cellrenderer-in-ag-grid-in-angular-and-jest

1条答案

按热度按时间

bttbmeg01#

我想这是可能的，我记得我有很多问题，像你一样，当我试图用AG-Grid单元测试组件。它似乎像AG-Grid自己绘制，没有多少tick，whenStable，flush等将做的伎俩，因为我们没有控制时，它完成渲染。
我会尝试使用setTimeout来看看它是否解决了这个问题：

// do everything to make the grid be painted the way you would like
setTimeout(() => {
  const columns = fixture.debugElement.queryAll(By.css('[col-id="amount"]'));
  expect(columns).toBeTruthy();
  done();
}, 2_000);

如果setTimeout工作正常，最好创建一个waitUntilTruthy实用程序函数，如下所示：https://stackoverflow.com/a/60489120/7365461 .
然后您可以：

// Set up everything the way you would like
await waitUntilTruthy(() => /* Some condition that will return true at a later point in time related to the chart */);
// Now that the previous condition is truthy, it means we made it to a checkpoint.
// Do the remaining of your assertions

赞(0）回复(0）举报 2023-03-27

我来回答

在Angular和Jest中使用Ag Grid中的cellRenderer测试值

1条答案

相关问题

热门标签

最新问答