У меня есть компонент поиска 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(), кажется, обновляет страницу быстрее, чем запуск события. Кроме того, при запуске события я получаю полный тестовый вывод в консоли (поэтому он сообщает мне, что все тесты пройдены), прежде чем он обновится.
Спасибо за любую помощь.
