Angular 中的单元测试 Ag-grid：未在小 window 尺寸上呈现的列
Unit Testing Ag-grid in Angular : Columns not rendered on small window sizes
我根据 documentation.
使用 angular 和 ag-grid
我面临两个问题：
1. 我在 vscode 中编写了实际代码，但我无法在 stackblitz 中成功重现它。
2. 当我进行 ng 测试时，我的网格包含 10 列，每列宽度为 200 --code-coverage在 vscode 上，在 chrome 浏览器上测试 运行，我立即将其展开到全屏。我所有的测试都通过了。但是，当我将 chrome 的大小调整为 屏幕的大约 30% 或更少 并重新 运行 我的测试时，它显示一些列未定义的错误也就是说，它显示 header 数组的长度小于 10。 并且测试失败。
我想说的是，当我减小window大小时，就像定义了前 5 列，其余的没有定义。
发生这种情况有什么原因吗？
另外请帮我设置 stackblitz。
注意：我可能无法显示它，因为 stackblitz 无法正常工作，但是在第二个测试中有一个 console.log 语句，这就是我所指的。
如果您要测试的是是否所有列都实际出现在 DOM 中，
那么问题是默认情况下，网格虚拟化了行和列。也就是说，它只为可见的行和列创建 DOM 个节点。
因此，如果您的 window 足够小以至于某些列在网格的视口中不可见，那么这些列将不会存在于 DOM 中。当您将 window 放大以显示之前丢失的列（或滚动以显示它们）时，将在那时创建 DOM 节点。
快速修复是关闭列虚拟化（至少对于测试）。
见
我根据 documentation.
使用 angular 和 ag-grid我面临两个问题：
1. 我在 vscode 中编写了实际代码，但我无法在 stackblitz 中成功重现它。
2. 当我进行 ng 测试时，我的网格包含 10 列，每列宽度为 200 --code-coverage在 vscode 上，在 chrome 浏览器上测试 运行，我立即将其展开到全屏。我所有的测试都通过了。但是，当我将 chrome 的大小调整为 屏幕的大约 30% 或更少 并重新 运行 我的测试时，它显示一些列未定义的错误也就是说，它显示 header 数组的长度小于 10。 并且测试失败。
我想说的是，当我减小window大小时，就像定义了前 5 列，其余的没有定义。
发生这种情况有什么原因吗？
另外请帮我设置 stackblitz。
注意：我可能无法显示它，因为 stackblitz 无法正常工作，但是在第二个测试中有一个 console.log 语句，这就是我所指的。
如果您要测试的是是否所有列都实际出现在 DOM 中， 那么问题是默认情况下，网格虚拟化了行和列。也就是说，它只为可见的行和列创建 DOM 个节点。
因此，如果您的 window 足够小以至于某些列在网格的视口中不可见，那么这些列将不会存在于 DOM 中。当您将 window 放大以显示之前丢失的列（或滚动以显示它们）时，将在那时创建 DOM 节点。
快速修复是关闭列虚拟化（至少对于测试）。
见