如何通过id找到合适的线束？

Question

在我的组件测试中，我需要找到合适的输入元素。

我可以通过执行以下操作找到所有这些：

let loader: HarnessLoader = TestbedHarnessEnvironment.loader(fixture);
const inputs = await loader.getAllHarnesses(MatInputHarness);
expect(inputs).toBeTruthy();

但是如何在数组中找到正确的输入呢？

在内心深处，每个“输入”都有 id，因为我看到了它：

console.log(`id: ${await inputs[0].getId()}`);

输出正确的 id。

我是否必须循环遍历整个输入列表来检查每个元素的 id？并为每一个调用“等待”？

恐怕这可能计算量太大。而且，这只是闻起来不对劲。

如何通过 id 获取所需的输入元素？

谢谢！

Answer 1

显然（我在这里真的很讽刺），该文档非常有用。

通过阅读这篇文章（https://material.angular.io/guide/using-component-harnesses）我得到了这个想法。经过一番学习和挖掘，这里有一些知识以及后来的解决方案。

1. 对于所有 Harnesses（继承自 ComponentHarness），我们可以使用“with”静态方法来创建允许过滤的 HarnessPredicate。
2. 所有 Harnesses 都具有带有“选择器”和“祖先”CSS 选择器的过滤器，支持标准 CSS 选择，并且可以通过 id 进行搜索。
3. 为了查看更多已实现的过滤器，我检查了适当线束类的“with”方法接受的参数。例如，对于 MatInputHarness 类，“with”方法接受除了默认的“选择器”和“祖先”之外还支持“值”和“占位符”。

所以代码如下：

await loader.getHarness(MatInputHarness.with({ selector: '#elementId' }));

显然，选择器可以使用CSS标准。按类别搜索将是

{selector: '.className'}

PS 有用的提示是可以通过以下方式优化搜索并缩小范围

const smallerScopeLoader = await loader.getChildLoader('#childComponent');