Testing

Part of Open Web Component Recommendation open-wc

Open Web Components provides a set of defaults, recommendations and tools to help facilitate your Web Component. Our recommendations include: developing, linting, testing, tooling, demoing, publishing and automating.

We believe that testing is fundamental to 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'

# or if you already have a Web Component project set up and/or test files
npx -p yo -p generator-open-wc -c 'yo open-wc:testing-upgrade'

This will run the setup for multiple packages (testing-bare, testing-karma, testing-karma-bs).

::: tip Note If you want to use your own test runner you can use 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 } from '@open-wc/testing';

This will have the following side effects:

• Use the plugin chai-dom-equals
• Enables cleanup after each test for all fixtures

Automating Tests

Ideally, you'll want some way of automatically running all of your tests. To do that, we recommend karma via @open-wc/testing-karma and browserstack via @open-wc/testing-karma-bs.
If you use a different test runner or a different browser grid you may skip these steps.

::: tip Note Already part of yo open-wc:testing ::::

Manual Install

• Install via yarn add @open-wc/testing-karma --dev
• Copy karma.conf.js to karma.conf.js
• Add these scripts to package.json

  "scripts": {
    "test": "karma start",
    "test:watch": "karma start --auto-watch=true --single-run=false",
    "test:es5": "karma start karma.es5.config.js",
    "test:es5:watch": "karma start karma.es5.config.js --auto-watch=true --single-run=false",
  },

For more details, please see testing-karma.

Automating Tests via Browserstack

To make sure your project is production ready, we recommend running tests in all the browsers you want to support. If you do not have access to all browsers, we recommend using a service like Browserstack to make sure your project works as intended.

The following step connects the automatic karma runner with browserstack.

::: tip Note Already part of yo open-wc:testing ::::

Manual Install

• Install via yarn add @open-wc/testing-karma-bs --dev
• Copy karma.es5.bs.config.js to karma.es5.bs.config.js
• Add these scripts to your package.json

  "scripts": {
    "test:es5:bs": "karma start karma.es5.bs.config.js"
  },

For more details, please see testing-karma-bs.

Example Tests

A typical Web Component test will look something like this:

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

import '../src/get-result.js';

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

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

  it('true values will have a light-dom of <p>YEAH</p>', async () => {
    const foo = 1;
    const el = await fixture(html`<get-result .success=${foo === 1}></get-result>`);
    expect(el.success).to.be.true;
    expect(el).dom.to.equal('<get-result><p>YEAH</p></get-result>');
  });
});

If you run your tests automatically with npm run test, the output should look like this:

> karma start demo/karma.conf.js
START:
Webpack bundling...
Hash: 268cd16a4849f1191bd5
Version: webpack 4.26.1
Time: 1590ms
Built at: 12/18/2018 2:01:09 PM
             Asset       Size           Chunks             Chunk Names
        commons.js   1.93 MiB          commons  [emitted]  commons
get-result.test.js  337 bytes  get-result.test  [emitted]  get-result.test
        runtime.js   14.2 KiB          runtime  [emitted]  runtime
Entrypoint get-result.test = runtime.js commons.js get-result.test.js
18 12 2018 14:01:10.156:INFO [karma-server]: Karma v3.1.3 server started at http://0.0.0.0:9876/
18 12 2018 14:01:10.160:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox with concurrency unlimited
18 12 2018 14:01:10.166:INFO [launcher]: Starting browser ChromeHeadless
18 12 2018 14:01:10.833:INFO [HeadlessChrome 70.0.3538 (Windows 10.0.0)]: Connected on socket 6PnebgDwW91bPrHzAAAA with id 55371387
  True Checking
    ✔ is false by default
    ✔ false values will have a light-dom of <p>NOPE</p>
    ✔ true values will have a light-dom of <p>YEAH</p>
Finished in 0.12 secs / 0.029 secs @ 14:01:11 GMT+0100 (GMT+01:00)
SUMMARY:
✔ 3 tests completed
TOTAL: 3 SUCCESS
=============================== Coverage summary ===============================
Statements   : 100% ( 8/8 )
Branches     : 100% ( 2/2 )
Functions    : 100% ( 3/3 )
Lines        : 100% ( 8/8 )
================================================================================

::: tip Note Make sure you have Chrome (or Chromium) installed. Additionally you may need to set your CHROME_BIN env variable export CHROME_BIN=/usr/bin/chromium-browser. ::::

For some example tests, please take a look at our Set-Game Example Test Files.