1

を使用している 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 }; 
        }
      }
    };
}

フラッシュを外すと

  • #1期待どおりに失敗します。
  • #2言う

    null のプロパティ 'innerHTML' を読み取れません

条件が真になったときのdom-ifのテストケースの書き方は？

4

1 に答える 1