使用WCT使用铁ajax测试聚合物1.0组件 [英] Testing polymer 1.0 components with iron-ajax using wct
问题描述
在模拟服务器对我的自定义组件中的Iron-ajax组件的响应时，我遇到了最困难的时间.这是我的代码文件.
I am having the hardest time mocking the server response to an iron-ajax component inside my custom component. Here is my code files.
custom-component.html:
custom-component.html:
<link rel="import" href="/iron-ajax/iron-ajax.html">
<link rel="import" href="/internal-component/internal-component.html">
<dom-module id="custom-component">
<template>
<iron-ajax url="staticFile.json" auto handle-as="json" last-response={{ajaxResponse}}></iron-ajax>
<template is="dom-repeat"
items={{ajaxResponse}}
sort="_sort"
id="gridRow">
<internal-component var1={{item.var1}}
var2={{item.var2}}>
</internal-component>
</template>
</template>
</dom-module>
<script>(some cool scripts that are working...)</script>
custom-component-tests.html
custom-component-tests.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="/webcomponentsjs/webcomponents-lite.js"></script>
<script src="/web-component-tester/browser.js"></script>
<script src="/test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="/test-fixture/test-fixture.html" />
<link rel="import" href="/polymer/polymer.html">
<link rel="import" href="/polymer-ts/polymer-ts.html">
<link rel="import" href="custom-component.html">
</head>
<body>
<test-fixture id="testElement">
<template>
<custom-component></custom-component.>
</template>
</test-fixture>
<script>
suite('<custom-component>', function () {
var testElement;
var server;
var responseHeaders = {
json: { 'Content-Type': 'application/json' },
plain: { 'Content-Type': 'text/plain' }
};
setup(function () {
replace('custom-component').with('fake-custom-component');
server = sinon.fakeServer.create();
server.respondWith('GET', /staticFile\.json/, [
200,
responseHeaders.json,
'[{"var1": "9a","var2": "17n"}]'
]);
testElement = fixture("testElement");
});
teardown(function () {
server.restore();
});
suite('testSuite', function () {
test('test1', function () {
var ajax = testElement.getElementsByTagName('iron-ajax')[0];
ajax.lastResponse = null;
ajax.generateRequest();
server.respond();
assert(ajax.lastResponse.hour === "9a");
});
});
});
</script>
</body>
</html>
您会注意到，我在明确地调用iron-ajax generateRequest，因为如果我不这样做，那么直到我的测试完成(并失败)后，该请求才会发生.当显式调用generateRequest时，我至少能够使请求发生，但是(即使我正在调用server.respond())，直到测试完成后，iron-ajax才调用_handleResponse.而且，即使这样做，也不会设置lastResponse，因为Iron-ajax中有一行代码会检查(request === this.lastRequest)(不是).
You'll notice that I'm explicitly calling the iron-ajax generateRequest because if I didn't, then the request wouldn't even happen until after my test completed (and failed). When calling generateRequest explicitly, I am at least able to make the request happen, but (even though I am calling server.respond()) iron-ajax doesn't call _handleResponse until after the test completes. And, even when it does, it is not setting lastResponse because there is a line of code in iron-ajax that checks if (request === this.lastRequest) (which it isn't).
我在做什么错了?
推荐答案
我发现了一种更好的解决方案，可以测试我的元素中Iron-ajax元素的自动功能.
I have found a better solution to test the auto functionality of iron-ajax elements in my elements.
您需要根据ajax的请求添加事件侦听器以触发服务器响应，不需要generateRequest，也不需要setTimeout hacks.
You need to add an event listener on the request of your ajax to fire your server response, no need for generateRequest and no need for setTimeout hacks.
这是一个示例:
test('test with ajax element', function (done) {
var ajax = Polymer.dom(myElement.root).querySelector("#ajax_element");
ajax.addEventListener('request', function (e) {
server.respond('GET', '/CALLED_URL', dataResponse);
});
ajax.addEventListener('response', function (e) {
//DO YOUR EXPECTS HERE
done();
});
});
这篇关于使用WCT使用铁ajax测试聚合物1.0组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
