Home/

...

/

Custom Events

Custom Events

In this lesson, we'll see several cases for testing Custom Events.

Custom Events

We can test at least two things in Custom Events:

  • Asserting that after an action, an event gets triggered
  • Checking what an event listener calls when it gets triggered

In the case of the MessageList.vue and Message.vue components example, that gets translated to:

  • Asserting that Message components trigger a message-clicked when a message gets clicked
  • Checking that when a message-clicked occurs, a handleMessageClick function is called in MessageList

Step 1:

First, go to Message.vue and use $emit to trigger that custom event:

<template>
  <li
    style="margin-top: 10px"
    class="message"
    @click="handleClick">
      {{message}}
  </li>
</template>
<script>
export default {
  name: "Message",
  props: ["message"],
  methods: {
    handleClick() {
      this.$emit("message-clicked", this.message)
    }
  }
};
</script>

Then, in ...

Access this course and 1400+ top-rated courses and projects.