Question

概述

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

聚合物组分

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）。

所以问题归结为：

是否有可能强制渲染 {I} dom-if，以及我在同步顺序中对该类的计算绑定模拟点击按钮，激活所有这三个条件？

备注：

我正在使用Polymer的官方WCT作为测试工具。
我也在使用chai-jquery。
我也使用了dom-repeat，但它仍然没有，咳咳......冲洗。
我知道我可以使用Polymer.dom.flush()代替但是它为我的测试添加了不必要的复杂性，因为这样的一件小事，所以我想避免它。

Answer 1

尝试使用WCT在窗口中放置的Polymer.dom.flush()函数，而不是使用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函数传递给测试回调，并且需要在评估条件后调用。

在Polymer

概述

聚合物组分

测试

为什么它似乎失败了：

1 个答案: