Javascript 如何使用Cypress和Vue测试自定义事件

我需要假装一个用户完成一个视频的动作，该视频发出一个“结束”事件。视频是包装在Vue VimeoPlayer组件中的Vimeo嵌入

当视频自然结束时，“结束”事件将传递给应用程序中的包含组件。VimeoPlayer组件呈现一个id为“#vimeo-player-2”的容器，这就是我试图触发“结束”事件的原因，希望它会冒泡并被捕获以注册观看的视频。在我的Cypress规范中：

cy.get('#vimeo-player-2').trigger('ended');

在我的Vue组件中：

<vimeo-player :video-id='block.content.id' @ended='updateProgress' ></vimeo-player>

这是测试结果中显示的内容：

---

您可以使用Vue的

$emit（）

而不是Cypress的

.trigger（）

来完成此操作

首先，您需要在

窗口

上对播放器进行引用

我还添加了一个数据变量“progress”来测试这个概念，您将有不同的测试标准

Vue组件

//添加一个ref，以便我们可以访问元素

data（）{
返回{
...
进度：“atStart”//仅用于确认触发的事件
}
},
安装的（）{
if（window.Cypress）{//仅在测试时
window.vueplyer=这个；
}
},
方法：{
...
updateProgress（）{
this.progress='atEnd'
},
}

规格

cy.window（）.its（'vuePlayer'）。然后（myVueComponent=>{
const vuevidemeoplayercomponent=myVueComponent.$refs.player；
VueVideOplayerComponent.$emit（'ended'））
//在此处运行测试，例如
console.log（'testing'，myVueComponent.progress）//='atEnd'
})

---

注意，我关闭了

autoplay

，以便仅规范的emit触发事件。

Vue自定义事件在Vue实例上发出，而不是在DOM元素上发出。您应该使用vue测试utils来测试这些。