Dive into vue-test-utils ~~Road of 1.0.0~~

Transcript

1. Dive into vue-test-utils ~~ Road of major 1.0.0 ~~ Yamato Murakami (@pipopotamasu3) Vue.js Tokyo Drinkup#3 06/24/2019
2. name: Yamato Murakami, github: pipopotamasu, twitter: pipopotamasu3, company: MedPeer, Inc, tech: [ Ruby, PHP, Vue.js, React ], hobby: Baseball
3. Do you know vue-test-utils?
4. So, what is medpacker? https://github.com/vuejs/vue-test-utils
5. So, what is medpacker? vue-test-utils is … vue-test-utils is the “official” unit testing library for Vue.js
6. Have you used vue-test-utils?
12. Why has this been still beta?
13. Lets’s find out reasons!
14. https://github.com/vuejs/vue-test-utils/issues/246
15. https://github.com/vuejs/vue-test-utils/issues/246
16. 2 blockers for ver1.0.0 *NQSPWF
    TVQQPSU
    GPS
    FYUFOEFE
    DPNQPOFOUT 'JY
    TZODISPOPVT
    CVHT
17. 2 blockers for ver1.0.0 *NQSPWF
    TVQQPSU
    GPS
    FYUFOEFE
    DPNQPOFOUT 'JY
    TZODISPOPVT
    CVHT
18. Improve support for extended component
19. extended components?
20. extended components? // use Vue.extend const BaseComponent = Vue.extend({ data () { return { lastname: 'murakami' } } }) new BaseComponent({ el: '#app', template: '<span>{{ firstname }}-{{ lastname }}</span>', data () { return { firstname: 'yamato' } } })
21. extended components? // use extends property const BaseComponent = { data () { return { lastname: 'murakami' } } } new Vue({ extends: BaseComponent, el: '#app', template: '<span>{{ firstname }}-{{ lastname }}</span>', data () { return { firstname: 'yamato' } } });
22. Test Code
23. extended components? const BaseComponent = Vue.extend({ data () { return { lastname: 'murakami' } } }) const ChildCompoent = BaseComponent.extend({ template: '<span>{{ firstname }}-{{ lastname }}</span>', data () { return { firstname: 'yamato' } } }) describe("ChildCompoent.vue", () => { it("renders fullname", () => { const wrapper = mount(ChildCompoent); expect(wrapper.text()).toMatch('yamato-murakami'); }); });
24. extended components?
26. Why extended components need to improve?
30. // use Vue.extend const BaseComponent = Vue.extend({ data () { return { lastname: 'murakami' } } })
31. // use Vue.extend const BaseComponent = Vue.extend({ data () { return { lastname: 'murakami' } } }) !
33. // use Vue.extend const BaseComponent = Vue.extend({ data () { return { lastname: 'murakami' } } }) BaseComponent.extend({ ~~~~~~~~~ some extend setting ~~~~~~~~~ })
34. // use Vue.extend const BaseComponent = Vue.extend({ data () { return { lastname: 'murakami' } } }) BaseComponent.extend({ ~~~~~~~~~ some extend setting ~~~~~~~~~ }) "
36. https://github.com/vuejs/vue-test-utils/blob/dev/ packages/create-instance/create-instance.js#L76
38. https://github.com/vuejs/vue-test-utils/pull/1055
39. Why call `extend` twice?
40. Why call `extend` twice? const Component = { template: '<span></span>', computed: { returnZero () { return 0; } } } describe("Component.vue", () => { it("override", () => { const wrapper = mount(Component, { computed: { returnZero () { return 'Override!!' } } }); expect(wrapper.vm.returnZero).toBe('Override!!'); }); });
41. 5P
    JOKFDU
    DPNQPOFOU
    PQUJPOT
    MJLF
    ADPNQVUFEA
    GSPN
    PVUTJEF
43. 2 blockers for ver1.0.0 *NQSPWF
    TVQQPSU
    GPS
    FYUFOEFE
    DPNQPOFOUT 'JY
    TZODISPOPVT
    CVHT
44. 2 blockers for ver1.0.0 *NQSPWF
    TVQQPSU
    GPS
    FYUFOEFE
    DPNQPOFOUT 'JY
    TZODISPOPVT
    CVHT
46. Thank you for listening!
47. References • https://github.com/vuejs/vue-test-utils • https://jp.vuejs.org • https://github.com/vuejs/vue
48. Reference Images • http://hermie.jp/ • Yoshiki HAYAMA hermie.jp • CC BY 3.0 • https://creativecommons.org/licenses/by/ 3.0/deed.ja