Tester unitairement les événements LitElement dans firstUpdated

Question

J'ai un mixin simple :

export const mixin = superclass => class extends superclass {
  firstUpdated() {
    super.firstUpdated();
    this.dispatchEvent(new CustomEvent('my-event', {
      bubbles: true,
      composed: true,
      detail: {
        myEventTriggered: true,
      },
    }));
  }
};

Je veux tester si my-event est déclenché. Voici mon test :

it('dispatches the custom event', async () => {
  const tag = class extends mixin(LitElement) {};
  const el = await fixture(`<${tag}>`);
  setTimeout(() => el.firstUpdated());
  const { detail } = await oneEvent(el, 'my-event');
  expect(detail.myEventTriggered).to.be.true;
});

Cela fonctionne comme prévu mais je ne suis pas sûr de la ligne setTimeout(() => el.firstUpdated());. Ne devrait-il pas appeler firstUpdated après await fixture ? Je suis juste en train de suivre le guide de test d'open-wc.

Answer 1

Obtenu une réponse de @daKMor:

tester firstUpdated est un peu délicat car dès que vous l'ajoutez au dom, il s'exécute (avec un délai arbitraire en fonction du travail que votre élément réalise) https://lit-element.polymer-project.org/guide/lifecycle#firstupdated

ce que vous pouvez faire est:

il('envoie un événement personnalisé lors du premierUpdated', async () => {
  const tag = class extends mixin(LitElement) {};
  const el = fixtureSync(`<${tag}>`);
  const ev = await oneEvent(el, 'my-event');
  expect(ev).to.exist;
});

il('envoie un événement personnalisé lors de l'appel à connectedCallback', async () => {
  class Foo extends mixin(class {}) {};
  const el = new Foo();
  setTimeout(() => el.connectedCallback());
  const ev = await oneEvent(el, 'my-event');
  expect(ev).to.exist;
});

Remarque : ce code n'a pas été testé - si cela fonctionne, veuillez me le faire savoir et nous pourrions ajouter ces informations et une petite description à la faq. Peut-être pourriez-vous faire une Pull Request?

Pour connectedCallback, comme ce rappel est déclenché immédiatement après l'appel à fixture, vous ne pouvez plus le capturer. Ce que vous pouvez faire est définir un nouveau composant et tester sa fonction de rappel dans un setTimeout. Un HTMLElement ou LitElement est nécessaire car oneEvent ajoute un écouteur d'événements à l'élément.

il('envoie un événement personnalisé lors du connectedCallback', () => {
  const tag = defineCE(class extends mixin(LitElement) {});
  const foo = document.createElement(`${tag}`);
  setTimeout(() => foo.connectedCallback());
  const ev = await oneEvent(foo, 'connected-callback');
  expect(ev).to.exist;
});