A presentation at VueConfTO in in Toronto, ON, Canada by Sarah Dayan
Test-Driven Development with Vue.js VueConfTO 2019
Testing is one of the pillars of writing robust software.
Tests should give you confidence that you aren’t shipping broken software.
But… testing can be tough. Especially with UI components.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
<template> <div class=”color-picker”> <ul class=”swatches”> <li :key=”index” v-for=”(swatch, index) in swatches” :style=”{ background: #${swatch} }” class=”swatch” :class=”[ { active: index === activeSwatch }, { light: isLight(swatch) } ]” @click=”activeSwatch = index” > <check-icon /> </li> </ul> <div class=”color”> <button :key=”index” v-for=”(mode, index) in colorModes” class=”color-mode” :class=”[{ active: index === activeMode }, color-mode-${mode}]” @click=”activeMode = index” > {{ mode }} </button> </div> <div class=”color-code”>{{ activeCode }}</div> </div> </template> <script> import { rgb, hex, hsl, isLight } from “@/utils/color”; import CheckIcon from “@/assets/check.svg”; const modes = { rgb, hex, hsl };
HTML? CSS classes? View logic? Event handlers? Methods? Computed properties? Lifecycle steps? 100% coverage? Unit vs. integration vs. e2e?
Artwork by Simon Ålander
Artwork by Simon Ålander
Test-Driven Development (TDD) Popularized by Kent Beck
1 Red Write a test that describes an expected behavior, then run it, ensuring it fails.
2 Green Write the dumbest, most straightforward code you can to make the test pass.
3 Refactor Refactor the code to make it right.
TDD
What does TDD look like with Vue? Vue Test Utils + Jest
Thinking time!
5 stars to display
Coding time!
What exactly are we testing?
Tests should give you confidence that you aren’t shipping broken software.
Black box testing Assert only the public interface.
? Who are your users?
Final user
Developer
submit event click event props With UI components, your public interface is bigger than you think. HTML classes scroll event hover event
Do I care about this if it changes?
1 TDD lets you write robust tests,, not too many and not tests too few.
2 TDD encourages refactors, which leads to better software design. design.
Your software’s contract is infinitely more important than the way you implement it.
Don’t skip the green step.
3 TDD is much easier to follow with specs. specs.
But… TDD takes a lot of time. time.
? So, is it worth it?
1 With practice, you will get faster at TDD. TDD.
2 Fixing bugs is far more costly than preventing them. them.
Thank you! @frontstuff_io github.com/sarahdayan bit.ly/2oxVzCO
Here’s what was said about this presentation on social media.
for free. You
can too.