Angular中的单元测试Ag-grid：未在小窗口尺寸上呈现的列

Question

根据documentation，我正在使用带有 ag-grid 的角度。

我面临两个问题：

1.我在 vscode 中编写了实际代码，但我无法在 stackblitz 中成功重现它。

2. 我的网格包含 10 列，每列宽度为 200 ，当我在 vscode 上执行 ng test --code-coverage 时，测试在 chrome 浏览器上运行，并且我立即将其扩展到全屏。我所有的测试都通过了。但是，当我将我的 chrome 调整为 大约屏幕的 30% 或更少 并重新运行我的测试时，它显示了一个错误，即某些列未定义，它显示标题数组的长度更小超过 10。测试失败。

我想说的是，当我减小窗口大小时，就像定义了前 5 列，而其余的则没有。

发生这种情况有什么原因吗？

另外请帮助我设置 stackblitz 。

注意：我可能无法显示它，因为 stackblitz 无法正常工作，但是第二个测试中有一个 console.log 语句，这就是我所指的。

Link for stackblitz i tried to create

Answer 1

如果您要测试的是所有列是否都实际出现在 DOM 中， 那么问题是默认情况下，网格虚拟化了行和列。也就是说，它只为可见的行和列创建 DOM 节点。

因此，如果您的窗口足够小以至于某些列在网格的视口中不可见，那么这些列将不会存在于 DOM 中。当您将窗口放大以显示先前丢失的列（或滚动以显示它们）时，此时会创建 DOM 节点。

快速解决方法是关闭列虚拟化（至少对于测试而言）。

见Does ag-grid supports column virtualization?