Slide 1
Slide 1 text
SVG makes
your components
to testable
Vue.js Tokyo v-meetup #7
2018/05/23 Wed
Slide 2
Slide 2 text
KIMURA Tetsuro
Slide 3
Slide 3 text
Resources of Vue with SVG
• Sarah Drasner
Animating Vue
• ͬ͠ΎΖͬ͘
άϦάϦಈ͘UIΛVueͱSVGͰαΫοͱॻ͘
• Me
Vue.jsͰD3.jsΛΘͣʹάϥϑΛ࣮͢Δ
Slide 4
Slide 4 text
This is a simple story.
Yeah, it’s about testing.
Slide 5
Slide 5 text
Are you testing?
Slide 6
Slide 6 text
I guess,
almost YES.
Slide 7
Slide 7 text
How about
GRAPHICAL
components?
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
•How to SPEC rendering result?
•What is the EXPECTED?
Slide 10
Slide 10 text
It’s NOT easy.
Slide 11
Slide 11 text
SVG is CODE.
Slide 12
Slide 12 text
It’s EXPECTABLE. And…
Slide 13
Slide 13 text
Today, we have
SNAPSHOT
TESTING
by Jest!!
Slide 14
Slide 14 text
#vue-cli
? Pick a unit testing solution:
Mocha + Chai
> Jest
“vue-server-renderer” is not necessary.
Just choose this.
Slide 15
Slide 15 text
1.Create a component.
2.Write static / rough template.
3.Generate the first snapshot.
Slide 16
Slide 16 text
Like this.
Slide 17
Slide 17 text
Mark up it.
Slide 18
Slide 18 text
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()
})
})
Slide 19
Slide 19 text
npm run test:unit
Run tests.
Slide 20
Slide 20 text
It was generated.
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ChartLine.vue matches snapshot 1`] = `
`;
Slide 21
Slide 21 text
Now,
the expecting
has defined.
Slide 22
Slide 22 text
It’s time to build
LOGICS!
Slide 23
Slide 23 text
npm run test:unit —- -u
Update snapshots.
Slide 24
Slide 24 text
Oh by the way,
SVG presents
DOM.
Slide 25
Slide 25 text
Here's the thing.
// template
// 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')
}
Slide 26
Slide 26 text
It’s easy to bind events.
And testing too.
Slide 27
Slide 27 text
All right, we’ve got
testable components now.
SVG helps you!
Slide 28
Slide 28 text
Thank you!