I am trying to test a custom Polymer element using their web-component-tester. Many of the examples make use of test-fixture. I would like to test my custom element using databinding, but I'm struggling to get data binding to work.
Essentially, I want to take my custom element, assume that the variables are bound, and assert things about it. I'm trying to follow the example in the test-fixture README. Note also that I originally posted this question on their issue tracker before realizing that Stack Overflow is probably a better place for it.
I'm defining a custom element in a my-element.html file, like follows:
<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 portion 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 wasn't working for me), and the div is empty, without captureUrl bound and inserted into the function. What am I doing wrong here? Am I mis-using Polymer? Mis-using test-fixture?