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

Unit Testing for Frontend Code at Blibli.com

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
180
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
Avatar for yimajo yimajo
3
610
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
130
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
Avatar for azukiazusa azukiazusa1
1
720
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
200
CSC307 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
680
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
Avatar for とすり tosuri13
4
400
なるべく楽してバックエンドに型をつけたい！(楽とは言ってない)
Avatar for HIBIKI CUBE hibiki_cube
0
140
コマンドとリード間の連携に対する脅威分析フレームワーク
Avatar for Aja9tochin pandayumi
1
450
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
Avatar for Haochen Kotoi-Xie haochenx
0
140
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
0
560
CSC307 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
690

Featured

See All Featured
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Designing Experiences People Love
Avatar for Jonathan Moore moore
144
24k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
170
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.8k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
1
750
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.2k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
730

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