vuetify test-utils & Jest: нажатие кнопки не обрабатывается - PullRequest
Новая
       24

vuetify test-utils & Jest: нажатие кнопки не обрабатывается

0 голосов
/ 28 сентября 2018

Учитывая следующий компонент 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?

спасибо за отзыв

1 Ответ

0 голосов
/ 29 сентября 2018

решено ...

Я обнаружил, что мне не нужно монтировать миксин, чтобы проверить мой компонент (я не тестирую миксин ...), поэтому после его удаления ... (удаление строк: // импортируем VueHowler из "vue-howler" и // mixins: строки [VueHowler]), тогда тест в порядке !!

...