polymer - Web Component Tester: DOM へのアクセス

Question

何百もの Polymer テスト スイートがあります。各テストの最後に、DOM にアクセスしてカスタムの品質チェックを行いたいと考えています。

wct プラグインの作成は機能しますか? その場合、プラグイン内から DOM にアクセスするにはどうすればよいですか?

前もって感謝します！

Answer 1

プラグインは必要ありません。el.querySelector()ネイティブ DOM API (例: ) または Polymer インスタンス メソッド (例:el.$$()または) を使用して、テスト フィクスチャの DOM にアクセスできますel.getEffectiveChildren()。Chrome 53 および 56 の Shady および Shadow DOM でこれを確認しました。

この例では、DOM 関連のいくつかのアサーションを に追加しますafterEach()。これは、すべてのテストの後に実行されます。

<test-fixture id="basic">
  <template>
    <my-app></my-app>
  </template>
</test-fixture>

<script>
  describe('my-app', function() {
    var el;

    beforeEach(function() {
      el = fixture('basic');
    });

    afterEach(function() {
      expect(el.$$('h2').textContent).to.have.string('Hello');
      expect(el.querySelectorAll('*')).to.have.lengthOf(2);
    });

    it('instantiating the el works', function() {
      expect(el.is).to.equal('my-app');
    });
  });
</script>