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. 3.

    Resources of Vue with SVG • Sarah Drasner
 Animating Vue

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

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

    > Jest “vue-server-renderer” is not necessary. Just choose this.
  4. 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>
  5. 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() }) })
  6. 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> `;
  7. 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') }