web-component-tester

v6.9.2

Published

3 months ago

web-component-tester makes testing your web components a breeze!

Downloads

13,937

web-component-tester makes testing your web components a breeze!

You get a browser-based testing environment, configured out of the box with:

Mocha as a test framework.
Chai assertions.
Async to keep your sanity.
Lodash (3.0) to repeat fewer things.
Sinon and sinon-chai to test just your things.
test-fixture for easy fixture testing with <template> tags.
accessibility-developer-tools through a11ySuite for simple, automated Accessibility testing.

WCT will run your tests against whatever browsers you have locally installed, or remotely via Sauce Labs.

Getting Started

`.html` Suites

Your test suites can be .html documents. For example, test/awesomest-tests.html:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  <script src="../../web-component-tester/browser.js"></script>
  <link rel="import" href="../awesome-element.html">
</head>
<body>
  <awesome-element id="fixture"></awesome-element>
  <script>
    suite('<awesome-element>', function() {
      test('is awesomest', function() {
        assert.isTrue(document.getElementById('fixture').awesomest);
      });
    });
  </script>
</body>
</html>

Note that it is critical that you include ../web-component-tester/browser.js in your test suites. browser.js contains all of WCT's client logic (and loads bundled libraries like mocha and chai). You can also load it from the absolute URL /components/web-component-tester/browser.js.

`.js` Suites

Alternatively, you can write tests in separate .js sources. For example, test/awesome-tests.js:

suite('AwesomeLib', function() {
  test('is awesome', function() {
    assert.isTrue(AwesomeLib.awesome);
  });
});

Special Features

test-fixture

test-fixture can be used to reset DOM state between test runs.

<test-fixture id="simple">
  <template>
    <div></div>
  </template>
</test-fixture>
<script>
 suite('classList', () => {
   let div;
   setup(() => {
     div = fixture('simple');
   });
   test('foo', () => {
     div.classList.add('foo');
     assertSomethingOrOther(div);
   });
   test('bar', () => {
     div.classList.add('bar');
     assertNoFooClass(div);
   });
 });

a11ySuite(fixureId, ignoredTests, beforeEach)

|Parameter|Type|Descrption| |---|---|---| |fixtureId|String|ID of the fixture to instantiate and test| |ignoredTests|Array (optional)|Tests to ignore. Test names are found here as calls to axs.AuditRules.addRule()| |beforeEach|Function (optional)|Called before each test is run|

a11ySuite provides an simple way to run accessibility-developer-tools' high quality accessibility audits when given a test-fixture. The a11ySuite will show all the audit results via the standard Mocha test output.

<test-fixture id="NoLabel">
  <template>
    <paper-radio-button id="radio-1"></paper-radio-button>
  </template>
</test-fixture>

<script>
  a11ySuite('NoLabel');
</script>

Accessibility Suite Test Run

Running Your Tests

`wct`

The easiest way to run your tests is via the wct command line tool. Install it globally via:

npm install -g web-component-tester

Make sure that you also have Java installed and available on your PATH.

The wct tool will run your tests in all the browsers you have installed. Just run it:

wct

By default, any tests under test/ will be run. You can override this by specifying particular files (or globs of files) via wct path/to/files.

Web Server

If you prefer not to use WCT's command line tool, you can also run WCT tests directly in a browser via a web server of your choosing.

Make sure that WCT's browser.js is accessible by your web server, and have your tests load browser.js.

The recommended way to fetch these is via Bower:

bower install Polymer/web-component-tester --save

Nested Suites

To help support this case, you can also directly define an index that will load any desired tests:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
    <script src="../../web-component-tester/browser.js"></script>
    <script src="../awesome.js"></script>
  </head>
  <body>
    <script>
      WCT.loadSuites([
        'awesome-tests.js',
        'awesomest-tests.html',
      ]);
    </script>
  </body>
</html>

When you use wct on the command line, it is generating an index like this for you based on the suites you ask it to load.

Configuration

The wct command line tool will pick up custom configuration from a wct.conf.json file located in the root of your project. Or, you can specify your own file via the --config-file command line option. Example: --config-file my.wct.conf.js If you define your own configuration file, make sure you also provide the correct root if needed. By default it will use the directory in which the configuration file is found as rootpath, which can result in errors if the file is in a sub directory.

It should export the custom configuration:

{
  "verbose": true,
  "plugins": {
    "local": {
      "browsers": ["chrome", "firefox"]
    }
  }
}

See runner/config.ts for the canonical reference of configuration properties.

You can also specify global defaults (such as sauce.username, etc) via a config file located at ~/wct.conf.json.

Plugins

Note that by specifying a plugin's configuration, you are letting WCT know that it should load that plugin. If you wish to provide default configuration for a plugin, but not enable it, you can have it default to disabled:

