我有一个包含表单和文本输入的 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()方法似乎比触发事件更快地刷新页面。此外，在触发事件时，我会在控制台中获得完整的测试输出（因此它会告诉我所有测试都通过了），然后才会刷新。
谢谢你的帮助。