flush function always makes polymer test (for dom-if) pass

Question

I am writing tests for polymer-3.x element where I am using dom-if. According to the docs, i used flush. But this does not evaluate and directly marks all tests as passed.

my-element_test.html

<test-fixture id="ChangedPropertyTestFixture">
  <template>
    <display-message login='{"auth": true}'></display-message>
  </template>
</test-fixture>

<script type="module">
  suite('display-message', () => {

    test('setting a property on the element works', () => {
      flush(function() {
        const element = fixture('ChangedPropertyTestFixture');
        assert.equal(element.login.auth, false);   // #1 = should fail
        const elementSpan = element.shadowRoot.querySelector('span');
        assert.equal(elementSpan.innerHTML, 'random text');   // #2 = should fail    
        done();
      });
    });

  });
</script>

my-element.js

static get template() {
    return html`
    <template is="dom-if" if="{{login.auth}}"> <br>
        <span>Display message</span>
    </template>
    `;
}
static get properties() {
    return {
      login: {
        type: Object,
        value: function(){ 
          return { auth: false }; 
        }
      }
    };
}

If i remove flush

• #1 fails as expected.
• #2 says

  Cannot read property 'innerHTML' of null

How to write test case for dom-if, when the condition gets true?

Answer 1

You need to add the done to your container as well:

test('setting a property on the element works', (done) => {
      flush(function() {
        const element = fixture('ChangedPropertyTestFixture');
        assert.equal(element.login.auth, false);   // #1 = should fail
        const elementSpan = element.shadowRoot.querySelector('span');
        assert.equal(elementSpan.innerHTML, 'random text');   // #2 = should fail    
        done();
     });
});