Question

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

到目前为止桌面版我一直在使用mouseenter在我的组件上测试myElement.fire("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);
      });

但是，在尝试测试移动设备时，当我执行类似tap的操作时，我的myElement.fire("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); }); });：

"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"

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

我会开什么事？换句话说，我如何模拟元素上的点按？

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

Call

Answer 1

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

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

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

1 个答案: