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

Unit Testing for Frontend Code at Blibli.com

Avatar for Irfan Maulana Irfan Maulana
January 26, 2018
Programming
1
270

Unit Testing for Frontend Code at Blibli.com

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

Avatar for Irfan Maulana

Irfan Maulana

January 26, 2018
Tweet

More Decks by Irfan Maulana

See All by Irfan Maulana
Panduan untuk mempublikasikan kode ke publik
Avatar for Irfan Maulana mazipan
0
140
Mengukur dan meningkatkan performa website
Avatar for Irfan Maulana mazipan
1
240
Testing JavaScript
Avatar for Irfan Maulana mazipan
0
170
Membuat Website Zaman Sekarang
Avatar for Irfan Maulana mazipan
0
520
Kinerja Web 101 - Edisi 2022
Avatar for Irfan Maulana mazipan
1
480
Layout Repaint & The Lessons Learned
Avatar for Irfan Maulana mazipan
0
430
Bagaimana implementasi mockup design
Avatar for Irfan Maulana mazipan
0
530
Memulai karir sebagai web programmer
Avatar for Irfan Maulana mazipan
0
760
Membuat laporan kecepatan web untuk blog
Avatar for Irfan Maulana mazipan
0
550

Other Decks in Programming

See All in Programming
Oxlint JS plugins
Avatar for kazupon kazupon
1
960
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
180
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
8
8.8k
izumin5210のプロポーザルのネタ探し #tskaigi_msup
Avatar for izumin5210 izumin5210
1
130
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
Avatar for azukiazusa azukiazusa1
1
730
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
Avatar for Yuto tsukamoto1783
0
190
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
160
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
3.9k
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
200
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
1k

Featured

See All Featured
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon szymonslowik
1
210
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
190
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
55
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.3k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
32k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
450
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
Designing Experiences People Love
Avatar for Jonathan Moore moore
144
24k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k

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