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

Question

我需要假的行动，一个用户完成一个视频发射‘结束’事件。视频是包装在Vue VimeoPlayer组件https://github.com/dobromir-hristov/vue-vimeo-player中的Vimeo嵌入。

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

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

在我的Vue组件中：

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

这就是测试结果所显示的：

​

Answer 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，这样只允许规范发出的触发事件。