Question

我正在使用命令行中的web-component tester在我的Polymer组件上运行基于fixture的测试。测试成功完成Chrome（第47版）但在Firefox中失败（第42节）。问题是，在我的Polymer组件中的某些更改观察器功能中，预期的数据在Chrome中被接收，但在Firefox中是空的，导致后者的测试失败。以下是基本代码：

聚合物组分：聚合物（{ 是：'component-name'，

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

在Chrome中，上面“this line”中“this.data”的值非空，无论html fixture中传递了什么。这允许我的测试用例成功。但是在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

我发现的一个修复（并非没有运气）是按照以下模式构建夹具和测试脚本：

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>

测试的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 个答案: