Polymer：如何在 mocha 中测试 "on-tap"？

Question

我有一个组件，当在移动设备上点击时，它会隐藏叠加层并显示说明（就像桌面上的悬停一样）。

到目前为止，对于桌面，我一直在使用 myElement.fire("mouseenter"):

在我的组件上测试鼠标事件，例如 mouseenter

      test('it shows the description on hover', function() {
        var actionCardOverlay = missionCard.querySelector('ct-action-card-overlay');
        var actionCardDescription = missionCard.querySelector('ct-action-card-description');
        actionCardOverlay.fire("mouseenter");
        expect(actionCardDescription.hidden).to.equal(false);
      });

然而，在尝试测试移动设备时，当我执行类似 myElement.fire("tap") 的操作时，我的 tap 事件似乎并没有在我的测试中触发：

      suite('when user is using a mobile device', function() {
        test('it shows the description on tap', function() {
          var actionCardOverlay = missionCard.querySelector('ct-action-card-overlay');
          var actionCardDescription = missionCard.querySelector('ct-action-card-description');
          actionCardOverlay.fire("tap");
          expect(actionCardDescription.hidden).to.equal(false);
        });

        test('it hides the overlay on tap', function() {
          var actionCardOverlay = missionCard.querySelector('ct-action-card-overlay');
          var actionCardDescription = missionCard.querySelector('ct-action-card-description');
          actionCardOverlay.fire("tap");
          expect(actionCardOverlay.hidden).to.equal(true);
        });
      });

这是我在 JSFiddle 中的代码的简化版本。我还验证了该演示适用于移动设备：https://jsfiddle.net/Lnws78cb/1/

我会触发什么事件？换句话说，我将如何模拟点击元素？

我正在使用这些测试框架：

"chai": "^3.2.0",
"mocha": "^2.2.5",
"sinon": "^1.15.4",
"sinon-chai": "^2.8.0",
"supertest": "^1.0.1",
"web-component-tester": "^3.4.2"

Answer 1

您需要创建自定义事件实例

myElement.fire(new CustomEvent('tap'));

Polymer：如何在 mocha 中测试 "on-tap"？

Polymer: How to test "on-tap" in mocha?

mocha.js

sinon

polymer