Data binding in Polmyer <test-fixture>

Question

I am trying to test a custom Polymer element with web-component-tester . Many examples use test-fixture . I would like to test my custom element using data binding, but I'm struggling to get the data binding to work.

Essentially, I want to take my custom element, assume that the variables are related, and assert about it. I am trying to follow the example in the README test fixture. Please also note that I originally posted this question in my tracker problem before realizing that stack overflow is probably the best place for it.

I define a custom element in my-element.html file, for example:

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

Here is the relevant part of my my-element-test.html file:

 <test-fixture id="my-fixture"> <template> <my-element> <h2>seed-element</h2> </my-element> </template> </test-fixture> <script> suite('<my-element>', function() { var myEl; setup(function() { myEl = fixture('my-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, boundData.captureUrl); }); }); </script> 

When I run this, I see urlDiv in the error message (console.log didn’t work for me), and the div is empty, without captureUrl binding and inserted into this function. What am I doing wrong here? Am I using Polymer incorrectly? Faulty test mount?

Answer 1

I think the template does not have a binding declaration:

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

In addition, you are testing <my-element> but are not present in the test adapter template. What do you want to bind to data?

EDIT

Here is the most important change I made to your code:

• The template inside the test fixture should be <template is="dom-template">
• fixture() call was made with invalid element id

Here's a gist that works. Make bower install , and then just open test.html in your browser.