无法等待在Angular/Jasmine单元测试中完成DOM渲染

我有一个通过VegaEmbed构建的角度饼图组件，它使用Vega和D3作为底层图形依赖项。它通过提供标题和一些键、值对进行渲染。我隔离了该组件，并修改了main.ts，使Jasmine退出Stackblitz，与您共享。在本测试中，我检查饼图是否确实呈现了值为30%| 70%的SVG标记，以及图例组合的CEO/主席|单独的CEO/主席。然而，它们似乎运行得太早了，VegaEmbed+Vega+D3仍在忙于构建SVG。通过Chrome开发工具查看DOM，我推断出要测试什么

我已经尝试了一系列的事情：异步、FakeAsync+tick、jasmine.clock、更改角度组件中的承诺逻辑等等。。。fixture.whenStable让我更接近了一步，但是第50行仍然没有定义

我不知道织女星、织女星床和D3的内部是如何工作的。如果这些库没有使用承诺，而不是老式的回调，那么Angular的区域可能无法在async中等待足够的时间

让我有点困惑的是控制台；最终显示控制台中4个文本SVG元素的集合。然而，控制台。日志文本。长度；显示0

这怎么可能？ 如何让测试代码等到D3绘制完SVG并只运行expect语句的那一刻？

---

这是一个很好的问题，我在Ag Grid中也有类似的问题，在我进行断言之前，我必须等待渲染或其回调完成，没有像您提到的fakeAsync、async/done等那样的好方法。至少我没有找到

我发现的一种方法是制作一个如下的实用函数：

import { interval } from 'rxjs';
.....
export const waitUntil = async (untilTruthy: Function): Promise<boolean> => {
  while (!untilTruthy()) {
    await interval(25).pipe(take(1)).toPromise();
  }
  return Promise.resolve(true);
};

---

您提到使用值为0的setTimeout。这是因为我们将setTimeout中的内容放在调用堆栈队列的末尾，因为它是异步运行的。这样做仍然很好，但我喜欢使用waitUntil方法阅读测试。

这是一个好问题，我在Ag Grid中也有类似的问题，在我进行断言之前，我必须等待渲染或其回调完成，没有像您提到的fakeAsync、async/done这样的好方法，等等，至少我找不到

我发现的一种方法是制作一个如下的实用函数：

import { interval } from 'rxjs';
.....
export const waitUntil = async (untilTruthy: Function): Promise<boolean> => {
  while (!untilTruthy()) {
    await interval(25).pipe(take(1)).toPromise();
  }
  return Promise.resolve(true);
};

---

您提到使用值为0的setTimeout。这是因为我们将setTimeout中的内容放在调用堆栈队列的末尾，因为它是异步运行的。这样做仍然很好，但我喜欢使用Waitill方法读取测试。

我尝试了另一种方法，将console.log和expect语句包装在setTimeout=>{………}，0中，它使所有测试都能正常工作，即使我设置了0毫秒的超时也很难。。。怎么会呢？我尝试了另一件事，将console.log和expect语句包装在setTimeout=>{………}，0中，这使所有工作都正常，即使我将超时设置为0毫秒也很困难。。。为什么？谢谢你的解释，并分享一个不错的选择！感谢您的解释，并分享一个不错的选择！