In this lesson, Hassan teaches about mixins, filter, and testing. Students will specifically learn about:
- Mixins: allow us to neatly reuse functionality between components.
- Filters: help return formatted versions of data without making changes to the data source.
- vue-test-utils: Vue's official testing utility library.
- Mount and shallow mount components.
- Mounted wrappers to help make testing easier, including wrapper.html, wrapper.find, wrapper.trigger, wrapper.setData, wrapper.setProps, wrapper.setMethods.
The lesson concludes with 3 exercises and demonstrations, including:
- Using mixins to build a counter application
- Using filters to format the client-side view
- Testing to verify that the functionality of a to-do list application does as intended
Let's practice Mixins! In the starter code fir thus exercise you will find two different components. Your task is to create and implement a mixin that will remove repeated code from these components.
Goals
- Create a mixin to consolidate identical functionality between Components #1 and #2.
Starter code: https://github.com/djirdehh/intro-to-vue-workshop/tree/master/06-mixins-filters-and-testing/exercise/mixins/starting-point
Next, practice adding filters to the properties of a component.
Goals
- Create filters to better format the currency price and circulating supply numbers (For formatting use JavaScript's Intl.NumberFormat object).
Starter code: https://github.com/djirdehh/intro-to-vue-workshop/tree/master/06-mixins-filters-and-testing/exercise/filters/starting-point
Finally, practice writing tests for your Vue app.
Goals
- Write two separate tests that test the functionality of removing a single submitted todo item and all todo items in the list respectively.
You will need to use this command to run your tests: npm run test:unit
Starter code: https://github.com/djirdehh/intro-to-vue-workshop/tree/master/06-mixins-filters-and-testing/exercise/testing/starting-point
🎉 Congrats! You've finished this entire course! To keep learning Vue, check out some of our other courses!