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

Question

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

我可以通过以下方式找到所有这些：

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

但是我怎样才能在数组中找到合适的输入呢？

在内心深处，每个 'input' 都有 id 因为我看到了它：

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

输出正确的 id。

我是否必须循环遍历整个输入列表以检查每个元素的 ID？并为每个调用 'await'？

恐怕这可能是计算量太大了。另外，这闻起来不对。

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

谢谢！

Answer 1

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

通过阅读本文 (https://material.angular.io/guide/using-component-harnesses)，我明白了。经过一些学习和挖掘，这里有一些知识和后来的解决方案。

对于所有 Harnesses（继承自 ComponentHarness），我们可以使用 'with' 创建允许过滤的 HarnessPredicate 的静态方法。
所有 Harnesses 都有带有 'selector' 和 'ancestor' CSS 选择器的过滤器，支持标准 CSS 选择并可以通过 id 进行搜索。
为了查看更多已实现的过滤器，我检查了 'with' 方法接受的参数以获得适当的利用 class。例如，对于 MatInputHarness class，'with' 方法接受除了默认 'selector' 和 'ancestor' 之外还支持 'value' 和 'placeholder'。

因此代码如下所示：

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

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

{selector: '.className'}

P.S。有用的提示是可以优化搜索并缩小范围

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

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

How to find proper harness by id?

angular

jasmine

karma-jasmine