javascript - 在测试(Lit)Web 组件之前如何等待异步连接回调完成？

Question

我正在使用Lit Framework现在，但我认为常规 Web 组件也会发生这种情况。

我的connectedCallback是异步，但是，使用Lit fixture，我认为它不会等到connectedCallback code> 已完成，因此我的状态更改发生在测试完成后。

作为解决方法，我在 connectedCallback 末尾放置了 this.dispatchEvent(new Event('cc-completed')。

@customElement('my-lit-element')
export default class MyLitElement extends LitElement {
  override async connectedCallback() {
    super.connectedCallback();
    await this.loadStuff(); // Also changes state
    this.dispatchEvent(new Event('cc-completed'));
  }
}

然后:

it('My Lit Element Test #1', async () => {
  const myLitElement: MyLitElement = await fixture(html`
    <my-lit-element .prop=${"prop"}></my-lit-element>
  `);

  myLitElement.addEventListener('cc-completed', () => {
    // asserts
  });
}).timeout(5000);

但是，这仅适用于调试和断点，因为否则测试将完成并且回调将被挂起。

这样做的正确方法是什么？

Answer 1

对于同步更新请求(例如设置响应式属性)，执行 await myLitElement.updateComplete 就足够了。

但是，如果导致 connectedCallback 内更新的事情是异步的，那么唯一的方法就是轮询您正在寻找的某些结果。

Open-WC 在 @open-wc/testing 包中提供了一些用于此目的的测试实用程序。 waitUntil允许您提供通用谓词函数和一些选项，例如间隔和超时。 oneEvent让您等待事件的触发，就像您在第二个示例中触发的事件一样。

在您的测试中，一个可能的解决方案是，您还可以将超时作为 waitUntil 的 options 参数传递:

it('My Lit Element Test #1', async () => {
  const myLitElement: MyLitElement = await fixture(html`
    <my-lit-element .prop=${"prop"}></my-lit-element>
  `);

  await waitUntil(
    () => myLitElement.shadowRoot!.querySelector('#id'),
    'Element is not ready', { timeout: 5000 }
  );

  // asserts
})