How I met your coverage threshold

Digital McKinsey's Digital Learnings session. Presented on 2017-10-06.

Transcript

1. how i 
 met your 
 coverage threshold We’ve all been there. Front-end testing is a difficult challenge everyone faces, and lots of people tend to run away from. More often than not it’s fragile, brittle, and sometimes even useless. In this presentation, Louay will talk about his experience in creating a team culture and a toolset that facilitates writing front-end tests for developers which are valuable and less fragile & flakey, and he’ll also discuss some tools and best practices that help with tracking and increasing tests and test coverage. By Louay Alakkad At the digital studio Friday 5 Oct 2017 16:30
2. Disclaimer: This talk has nothing to do with the TV show How I Met Your Mother, which is disgusting and rude Any similarities between them are a figment of your imagination
3. HOW I MET YOUR COVERAGE THRESHOLD LOUAY ALAKKAD SOFTWARE ARCHITECT
 DIGITAL MCKINSEY
4. HOW I MET YOUR COVERAGE THRESHOLD SOME BACKGROUND ▸ Born and grew up in Syria, lived and worked in the UAE, Jordan, Turkey, the UK, Germany, and Latvia ▸ My job is to help big businesses deliver products faster and with higher quality ▸ My favourite city is (still) İstanbul. ▸ Aaaand having said that, you should follow catsofistanbul on Instagram ;)
5. HOW I MET YOUR COVERAGE THRESHOLD THE PATH TO MORE VALUABLE AND ENJOYABLE FRONT END TESTING Photo: Istanbul on a rainy day
6. HOW I MET YOUR COVERAGE THRESHOLD WE ALL WANT IT, BUT IT’S SLIGHTLY DIFFERENT ▸ Frontends run on different platforms and environments, and you should be aware of that ▸ In frontends, most bugs come from unpredictable user or unexpected integration behaviour ▸ Frontend tests are usually a nightmare to read ▸ With all the frameworks that we use, they’re also a nightmare to write
7. BUT THERE’S HOPE Just follow the next 3 steps
8. STEP 1: SUIT UP GET YOUR TOOLS RIGHT
9. HOW I MET YOUR COVERAGE THRESHOLD SUIT UP: MEASURE AND TRACK ▸ Measure, know where you are, Duh! ▸ Automate, it’s your fanciest suit, Duh! ▸ Enforce a threshold and keep on increasing it so no code changes would be accepted unless they’re tested
10. HOW I MET YOUR COVERAGE THRESHOLD TOOLS ARE YOUR FRIENDS ▸ Use test coverage tracking tools like codecov, coveralls or codeclimate ▸ Track and use patch coverage ▸ Enforce a patch coverage threshold
11. CODECOV PULL REQUEST COMMENT
12. CODECLIMATE PULL REQUEST STATUS
13. STEP 2: FOCUS ON THE BIG PICTURE UNIT TESTS ARE NOT ALWAYS THE ANSWER
14. YOU DON’T WANT THIS TO BE YOUR PROJECT
15. 2 UNIT TESTS, BOTH PASSING
16. HOW I MET YOUR COVERAGE THRESHOLD FOCUS ON THE BIG PICTURE ▸ Unit tests are very useful but never enough. Do functional tests instead. They’re more human-readable and cover much more code. Use tools like enzyme and redux-saga-test-plan ▸ Try to run your test suites on different devices and browsers at least once a day. Use services like modern.ie, Sauce Labs, Selenium Grid and AWS Device Farm
17. HOW I MET YOUR COVERAGE THRESHOLD USE THE TESTING PYRAMID ▸ Every time there’s a bug fix, there should be a test case to cover it ▸ Unit and functional tests are easier to write and cheaper to run and maintain
18. STEP 3: OPTIMISE FOR CHANGE TEST CODE IS NOT PRODUCTION CODE
19. OPTIMISE FOR CHANGE (I.E. DELETION) ▸ DRY In tests always repeat yourself. Don’t share fixtures between tests ▸ Don’t think of test code like production code. Performance is not a priority in tests ▸ Tests should be optimised for deletion, meaning that they’re independent and self-contained in one place. Don’t split your tests and their data across different files HOW I MET YOUR COVERAGE THRESHOLD
20. NO CODE IS BETTER THAN NO CODE; UNLESS IT’S TEST CODE The golden rule HOW I MET YOUR COVERAGE THRESHOLD NO CODE IS BETTER THAN NO CODE
21. NO CODE IS BETTER THAN NO CODE; UNLESS IT’S TEST CODE The platinum rule HOW I MET YOUR COVERAGE THRESHOLD NO CODE IS BETTER THAN NO CODE; UNLESS IT’S TEST CODE
22. “NOTHING GOOD HAPPENS AFTER 2AM” AND REMEMBER SO MAKE SURE YOU WRITE YOUR TESTS ON TIME
23. QUESTIONS? LOUAY ALAKKAD TWITTER: @L0UY EMAIL: LOUAY_ALAKKAD@MCKINSEY.COM