mardi 13 avril 2021

Can I wait on connectedCallback finsh work in tests?

I am trying to test some code and I know it will work as expected, but I do not know how can I write tests in that case because my attribute is set always after test have finish?

In general, I have created an abstract WebComponent class which needs to be inherited by my custom web-components instead of HTMLElement. This whole abstract class have some common logic for all my web-components for example setting props if user passed any by constructor.

I have created a simple example to show what I want to achieve. In the example below I am creating a HelloWorld component this component has one observedAttributes which is heading-content (value which will be dispalyed inside <h1></h1> of HelloWorld component template). If users sets heading-content via constructor, then I am saving this value inside this.propsContent. Then after connectedCallback is triggered I am setting this props setContentFromProps which triggers attributeChangedCallback and this callback does the rest.

Is it possible to somehow wait until these actions end?

Example

HelloWorld component:

const template = `
<h1 id="hello-world-content"></h1>
`;

export class HelloWorld extends HTMLElement {
  static TAG = 'hello-world';
  static observedAttributes = ['heading-content'];

  constructor(props) {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = template;
    this.headingContent = null;
    this.propsContent = props;
    this.helloHeading = this.shadowRoot.querySelector('#hello-world-content');
  }

  connectedCallback() {
    this.setContentFromProps();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue === newValue) {
      return void 0;
    }
    if (name === 'heading-content') {
      this.helloHeading.textContent = newValue;
      this.headingContent = newValue;
    }
  }

  setContentFromProps() {
    this.setAttribute('heading-content', this.propsContent);
  }
}

customElements.define(HelloWorld.TAG, HelloWorld);

HelloWorld unit tests:

import 'jest';
import { HelloWorld } from './HelloWorld';

describe(HelloWorld.name, () => {
  test('should set heading content to given value', () => {
    const helloWorld = new HelloWorld('dupa');
    expect(helloWorld.headingContent).toBe('dupa');
  });
});

Test result:

expect(received).toBe(expected) // Object.is equality

    Expected: "dupa"
    Received: null

Aucun commentaire:

Enregistrer un commentaire