List of Listings

Chapter 1. Introduction to testing Vue applications

Listing 1.1. An end-to-end test to check that a calculator sums two numbers

Listing 1.2. A basic unit test

Listing 1.3. Creating a Vue instance

Listing 1.4. A template string

Listing 1.5. Using a render function

Listing 1.6. Simple example of a virtual DOM

Listing 1.7. Registering a component globally in Vue

Listing 1.8. A single-file component (SFC)

Listing 1.9. A compiled SFC

Listing 1.10. AuthorizedMessage.vue

Chapter 2. Creating your first test

Listing 2.1. Sanity test

Listing 2.2. Using a Jest matcher

Listing 2.3. A test that always passes

Listing 2.4. Grouping tests in describe blocks

Listing 2.5. Nested describe functions

Listing 2.6. Flattened describe function

Listing 2.7. Importing a Vue single-file component

Listing 2.8. Jest configuration field in package.json

Listing 2.9. Creating a constructor and mounting a component

Listing 2.10. Using Vue Test Utils to test textContent

Listing 2.11. Using the Vue Test Utils text method

Listing 2.12. Using the shallowMount method

Listing 2.13. Using Vue Test Utils to test text

Chapter 3. Testing rendered component output

Listing 3.1. Instantiating Vue after fetching data

Listing 3.2. Passing props to a component with mounting options

Listing 3.3. Passing props to components in a test

Listing 3.4. Testing component text

Listing 3.5. Testing DOM attributes

Listing 3.6. Using the wrapper array length property

Listing 3.7. Using a component as a selector

Listing 3.8. Testing child components

Listing 3.9. Using v-for to render items based on an array

Listing 3.10. Testing props

Listing 3.11. Testing props using the props method

Listing 3.12. Passing props to a child component

Listing 3.13. Declaring a prop in a single-file component

Listing 3.14. Testing a class with the classes method

Listing 3.15. Testing style by accessing wrapper element

Chapter 4. Testing component methods

Listing 4.1. Calling a method on click

Listing 4.2. Creating a public method

Listing 4.3. Testing a public method

Listing 4.4. Testing component state

Listing 4.5. ProgressBar.vue

Listing 4.6. Testing public methods

Listing 4.7. Using fake timers

Listing 4.8. Calling useFakeTimers before each test

Listing 4.9. Moving the time forward with fake timers

Listing 4.10. Using a timer function in a component

Listing 4.11. Using a spy to test someMethod was called

Listing 4.12. Using jest.spyOn to test clearInterval

Listing 4.13. ProgressBar.vue

Listing 4.14. Adding an instance property to the Vue prototype

Listing 4.15. Adding a Vue instance to the prototype

Listing 4.16. Injecting an instance property with the mocks option

Listing 4.17. Storing function calls

Listing 4.18. Using a Jest mock function

Listing 4.19. Stubbing a function with a Jest mock

Listing 4.20. Using the beforeMount lifecycle event

Listing 4.21. Mocking a module dependency

Listing 4.22. Creating a mock file

Listing 4.23. Writing an asynchronous test

Listing 4.24. Testing a promise

Listing 4.25. Flushing promises

Listing 4.26. Mocking a module dependency with Jest

Listing 4.27. Stubbing a module dependency in tests

Listing 4.28. Using flush-promises in a test

Listing 4.29. ItemList.vue

Listing 4.30. Mocking function to reject

Chapter 5. Testing events

Listing 5.1. Triggering a mouseenter event

Listing 5.2. Triggering a test by dispatching a DOM event

Listing 5.3. Calling a prop when button is clicked

Listing 5.4. Testing that a component emits an event

Listing 5.5. Testing a Vue custom event is emitted

Listing 5.6. Emitting a custom event on form submit

Listing 5.7. Testing that the component responds to Vue custom event

Listing 5.8. Using v-model to bind data

Listing 5.9. Updating the value and v-model value of an input in a test

Listing 5.10. Using objectContaining

Listing 5.11. Testing a mock was called with a v-model bound input form value

Listing 5.12. Form component

Listing 5.13. Updating the value and v-model value of a radio button input in a test

Listing 5.14. Testing a component is called with the correct values

Chapter 6. Understanding Vuex

Listing 6.1. Counter component

Listing 6.2. Counter component

Listing 6.3. Creating a Vuex store

Listing 6.4. Using Vuex in a component

Listing 6.5. Adding a mutation

Listing 6.6. Committing a mutation

Listing 6.7. Committing mutations asynchronously

Listing 6.8. Committing mutations inside a Vuex action

Listing 6.9. Dispatching an action

Listing 6.10. A getter

Listing 6.11. Using a getter inside a component

Chapter 7. Testing Vuex

Listing 7.1. Instantiating a Vuex store

Listing 7.2. Instantiating a Vuex store with a configuration object

Listing 7.3. A store configuration object

Listing 7.4. Installing Vuex

Listing 7.5. A mutation

Listing 7.6. Testing a mutation

Listing 7.7. A simple mutation

Listing 7.8. Testing that an array is returned

Listing 7.9. A getter

