flush() not rendering conditional template efficiently

[thuoe]

I am testing whether CSS properties will have successfully been applied to the Shadow DOM element which is wrapped in a conditional template using flush:

const assertComputed = (node, expected, property) => {
  const actual = getComputedStyle(node).getPropertyValue(property).trim();
  assert.equal(expected, actual);
};
....
// test
test('CSS properties applied within conditional template', (done) => {
   flush(() => {
      const thumbnail = player.shadowRoot.querySelector('.thumbnail');
      assertComputed(thumbnail, 'orange', '--video-thumbnail-background-color');
      done();
  });
});

<template is="dom-if" if={{showThumbnailPreview}}>
     <div id="preview_thumbnail" class="thumbnail">THUMBNAIL PREVIEW MOUSE OVER POSITION: [[xPosition]]</div>
</template>

Expected Results

Test passes

Actual Results

Error: thumbnail preview has not rendered: expected null to not equal null

Browsers Affected

• Chrome

Versions

• Polymer: 1.9.11

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.