Vue.js 单元:测试 - 如何处理混音并传递道具

Question

>我正在尝试测试我的音频播放器组件，该组件正在使用mixin(vue-howler(

<script>
import VueHowler from "vue-howler";
...
export default {
mixins: [VueHowler],
name: "audioPlayer",
data() {
return {
percentage: 0
};
},
...
</script>

我需要将道具传递给混音，我该怎么做？

sources ( an Array of audio files ), autoplay (Boolean ) , ...

my AudioPlayer.spec.js

import Vue from "vue";
import { shallowMount } from "@vue/test-utils";
import Vuetify from "vuetify";
import AudioPlayer from "@/components/Home/AudioPlayer.vue";
import VueHowler from "vue-howler";

describe("AudioPlayer.vue", () => {
beforeEach(() => {
Vue.use(Vuetify);
const el = document.createElement("div");
el.setAttribute("data-app", true);
document.body.appendChild(el);
});
const sourceFiles = [require("@/assets/audio/ultimo_desejo.mp3")];
it("should emit an event PLAY/PAUSE  from playPauseBtn", () => {
// given
const wrapper = shallowMount(AudioPlayer, {
attachToDocument: true,
mixins: [VueHowler]
});
wrapper.setData({ paused: true, playing: false });
console.log(wrapper.html());
});

Vue-Howler mixin

import { Howl } from 'howler'
import clamp from 'math-clamp'
import values from 'object-values'
import assign from 'object-assign'
export default {
props: {
/**
* An array of audio file urls
*/
sources: {
type: Array,
required: true,
validator(sources) {
// Every source must be a non-empty string
return sources.every(
source => typeof source === 'string' && source.length > 0
)
}
},
/**
* Whether to start the playback
* when the component is mounted
*/
autoplay: {
type: Boolean,
default: false
},
/**
* Whether to start the playback again
* automatically after it is done playing
*/
loop: {
type: Boolean,
default: false
....

Answer 1

已解决...需要在浅山混合之前传递道具数据

const sourceFiles = ['require("@/assets/audio/ultimo_desejo.mp3"']
it("should emit an event PLAY/PAUSE  from playPauseBtn", () => {
// given
const wrapper = shallowMount(AudioPlayer, {
// attachToDocument: true,
propsData: {
sources: sourceFiles,
autoplay: false,
loop: false
},
mixins: [VueHowler]
});
wrapper.setData({ paused: true, playing: false });
console.log(wrapper.html());
});