Testing Practices and Principles

Kent C. Dodds

Utah

wife, 4 kids, & a dog

PayPal, Inc.

@kentcdodds

kcd.im/tp-slides

Please Stand...

@kentcdodds

if you are able ❤️ ♿️

kcd.im/tp-slides

What this talk is

@kentcdodds

• Fundamentals behind tests and testing frameworks

• Distinctions of different forms of testing

• Writing unit and integration

• Test doubles (mocks/stubs/etc.)

• Use TDD to write new features and to find and fix bugs

• Core principles of testing to ensure your tests give you the confidence you need

kcd.im/tp-slides

What this talk is not

@kentcdodds

• Technology-specific
• How to configure tools
• Free of trade-offs
• Long presentation
• Covering all forms of testing

kcd.im/tp-slides

Logistics

• 🙋 Raise your hand to ask and answer questions. Feel free to make relevant comments as well!
• 💬 🌎 Use the workshop chat room (gitter.im/kentcdodds/testing-workshop) to ask and answer each others questions.
• 💬 😀 Chat with me one-on-one (gitter.im/kentcdodds). I'll try to respond during exercises.
• 📑 Fill out the elaboration and feedback forms for every exercise.
• 📧 Ask questions on my AMA (kcd.im/ama).
• 🐦 Follow me on twitter 😉 (twitter.com/kentcdodds).

@kentcdodds

kcd.im/tp-slides

Routine

1. Demos 👨‍💻
2. Exercises 💪 (pair programming!?)
3. Elaboration and Feedback Form 📑
4. ? Bonus 👨‍🎓 👩‍🎓
5. ? Help others 👩‍🔬 👨‍🔬
6. ? Make pull requests 🙏

https://en.wikipedia.org/wiki/Software_bug#/media/File:H96566k.jpg

@kentcdodds

kcd.im/tp-slides

What kind of bugs are there?

@kentcdodds

kcd.im/tp-slides

How do we prevent bugs?

1. Static Types: Flow / TypeScript
2. Linting: ESLint
3. Testing: ??

@kentcdodds

kcd.im/tp-slides

What kinds of testing can we do?

@kentcdodds

kcd.im/tp-slides

Static Code Analysis

@kentcdodds

kcd.im/write-tests-slides

Unit tests

@kentcdodds

kcd.im/write-tests-slides

function sum(a, b) {
  return a + b
}

test('sum adds numbers', () => {
  expect(sum(1, 3)).toBe(4)
})

Integration tests

@kentcdodds

kcd.im/write-tests-slides

let api, server

beforeAll(async () => {
  server = await startServer()
  const {port} = server.address()
  api = axios.create({
    baseURL: `http://localhost:${port}/api`
  })
})

afterAll(() => server.close())

beforeEach(() => resetDb())

test('can register a user', async () => {
  const registerData = {username: 'bob', password: 'wiley'}
  const testUser = await api
    .post('auth/register', registerData)
    .then(response => response.data.user)
  expect(testUser.username).toBe(registerData.username)

  const readUserUnauthenticated = await api
    .get(`users/${testUser.id}`)
    .then(response => response.data.user)
  expect(readUserUnauthenticated).toEqual(testUser)
})

End-to-end tests

@kentcdodds

kcd.im/write-tests-slides

import {assertRoute} from '../utils'

describe('authentication', () => {
  it('should allow users to register', () => {
    const user = {username: 'bob', password: 'wiley'}
    cy
      .visitApp()
      .getByText('Register')
      .click()
      .getByLabelText('Username')
      .type(user.username)
      .getByLabelText('Password')
      .type(user.password)
      .getByText('Login')
      .click()

    cy.url().should('equal', 'http://localhost:3000/')
    cy.getByTestId('username-display').should('contain', user.username)
  })
})

🚗 Test Driven Development 🏎

Red

Green

Refactor

🐛 Fixing Bugs 🐜

Bug

Find Code

Write Test

Fix Test