SVG makes your components to testable

Vue.js Tokyo v-meetup #7

Transcript

1. SVG makes your components to testable Vue.js Tokyo v-meetup #7 2018/05/23 Wed
2. KIMURA Tetsuro
3. Resources of Vue with SVG • Sarah Drasner
 Animating Vue • ͸ͬ͠ΎΖͬ͘
 άϦάϦಈ͘UIΛVueͱSVGͰαΫοͱॻ͘ • Me
 Vue.jsͰD3.jsΛ࢖ΘͣʹάϥϑΛ࣮૷͢Δ
4. This is a simple story. Yeah, it’s about testing.
5. Are you testing?
6. I guess, almost YES.
7. How about GRAPHICAL components?
9. <canvas> •How to SPEC rendering result? •What is the EXPECTED?
10. It’s NOT easy.
11. SVG is CODE.
12. It’s EXPECTABLE. And…
13. Today, we have SNAPSHOT TESTING by Jest!!
14. #vue-cli ? Pick a unit testing solution: Mocha + Chai > Jest “vue-server-renderer” is not necessary. Just choose this.
15. 1.Create a component. 2.Write static / rough template. 3.Generate the first snapshot.
16. Like this.
17. Mark up it. <template> <div class="p-chart-line"> <svg viewBox="0 0 1000 700" width="1000" height="700"> <g transform="translate(50, 50)"> <g stroke="#ccc" stroke-width="1"> <path d="M 0 .5 H 900" stroke="#999" transform="translate(0, 600)"></path> <path d="M 0 .5 H 900" transform="translate(0, 450)"></path> <path d="M 0 .5 H 900" transform="translate(0, 300)"></path> <path d="M 0 .5 H 900" transform="translate(0, 150)"></path> <path d="M 0 .5 H 900"></path> </g> <g fill="none" stroke-width="3" transform="translate(50, 600)"> <polyline points="0 -60 160 -300 320 -240 480 -450 640 -360 800 -540" stroke="#000080" ></polyline> </g> </g> </svg> </div> </template>
18. Write testing code. import { shallowMount } from '@vue/test-utils' import ChartLine from '@/components/ChartLine.vue' describe('ChartLine.vue', () => { it('matches snapshot', () => { const values = [.1, .5, .4, .75, .6, .9] const wrapper = shallowMount(ChartLine, { propsData: { values } }) expect(wrapper.html()).toMatchSnapshot() }) })
19. npm run test:unit Run tests.
20. It was generated. // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartLine.vue matches snapshot 1`] = ` <div class="p-chart-line"> <svg viewBox="0 0 1000 700" width="1000" height="700"> <g transform="translate(50, 50)"> <g stroke="#ccc" stroke-width="1"> <path d="M 0 .5 H 900" stroke="#999" transform="translate(0, 600)"></path> <path d="M 0 .5 H 900" transform="translate(0, 450)"></path> <path d="M 0 .5 H 900" transform="translate(0, 300)"></path> <path d="M 0 .5 H 900" transform="translate(0, 150)"></path> <path d="M 0 .5 H 900"></path> </g> <g fill="none" stroke-width="3" transform="translate(50, 600)"> <polyline points="0 -60 160 -300 320 -240 480 -450 640 -360 800 -540" stroke="#000080"></polyline> </g> </g> </svg> </div> `;
21. Now, the expecting has defined.
22. It’s time to build LOGICS!
23. npm run test:unit —- -u Update snapshots.
24. Oh by the way, SVG presents DOM.
25. Here's the thing. // template <polyline class="p-chart-line__line" @click="handleClick" ></polyline> // testing describe('.p-chart-line__line@click', () => { it('emits a `click-line` event', () => { const wrapper = shallowMount(ChartLine) wrapper.find('.p-chart-line__line').trigger('click') expect(wrapper.emitted('click-line')[0]).toEqual([]) }) }) // methods handleClick() { this.$emit('click-line') }
26. It’s easy to bind events. And testing too.
27. All right, we’ve got testable components now. SVG helps you!
28. Thank you!