Menu
I'm trying to hook up Mocha/Chai/Karma for our testing framework. I have almost got there, using the Polymer unit test guide as a base. I wanted something much simpler, requiring just a tests.js script and to use a bower component vca-tests. This is how the `tests.js looks:
(function() {
'user strict';
elementSuite('vca-colour-picker', function() {
test('setting the web value should be reflected in the RGB values', function(done) {
this.set(function(element) {
element.web = '#FFCC88';
}).then(function(element) {
assert.equal(element.r, 255);
assert.equal(element.g, 204);
assert.equal(element.b, 136);
});
});
});
}());
So I wrote a Mocha test runner:
<!doctype html>
<html>
<head>
<title>VCA Element Test Runner</title>
<meta charset="UTF-8">
<!-- Load in the frameworks we need -->
<script src="../platform/platform.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="vca-tests.html">
</head>
<body>
<div id="mocha"></div>
</body>
</html>
The elementSuite function loads in the component from the route of the repository into an <iframe>. Due to the way bower works I need to modify the location of the imports. The vca-test.html in loaded from inside the bower_components folder:
<!-- Test frameworks -->
<link rel="stylesheet" href="../mocha/mocha.css" />
<script src="../mocha/mocha.js"></script>
<script src="../chai/chai.js"></script>
<!-- Perform some set up -->
<script>
(function() {
'use strict';
var iframe,
documents = {};
function elementImport(suite, name, done) {
if (this.status === 200) {
var i,
doc = iframe.contentDocument,
link = doc.createElement('link'),
win = iframe.contentWindow,
head = doc.getElementsByTagName('head')[0],
body = doc.body,
origin = window.location.origin,
links = this.response.querySelectorAll('link[rel="import"]'),
element = this.response.querySelector('polymer-element');
// Fix up the import paths as they will be referencing the root path and we
// need the relative to the bower components (which is where we are now)
for (i = 0; i < links.length; ++i) {
links[i].href = links[i].href.replace(origin, '..');
doc.adoptNode(links[i]);
head.appendChild(links[i]);
}
// Make sure polymer is fired up
doc.addEventListener('polymer-ready', function() {
// --------------------------------------------------------------------------
// At this point we have loaded all of the dependent components of the
// component to test but we still need to be able to create instances
// of the component. The below code will work, but because it is loaded
// to the root of the repository all the dependencies will fail with 404s
/*/ Import the rest of the component
link.rel = 'import';
link.href = '../../' + name + '.html';
link.import = this.response;
head.appendChild(link);/**/
// --------------------------------------------------------------------------
// Create the element
suite.ctx.element = doc.createElement(name);
body.appendChild(suite.ctx.element);
// Tell mocha that we are done
done();
}, false);
}
}
function elementLoad(name, done) {
var xhr = new XMLHttpRequest(),
path = '../../' + name + '.html';
xhr.open('GET', path, true);
xhr.responseType = 'document';
xhr.onload = elementImport.bind(xhr, this, name, done);
xhr.send();
}
function elementSetup(name, done) {
iframe = document.createElement('iframe');
iframe.style.cssText = /*'position: absolute;left:-10000em;*/'width:768px;height:1024px';
iframe.onload = elementLoad.bind(this, name, done);
iframe.src = 'iframe.html';
document.body.appendChild(iframe);
// Provide convience functions
this.ctx.set = function(callback) {
callback.call(this, this.element);
Platform.flush();
return this;
};
this.ctx.then = function(callback) {
setTimeout(function() {
callback.call(this, this.element);
this.test.callback();
}.bind(this), 50);
return this;
};
}
function elementTeardown() {
// document.body.removeChild(iframe);
}
// This is what the tests.js script uses to register an element to test
window.elementSuite = function(name, tests) {
suite(name, function() {
setup(elementSetup.bind(this, name));
teardown(elementTeardown);
tests();
});
}
// We use chai as our assertion framework
window.assert = chai.assert;
// Mocha runs our tests
mocha.setup({ui: 'tdd', slow: 1000, timeout: 5000});
}());
</script>
<!-- Load in the test script -->
<script src="../../tests.js"></script>
<!-- Run the tests -->
<script>
mocha.run();
</script>
So my question boils down to this: How can I XHR a HTML document containing a polymer-element but change the base href so that my relative bower components load?
Polymer seems to do some magic when the <link rel="import"> is loaded to make the element available.
252
Edit: HTML imports do not support data:text/html in the specification, so this will only work when using the polyfill.
Did it using a horrible monkey patch:
// Do a local import
link.rel = 'import';
link.href = 'data:text/html,' + encodeURIComponent(component);
// Monkey Patch Polymer, to fake the location of the 'import'
if (iframe.contentWindow.HTMLImports && !iframe.contentWindow.HTMLImports.useNative) {
var hi = iframe.contentWindow.HTMLImports,
importLoader = hi.importLoader,
receive = importLoader.receive,
origin = iframe.src.substr(0, iframe.src.lastIndexOf('/', iframe.src.lastIndexOf('/') - 1));
importLoader.receive = function(args) {
if (arguments[0] === link.href) {
var i, redirected = [];
for (i = 0; i < arguments.length; ++i) {
redirected.push(arguments[i]);
}
redirected.push(origin + '/' + name + '/' + name + '.html');
receive.apply(this, redirected);
} else {
receive.apply(this, arguments);
}
}
}
// Add the link now that we are monkey patched
doc.head.appendChild(link);
The HTMLImports doesn't handle data URIs correctly at the time of writing. Not sure how to write a patch for the project at the moment.
104
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With