Question

我有一个聚合物2＆＃34;搜索＆＃34;包含表单和文本输入的组件。该组件使用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>

我试图为这个组件编写测试，但是当我尝试测试{{1时，我似乎无法阻止表单提交从刷新测试页面（因此无限测试循环）事件。以下是我的测试结果：

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()方法似乎比触发事件更快地刷新页面。此外，在触发事件时，我会在刷新之前在控制台中获得完整的测试输出（因此它告诉我所有测试都已通过）。

感谢您的帮助。

Answer 1

好的，事实证明问题是我可能没有正确运行测试。

我正在通过polymer serve运行测试并访问＆＃39; http://127.0.0.1:8081/components/myapp/test/my-search.html＆＃39;等页面。

在Firefox（53.0.3 64位Ubuntu）中，这产生了无限的刷新。

在Chrome 58 64bit Ubuntu中，这个工作正常。

访问＆＃39; http://127.0.0.1:8081/components/myapp/test/＆＃39;并在＆＃39; index.html＆＃39;内进行WCT.loadSuites()运行测试在两个浏览器中都能正常工作，并在页面体中输出一个不错的测试摘要。

我不知道原始测试方法是否有效，但是当我从测试索引页面点击单个套件时，URL使用?grep=查询字符串来选择测试文件，这个也可以在两种浏览器中使用，所以我猜不到。

如何测试表单在Polymer 2元素中提交而不刷新页面

1 个答案: