SVG makes your components to testable

SVG makes your components to testable

Vue.js Tokyo v-meetup #7

47e65331c5cefdea87eb05b0753456ce?s=128

KIMURA Tetsuro

May 23, 2018
Tweet

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!