jest-matcher-vue-test-utils

Transcript

1. “MATCHER”

2. ME ➤ Kengo Hamasaki @hmsk ➤ Live in San Francisco,

   CA ➤ Senior Software Engineer @ Indiegogo

3. 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
4. None
5. None

6. https://medium.com/haiiro-io

7. RubyKaigi 2019 ➤ https://rubykaigi.org/2019 ➤ Apr 18-20 at Fukuoka ➤

   Organizer/Staff/Helper since 2010
8. None
9. None
10. None
11. None

12. 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
13. None

14. “MATCHER”

15. UNIT-TESTING FOR VUE ➤ Component ➤ Renderings from prop/data/ computed

    ➤ Interactions on template ➤ Events ➤ Vuex Store ➤ state/mutation/getter/ action

16. vue-test-utils ➤ vue/vue-test-utils ➤ Jest, Mocha, Karma or AVA…? ➤

    “wrapper” just has everything

17. ASSERT EMITTED EVENT

18. ASSERT VISIBILITY

19. ASSERT VUEX ACTION/MUTATION CALL

20. PROP VALIDATION

21. RSpec ➤ Awesome(?) syntax ➤ Structured test examples ➤ context/describe/it/

    shared examples ➤ Human friendly default matchers ➤ Extendable ➤ Custom matcher ➤ Test helpers ➤ http://www.betterspecs.org/

22. RSPEC

23. 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

24. ASSERT EMITTED EVENT

25. None

26. ASSERT VISIBILITY

27. None

28. ASSERT VUEX ACTION/MUTATION CALL

29. None

30. PROP VALIDATION

31. None

32. 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?

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