2

测试一个包含 HTML5 元素的 AudioPlayer vue 组件，我想知道如何用 Jest 编写我的规范。

模板

    <audio id="player" ref="player" @ended="ended" @canplay="canPlay" :src="file"></audio>

如果我使用以下包装器

const wrapper = mount(AudioPlayer, {
      propsData: {
        autoPlay: false,
        file,
        ended,
        canPlay
      }
    });

我应该如何设置文件属性？（我想从 src/assets/audio/mysong.mp3 传递一个音频文件）

如果我改用 shallowMount，我应该模拟音频元素吗？哪种方式......当音频元素处理播放（），暂停（），静音（）......我有点迷茫，我找不到任何与测试此类组件相关的帖子......

4

2 回答 2

0

i check how the Heading.vue parent component is setting up the file property, it's not a string or a file it's an Object from a computed method :

 data() {
  return {
    file: "ultimo_desejo",
   ....

computed: {
<audioplayer id="audioplayer" v-if="listening" v-show="showAudioPlayer" :autoPlay="autoPlay" :file="audioFile" :canPlay="audioReady" :ended="switchAudioPlayer" @ended="switchAudioPlayer"></audioplayer>
....

and in the AudioPlayer child component

props: {
    file: {
      type: Object,
      default: null
    },

So I can set the props in my AudioPlayer.spec file 

const file = require("@/assets/audio/ultimo_desejo.mp3");

const wrapper = mount(AudioPlayer, {
  propsData: {
    autoPlay: false,
    file: file,
    ended,
    canPlay
  }
});
于 2018-09-05T13:42:31.783 回答
0

您可以使用一个空的声音文件来初始化组件，您可以使用 base64 数据 uri 内联它

const file = 'data:audio/wave;base64,UklGRjIAAABXQVZFZm10IBIAAAABAAEAQB8AAEAfAAABAAgAAABmYWN0BAAAAAAAAABkYXRhAAAAAA==';
const wrapper = mount(AudioPlayer, {
      propsData: {
        autoPlay: false,
        file,
        ended,
        canPlay
      }
    });

另请参阅： 静音数据 uri？

于 2018-09-02T17:45:58.833 回答