Listing 7.10. Testing a getter

Listing 7.11. Calling an action with a fake context object

Listing 7.12. Testing that commit was called in an action

Listing 7.13. Calling commit inside a promise chain

Listing 7.14. Testing a Vuex store instance

Listing 7.15. Cloning a store config object in a store instance test

Listing 7.16. Creating a Vue instance with the base Vue constructor

Listing 7.17. Using a localVue constructor with Vue Test Utils

Listing 7.18. Testing a Vuex store instance

Listing 7.19. Mocking a store in a test

Listing 7.20. Using beforeEach to reassign values

Listing 7.21. Controlling a getter in a fake store

Listing 7.22. Providing a store to a component in tests

Listing 7.23. Testing that dispatch was called in a component

Listing 7.24. Mocking an action to throw an error

Chapter 8. Organizing tests with factory functions

Listing 8.1. Creating a wrapper object

Listing 8.2. Using a createWrapper function

Listing 8.3. Creating a wrapper

Listing 8.4. A createStore factory function

Listing 8.5. Using Lodash merge

Listing 8.6. Using Lodash merge with an array or object

Listing 8.7. Using mergeWith with a customizer function

Listing 8.8. A customizer function to overwrite empty objects and arrays

Listing 8.9. Using a createStore factory function

Listing 8.10. A createWrapper function

Listing 8.11. Using createStore and createWrapper in a test

Listing 8.12. Keeping a reference to a mock when using a factory function

Listing 8.13. Passing a mocks object to createWrapper

Listing 8.14. Using a createWrapper factory function

Listing 8.15. Mocking actions

Listing 8.16. Mocking actions to reject

Chapter 9. Understanding Vue Router

Listing 9.1. A routes array

Listing 9.2. Using Vue Router to render an App component

Listing 9.3. An array of RouteConfig objects

Listing 9.4. Router config file

Listing 9.5. Using RouterView to render components

Chapter 10. Testing Vue Router

Listing 10.1. Mocking a $route property

Listing 10.2. Passing props into a component

Listing 10.3. Creating a store with a maxPage getter

Listing 10.4. Mocking $route.params

Listing 10.5. Using the $route.params value in the template

Listing 10.6. Testing a router.replace call

Listing 10.7. Calling $router.replace

Listing 10.8. Testing that a ChildComponent receives a prop

Listing 10.9. Stubbing RouterLink in a test

Listing 10.10. Using a RouterLinkStub

Listing 10.11. Using RouterLinkStub to find a component

Listing 10.12. Using RouterLinkStub as a selector

Listing 10.13. Testing that router-link is rendered

Listing 10.14. Using router-link in the template

Listing 10.15. Testing a getter that uses the route object

Listing 10.16. Testing a getter that uses the route object

Listing 10.17. Using the route params inside a Vuex getter

Listing 10.18. Syncing Vuex and Vue Router on a localVue

Chapter 11. Testing mixins and filters

Listing 11.1. An example mixin

Listing 11.2. Testing a mixin

Listing 11.3. Creating an instance with a mixin

Listing 11.4. Testing a mixin

Listing 11.5. A title mixin

Listing 11.6. Testing a mixin

Listing 11.7. Calling the instance property if title is a function

Listing 11.8. Testing a mixin in a component

Listing 11.9. A test setup file

Listing 11.10. Applying a filter in a template

Listing 11.11. Testing a filter

Listing 11.12. A host filter

Listing 11.13. Stubbing Date.now

Listing 11.14. Testing a filter function

Listing 11.15. Writing a timeAgo filter

Listing 11.16. Mocking Date.now in a test

Listing 11.17. Testing a filter in a component

Chapter 12. Writing snapshot tests

Listing 12.1. A snapshot test

Listing 12.2. A snap file

Listing 12.3. A static component

Listing 12.4. Writing a snapshot test

Listing 12.5. Writing a snapshot test for a dynamic component

Listing 12.6. Mocking Date.now

Chapter 13. Testing server-side rendering

Listing 13.1. HTML response for a client-side app

Listing 13.2. HTML response for a server-side app

Listing 13.3. Rendering a Vue instance to a string

Listing 13.4. Writing a snapshot test with renderToString

Listing 13.5. Writing a snapshot test with renderToString

Listing 13.6. Setting a Jest test file to run in a Node environment

Listing 13.7. Using render to assert against server-side rendered code

Listing 13.8. Testing an HTTP request with SuperTest

Listing 13.9. Testing a 200 response with SuperTest

Listing 13.10. Testing that the server responds with 404 when the page isn’t found

Chapter 14. Writing end-to-end tests

Listing 14.1. Testing that Google displays results

Listing 14.2. Nightwatch configuration file

Listing 14.3. Nightwatch test that visits localhost:8080

Listing 14.4. Starting a server and running Nightwatch

Listing 14.5. Testing that a link navigates correctly

Listing 14.6. Checking that a route has updated

Listing 14.7. Changing the list by clicking through the navigation

Listing 14.8. Checking a user journey with an end-to-end test

Listing 14.9. Defining a Firefox environment Nightwatch config