How I met your coverage threshold

From Frontend Connect 2017 in Warsaw, Poland.

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 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.

He’ll also discuss some tools and best practices that help with tracking and increasing tests and test coverage.

Transcript

1. HOW I MET YOUR COVERAGE THRESHOLD LOUAY ALAKKAD SOFTWARE ARCHITECT
 DIGITAL MCKINSEY
2. Disclaimer: This talk has nothing to do with the TV show How I Met Your Mother Any similarities between them are a figment of your imagination
3. 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 ;)
4. HOW I MET YOUR COVERAGE THRESHOLD THE PATH TO MORE VALUABLE AND ENJOYABLE FRONT END TESTING Photo: Istanbul on a rainy day
5. 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
6. BUT THERE’S HOPE You just need to keep 3 things in mind
7. MEASURE & TRACK KNOW WHERE YOU STAND AND WHERE YOU’RE MOVING
8. HOW I MET YOUR COVERAGE THRESHOLD MEASURE AND TRACK ▸ Measure, Duh! ▸ Automate, Duh! ▸ Enforce a threshold and keep on increasing it so no code changes would be accepted unless they’re tested
9. 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
10. CODECOV PULL REQUEST COMMENT
11. CODECLIMATE PULL REQUEST STATUS
12. FOCUS ON THE BIG PICTURE UNIT TESTS ARE NOT ALWAYS THE ANSWER
13. 2 UNIT TESTS, BOTH PASSING
14. 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
15. 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
16. OPTIMISE FOR CHANGE (I.E. DELETION) TEST CODE IS NOT PRODUCTION CODE
17. OPTIMISE FOR CHANGE ▸ 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
18. 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
19. 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
20. THANKS FOR JOINING IT'S EASY! YOU CAN DO IT
21. QUESTIONS? LOUAY ALAKKAD TWITTER: @L0UY EMAIL: LOUAY_ALAKKAD@MCKINSEY.COM