5
Tôi đang cố gắng kết nối Mocha/Chai/Karma cho khuôn khổ thử nghiệm của chúng tôi. Tôi đã gần đến đó, sử dụng hướng dẫn kiểm tra đơn vị Polymer làm cơ sở. Tôi muốn một cái gì đó đơn giản hơn nhiều, chỉ cần một kịch bản tests.js và sử dụng một thành phần bower vca-tests. Đây là cách 'tests.js trông:Cách tải phần tử polymer theo cách thủ công
(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);
});
});
});
}());
Vì vậy, tôi đã viết một bài kiểm tra Mocha Á hậu:
<!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>
Các elementSuite chức năng tải ở các thành phần từ các tuyến đường của kho thành một . Do cách thức bower công việc tôi cần phải sửa đổi vị trí của hàng nhập khẩu. Các vca-test.html trong được nạp từ bên trong thư mục bower_components:
<!-- 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>
Vì vậy, câu hỏi của tôi nắm này: Làm thế nào tôi có thể XHR một tài liệu HTML có chứa một polymer-element nhưng thay đổi cơ sở href để tương đối thành phần Chòi chơi cho tải của tôi?
Polymer dường như thực hiện một số phép thuật khi <link rel="import"> được tải để làm cho phần tử khả dụng.
Nhìn vào bên trong của mã Polymer, bằng cách sử dụng một 'dữ liệu:' URI như 'href' được hỗ trợ nhưng polypill Polymer HTMLImports dường như không hỗ trợ nó. Nhìn vào một miếng vá. –