polymer - 冲洗功能总是使聚合物测试（用于 dom-if）通过

Question

我正在为我正在使用的 polymer-3.x 元素编写测试dom-if。根据文档，我使用了flush. 但这不会评估并直接将所有测试标记为通过。

我的元素测试.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>

我的元素.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 }; 
        }
      }
    };
}

如果我删除冲洗

• #1按预期失败。
• #2说

  无法读取 null 的属性“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();
     });
});