Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Unit Testing for Frontend Code at Blibli.com

Irfan Maulana
January 26, 2018
Programming
1
220

Unit Testing for Frontend Code at Blibli.com

Speak about Unit Test implementation for frontend code in Blibli.com especially in Vue.js framework

Irfan Maulana

January 26, 2018
Tweet

More Decks by Irfan Maulana

See All by Irfan Maulana
Mengukur dan meningkatkan performa website
mazipan
1
160
Testing JavaScript
mazipan
0
110
Membuat Website Zaman Sekarang
mazipan
0
430
Kinerja Web 101 - Edisi 2022
mazipan
1
380
Layout Repaint & The Lessons Learned
mazipan
0
340
Bagaimana implementasi mockup design
mazipan
0
400
Memulai karir sebagai web programmer
mazipan
0
670
Membuat laporan kecepatan web untuk blog
mazipan
0
470
Bongkar Dapur Webnya #PHPID-OL
mazipan
0
450

Other Decks in Programming

See All in Programming
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
400
現場で役立つモデリング　超入門
masuda220
PRO
13
2.9k
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
1.7k
詳細解説！ ArrayListの仕組みと実装
yujisoftware
0
480
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
410
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう（KoR2024）
ymtdzzz
4
1.6k
カスタムしながら理解するGraphQL Connection
yanagii
1
1.2k
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
1k
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
150
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism - An Example
philipschwarz
PRO
0
170
僕がつくった48個のWebサービス達
yusukebe
18
17k
qmuntal/stateless のススメ
sgash708
0
120

Featured

See All Featured
A designer walks into a library…
pauljervisheath
202
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Typedesign – Prime Four
hannesfritz
39
2.4k
Ruby is Unlike a Banana
tanoku
96
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
A Tale of Four Properties
chriscoyier
156
23k
Building Your Own Lightsaber
phodgson
102
6.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
The Invisible Side of Design
smashingmag
297
50k

Transcript

  1. UNIT TESTING FOR FRONTEND CODE at Blibli.com Irfan Maulana |

    Front End Developer

  2. About Me

  3. Fans ?

  4. Blibli.com Frontend Code ⚔ We believe in Green framework (*not

    Blue)
  5. None

  6. '

  7. Blackbox vs Whitebox Testing

  8. Blibli.com Frontend Unit Test Tools • karma runner • karma-mocha

    • karma-sinon-chai • karma-babel-preprocessor • Karma-coverage • karma-sourcemap-loader • karma-spec-reporter • karma-webpack • karma-phantomjs-launcher

  9. Automate on Git Commit • Developer commit code • Automate

    run build and test • Run Code Analysis • Quality Passed ? ✅ : ⛔

  10. Quality Gate

  11. Karma vs Jest • https://stackshare.io/stackups/jest-vs-karma-runner update in January 26 2018

  12. Let’s take a look the codes…

  13. Vue Component

  14. Unit Testing Vue Component

  15. How (*Blue) Doing Unit Test ?

  16. Vue Unit Test with Avoriaz

  17. Jest-in-Vue

  18. Space for Improvement (for Blibli.com) • Move from Karma to

    Jest – Simplify tooling • Add Avoriaz / vue-test-utils – UI centric testing • End 2 End Test for Developer – Better quality delivery • Etc…

  19. Do you like my talks ? https://github.com/mazipan https://github.com/mazipan/talks https://github.com/mazipan/project-catalog

  20. THANK YOU