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
110
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
450
Layout Repaint & The Lessons Learned
Avatar for Irfan Maulana mazipan
0
410
Bagaimana implementasi mockup design
Avatar for Irfan Maulana mazipan
0
480
Memulai karir sebagai web programmer
Avatar for Irfan Maulana mazipan
0
730
Membuat laporan kecepatan web untuk blog
Avatar for Irfan Maulana mazipan
0
520

Other Decks in Programming

See All in Programming
GPUを計算資源として使おう！
Avatar for prime number primenumber
1
250
『自分のデータだけ見せたい！』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
Avatar for AkitoTsukahara akitotsukahara
2
660
システム成長を止めない！本番無停止テーブル移行の全貌
Avatar for さかうぇ sakawe_ee
1
360
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
Avatar for 武田 憲太郎 kentaroutakeda
2
1k
LT 2025-06-30: プロダクトエンジニアの役割
Avatar for Keisuke Yamamoto yamamotok
0
870
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ～継続的な取り組みを添えて～
Avatar for Takuya TAKAHASHI takutakahashi
4
1.3k
ご注文の差分はこちらですか？ 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
Avatar for Kenji Kono konokenj
3
580
Google Agent Development Kit でLINE Botを作ってみた
Avatar for Kento.Yamada ymd65536
2
260
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
Avatar for Yusuke Suto sutochin26
1
7.3k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
Avatar for コドモン開発チーム codmoninc
2
21k
新メンバーも今日から大活躍！SREが支えるスケールし続ける組織のオンボーディング
Avatar for HonMarkHunt honmarkhunt
5
8.7k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
Avatar for kesoji kesoji
0
300

Featured

See All Featured
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
235
140k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
43
7.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
181
54k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.9k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.4k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.1k

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