如何在不刷新页面的情况下测试 Polymer 2 元素中的表单提交答案

【问题标题】：How to test form submits in Polymer 2 elements without the page refreshing如何在不刷新页面的情况下测试 Polymer 2 元素中的表单提交
【发布时间】：2017-05-31 18:17:12
【问题描述】：

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

感谢您的帮助。

【问题讨论】：

您是如何在实际应用中提交表单的？我没有看到任何提交按钮。
此时只是按下输入键。该计划可能是公开 keyup 事件并让其他组件对按键做出反应。

标签： polymer polymer-2.x web-component-tester

【解决方案1】：

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

我通过执行polymer serve 并访问类似“http://127.0.0.1:8081/components/myapp/test/my-search.html”的页面来运行测试。

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

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

访问 'http://127.0.0.1:8081/components/myapp/test/' 并在 'index.html' 中执行 WCT.loadSuites() 以在两种浏览器中运行测试都可以正常工作，并且还会在页面正文中输出一个不错的测试摘要。

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

【讨论】：