Search code examples
polymertddweb-component-tester

web-component-tester MockInteractions does not send key press event


I could'not simulate a simple press enter in a paper-input using MockInteractions.pressEnter inside a web-component-tester test case.

When I press enter with a true keyboard it do the job.

Here is my code, does anyone has an idea or a work around?

<!doctype html>
    <html>
    <head>
      <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

      <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <script src="../bower_components/web-component-tester/browser.js"></script>
      <script src="../bower_components/iron-test-helpers/mock-interactions.js"></script>


      <link rel="import" href="../bower_components/polymer/polymer.html">
      <link rel="import" href="../bower_components/iron-test-helpers/iron-test-helpers.html">
      <link rel="import" href="../bower_components/paper-input/paper-input.html">

    </head>
    <body>
    <test-fixture id="basic">

      <template>
        <dom-module id="search-module">
          <template>
            <paper-input id="searchInput" label="Search" value="{{searchValue}}"></paper-input>
          </template>

          <script>
            (function() {
              'use strict';
              Polymer({
                is: 'search-module',
                properties: {
                  searchValue: String
                },
                listeners: {
                  'searchInput.keypress': '_keyType'
                },
                _keyType: function(keypress) {
                    this.fire('search');
                }
              });
            })();
          </script>
        </dom-module>

        <search-module id="moduleUnderTest"></search-module>
      </template>
    </test-fixture>

    <script>
      describe('search-module', function() {
        var element;

        beforeEach(function() {
          element = fixture('basic')
            .find(function(elem){
                if(elem.id === 'moduleUnderTest') return elem;
            });
        });
        it('should fire search on press enter', function (done) {
          element.set('searchValue', 'tap enter');
          flush(function () {
            var input = element.$.searchInput;
            element.addEventListener('search',function () {
              expect(element.searchValue).to.be.equal('tap enter');
              done()
            });
            MockInteractions.focus(input);
            setTimeout(function () {
              MockInteractions.pressEnter(input);
              // pressAndReleaseKeyOn Does not work as well.
              // MockInteractions.pressAndReleaseKeyOn(input, 'a'.charCodeAt(0))
            },500)
          })
        });
      });
    </script>

    </body>
    </html>

Solution

  • it works for 'keydown' event, not 'keypress' event.