How do I setup the following element/test with web-component-tester and polymer such that (1) the XHR request completes, (2) then the assert runs, causing (3) the test to pass?
/my-element.html
<dom-module id="my-element">
<template>
<iron-request id="req"><iron-request>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'my-element',
properties: {
newVal: Object
},
fetchedStuff: function(ironRequest) {
this.set('newVal', ironRequest.response);
console.log('This gets logged after tests run.'); // <--- this is firing too late!
},
ready: function() {
this.$.req.resolveCompletes = this.fetchedStuff;
this.$.req.send({url: '/my.json'});
}
});
})();
</script>
</dom-module>
/my-element-test.html
<test-fixture id="basic">
<template>
<my-element></my-element>
</template>
</test-fixture>
<script>
suite('my-element tests', function() {
test('Item lengths should be equalled', function(done) {
element = fixture('basic');
flush(function() {
assert.equal(element.newVal, {"name": "Polymer"});
done();
});
})
});
</script>
Background:
We'd like to test ajax calls without using the Sinon server provided in web-component-tester (that is, we'd like to make real xhr calls. We'd like to do this because the xhr requests should return content from files that are automatically generated from a different system.
FWIW, I've tried putting callbacks and promises in various places, including using an iron-ajax element, and I can't seem to find an ideal way to solve this. The only solution I've found so far, is to create an event called "executeTests," which seems jenky.
