Package Exports

web-component-tester
web-component-tester/runner/config.js
web-component-tester/runner/test

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (web-component-tester) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

Additionally, WCT provides integration with selenium, so that you can easily run your test suites across multiple browsers.

Getting Started

There's a bit of setup necessary.

Bower

You will need to set up WCT as a dependency of your project. Via bower:

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

In the following examples, we assume that you've installed it in ../, but any location will do.

Test Index

WCT will, by default, run tests declared in test/index.html. Generally, you'll want to use this to load all your test suites:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="../../platform/platform.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>

`.js` Suites

Your test suites can either be .js sources, which run in the context of your text index. For example, test/awesome-tests.js:

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

`.html` Suites

Or, you can write tests in separate .html documents. For example, test/awesomest-tests.html:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../../platform/platform.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>

Running Your Tests

You can run your tests by hosting them via a web server (sorry, file:// is not supported), or by using the wct command line tool:

npm install -g web-component-tester

If you're on windows, make sure that you also have Java installed and available on your PATH.

The wct tool will run your tests in multiple browsers at once, either on your machine...

wct

..or remotely via Sauce Labs:

wct --remote

Nitty Gritty

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.

Command Line

The wct tool, and the gulp and grunt integration, support several command line flags:

--remote: Uses the default remote browsers, and if omitted uses the default local browsers.

--browsers BROWSER,BROWSER: Override the browsers that will be run.

--persistent: Doesn't close the browsers after their first run. Refresh the browser windows to re-run tests.

--expanded: Lists each test as it passes/fails/pends.

Gulp

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

var gulp = require('gulp');
require('web-component-tester').gulp.init(gulp);

Exposes gulp test:local and gulp test:remote.

Grunt

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

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

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.js.

web-component-tester