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
250

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
99
Mengukur dan meningkatkan performa website
Avatar for Irfan Maulana mazipan
1
210
Testing JavaScript
Avatar for Irfan Maulana mazipan
0
140
Membuat Website Zaman Sekarang
Avatar for Irfan Maulana mazipan
0
490
Kinerja Web 101 - Edisi 2022
Avatar for Irfan Maulana mazipan
1
440
Layout Repaint & The Lessons Learned
Avatar for Irfan Maulana mazipan
0
400
Bagaimana implementasi mockup design
Avatar for Irfan Maulana mazipan
0
470
Memulai karir sebagai web programmer
Avatar for Irfan Maulana mazipan
0
720
Membuat laporan kecepatan web untuk blog
Avatar for Irfan Maulana mazipan
0
510

Other Decks in Programming

See All in Programming
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ～他言語変換の仕組み～ / cdk-language-transformation
Avatar for k.goto gotok365
7
380
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
Avatar for mackey0225 mackey0225
0
140
型付け力を強化するための Hoogle のすゝめ / Boosting Your Type Mastery with Hoogle
Avatar for TAKASE Kazuyuki guvalif
1
230
ソフトウェア品質特性、意識してますか？AIの真の力を引き出す活用事例 / ai-and-software-quality
Avatar for MinoDriven minodriven
19
6.7k
try-catchを使わないエラーハンドリング！？ PHPでResult型の考え方を取り入れてみよう
Avatar for Takuma Kajikawa kajitack
3
340
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
Avatar for Yui Sakamoto yuisakamoto
6
960
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
イベントストーミングから始めるドメイン駆動設計
Avatar for おだかとしゆき jgeem
3
420
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
Avatar for Masayuki Izumi izumin5210
4
480
ワンバイナリWebサービスのススメ
Avatar for mackee mackee
10
7.5k
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
Avatar for tomohiko.kuzuba tomohiko9090
0
100
Zennの運営完全に理解した #完全に理解したTalk
Avatar for Yusuke Wada wadayusuke
1
140

Featured

See All Featured
Done Done
Avatar for chrislema chrislema
184
16k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
19k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
106
19k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
349
20k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
52
2.8k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
50k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
23
1.6k

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