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

【问题标题】：How to test custom events with Cypress and Vue如何使用 Cypress 和 Vue 测试自定义事件
【发布时间】：2020-01-13 12:49:44
【问题描述】：

我需要伪造用户完成发出“结束”事件的视频的动作。该视频是封装在 Vue VimeoPlayer 组件中的 Vimeo 嵌入 https://github.com/dobromir-hristov/vue-vimeo-player

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

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

在我的 Vue 组件中：

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

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

【问题讨论】：

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

标签： javascript vue.js vimeo cypress

【解决方案1】：

您可以使用 Vue 的 $emit() 而不是 Cypress 的 .trigger()。

首先，您需要在window 上引用播放器。

我还添加了一个数据变量“进度”来测试这个概念，你会有不同的测试标准。

Vue 组件

<vimeo-player 
  :video-id='block.content.id' 
  @ended='updateProgress' 
  ref="player" />                // add a ref so we can get to the element

data() {
  return {
    ...
    progress: 'atStart'  // just for confirming the event fired
  }
},

mounted() {
  if (window.Cypress) {   // only when testing
    window.vuePlayer = this;
  }
},

methods: {
  ...
  updateProgress () {
    this.progress = 'atEnd'
  },
}

规格

cy.window().its('vuePlayer').then(myVueComponent => {

  const vueVimeoPlayerComponent = myVueComponent.$refs.player; 
  vueVimeoPlayerComponent.$emit('ended')

  // run test here, e.g
  console.log('testing', myVueComponent.progress)  // === 'atEnd'
})

注意，我关闭了autoplay，以便只有规范的发射触发事件。

【讨论】：