Visual Testing for Vue Component Libraries

Testing user interfaces has always been tricky. The details of UI are nuanced and subjective. "Does this look right?" Co-opting existing testing solutions like unit, E2E, and snapshot tests tends to be brittle and time-consuming. Visual testing takes a different approach. It focuses the human tester (you) on the exact components in the exact states that require attention. It turns out to be a pragmatic yet precise way to test UI component libraries. This presentation goes over why to consider visual testing in Vue, what tools are needed, and how it fits into your development process.

Transcript

1. The pragmatic way to test UI components
2. Dominic Nguyen Product design at Chroma Previously
3. “Does this look right?”
5. App Apps more complex than ever
6. Average app: +50 components & hundreds of states
7. Minor tweaks cause major regressions Changes ripple through the component hierarchy
8. Automation
9. I N P U T dateRange startDate endDate pickerActive O U T P U T C O M P O N E N T props, context Unit tests
10. Compare results O U T P U T E X P E C T E D O U T P U T ✓ Passed
11. I N P U T dateRange startDate endDate pickerActive M A R K U P C O M P O N E N T props, context Snapshot tests (Jest)
12. Compare results O U T P U T M A R K U P E X P E C T E D M A R K U P
13. R O U T E type/category/ item/id S C R E E N Screenshot tests
14. S C R E E N Compare results B A S E L I N E
15. End-to-end tests
16. A picture is worth a 1000 DOM elements
17. Modular UI is testable
18. Date range: Last hour Date range: Last day Date range: Last week Visual testing components
19. “That sounds like a lot of work…” It’s less work than patchy tests or no tests
20. Component explorers: your new favorite testing tool STORYBOOK
21. Your app Component explorer Lives alongside your app
22. Your app Component explorer Lives alongside your app
23. Writing visual tests Props timeStart timeEnd timePeriod selected id rang STORYBOOK
24. What are my OSS options? Vue Play Used by companies like:
25. Has data Paginated Loading CommentList Demo
26. Step 1: Install npm install --global @vue/cli @storybook/cli vue create commentlist cd commentlist getstorybook
27. Step 2: Build basic component <template> <div v-if="loading">loading</div> <div v-else-if="isEmpty">empty</div> <div v-else>{{ comments.length }} of {{ totalCount }}</div> </template> <script> export default { props: ['loading', 'comments', 'totalCount'], computed: { isEmpty() { return comments.length === 0; } } } </script> CommentList.Vue
28. Step 3: Build test cases CommentList.stories.js import Vue from 'vue'; import { storiesOf } from '@storybook/vue'; import CommentList from '../src/components/CommentList.vue'; const testComments = [ ... ] storiesOf('CommentList', module) .add('Has Data', () => ({ components: { CommentList }, template: '<CommentList :comments="comments" :totalCount="10"/>', data: () => ({ comments: testComments }) })) .add('Empty', () => ({ components: { CommentList }, template: '<CommentList :totalCount="0"/>' })) .add('Loading', () => ({ components: { CommentList }, template: '<CommentList :loading="true"/>' }))
29. Check tests in component explorer STORYBOOK
30. Step 4: Build out implementation <template> <div v-if="loading">loading</div> <div v-else-if="isEmpty">empty</div> <div v-else> <div class="comment-item" v-for="(comment, idx) in comments" :key="idx"> <img :src="comment.avatar"/> <div class="comment-msg"> <span class=“comment-author"> {{ comment.author }} </span> <span class=“comment-text"> {{ comment.text }} </span> </div> </div> </div> </template> <script> export default { props: { loading: Boolean, comments: { type: Array, default: () => [] }, totalCount: Number }, computed: { isEmpty() { return this.comments.length === 0; } } } </script> <style scoped> /* styles would go here */ </style>
31. Check implementation against design Looks great! STORYBOOK
32. Step 5: Rinse and repeat
33. • Accurate: Verify components with the eyeball test • Coverage: Clearly specified inputs (props) cover all interesting use cases Visual testing advantages
34. Taking it further
35. Visual snapshot testing Visual testing + screenshot testing
36. State: Last hour State: Last day State: Last week Write visual tests in a component explorer
37. Highlight color change from green to red Update component
38. O L D A P P E A R A N C E N E W A P P E A R A N C E Compare Run screenshot tests
39. This is new Catch changes
40. ✓ Looks good to me - merge it! Visually test and confirm changes
41. Visual snapshot testing flow Compare Build Merge Commit Deny Accept
42. Build visual snapshot testing Component explorer Screenshot library + Vue Play
43. UI component testing and review www.chromaticqa.com/vue
44. https://goo.gl/hLrUdG
45. Questions? Visual Testing Handbook: https://goo.gl/hLrUdG Chromatic for Vue: www.chromaticqa.com/vue @domyen