Slide 1

Slide 1 text

“MATCHER”

Slide 2

Slide 2 text

ME ➤ Kengo Hamasaki @hmsk ➤ Live in San Francisco, CA ➤ Senior Software Engineer @ Indiegogo

Slide 3

Slide 3 text

VUE AND ME ➤ Frontend technology replacement at Indiegogo ➤ AngularJS 1.4 + TS -> Vue 2.6 + TS ➤ Vue Fes Japan 2018 CFP *Rejected* ➤ “How we choose and use Vue at Indiegogo” ➤ indiegogo.com ͷϑϩϯτΤϯυͷϑϨʔϜϫʔΫͱͯ͠৽ͨʹVue.jsΛબ୒͠·ͨ͠ɻAngular, Elm, React ͕ଞͷީิͱͯ͠ฒͿதͰɺͦͷબ୒ʹࢸΔ·Ͱͷҙࢥܾఆ͸ɺ୯७ʹ୲౰ऀͷझ޲΍ੈͷྲྀߦΓ͚ͩͰ͸ ͳ͘ɺͦͷ࣌఺Ͱͷ։ൃ૊৫ͱͯ͠ͷҙ޲΍ɺߏ੒͢Δ։ൃऀୡͷεΩϧηοτʹ߹ΘͤͨධՁϓϩηε͕ ͋Γ·ͨ͠ɻҙࢥܾఆޙͷಋೖʹ͋ͨͬͯ΋ɺͦͷϓϩηε͔Βݟ͖͑ͯͨҙ޲͕৭ೱ͘ݱΕ͍ͯ·͢ɻ͜ ͷൃද͸ɺ͜ͷධՁϓϩηεΛઃܭ͠ͳ͕Βɺ࣮ߦ͢ΔνʔϜͷҰһͰ͋ΓɺͦͷޙͷϓϩμΫγϣϯ΁ͷ ಋೖ͔Β։ൃΛओಋͨ͠ΤϯδχΞ͔Β঺հ͠·͢ɻ ➤ nuxt-community team ➤ nuxt-community/typescript-template ➤ A couple of modules on npm

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

https://medium.com/haiiro-io

Slide 7

Slide 7 text

RubyKaigi 2019 ➤ https://rubykaigi.org/2019 ➤ Apr 18-20 at Fukuoka ➤ Organizer/Staff/Helper since 2010

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

KAIGI SIGNAGE 2018- ➤ Nuxt 2.4.5 (nuxt-ts) ➤ Vuetify ➤ Firebase ➤ Realtime Database ➤ Authentication (GitHub) ➤ Netlify ➤ Static Generation ➤ Replaced Ember.js app ➤ Rails -> knockout -> Ember -> Vue

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

“MATCHER”

Slide 15

Slide 15 text

UNIT-TESTING FOR VUE ➤ Component ➤ Renderings from prop/data/ computed ➤ Interactions on template ➤ Events ➤ Vuex Store ➤ state/mutation/getter/ action

Slide 16

Slide 16 text

vue-test-utils ➤ vue/vue-test-utils ➤ Jest, Mocha, Karma or AVA…? ➤ “wrapper” just has everything

Slide 17

Slide 17 text

ASSERT EMITTED EVENT

Slide 18

Slide 18 text

ASSERT VISIBILITY

Slide 19

Slide 19 text

ASSERT VUEX ACTION/MUTATION CALL

Slide 20

Slide 20 text

PROP VALIDATION

Slide 21

Slide 21 text

RSpec ➤ Awesome(?) syntax ➤ Structured test examples ➤ context/describe/it/ shared examples ➤ Human friendly default matchers ➤ Extendable ➤ Custom matcher ➤ Test helpers ➤ http://www.betterspecs.org/

Slide 22

Slide 22 text

RSPEC

Slide 23

Slide 23 text

jest-matcher-vue-test-utils ➤ https://github.com/hmsk/ jest-matcher-vue-test-utils ➤ Custom matchers for Jest + vue-test-utils ➤ Visibility on template ➤ Event emissions ➤ Vuex action/mutation ➤ Prop validations

Slide 24

Slide 24 text

ASSERT EMITTED EVENT

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

ASSERT VISIBILITY

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

ASSERT VUEX ACTION/MUTATION CALL

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

PROP VALIDATION

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

jest-matcher-vue-test-utils ➤ Nobody uses though ➤ Missing any fatal thing? ➤ TODO: ➤ Support vue-router ➤ i.e.) “toRouteTo” / “toHaveRoutedTo” ➤ Support mocha ➤ Better failing messages ➤ Better doc with vuepress?

Slide 33

Slide 33 text

“ npx i -D jest-matcher-vue-test-utils https://github.com/hmsk/jest-matcher-vue-test-utils