Chapter 4. Testing component methods

 

This chapter covers

  • Testing component methods
  • Testing code that uses timer functions
  • Using mocks to test code
  • Mocking module dependencies

A Vue application without methods is like a smoothie without fruit. Methods contain juicy logic that adds functionality to Vue components, and that logic needs to be tested.

Testing self-contained methods isn’t complicated. But real-world methods often have dependencies, and testing methods with dependencies introduces a world of complexity.

A dependency is any piece of code outside the control of the unit of code that’s under test. Dependencies come in many forms. Browser methods, imported modules, and injected Vue instance properties are common dependencies that you’ll learn to test in this chapter.

To learn how to test methods and their dependencies, you’re going to add start and stop methods to the ProgressBar component in the Hacker News application (figure 4.1). These methods will start and stop the progress bar running. To make the progress bar increase in width over time, the component will use timer functions, so you’ll need to learn how to test code that uses timer functions.

Figure 4.1. The finished progress bar at 80% complete

4.1. Testing public and private component methods

4.2. Testing timer functions

4.3. Adding properties to the Vue instance

4.4. Mocking code

4.5. Mocking module dependencies

Summary

Exercises

sitemap