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