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