Unit Testing for Frontend Code at Blibli.com

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

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
4
1.1k
D83b3739651001461f48763639b90b50?s=48 mazipan
1
360
D83b3739651001461f48763639b90b50?s=48 mazipan
3
280
D83b3739651001461f48763639b90b50?s=48 mazipan
2
93
D83b3739651001461f48763639b90b50?s=48 mazipan
4
240
D83b3739651001461f48763639b90b50?s=48 mazipan
1
110
D83b3739651001461f48763639b90b50?s=48 mazipan
1
150
D83b3739651001461f48763639b90b50?s=48 mazipan
1
48
D83b3739651001461f48763639b90b50?s=48 mazipan
1
130

Other Decks in Programming

See All in Programming
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
1
120
49df09ab2eadd025342b9b3387936eb9?s=48 stefafafan
0
370
F0493f5bcb4cc9fdccc54ae3e8ab6bd0?s=48 matsu7874
0
250
Bc87ea9c7a0f85b8761b716a677c6694?s=48 adammc331
0
160
7e0087a19318ded4ba2203187694740f?s=48 christianweyer
0
140
9f33218af7ae5c04e102fcc3076f2f5c?s=48 yhkaplan
1
320
8ec2b967e38f000eb63ae345cd7c58e6?s=48 minodriven
27
4.2k
E76754f592fecf0116c53b2bc39ff135?s=48 kthoms
0
210
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
160
66988ef2ff1307f07c7c8d829a6dc4fa?s=48 rosariopfernandes
2
120
29fafe10f8a2fefb98671421260aaa65?s=48 steinkel
1
160
473b12ebcfb79adfaef97796e94fc25c?s=48 hironytic
0
120

Featured

See All Featured
5f83ef806155b403c3393160ce51f955?s=48 jlugia
216
16k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
267
16k
78b475797a14c84799063c7cd073962f?s=48 holman
459
270k
11c84dff30266b907714802088852677?s=48 jasonvnalue
80
7.9k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
283
18k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
144
6.5k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
14
980
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
55
5.3k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
90
13k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
293
39k

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