Chapter 5. Testing events

 

This chapter covers

  • Testing native DOM events
  • Testing custom Vue events
  • Testing input elements

If money makes the world go around, then events make web apps go around. Without events, websites would be static HTML pages; with events, websites can become powerful applications that respond to user interactions.

In Vue applications, you will encounter two types of events: native DOM events and Vue custom events. In this chapter you’ll learn about both types of events and how to test them.

So far in this book, you’ve written unit tests for components in a Hacker News application. The Hacker News application is a great example of a real-world app. But there’s one problem—it doesn’t use any events!

Events are an important part of most Vue applications, and before you can call yourself a testing master, you should know how to test them. In this chapter, you’ll take a break from the Hacker News app. Instead, you’ll write a pop-up email subscribe form—you know, the kind of form that appears when your mouse leaves a page and asks you to subscribe for more content (figure 5.1).

Figure 5.1. The finished pop-up email subscribe form that you’ll create in this chapter

The sign-up form will be made from three components—a Modal component, a Form component, and an App component. There’s already some code for each of these components added in the starter branch of the project.

5.1. Testing native DOM events

5.2. Testing custom Vue events

5.3. Testing input forms

5.4. Understanding the limitations of jsdom

Summary

Exercises

sitemap