web-component-tester : 在 Chrome 中测试成功但在 Firefox 中失败答案

【问题标题】：web-component-tester : tests succeed in Chrome but fail in Firefoxweb-component-tester : 在 Chrome 中测试成功但在 Firefox 中失败
【发布时间】：2015-12-10 06:26:38
【问题描述】：

我正在使用命令行中的 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 中，上面“这一行”中的“this.data”的值是非空的，无论在 html 夹具中传递什么。这使我的测试用例能够成功。但是在 Firefox 中，从事件接收到的 'this.data' 的值是一个空数组 []，导致上述测试失败。任何想法为什么会这样？

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

【问题讨论】：

标签： javascript google-chrome firefox polymer web-component-tester

【解决方案1】：

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

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

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

【讨论】：

嗨狗，我试过这个，但它仍然没有在 Firefox 中产生非空数组。在 Chrome 中，测试仍然成功。谢谢你。
@gedestech，您能否提供一个更大的代码示例？例如什么是在元素上设置数据属性，测试是什么样的，等等。
该问题已通过重新安排脚本中的操作并在“WebComponentsReady”事件上明确铰接测试套件的执行来解决，即使 web-component-tester 应该负责该铰接。我将用代码模式的更多细节来回答这个问题。

【解决方案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 强大或稳定。这可能与问题有关。

【讨论】：