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
110

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
93
D83b3739651001461f48763639b90b50?s=48 mazipan
4
1.1k
D83b3739651001461f48763639b90b50?s=48 mazipan
1
390
D83b3739651001461f48763639b90b50?s=48 mazipan
3
280
D83b3739651001461f48763639b90b50?s=48 mazipan
2
94
D83b3739651001461f48763639b90b50?s=48 mazipan
5
260
D83b3739651001461f48763639b90b50?s=48 mazipan
1
120
D83b3739651001461f48763639b90b50?s=48 mazipan
1
150
D83b3739651001461f48763639b90b50?s=48 mazipan
1
50

Other Decks in Programming

See All in Programming
1623dd1adf096ba35ba33727d933e14c?s=48 nbkouhou
9
4.9k
22e056dcb79e14363e844f1e57986325?s=48 aratayokoyama
0
240
E473e5af1263c050599921981db46068?s=48 akatsukinewgrad
0
220
E1db053f2c2f3d3b49a5f5b9b0c7f20f?s=48 kazaman97
0
210
3c4e24fd827c789cb67a9f759f057b06?s=48 kgmyshin
1
270
7975b9fd58c8945ae1c6b38747de7f28?s=48 line_developers_tw2
0
900
D12a80cab206033a820ccff8319f957b?s=48 s_uryu
0
240
6a87c9bfc71c805c3f5f248b359365d3?s=48 mu2in
0
150
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
4
630
405fe9ab689473f267e2cfbd95f78c75?s=48 kyonmm
2
2.2k
1c2b62114ede7d8cb897bf19b999d233?s=48 muttsu_623
0
560
827dbd19908541482bac51ace8b86426?s=48 anchorcable
1
130

Featured

See All Featured
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
220
120k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
393
60k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
11
750
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
157
6.4k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
111
9.9k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
408
57k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
274
31k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
106
14k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
20
2.1k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
146
19k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
499
130k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
401
20k

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