Vue.js test: компонентный компонент, какую стратегию использовать?

Question

У меня есть компонент AudioPlayer, который используется для воспроизведения аудиофайла, когда пользователь нажимает кнопку на домашней странице.

Я немного растерян в том, как я должен его тестировать. Выполнение теста: юнит: покрытие, я вижу строки Uncovered, но я не понимаю, почему и как я должен их тестировать ... любые отзывы и советы по использованию стратегии приветствуются!

вот компонент AudioPlayer

AudioPlayer.vue

    <template>
      <v-card style="text-align: center">
        <v-card-text style="padding:0">
          <v-btn outline icon class="teal--text" @click.native="playing ? pause() : play()" :disabled="loaded === false">
            <v-icon v-if="playing === false || paused === true">play_arrow</v-icon>
            <v-icon v-else>pause</v-icon>
          </v-btn>
          <v-btn outline icon class="teal--text" @click.native="stop()" :disabled="loaded === false">
            <v-icon>stop</v-icon>
          </v-btn>
          <v-btn outline icon class="teal--text" @click.native="mute()" :disabled="loaded === false">
            <v-icon v-if="isMuted === false">volume_up</v-icon>
            <v-icon v-else>volume_off</v-icon>
          </v-btn>
          <v-btn v-if="false" outline icon class="teal--text" @click.native="loaded ? download() : reload()">
            <v-icon v-if="loaded === false">refresh</v-icon>
            <v-icon v-else>get_app</v-icon>
          </v-btn>
          <v-slider v-if="false" @click.native="setPosition()" v-model="percentage" dark :disabled="loaded === true"></v-slider>
          <p style="color: #464898">{{ currentTime }} / {{ duration }}</p>
        </v-card-text>
        <audio id="player" ref="player" v-on:ended="ended" v-on:canplay="canPlay" :src="file"></audio>
      </v-card>
    </template>

    <script>
    // vuetify-audio : https://github.com/erwin16/vuetify-audio
    const formatTime = secend => {
      let time = new Date(secend * 1000).toISOString().substr(11, 8);
      return time;
    };
    export default {
      name: "audioPlayer",
      props: {
        file: {
          type: Object,
          default: null
        },
        autoPlay: {
          type: Boolean,
          default: false
        },
        ended: {
          type: Function,
          default: () => {}
        },
        canPlay: {
          type: Function,
          default: () => {}
        }
      },
      computed: {
        duration: function() {
          return this.audio ? formatTime(this.totalDuration) : "";
        }
      },
      data() {
        return {
          isMuted: false,
          loaded: false,
          playing: false,
          paused: false,
          percentage: 0,
          currentTime: "00:00:00",
          audio: undefined,
          totalDuration: 0
        };
      },
      methods: {
        setPosition() {
          this.audio.currentTime = parseInt(
            (this.audio.duration / 100) * this.percentage
          );
        },
        stop() {
          this.paused = this.playing = false;
          this.audio.pause();
          this.audio.currentTime = 0;
        },
        play() {
          if (this.playing) return;
          this.paused = false;
          this.audio.play();
          this.playing = true;
        },
        pause() {
          this.paused = !this.paused;
          this.paused ? this.audio.pause() : this.audio.play();
        },
        download() {
          this.audio.pause();
          window.open(this.file, "download");
        },
        mute() {
          this.isMuted = !this.isMuted;
          this.audio.muted = this.isMuted;
          this.volumeValue = this.isMuted ? 0 : 75;
        },
        reload() {
          this.audio.load();
        },
        _handleLoaded() {
          if (this.audio.readyState >= 2) {
            if (this.autoPlay) this.audio.play();
            this.loaded = true;
            this.totalDuration = parseInt(this.audio.duration);
          } else {
            throw new Error("Failed to load sound file");
          }
        },
        _handlePlayingUI() {
          this.percentage = (this.audio.currentTime / this.audio.duration) * 100;
          this.currentTime = formatTime(this.audio.currentTime);
        },
        _handlePlayPause(e) {
          if (
            e.type === "pause" &&
            this.paused === false &&
            this.playing === false
          ) {
            this.currentTime = "00:00:00";
          }
        },
        _handleEnded() {
          this.paused = this.playing = false;
        },
        init() {
          this.audio.addEventListener("timeupdate", this._handlePlayingUI);
          this.audio.addEventListener("loadeddata", this._handleLoaded);
          this.audio.addEventListener("pause", this._handlePlayPause);
          this.audio.addEventListener("play", this._handlePlayPause);
          this.audio.addEventListener("ended", this._handleEnded);
        }
      },
      mounted() {
        this.audio = this.$refs.player;
        this.init();
      },
      beforeDestroy() {
        this.audio.removeEventListener("timeupdate", this._handlePlayingUI);
        this.audio.removeEventListener("loadeddata", this._handleLoaded);
        this.audio.removeEventListener("pause", this._handlePlayPause);
        this.audio.removeEventListener("play", this._handlePlayPause);
        this.audio.removeEventListener("ended", this._handleEnded);
      }
    };
    </script>

непокрытые строки после запуска моих тестовых блоков для

src/components/Home | 33.33 | 19.05 | 31.03 | 33.33 |                   |
  AudioPlayer.vue    | 2.33 |     0 |     0 |  2.33 |... 41,142,143,144 |
  Heading.vue        |  100 |   100 |  87.5 |   100 |                   |

AudioPlayer line 41

autoPlay: {
  type: Boolean,
  default: false . << line 41

AudioPlayer line & 42, 143, 144

  beforeDestroy() {
    this.audio.removeEventListener("timeupdate", this._handlePlayingUI);
    this.audio.removeEventListener("loadeddata", this._handleLoaded);
142>>    this.audio.removeEventListener("pause", this._handlePlayPause);
143>>    this.audio.removeEventListener("play", this._handlePlayPause);
144>>    this.audio.removeEventListener("ended", this._handleEnded);