Test-Driven Development with Vue.js

A presentation at VueConfTO in November 2019 in Toronto, ON, Canada by Sarah Dayan

Slide 1

Test-Driven Development with Vue.js VueConfTO 2019

Slide 2

Slide 3

Testing is one of the pillars of writing robust software.

Slide 4

Tests should give you confidence that you aren’t shipping broken software.

Slide 5

But… testing can be tough. Especially with UI components.

Slide 6

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 };

Slide 7

HTML? CSS classes? View logic? Event handlers? Methods? Computed properties? Lifecycle steps? 100% coverage? Unit vs. integration vs. e2e?

Slide 8

Artwork by Simon Ålander

Slide 9

Artwork by Simon Ålander

Slide 10

Test-Driven Development (TDD) Popularized by Kent Beck

Slide 11

1 Red Write a test that describes an expected behavior, then run it, ensuring it fails.

Slide 12

2 Green Write the dumbest, most straightforward code you can to make the test pass.

Slide 13

3 Refactor Refactor the code to make it right.

Slide 14

TDD

Slide 15

What does TDD look like with Vue? Vue Test Utils + Jest

Slide 16

Slide 17

Thinking time!

Slide 18

5 stars to display

Slide 19

Coding time!

Slide 20

What exactly are we testing?

Slide 21

Tests should give you confidence that you aren’t shipping broken software.

Slide 22

Black box testing Assert only the public interface.

Slide 23

? Who are your users?

Slide 24

Final user

Slide 25

Developer

Slide 26

submit event click event props With UI components, your public interface is bigger than you think. HTML classes scroll event hover event

Slide 27

Do I care about this if it changes?

Slide 28

Slide 29

1 TDD lets you write robust tests,, not too many and not tests too few.

Slide 30

2 TDD encourages refactors, which leads to better software design. design.

Slide 31

Your software’s contract is infinitely more important than the way you implement it.

Slide 32

Don’t skip the green step.

Slide 33

3 TDD is much easier to follow with specs. specs.

Slide 34

But… TDD takes a lot of time. time.

Slide 35

? So, is it worth it?

Slide 36

1 With practice, you will get faster at TDD. TDD.

Slide 37

2 Fixing bugs is far more costly than preventing them. them.

Slide 38

Slide 39

Slide 40

Thank you! @frontstuff_io github.com/sarahdayan bit.ly/2oxVzCO