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.7k
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.1k
Other Decks in Programming
See All in Programming
スモールチームがAmazon Cognitoでコスパよく作るサービス間連携認証
tacke_jp
2
930
httputil.ReverseProxy でもリトライがしたい
toga4
1
140
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
4
670
モデリングの費用対効果
masuda220
PRO
4
990
Micro Frontends with Module Federation: Beyond the Basics @codecrafts2022
manfredsteyer
PRO
0
130
LegalForceの契約データを脅かすリスクの排除と 開発速度の向上をどうやって両立したか
aibou
0
630
職場にPythonistaを増やす方法
soogie
0
330
モバイルファーストデザインの爆速実装を考える
tanabee8
0
180
iOSアプリの技術選択2022
tattn
6
2.6k
Why declarative UI frameworks?
tkuenneth
0
200
デュアルトラックアジャイル× Agile Testingから 見えてきたQAのミライ
atamaplus
0
500
roadmap to rust 2024
matsu7874
1
910
Featured
See All Featured
Producing Creativity
orderedlist
PRO
333
37k
Product Roadmaps are Hard
iamctodd
34
6.1k
Building Your Own Lightsaber
phodgson
94
4.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Documentation Writing (for coders)
carmenhchung
48
2.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
350
21k
The Most Common Mistakes in Cover Letters
jrick
PRO
4
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
4
450
The Language of Interfaces
destraynor
148
20k
Embracing the Ebb and Flow
colly
73
3.3k
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('.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') }
It’s easy to bind events. And testing too.
All right, we’ve got testable components now. SVG helps you!
Thank you!