单元测试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和它的后续/嵌套的dom-repeat异步呈现.

• 更糟糕的是,在button自身获得的它的类在计算/绑定的方式(介意class$=的button).

所以问题归结为:

是否有可能迫使渲染的dom-if,dom-repeat和计算的结合在一个类的同步后,我模拟点击激活这些条件全部3个按钮顺序？

---

笔记:

• 我正在使用Polymer的官方WCT作为测试工具.
• 我也在使用chai-jquery.
• 我也用过,Polymer.dom.flush()但它仍然没有,咳咳..冲洗.
• 我知道我可以使用chai-as-promised.js它,但它为我的测试添加了不必要的复杂性,这是一个微不足道的事情,所以我想避免它.

Answer 1

而不是使用Polymer.dom.flush(),尝试使用flushWCT放在窗口上的功能.这将在模板渲染之后将理论上的回调函数排入队列.

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函数传递给测试回调,并且需要在评估条件后调用.