ComponentHarness (@angular/cdk/testing) -如何等待一定数量的元素存在

ComponentHarness是Angular CDK（Component Development Kit）中的一个测试工具，它提供了一种方便的方式来编写和执行Angular组件的自动化测试。

在使用ComponentHarness时，如果我们想要等待一定数量的元素存在，可以通过以下步骤进行操作：

1. 首先，我们需要导入ComponentHarness的相关类和函数：

import {ComponentHarness, TestElement} from '@angular/cdk/testing';
import {By} from '@angular/platform-browser';

1. 接下来，我们需要编写一个自定义的Harness来代表我们要测试的组件。我们可以继承ComponentHarness类，并实现一个静态方法，用于查找目标元素。在该方法中，我们可以使用By.css或By.directive等选择器来定位元素。例如：

class CustomComponentHarness extends ComponentHarness {
  static with(selector: string): HarnessPredicate<CustomComponentHarness> {
    return new HarnessPredicate(CustomComponentHarness, {selector});
  }

  // ...
}

1. 然后，我们可以在测试用例中使用自定义的Harness来等待一定数量的元素存在。我们可以使用HarnessLoader来加载被测试组件的根元素，并使用HarnessLoader的方法来查找元素。例如：

it('should wait for a certain number of elements to exist', async () => {
  const loader = TestbedHarnessEnvironment.loader(fixture);
  const harness = await loader.getHarness(CustomComponentHarness);
  const elements = await harness.locatorForAll('.my-element');
  await loader.whenStable(); // 等待所有异步操作完成

  expect(elements.length).toBe(3); // 断言元素数量为3
});

在上述代码中，我们首先使用TestbedHarnessEnvironment.loader()方法创建一个HarnessLoader实例，并将测试组件的fixture作为参数传入。然后，我们通过getHarness()方法获取CustomComponentHarness的实例。接下来，我们可以使用locatorForAll()方法查找所有符合条件的元素，返回一个Promise数组。最后，我们使用whenStable()方法等待所有异步操作完成，确保测试结果的正确性。

总结一下，ComponentHarness通过使用HarnessLoader和自定义的Harness类，提供了一种方便的方式来等待一定数量的元素存在。这种方法可以用于编写和执行Angular组件的自动化测试。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云云开发（Tencent Cloud Base）：提供后端云服务，包括云函数、数据库、存储、托管等，适用于开发移动应用、小程序等前后端分离的场景。
• 腾讯云CVM（云服务器）：提供可扩展的云服务器，适用于各种应用和业务场景。
• 腾讯云云数据库MySQL版：提供稳定可靠的云数据库服务，支持高可用、自动备份等功能，适用于各种规模的应用。
• 腾讯云CDN（内容分发网络）：提供全球加速、安全稳定的内容分发服务，适用于加速静态资源的传输和分发。 请注意，以上链接仅供参考，具体的产品选择应根据实际需求进行。