tpluscode
8/1/2016 - 4:23 PM

Example of Web Component Tester with bound fixture

Example of Web Component Tester with bound fixture

.gitignore
content_copyfile_download
bower_components/
bower.json
content_copyfile_download
{
  "name": "wct-so-test",
  "description": "",
  "main": "",
  "authors": [
    "tpluscode"
  ],
  "license": "MIT",
  "moduleType": [],
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "devDependencies": {
    "web-component-tester": "~4.3.1"
  },
  "dependencies": {
    "polymer": "polymer/polymer#~1.6.0"
  }
}
readme.md
content_copyfile_download
  • Rendered
  • Source
  1. bower install
  2. open test.html in your browser
  3. Watch the window title
test.html
content_copyfile_download
<!doctype html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html"/>
    <script src="bower_components/web-component-tester/browser.js"></script>
</head>
<html>
<dom-module id="my-element">
    <template>
        <style>
            :host {
                display: block;
                box-sizing: border-box;
            }
        </style>
        <div id="txt-url" class="card-content">{{captureUrl}}</div>
    </template>
    <script>
        Polymer({
            is: 'my-element',
            properties: {captureUrl: String}
        });
    </script>
</dom-module>

<test-fixture id="my-element-fixture">
    <template is="dom-template">
        <my-element capture-url="{{captureUrl}}">
            <h2>seed-element</h2>
        </my-element>
    </template>
</test-fixture>

<script>
    suite('<my-element>', function () {

        var myEl;

        setup(function () {
            myEl = fixture('my-element-fixture', {captureUrl: 'the url'});
        });

        test('heading is captureUrl', function () {
            var urlDiv = myEl.$$('#txt-url');
            // this will obviously fail, but used for logging purposes
            assert.equal(urlDiv.textContent, 'the url');
        });
    });
</script>
</html>