web-component-tester：测试在Chrome中成功，但在Firefox中失败

Question

我从命令行使用Web组件测试器在我的Polymer组件上运行基于夹具的测试。 测试通过了Chrome（v.47），但未通过Firefox（v.42）。 问题在于，在我的Polymer组件中的某些更改观察器功能中，预期的数据已在Chrome中接收，但在Firefox中为空，从而导致后者中的测试失败。 以下是基本代码：

聚合物组分：聚合物（{是：“组分名称”，

  properties: {
    data: {
    type: Array,
    observer: '_dataChanged'
  },
  _dataChanged: function() {
    process(this.data)  // this line
    ...
  },
  ...

在Chrome中，无论在html固定装置中传递的是什么，上面“此行”中“ this.data”的值都是非空的。 这使我的测试用例成功。 但是在Firefox中，从事件接收到的'this.data'的值是一个空数组[]，导致上述测试失败。 任何想法为什么会这样？

我还尝试过将测试套件包装在“ WebComponentsReady”事件的事件侦听器中，即使Web-component-tester已经确保仅在此类事件触发后才启动套件。 这种方法在Chrome中仍然有效，而在Firefox中仍然无效。

Answer 1

更改_dataChanged方法以将数据值作为参数，如下所示：

properties: {
    data: {
    type: Array,
    observer: '_dataChanged'
},
_dataChanged: function(data) {
    process(data);
...
}

我认为Polymer不能保证在触发观察者时仍会在此上下文中设置属性的值。

Answer 2

我发现的一种解决方法（并非没有运气）是按照以下模式构建夹具和测试脚本：

装置（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上运行所需要的。

我听说Firefox在管理组件层次结构的“就绪”事件方面还不如Chrome强大或稳定。 这可能与问题有关。

web-component-tester：测试在Chrome中成功，但在Firefox中失败

问题描述

2 个解决方案

解决方案1
1 2015-12-09 02:03:09

解决方案2
0 2015-12-09 22:26:38

web-component-tester：测试在Chrome中成功，但在Firefox中失败

问题描述

2 个解决方案

解决方案1 1 2015-12-09 02:03:09

解决方案2 0 2015-12-09 22:26:38

解决方案1
1 2015-12-09 02:03:09

解决方案2
0 2015-12-09 22:26:38