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

Unit Testing for Frontend Code at Blibli.com

D83b3739651001461f48763639b90b50?s=47 Irfan Maulana
January 26, 2018
Programming
1
130

Unit Testing for Frontend Code at Blibli.com

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

D83b3739651001461f48763639b90b50?s=128

Irfan Maulana

January 26, 2018
Tweet

More Decks by Irfan Maulana

See All by Irfan Maulana
D83b3739651001461f48763639b90b50?s=48 mazipan
0
22
D83b3739651001461f48763639b90b50?s=48 mazipan
0
62
D83b3739651001461f48763639b90b50?s=48 mazipan
0
340
D83b3739651001461f48763639b90b50?s=48 mazipan
0
130
D83b3739651001461f48763639b90b50?s=48 mazipan
0
160
D83b3739651001461f48763639b90b50?s=48 mazipan
0
230
D83b3739651001461f48763639b90b50?s=48 mazipan
4
1.2k
D83b3739651001461f48763639b90b50?s=48 mazipan
1
550
D83b3739651001461f48763639b90b50?s=48 mazipan
3
350

Other Decks in Programming

See All in Programming
18c5d6e2413dc02665fd4210bf5d094b?s=48 roothybrid7
0
360
1b031ccbf968811f157cf7a892dddfed?s=48 geshan
0
310
B03c47042f27235b4ddd97621c02df81?s=48 storz
0
110
2594ac7ce91fd7d9a3ce71ca7cc2d0c0?s=48 d_date
3
800
C400a6dc29b681f0284fd33c468e396e?s=48 shimotaroo
0
140
E35f18d9e5584b48a7cf5550f905522f?s=48 zntfdr
1
140
8ad4be5fb42a8fd88d68a9054d9eba8e?s=48 tamai_63
0
420
E55fbffb4afd0a84d36c945ed68d8c19?s=48 caddi_eng
0
440
Fb8392642d939c918bf61fc6d8094409?s=48 misawasan
0
110
461346ac617a22f5bf6346e28d7c7202?s=48 bassbone
0
270
922f51d458d6ffee8578b9d3ab0a52b6?s=48 ug
1
180
Add1036688abcb2e3dbff7c3090f7e35?s=48 imtnd
0
930

Featured

See All Featured
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
595
210k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
364
63k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
84
3.8k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
259
17k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
212
7.3k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
112
15k
78b475797a14c84799063c7cd073962f?s=48 holman
464
280k
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
125
5.2k
245cee81a9c424266e5e401d844ea881?s=48 lara
27
3.7k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
316
22k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
405
20k
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
45
2.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