SVG makes your components to testable

Transcript

1. 1.

   SVG makes your components to testable Vue.js Tokyo v-meetup #7

   2018/05/23 Wed
2. 2.

   KIMURA Tetsuro

3. 3.

   Resources of Vue with SVG • Sarah Drasner
 Animating Vue

   • ͸ͬ͠ΎΖͬ͘
 άϦάϦಈ͘UIΛVueͱSVGͰαΫοͱॻ͘ • Me
 Vue.jsͰD3.jsΛ࢖ΘͣʹάϥϑΛ࣮૷͢Δ
4. 4.

   This is a simple story. Yeah, it’s about testing.

5. 5.

   Are you testing?

6. 6.

   I guess, almost YES.

7. 7.

   How about GRAPHICAL components?

8. 8.

   None
9. 9.

   <canvas> •How to SPEC rendering result? •What is the EXPECTED?

10. 10.

    It’s NOT easy.

11. 11.

    SVG is CODE.

12. 12.

    It’s EXPECTABLE. And…

13. 13.

    Today, we have SNAPSHOT TESTING by Jest!!

14. 14.

    #vue-cli ? Pick a unit testing solution: Mocha + Chai

    > Jest “vue-server-renderer” is not necessary. Just choose this.
15. 15.

    1.Create a component. 2.Write static / rough template. 3.Generate the

    first snapshot.
16. 16.

    Like this.

17. 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. 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. 19.

    npm run test:unit Run tests.

20. 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. 21.

    Now, the expecting has defined.

22. 22.

    It’s time to build LOGICS!

23. 23.

    npm run test:unit —- -u Update snapshots.

24. 24.

    Oh by the way, SVG presents DOM.

25. 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. 26.

    It’s easy to bind events. And testing too.

27. 27.

    All right, we’ve got testable components now. SVG helps you!

28. 28.

    Thank you!