Testing

[DavideCarvalho]

Okay, since hybrids is functional, testing methods are quite easy, but I wanted to know if we can make integration ro e2e tests.
e2e tests are quite hard, since e2e testing libraries - like cypress - can't access shadow dom, so maybe document about testing with it would be nice

[smalluban]

I can't say much about e2e tools that not support Shadow DOM yet. I think they will eventually, as there is no other way. However, if you want to do unit tests between custom elements, you can create them in your test code and easily access Shadow DOM by shadowRoot property of the element.

In the hybrids I wrote tests for factories using that pattern - you can find a helper in tests/helpers.js file:

https://github.com/hybridsjs/hybrids/blob/master/test/helpers.js#L1

As I wrote in #20, I am working on new docs, so I think I will add some information about testing there too (but it may take some time).

Feel free to re-open if you have other questions about it.

[DavideCarvalho]

I'm testing hybrids with Karma. Since jsdom doesn't support shadow dom, the only way is running in a browser.
Due to Hybrids' shadow dom asynchronicity, in every test I have to set a timeout;

import './ongsList';
import { expect } from 'chai';

describe('OngsList', () => {
  it('should render ongsList', (done) => {
    const el = document.createElement('x-ongs-list');
    document.body.appendChild(el);
    const timer = setTimeout(() => {
      const xOngsList = document.body.querySelector('x-ongs-list');
      const xOngsListShadowRoot = xOngsList.shadowRoot;
      const titleEl = xOngsListShadowRoot.querySelector('h1');
      const titleValue = titleEl.innerText;
      expect(titleValue).to.equal('Help My.ONG');
      done();
    }, 200);
  });
});

[smalluban]

Test environment does not have to support Shadow DOM. If you want to create unit tests for your custom element - use the advantage, which hybrids architecture gives you. Your render definition is just a function. html function of the hybrids returns update function: update(host, target).

You can test your render function in the isolation, and fully synchronously. You can do it just like this:

import { html } from 'hybrids';

const MyElement = {
  a: 0,
  b: 1,
  render: ({ a, b }) => html`
    <div>${a}</div>
    <div>${b}</div>
  `,
};

// Tests

describe('<my-element> unit tests', () => {
  let container;
  beforeEach(() => {
    container = document.createElement('div');
  });

  it('should render a and b properties', () => {
    const host = { a: 1, b: 2 };
    const update = MyElement.render(host);

    // This renders your template into the conatiner, first argument could be an empty
    // object here, as in this example render is not using it
    update(host, container);

    expect(container.children[0].textContent).toBe('1');
    expect(container.children[1].textContent).toBe('2');
  });
});

However, if you want to create what I would call intergration tests and create your custom element, it is required to use RAF to wait for the result of the render. You can find examples in hybrids tests for that pattern.

One more thing - really try to forget what you know about common patterns. Hybrids is different, you don't have to test if the library works and renders eventually your template - it is already tested. What you should test is if your render function is correct and create correct DOM for specific input values.