функция flush всегда выполняет тест на полимеры

Question

Я пишу тесты для элемента Polymer-3.x, где я использую dom-if.Согласно документам , я использовал flush.Но это не оценивает и напрямую помечает все тесты как пройденные.

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

Если я удалюflush

• #1 завершается неудачно, как и ожидалось.
• #2 говорит

  Невозможно прочитать свойство 'innerHTML' с нулевым значением

Как написать контрольный пример для dom-if, когда условие становится истинным?

Answer 1

Вам также необходимо добавить готовый контейнер:

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