javascript - How to load polymer element manually -
javascript - How to load polymer element manually -
i'm trying hook mocha/chai/karma our testing framework. have got there, using polymer unit test guide base. wanted much simpler, requiring tests.js script , utilize bower component vca-tests. how `tests.js looks:
(function() { 'user strict'; elementsuite('vca-colour-picker', function() { test('setting web value should reflected in 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 wrote mocha test runner:
<!doctype html> <html> <head> <title>vca element test runner</title> <meta charset="utf-8"> <!-- load in frameworks 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 component route of repository <iframe>. due way bower works need modify location of imports. vca-test.html in loaded within 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 set --> <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'); // prepare import paths referencing root path , // need relative bower components (which now) (i = 0; < links.length; ++i) { links[i].href = links[i].href.replace(origin, '..'); doc.adoptnode(links[i]); head.appendchild(links[i]); } // create sure polymer fired doc.addeventlistener('polymer-ready', function() { // -------------------------------------------------------------------------- // @ point have loaded of dependent components of // component test still need able create instances // of component. below code work, because loaded // root of repository dependencies fail 404s /*/ import rest of component link.rel = 'import'; link.href = '../../' + name + '.html'; link.import = this.response; head.appendchild(link);/**/ // -------------------------------------------------------------------------- // create element suite.ctx.element = doc.createelement(name); body.appendchild(suite.ctx.element); // tell mocha 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(); homecoming this; }; this.ctx.then = function(callback) { settimeout(function() { callback.call(this, this.element); this.test.callback(); }.bind(this), 50); homecoming this; }; } function elementteardown() { // document.body.removechild(iframe); } // tests.js script uses register element test window.elementsuite = function(name, tests) { suite(name, function() { setup(elementsetup.bind(this, name)); teardown(elementteardown); tests(); }); } // utilize chai our assertion framework window.assert = chai.assert; // mocha runs our tests mocha.setup({ui: 'tdd', slow: 1000, timeout: 5000}); }()); </script> <!-- load in test script --> <script src="../../tests.js"></script> <!-- run tests --> <script> mocha.run(); </script> so question boils downwards this: how can xhr html document containing polymer-element alter base of operations href relative bower components load?
polymer seems magic when <link rel="import"> loaded create element available.
edit: html imports not back upwards data:text/html in specification, only work when using polyfill.
did using horrible monkey patch:
// local import link.rel = 'import'; link.href = 'data:text/html,' + encodeuricomponent(component); // monkey patch polymer, false location of '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 = []; (i = 0; < arguments.length; ++i) { redirected.push(arguments[i]); } redirected.push(origin + '/' + name + '/' + name + '.html'); receive.apply(this, redirected); } else { receive.apply(this, arguments); } } } // add together link monkey patched doc.head.appendchild(link); the htmlimports doesn't handle info uris correctly @ time of writing. not sure how write patch project @ moment.
javascript unit-testing polymer
Comments
Post a Comment