Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
SVG makes your components to testable
KIMURA Tetsuro
May 23, 2018
Programming
3
1.8k
SVG makes your components to testable
Vue.js Tokyo v-meetup #7
KIMURA Tetsuro
May 23, 2018
Tweet
Share
More Decks by KIMURA Tetsuro
See All by KIMURA Tetsuro
Nuxt.jsによるAdobe MAX Japan 2018公式Webサイト制作の舞台裏
haribote
11
3.2k
Other Decks in Programming
See All in Programming
Swift Observation
shiz
3
250
Most Valuable Bug(?) ~インシデント未遂から得た学び~
tatsumiakahori
0
140
Swift Concurrency in GoodNotes
inamiy
4
1.3k
ペパカレで入社した私が感じた2つのギャップと向き合い方
kosuke_ito
0
140
監視せなあかんし、五大紙だけにオオカミってな🐺🐺🐺🐺🐺
sadnessojisan
2
1.2k
T3 Stack and TypeScript ecosystem
quramy
3
680
量子コンピュータ時代のプログラミングセミナー / 20221222_Amplify_seminar _route_optimization
fixstars
0
240
なぜRubyコミュニティにコミットするのか?
luccafort
0
290
xarray-Datatree: Hierarchical Data Structures for Multi-Model Science
tomnicholas
0
200
様々なWebアプリをAzureにデプロイする
tomokusaba
0
110
爆速の日経電子版開発の今
shinyaigeek
1
380
Gradle build: The time is now
nonews
1
360
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
What's new in Ruby 2.0
geeforr
336
30k
The Invisible Customer
myddelton
113
12k
Gamification - CAS2011
davidbonilla
75
4.1k
Building Adaptive Systems
keathley
27
1.3k
Rebuilding a faster, lazier Slack
samanthasiow
69
7.5k
In The Pink: A Labor of Love
frogandcode
132
21k
Designing for humans not robots
tammielis
245
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
182
15k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
44
14k
Transcript
SVG makes your components to testable Vue.js Tokyo v-meetup #7
2018/05/23 Wed
KIMURA Tetsuro
Resources of Vue with SVG • Sarah Drasner Animating Vue
• ͬ͠ΎΖͬ͘ άϦάϦಈ͘UIΛVueͱSVGͰαΫοͱॻ͘ • Me Vue.jsͰD3.jsΛΘͣʹάϥϑΛ࣮͢Δ
This is a simple story. Yeah, it’s about testing.
Are you testing?
I guess, almost YES.
How about GRAPHICAL components?
None
<canvas> •How to SPEC rendering result? •What is the EXPECTED?
It’s NOT easy.
SVG is CODE.
It’s EXPECTABLE. And…
Today, we have SNAPSHOT TESTING by Jest!!
#vue-cli ? Pick a unit testing solution: Mocha + Chai
> Jest “vue-server-renderer” is not necessary. Just choose this.
1.Create a component. 2.Write static / rough template. 3.Generate the
first snapshot.
Like this.
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>
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() }) })
npm run test:unit Run tests.
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> `;
Now, the expecting has defined.
It’s time to build LOGICS!
npm run test:unit —- -u Update snapshots.
Oh by the way, SVG presents DOM.
Here's the thing. // template <polyline class="p-chart-line__line" @click="handleClick" ></polyline> //
testing describe('
[email protected]
', () => { 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') }
It’s easy to bind events. And testing too.
All right, we’ve got testable components now. SVG helps you!
Thank you!