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
Versions
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:Expected Results
Test passes
Actual Results
Error: thumbnail preview has not rendered: expected null to not equal nullBrowsers Affected
Versions