0
フォーム2とテキスト入力を含むPolymer 2 "search"コンポーネントがあります。このコンポーネントは、フォーム要素のフォーム送信をon-submit="_handleFormSubmit"で処理し、処理関数はevent.preventDefault()を呼び出します。これは、実際のアプリケーションで使用されたときに期待通りに機能します。フォーム提出はブラウザによって処理されないため、ページの更新はありません。また、ハンドラはコンポーネントに発生したカスタムsearchイベントを作成します。ここではそのコードは次のとおりです。ページリフレッシュなしでポリマー2の要素にフォーム送信をテストする方法
<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イベントをテストします。 submit()アプローチを使用して迅速にイベントを発射よりもページを更新しているようだが、
<!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.submit()にformEl.dispatchEvent(new Event('submit'))を変更しようとしたと同じ問題が発生します。ここに私のテストは次のようになります。また、イベントを発生させると、コンソールで完全なテスト出力が得られます（したがって、すべてのテストが成功したことがわかります）。
ありがとうございました。
フォームを実際のアプリケーションでどのように提出していますか？送信ボタンは表示されません。 – a1626
これはちょうどボタンを押して入力するだけです。この計画はおそらく、キーアップイベントを公開し、他のコンポーネントがキープレスに反応するようにすることです。 – ndavison