Unit testing of dynamically created elements in Polymer

Question

Overview

DOM elements that are dynamically displayed in dom-if , dom-repeat <templates> seem to be asynchronous, making block testing a little pain.

---

Polymer component

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

Test

  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; }); 

---

Why this seems unsuccessful:

When you click a button that launches dom-if / dom-repeat , the items are not displayed in synchronous order.

• dom-if and subsequent / nested dom-repeat are output asynchronously.

• Worse, button itself gets its class by computed / attached view (mind class$= on button ).

So, the question boils down to the following:

Is it possible to force the rendering of dom-if , dom-repeat and computed class binding in synchronous order after I simulate a click on a button that activates all 3 of these conditions?

---

Notes:

• I am using the official WCT Polymer as a test harness.
• I also use chai-jquery.
• I also used Polymer.dom.flush() , but it still does not work as well .. flush.
• I know that I can use chai-as-promised.js instead, but this adds unnecessary complexity to my tests for a trivial question like this, so I would like to avoid it.

Answer 1

Instead of using Polymer.dom.flush() try using the flush function that WCT places on the window. This will call a callback function, which will theoretically be executed after the template is rendered.

 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(); } }); 

It is important to note: asynchronous tests require the function to be passed to the test callback, and you need to make a call to the call after your conditions have been evaluated.