Automated Testing (Vue)

Overview

We want to individually test the following pieces of the MyUW front-end:

1. Vuex Stores
2. Vue Mixins
3. Vue Plugins
4. Vue Components

Testing Vuex Stores

Generating Mock data

Use faker to create mock data generator specific to the vuex store. This generator will be used to generate data for axios.get mocks.

Testing Actions

1. Mock axios.*
2. Set the initial state if needed
3. Execute the action
4. Test for axios.* method calls
5. Insure the final state is correct

Testing Getters

1. Set the initial state
2. Insure the getter return value is correct

Testing Mixins

Testing exported pure functional methods

1. Import the mixin and test the method though <mixin>.methods.<method>

Testing exported non-pure functional methods / computed

1. Create a Vuex instance with the required state
2. Test the method / computed through <Vuex instance>.<method / computed>

Testing Plugins

Testing each plugin is unique. In general all variables exposed, all directives defined, and all lifecycle hooks used by the plugin need to be tested.

Vue Components

Generating Store Mocks

Component testing should not use the vuex stores but instead should use a mocked version. These mocks should use the postProcess method from the real store when necessary. They can reuse the mock data generator created in Testing Vuex Stores > Generating Mock data. The main reason to use a mocked store is to make it easier to override the return values from each store.

Testing methods / computed

1. Create the required localVue and Vuex store.
2. Test all the methods / computed fields defined in the component.

Testing rendered component

Mount the component using @cypress/vue and then go through all user workflows.