Question

给出以下AudioPlayer.vue组件

<template>
  <div style="display: inline-block;">
    <v-btn id="playPauseBtn" class="inline teal--text" outline icon @click.native="playing ? pause() : play()">
      <v-icon v-if="playing === true">pause</v-icon>
      <v-icon v-else>play_arrow</v-icon>
    </v-btn>
    <v-btn id="stopBtn" outline icon class="inline teal--text" @click.native="stop()">
      <v-icon>stop</v-icon>
    </v-btn>
    <v-btn id="muteBtn" outline icon class="inline teal--text" @click.native="toggleMute()">
      <v-icon v-if="muted === false">volume_up</v-icon>
      <v-icon v-else>volume_off</v-icon>
    </v-btn>
    <v-slider id="progress" class="inline slider" color="#464898" :value="trackProgress" @change="setPosition" @end="audioEnded"></v-slider>
    <p class="inline" id="duration" style="color: #464898">{{ currentTimeFmt }} / {{ durationFmt }}</p>>
  </div>
</template>

<script>
import VueHowler from "vue-howler";

const formatTime = second => {
  let time = new Date(second * 1000).toISOString().substr(11, 8);
  return time;
};

export default {
  mixins: [VueHowler],
  name: "audioPlayer",
  data() {
    return {
      percentage: 0
    };
  },
  computed: {
    trackProgress() {
      return this.progress * 100;
    },
    durationFmt() {
      return formatTime(this.duration);
    },
    currentTimeFmt() {
      return formatTime(this.duration * this.progress);
    }
  },
  watch: {
    playing() {
      if (!this.playing && this.progress === 0 && this.seek === 0) {
        this.$emit("playerStop");
      }
    }
  },
  methods: {
    setPosition(sliderValue) {
      this.percentage = sliderValue;
      const currentDuration = parseInt((this.duration * this.percentage) / 100);
      this.setSeek(currentDuration);
    },
    stop() {
      console.log("STOP!");
      this.$data._howl.stop();
      this.$emit("playerStop");
    },
    audioEnded(sliderValue) {
      this.percentage = sliderValue;
      // console.log("audio ended");
      this.stop();
    }
  }
};
</script>

我正在尝试测试STOP按钮，该按钮会触发stop（）方法...

<template>
  <div style="display: inline-block;">
    <v-btn id="playPauseBtn" class="inline teal--text" outline icon @click.native="playing ? pause() : play()">
      <v-icon v-if="playing === true">pause</v-icon>
      <v-icon v-else>play_arrow</v-icon>
    </v-btn>
    <v-btn id="stopBtn" outline icon class="inline teal--text" @click.native="stop()">
      <v-icon>stop</v-icon>
    </v-btn>
    <v-btn id="muteBtn" outline icon class="inline teal--text" @click.native="toggleMute()">
      <v-icon v-if="muted === false">volume_up</v-icon>
      <v-icon v-else>volume_off</v-icon>
    </v-btn>
    <v-slider id="progress" class="inline slider" color="#464898" :value="trackProgress" @change="setPosition" @end="audioEnded"></v-slider>
    <p class="inline" id="duration" style="color: #464898">{{ currentTimeFmt }} / {{ durationFmt }}</p>>
  </div>
</template>

<script>
import VueHowler from "vue-howler";

const formatTime = second => {
  let time = new Date(second * 1000).toISOString().substr(11, 8);
  return time;
};

export default {
  mixins: [VueHowler],
  name: "audioPlayer",
  data() {
    return {
      percentage: 0
    };
  },
  computed: {
    trackProgress() {
      return this.progress * 100;
    },
    durationFmt() {
      return formatTime(this.duration);
    },
    currentTimeFmt() {
      return formatTime(this.duration * this.progress);
    }
  },
  watch: {
    playing() {
      if (!this.playing && this.progress === 0 && this.seek === 0) {
        this.$emit("playerStop");
      }
    }
  },
  methods: {
    setPosition(sliderValue) {
      this.percentage = sliderValue;
      const currentDuration = parseInt((this.duration * this.percentage) / 100);
      this.setSeek(currentDuration);
    },
    stop() {
      console.log("STOP!");
      this.$data._howl.stop();
      this.$emit("playerStop");
    },
    audioEnded(sliderValue) {
      this.percentage = sliderValue;
      // console.log("audio ended");
      this.stop();
    }
  }
};
</script>

但是用于检查自定义事件'playerStop'的间谍功能未调用..

$ yarn test:unit AudioPlayer.spec.js
yarn run v1.9.4
$ vue-cli-service test:unit AudioPlayer.spec.js
 FAIL  tests/unit/AudioPlayer.spec.js
  ✕ should emit playerStop when STOP button is clicked (252ms)
  AudioPlayer.vue
    ✓ should display Play/Pause, Stop, Mute buttons, a slider and a duration text (306ms)

  ● should emit playerStop when STOP button is clicked

    expect(jest.fn()).toHaveBeenCalledTimes(1)

    Expected mock function to have been called one time, but it was called zero times.

      60 |   // await wrapper.vm.$nextTick();
      61 |   // then
    > 62 |   expect(spy).toHaveBeenCalledTimes(1);
         |               ^
      63 | });

我在哪里错了？它与vuetify v-btn定义有关吗？

感谢您的反馈

Answer 1

已解决...

我发现我不需要挂载mixin来测试我的组件（我没有测试mixin ...），所以在删除它之后...（删除行：//从“ vue中导入VueHowler -howler”；和// mixins：[VueHowler]行），那么测试就可以了！

vuetify test-utils＆Jest：未处理按钮单击

1 个答案: