Hi! I'm Carol

Photo of Carol

I'm a frontend software engineer
at Capital One.

Check Test yourself before you wreck yourself

These slides

qrcode pointing to the link below
http://bit.do/test-yourself

Expectation setting

I'm not an expert

gif of a dog looking confused

Ask questions

gif of regina george raising her hand

Agenda

  • Why I care
  • Some types of testing and tools
  • Designing your testing strategy

Why do I care?

It's a safety net

gif of person with vr headset trapped in a net

Breezy refactoring

gif of cow with a wig blowing in the breeze

Test Pyramid

test pyramid from Mike Cohn's Succeeding with Agile book

Your best bet is to remember two things from Cohn’s original test pyramid:

  1. Write tests with different granularity
  2. The more high-level you get the fewer tests you should have

Test Ice Cream Cone

test ice cream cone

Lessons learnt on different types of testing

Disclaimer:

Your mileage may vary.

Code Formatting:

It lets you stop arguing about style while having consistent code, in a nutshell.

🛠 Prettier

Prettier logo 🔗 Why Prettier?

Linting:

It lets you enforce coding quality principles throughout your codebase, to help you avoig bugs.

🛠 ESLint

eslint logo

Most widely adopted linter out there.

ESLint example

eslint showing an error on emoji accessibility
eslint showing an error on import order

Prettier + ESLint = 💛

Also, config is hard, so use someone else's if you can and adjust as needed 😅

Intermission

alaskan malamute puppies chilling out

Unit testing

Getting the smallest unit of code, and testing it in isolation.

🛠 Jest

jest logo

Modern tool, does a lot out of the box - assertion library, coverage, mocking, snapshots.

navigation component code
unit tests for a navigation component

Snapshot testing

snapshot test screenshot

🔥 Hot take 🔥

I'm not a big fan of snapshot testing, it makes people stop paying attention.

T 👏 D 👏 D 👏

Yes, friends. Get ready for some indoctrination.

What's TDD?

It's a practice where you write a test first, and only enough code to satisfy that test.

Red · green · refactor

red green refactor cycle

Pros:

Better architecture

gif of lego bricks forming a lego brick

You only think once

gif of andy from parks and rec looking excited

Cons:

It's hard to get started

gif of michelle obama saying its hard

🔥 Hot take 🔥

100% test coverage is not a good thing.

Know when to stop

🛑✋

You want to make sure you're not testing someone else's code.

Component testing

Testing your service as a whole.

🛠 Cypress

Low effort end to end testing framework.

screenshot of my cypress test file

Write one get one free

In web applications, component testing can be reused for integration testing.

Intermission

ginger kitten flying across the sky

Visual testing

Tests that your application looks the way you expect it to.

🛠 Galen

screenshot of galen test

🛠 Percy

  • Integrates with Cypress
  • Integrates with GitHub & GitLab
  • Cross browser testing

Accessibility testing

Cypress-axe is a plugin that checks your app for common accessibility faults.

Mutation testing

Stryker mutator allows you to improve your tests by changing your code.

Designing your testing strategy

What do you care about?

Start small and increment

Challenges

  • Buy in
  • Small companies
  • Big companies

Takeaways

  1. Getting started is hard
  2. Documentation is your friend
  3. Find out what you care about
  4. Tests your critical paths
  5. T 👏 D 👏 D 👏
  6. Better tools significantly reduce effort

Come talk to me about it

shiba with shoes on yapping

Thank you! 💛✨

Links

🔗 The practical test pyramid - Ham Vocke 🔗 Jest docs 🔗 Test driven component development - Tim Doherty 🔗 Cypress Docs 🔗 Smashing - The art of layout testing with galen framework 🔗 David Walsh - Awesome visual testing with Percy 🔗 Live accessibility audit - Marcy Sutton 🔗 Axe 🔗 Stryker mutator