0

フォームとテキスト入力を含む Polymer 2 の「検索」コンポーネントがあります。コンポーネントは、 を使用してフォーム要素のフォーム送信を処理しon-submit="_handleFormSubmit"、処理関数は を呼び出しますevent.preventDefault()。これは、実際のアプリで使用すると期待どおりに機能します。フォームの送信はブラウザーによって処理されないため、ページの更新はありません。また、ハンドラーはsearch、コンポーネントで発生するカスタム イベントを作成します。そのコードは次のとおりです。

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<dom-module id="my-search">
  <template>
    <form on-submit="_handleSearchSubmit">
      <input type="text" name="search" placeholder="[[placeholder]]" value="{{searchFor::change}}">
    </form>
  </template>

  <script>
    class MySearch extends Polymer.Element {

      static get is() { return 'my-search'; }

      static get properties() {
        return {
          'placeholder': {
            type: String
          },
          'searchFor': {
            type: String
          }
        }
      }

      _handleSearchSubmit(e) {
        e.preventDefault();
        this.dispatchEvent(new CustomEvent('search', {detail: {searchFor: this.searchFor}}));
      }
    }

    window.customElements.define(MySearch.is, MySearch);
  </script>
</dom-module>

このコンポーネントのテストを作成しようとしていますが、searchイベントをテストしようとすると、フォーム送信がテスト ページを更新するのを止めることができないようです (したがって、無限のテスト ループ)。私のテストは次のようになります。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>my-search-test</title>

    <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <script src="../bower_components/web-component-tester/browser.js"></script>
    <link rel="import" href="../src/my-search.html">
</head>
<body>
    <test-fixture id="mySearchTest">
      <template>
        <my-search></my-search>
      </template>
    </test-fixture>

    <script>
      suite('<my-search>', function() {
        var el;

        setup(function() {
          el = fixture('mySearchTest');
        });

        test('the search event is triggered on form submit', function(done) {
          var formEl = el.shadowRoot.querySelector('form');
          el.addEventListener('search', function(event) {
            done();
          });
          formEl.dispatchEvent(new Event('submit'));
        });

      });
    </script>
  </body>
</html>

に変更formEl.dispatchEvent(new Event('submit'))してみましformEl.submit()たが、同じ問題が発生しますが、submit()アプローチを使用すると、イベントを発生させるよりもページが速く更新されるようです。また、イベントを発生させると、コンソールが更新される前に完全なテスト出力がコンソールに表示されます (したがって、すべてのテストに合格したことがわかります)。

助けてくれてありがとう。

4

1 に答える 1