List of Figures

Chapter 1. Introduction to testing Vue applications

Figure 1.1. A pull request that passed the tests; the tick appears when the tests have passed.

Figure 1.2. The testing pyramid. Most of your tests should be unit tests.

Figure 1.3. The Hacker News website

Figure 1.4. Triggering an input and asserting an output in a component unit test

Chapter 2. Creating your first test

Figure 2.1. A common Vue project directory structure

Figure 2.2. Downloading packages from the npm remote repository

Figure 2.3. A Jest assertion error

Figure 2.4. Jest compiling a component with vue-jest and babel-jest

Figure 2.5. Mounting a component

Figure 2.6. shallowMount mounting a component

Figure 2.7. The Chrome Inspect window

Figure 2.8. The Resume Execution button

Figure 2.9. Inspecting the wrapper

Figure 2.10. Inspecting wrapper methods

Chapter 3. Testing rendered component output

Figure 3.1. Two items from the finished feed

Figure 3.2. ItemList containing Item components

Figure 3.3. find searching the render tree

Figure 3.4. The progress bar in progress

Chapter 4. Testing component methods

Figure 4.1. The finished progress bar at 80% complete

Figure 4.2. Injecting a property into the Vue instance tree

Figure 4.3. Importing a function from another file

Figure 4.4. Stubbing a file import

Chapter 5. Testing events

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

Figure 5.2. The finished form

Chapter 6. Understanding Vuex

Figure 6.1. One-way data flow

Figure 6.2. Dispatching actions in the Vuex lifecycle

Figure 6.3. Computing data with getters

Chapter 7. Testing Vuex

Figure 7.1. Calling fetchListData in the application

Figure 7.2. Polluting the Vue base class

Figure 7.3. Testing a store instance

Chapter 9. Understanding Vue Router

Figure 9.1. Hacker News site with different feed links

Figure 9.2. Server-sider routing

Figure 9.3. Client-side routing

Chapter 10. Testing Vue Router

Figure 10.1. Unintentionally calling Vue.use when importing a module

Figure 10.2. Pagination on the third page

Figure 10.3. Pagination on the first page

Chapter 11. Testing mixins and filters

Figure 11.1. Before filtering

Figure 11.2. After filtering

Chapter 12. Writing snapshot tests

Figure 12.1. The frontend testing pyramid

Figure 12.2. The snapshot test flow

Figure 12.3. A testing workflow with snapshots

Chapter 13. Testing server-side rendering

Figure 13.1. The process of a client-side rendered app

Figure 13.2. The process of a server-side rendered app

Chapter 14. Writing end-to-end tests

Figure 14.1. The frontend testing pyramid

Figure 14.2. Clicking an element with Nightwatch

Appendix A. Setting up your environment

Figure A.1. Using the Chrome Console

Figure A.2. Using Vue developer tools to inspect the Hacker News app