Unit Testing for Frontend Code at Blibli.com

Slide 1

Slide 1 text

UNIT TESTING FOR FRONTEND CODE at Blibli.com Irfan Maulana | Front End Developer

Slide 2

Slide 2 text

About Me

Slide 3

Slide 3 text

Fans ?

Slide 4

Slide 4 text

Blibli.com Frontend Code ⚔ We believe in Green framework (*not Blue)

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Blackbox vs Whitebox Testing

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Automate on Git Commit • Developer commit code • Automate run build and test • Run Code Analysis • Quality Passed ? ✅ : ⛔

Slide 10

Slide 10 text

Quality Gate

Slide 11

Slide 11 text

Karma vs Jest • https://stackshare.io/stackups/jest-vs-karma-runner update in January 26 2018

Slide 12

Slide 12 text

Let’s take a look the codes…

Slide 13

Slide 13 text

Vue Component

Slide 14

Slide 14 text

Unit Testing Vue Component

Slide 15

Slide 15 text

How (*Blue) Doing Unit Test ?

Slide 16

Slide 16 text

Vue Unit Test with Avoriaz

Slide 17

Slide 17 text

Jest-in-Vue

Slide 18

Slide 18 text

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…

Slide 19

Slide 19 text

Do you like my talks ? https://github.com/mazipan https://github.com/mazipan/talks https://github.com/mazipan/project-catalog

Slide 20

Slide 20 text

THANK YOU