Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Visual Testing for Vue Component Libraries

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.

Avatar for Dominic Nguyen

Dominic Nguyen

February 20, 2018
Tweet

Other Decks in Programming

Transcript

  1. 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
  2. Compare results O U T P U T E X

    P E C T E D O U T P U T ✓ Passed
  3. 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)
  4. 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
  5. Date range: Last hour Date range: Last day Date range:

    Last week Visual testing components
  6. 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
  7. 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"/>' }))
  8. 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>
  9. • Accurate: Verify components with the eyeball test • Coverage:

    Clearly specified inputs (props) cover all interesting use cases Visual testing advantages
  10. State: Last hour State: Last day State: Last week Write

    visual tests in a component explorer
  11. 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