web-component-tester :在Chrome中测试成功，在Firefox中测试失败
我从命令行使用web-component tester在我的聚合物组件上运行基于fixture的测试。测试成功了Chrome (v.47)，但在Firefox (v.42)中失败了。问题是，在我的聚合物组件中的某些更改观察器函数中，预期的数据在Chrome中被接收，但在Firefox中为空，导致后者中的测试失败。以下是基本代码：
聚合物成分:聚合物({ is：'component-name'，
properties: {
data: {
type: Array,
observer: '_dataChanged'
},
_dataChanged: function() {
process(this.data) // this line
...
},
...在Chrome中，上面"this line“中'this.data‘的值是非空的，不管传入的是什么html fixture。这允许我的测试用例成功。但在火狐中，从事件接收的'this.data‘的值是一个空数组[]，导致上述测试失败。你知道为什么会这样吗？
我还尝试将我的测试套件包装在'WebComponentsReady‘事件的事件侦听器中，即使web组件测试器已经确保只有在这样的事件触发之后才会启动套件。这种方法在Chrome中仍然有效，在Firefox中仍然失败。
回答 2
Stack Overflow用户
发布于 2015-12-09 10:03:10
更改您的_dataChanged方法以接受数据值作为参数，如下所示：
properties: {
data: {
type: Array,
observer: '_dataChanged'
},
_dataChanged: function(data) {
process(data);
...
}我不认为当一个观察者被触发时，聚合物不能保证这个属性的值会在this上下文中被设置。
Stack Overflow用户
发布于 2015-12-10 06:26:38
我发现的一个解决方案(不是完全幸运的)是按照以下模式构建fixture和测试脚本：
Fixture (HTML)：
<html>
<head>
...
<script src="../web-component-tester/browser.js"></script>
...
<script src="test-script.js"></script>
...
</head>
<body>
...
<my-component ...></my-component>
...
</body>
</html>test-script.js：
document.addEventListener("WebComponentsReady", function() {
...
// some code that changes the data of my-component
// (needed for correct state of the test cases)
...
runTests();
}
function runTests() {
suite('Test suite for my-component', function(){
...
});
}上面的模式适用于Chrome和Firefox。这有点多余，因为web-component-tester已经监听了"WebComponentsReady"，但上面添加的事件监听器是测试在火狐上工作所需的。
我听说Firefox在管理组件层次结构的“就绪”事件方面还没有Chrome那么健壮和稳定。这可能与问题有关。
https://stackoverflow.com/questions/34169524
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号