TDD & CI in FRONTENDdisyam.adityana@gmail.com

AGILE SOFTWARE DEVELOPMENT

COMPLEXITY

AGILE VS WATERFALL

TEST DRIVEN DEVELOPMENT (TDD)

WHAT IS TDD?

WHY TDD?

● SAFETY NET● REDUCE BUGS● FAST FEEDBACK● VALIDATE YOUR DESIGN● KEEP FOCUS ON GETTING DONE● FORCE DEVELOPER TO THINK ABOUT GOALS● EASY MAINTENANCE● EASY UPGRADE● ETC...

GOOD TEST

● AUTOMATED AND REPEATABLE● EASY TO IMPLEMENT● ANYONE SHOULD ABLE TO RUN IT● IT SHOULD RUN QUICKLY● IT’S RESULT SHOULD BE CONSISTENT● IT SHOULD FULLY ISOLATED● WHEN TEST FAILS, IT MUST BE EASY TO DETECT WHAT WAS EXPECTED

AND HOW TO PINPOINT THE PROBLEM

TDD WORKFLOW

UNIT TESTING

FRONTEND UNIT TESTING

● KARMA - TASK RUNNER● MOCHA - TESTING FRAMEWORK● CHAI - ASSERTION LIBRARY

FRONTEND UNIT TESTING EXAMPLE

FRONTEND TESTING EXAMPLE

END TO END TESTING

FRONTEND E2E TESTING

● PROTRACTOR - TASK RUNNER● MOCHA - TESTING FRAMEWORK● CHAI - ASSERTION LIBRARY

FRONTEND E2E TESTING EXAMPLE

CODE COVERAGE

A TECHNIQUE TO DETERMINE HOW MUCH CODE IS BEING TESTED

CODE COVERAGE TOOLS

● ISTANBUL● BLANKET.JS● COVERALLS.IO

CODE COVERAGE EXAMPLE

CLEAN CODING

CLEAN CODE METRIC

WAY TO CLEAN CODE

● ANGULAR JOHN PAPA’S STYLE GUIDE● CODECLIMATE.COM

CONTINUOUS INTEGRATION (CI)

WHAT IS CI?

WHY CI?

● IF YOU’RE GOING TO FAIL, THEN FAIL EARLY● ENABLE CONTINUOUS DELIVERY● ENABLE AUTOMATED TESTING● INCREASE CONFIDENCE IN OUR PRODUCT● PREVENTION AND REDUCTION OF PRODUCTION AND STAGING ERRORS● REDUCING RISK● REDUCING OVERHEAD ACROSS THE DEVELOPMENT AND DEPLOYMENT

PROCESS

CI TOOLS

● JENKINS● TEAMCITY● TRAVIS-CI.ORG● CODESHIP.COM

THANK YOU