Requesting that plugin via --plugin on the command line (or overriding the plugin's configuration to disabled: false) will cause the plugin to kick in.

Sauce

The sauce plugin runs your tests on Sauce.

To use the sauce plugin you need to include credentials. To do this, either set the SAUCE_USERNAME and SAUCE_ACCESS_KEY environment variables, or set the username and accessKey fields in the plugins.sauce section of your wct.conf.json.

You can configure the browsers that Sauce will run by setting the browsers array in the plugin configuration. The options are the same as the ones documented on the Sauce Wiki here. For example:

{
  "plugins": {
    "sauce": {
      "browsers": [{
          "browserName": "microsoftedge",
          "platform": "Windows 10",
          "version": ""
        }, {
          "browserName": "internet explorer",
          "platform": "Windows 8.1",
          "version": "11"
        },
        {
          "browserName": "safari",
          "platform": "OS X 10.11",
          "version": "9"
        }
      ]
    }
  }
}

Variant dependencies

Sometimes you want to run your project's tests against different versions of your dependencies. For example, suppose there was a significant change in paper-button version v1.5 and you want to confirm that your code works with v1.4 and v1.5.

WCT will serve from the bower_components directory in your project's root directory as siblings of your project's root directory. So if you depend on paper-button, you can import it with the url ../paper-button/paper-button.html.

For each directory that WCT detects with a name like bower_components-${variantName}, it will also run your tests separately against that variant of your dependencies. So you could use the directory environment variable option with bower to set up a bower_components-button-v1.4 directory while developing. WCT would notice that directory and run your tests in two different variations, one where ../paper-button/paper-button.html gets v1.4, the other where it gets v1.5.

This is implemented by starting one test server per variant, and one copy of each launched browser per test server.

Nitty Gritty

Polymer

By default, WCT will defer tests until WebComponentsReady has fired. This saves you from having to wait for elements to upgrade and all that yourself.

If you need to test something that occurs before that event, the testImmediate helper can be used. Or, if you just want tests to run as soon as possible, you can disable the delay by setting WCT.waitForFrameworks = false (though, they are still async due to Mocha).

Mocha

WCT supports Mocha's TDD (suite/test/etc) and BDD (describe/it/etc) interfaces, and will call mocha.setup/mocha.run for you. Just write your tests, and you're set.

Chai

Similarly, Chai's expect and assert interfaces are exposed for your convenience.

Custom Environments

If you would rather not load WCT's shared environment, or want to have WCT load additional libraries, you can override the list of scripts loaded. There are two ways of doing this:

Inside your test code (before browser.js is loaded):

<script>
  WCT = {
    environmentScripts: [
      // Mocha and Stacky are required dependencies
      'stacky/lib/parsing.js',
      'stacky/lib/formatting.js',
      'stacky/lib/normalization.js',
      'mocha/mocha.js',
      // Include anything else that you like!
    ],
  };

Alternatively, you can specify these options via the clientOptions key in wct.conf.json.

A reference of the default configuration can be found at browser/config.ts.

Gulp

We also provide Gulp tasks for your use. gulpfile.js:

var gulp = require('gulp');
require('web-component-tester').gulp.init(gulp, [dependencies]);

Exposes gulp test:local and gulp test:remote, which depend on the optional dependencies.

Grunt

Or, Grunt tasks, if you prefer. gruntfile.js:

grunt.initConfig({
  'wct-test': {
    local: {
      options: {remote: false},
    },
    remote: {
      options: {remote: true},
    },
    chrome: {
      options: {browsers: ['chrome']},
    },
  },
});

grunt.loadNpmTasks('web-component-tester');

Gives you two grunt tasks: wct-test:local and wct-test:remote. The options you can use are specified in runner/config.ts.

Plugin Authoring

A plugin is a node module that can hook into various steps of WCT's flow. It looks like this:

package.json:

{
  // ...
  "wct-plugin": {
    "cli-options": {
      // ... option configuration (nomnom)
    }
  }
}

plugin.js (the plugin's main module)

module.exports = function(context, pluginOptions, plugin) {
  // ...
};

The plugin can subscribe to hooks via the Context object. Any options (via wct.conf.json or command line) are merged into pluginOptions. And, plugin is the instance of Plugin for the plugin.

wct-local and wct-sauce are example plugins you can follow.

Node support

WCT supports node versions 8 and up.

WCT supports running tests for web-components which are installed via npm to node_modules (instead of via bower to bower_components) by use of an --npm flag. Components which wish to support npm-based installation should include wct-browser-legacy in their devDependencies, which is a package that contains only the client-side javascript necessary for executing WCT tests in an npm-based environment. WCT will attempt to identify which package provides the client-side code by checking for compatible packages in the following order of preference: wct-mocha, wct-browser-legacy and web-component-tester. If you want to specify which package provides WCT client-side code, use the --wct-package-name flag or wctPackageName option in wct.conf.json with the npm package name.