Testing

Part of Open Web Component Recommendation open-wc

We want to provide a good set of defaults on how to facilitate your web component.

Having tests should be the fundament of every production ready product.

We recommend using BDD(Behavior Driven Development) as it seem to be easier when talking to non tech collegues. However note that this can still be a personal preference - we give this recommendation to promote unity within everyone using this recommendation.

Using:

• System via mocha
• Assertions via chai
  • Plugin chai-dom-equals
• Mocks via sinon

::: tip Info This is part of the default open-wc recommendation :::

Setup

npx -p yo -p generator-open-wc -c 'yo open-wc:testing-bare'

Manual

yarn add @open-wc/testing --dev

Add to your test:

import { expect } '@open-wc/testing';

This will have the following side effect:

• use the plugin chai-dom-equals
• enables cleanup after each test for fixture and litFixture

Example

A typical webcomponent test will look something like this:

/* eslint-disable no-unused-expressions */
import {
  html,
  fixture,
  litFixture,
  expect,
} from '@open-wc/testing';

describe('True Checking', () => {
  it('is false by default', async () => {
    const el = await fixture('<is-true></is-true>');
    expect(el.result).to.be.false;
  });

  it('false values will have a light-dom of <p>NOPE</p>', async () => {
    const el = await fixture('<is-true></is-true>');
    expect(el).dom.to.semantically('<is-true><p>NOPE</p></is-true>');
  });

  it('true values will have a light-dom of <p>YEAH</p>', async () => {
    const el = await litFixture(html`<is-true .value=${1 === 1}></set-game>`);
    expect(el.result).to.be.true;
    expect(el).dom.to.semantically('<is-true><p>YEAH</p></is-true>');
  });
});

For some real tests look at our Set-Game Example Test Files.