7

概要

dom-if内で動的にレンダリングされる DOM 要素は、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ください)。

したがって、質問はこれに要約されます。

これらの条件の 3 つすべてをアクティブにするボタンへのクリックをシミュレートした後、クラスの、、および計算されたバインディングを同期順序で強制的にレンダリングすることは可能ですか?dom-ifdom-repeat

ノート：

  • テスト ハーネスとして Polymer の公式 WCT を使用しています。
  • 私もchai-jqueryを使っています。
  • 私も使用しましPolymer.dom.flush()たが、まだ使用していません。
  • 代わりに使用できることは承知していますchai-as-promised.jsが、このような些細な問題のテストに不必要な複雑さが追加されるため、避けたいと思います。
4

1 に答える 1

8

を使用するのではなく、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 関数をテスト コールバックに渡す必要があり、条件が評価された後に done を呼び出す必要があります。

于 2015-12-30T05:26:27.403 に答える