在 Polymer 中对动态呈现的元素进行单元测试

Question

概览

DOM 在 dom-if、dom-repeat <templates> 中动态呈现的元素似乎是异步呈现的，因此使单元测试有点痛苦。

聚合物成分

template(is='dom-if', if='{{!defaultPrintAll}}')
  template(is='dom-repeat', items='{{_pageBucketItems}}')
    button(type='button', class$='{{_computeDefaultClass(item)}}', on-tap='_togglePageClick') {{item}}

测试

  test("Clicking 'Export All' to off, reveals board-selection tiles", function() {
    $("#export-pdf-checkbox-all").siblings(".checkbox").trigger("click");
    Polymer.dom.flush()
    expect($(".board-range__button")).to.be.visible;
  });

为什么它似乎失败了：

单击触发 dom-if/dom-repeat 的按钮时，元素不会以同步顺序呈现。

dom-if 和 subsequent/nested dom-repeat 异步呈现。
更糟糕的是，button 本身以 computed/binded 的方式得到它的 class（请注意 [=19 上的 class$= =]).

所以问题归结为：

是否可以强制渲染 dom-if、dom-repeat 以及 class 中的计算绑定48=]同步在我模拟点击激活所有 3 个条件的按钮后的顺序？

备注：

我正在使用 Polymer 的官方 WCT 作为测试工具。
我也在用 chai-jquery.
我也用过Polymer.dom.flush()，但还是不行，咳咳.. flush.
我知道我可以使用 chai-as-promised.js 代替，但它为我的测试增加了不必要的复杂性，以解决诸如此类的琐碎问题，因此我想避免使用它。

Answer 1

与其使用 Polymer.dom.flush()，不如尝试使用 WCT 放在 window 上的 flush 功能。理论上，这将在模板呈现后排队执行回调函数。

test("Clicking 'Export All' to off, reveals board-selection tiles", function(done) {
    $("#export-pdf-checkbox-all").siblings(".checkbox").trigger("click");
    flush(function () {
        expect($(".board-range__button")).to.be.visible;
        done();
    }
});

重要提示：异步测试要求将 done 函数传递到测试回调中，并要求在评估条件后调用 done。

在 Polymer 中对动态呈现的元素进行单元测试

Unit testing dynamically-rendered elements in Polymer

chai

polymer

polymer-1.0

wct

概览

聚合物成分

测试

为什么它似乎失败了：