SVG makes your components to testable

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?

8. None

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!