polymer - 在 Polymer 中对动态渲染元素进行单元测试

Question

概述

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

polymer 成分

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它本身以计算/绑定(bind)的方式获取它的类(注意 class$= 上的 button )。

所以问题归结为:

是否可以强制渲染 dom-if , dom-repeat ，以及在我模拟点击激活所有这三个条件的按钮后，以同步顺序对类进行计算绑定(bind)？

备注:

我使用 Polymer 的官方 WCT 作为测试工具。

我也在使用 chai-jquery。

我也用过Polymer.dom.flush()但它仍然没有，咳咳……冲洗。

我知道我可以使用 chai-as-promised.js相反，但它为我的测试增加了不必要的复杂性，因为这样的微不足道的事情，所以我想避免它。

Answer 1

而不是使用Polymer.dom.flush() ，尝试使用 flush WCT 放在窗口上的函数。理论上，这将在模板渲染后将要执行的回调函数排入队列。

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。