Testing the Waters 🌊

A test driven workshop

 

 

 

By

Theryn Groetken

Why Test? 

Instead Ask ... Why Not?

- Stop bugs from going to prod 🐛

 

- Know that you're shipping your best code 🏆

 

- Understand exactly what your code is doing ␆

 

Testing Helps:

Vs.

Ultimately...

Types of Testing

🧪

  • Static Analysis 📊

  • Unit Testing 🛴

  • Integration Testing 🏍

  • Functional Testing 🚗

Breakdown

https://testingjavascript.com/

Black Box vs White Box

vs

  • Don't reach into internals
  • Test what will be consumed publicly
  • But what about the edge cases?

Example

Good

Example

Bad

Static Analysis 📊

When to use?

Always ✅... There is zero reason not to.🚫

What does this look like?

Eslint

What does this look like?

Prettier

What does this look like?

Coveralls

What does this look like?

Stryker

What does this look like?

Code Climate

What does this look like?

Screener

Unit Testing

When should one unit test?

Unit testable code:

What a test could look like:

  • describe - What are we testing?
  • it - What should it do?
  • expect - What is the expected result?

Anatomy 🦴

Another Example:

System Under Test

The Test:

TDD 😱

Don't be dogmatic about it.

Rule 1

TDD eradicates fear of change. - Eric Elliott

TDD in one sentence:

TDD 😱

When

  • Unit testing
  • Contract driven development
  • Presentational React components

Works but not necessary

  • Complex React components
  • Integration tests
  • Functional Tests

Bottom Line - "Why"

You should ALWAYS make sure your tests break before you decide that they are passing.

TDD 😱

How?

Live Coding - Yay! 🎉

EMBERCONF 2015 - TEST-DRIVEN DEVELOPMENT BY EXAMPLE - YouTube

Want to be amazed by TDD?

Let's Write!

Open up `./src/actions/transforms/`

Integration Testing

When should one write integration tests?

Example

External 🌐

Example (Fuzzy)

Test

Mocks and Stubs and Fakes "oh my!"

🦁🐯🐻

Test Doubles - what are they?

https://martinfowler.com/bliki/TestDouble.html

Most Used 📝

Unit

Integration

Functional

  1. Dummy
  2. Fake
  3. Spy
  1. Dummy
  2. Stub
  3. Spy
  1. Usually None, sometimes stubs

Pre-work

https://github.com/nock/nock#usage

Let's get to it! 💻

open ./src/components/TodoDetails/

Functional Testing

When to write functional tests?

Functional Testing Tools

Selenium

 

WebDriver

 

Puppeteer

 

Casper

 

Zombie

 

Nightwatch

 

etc.

✅

Puppeteer Tests

Example:

Let's make Pinocchio Dance

open ./functional-tests

Test Debugging 🚫🐛

How to debug?

node --inspect-brk node_modules/.bin/jest --runInBand

Instead of running our standard `yarn jest` we will run this:

Snapshots

When do we use them?

  • Asserting Object Structure
  • Presentational Components
  • Inline snapshots to assert text

When do we avoid them?

  • Container Components
  • Components with complex logic
  • When you're trying to get "more coverage"

Resources

* Uncle Bob - 3 TDD Laws [The Three Laws of TDD (Featuring Kotlin) - YouTube](https://www.youtube.com/watch?v=qkblc5WRn-U)

*Watch* from 0:00 - 24:00, this tells us why TDD is important and how it will help us. Everything after 24:00 is extra credit. Feel free to watch on 2x speed.

* Yoni Goldberg -[Node.js & JavaScript Testing Best Practices – Yoni Goldberg – Medium](https://medium.com/@me_37286/yoni-goldberg-javascript-nodejs-testing-best-practices-2b98924c9347)

*Read* a high level overview of  testing, its history, its present, and its future. This is one of the best overall test articles I’ve read that is up to date.

* Kent C. Dodds - Javascript Testing Pyramid [Testing JavaScript with Kent C. Dodds](https://testingjavascript.com/)

*Read* - This is an important adjustment to the 10 year old “testing pyramid”, and now we have a “testing trophy”.



* Martin Fowler - Test Doubles (Definitions)[TestDouble](https://martinfowler.com/bliki/TestDouble.html)
* Martin Fowler - Mocks aren’t stubs [Mocks Aren’t Stubs](https://martinfowler.com/articles/mocksArentStubs.html)

*Read* these to get a good idea of what test doubles are, what their differences are, and when to use them. (Some examples in Java: Shaun Abram - [Test Doubles: mocks, dummies and stubs | Java Code Geeks - 2019](https://www.javacodegeeks.com/2015/11/test-doubles-mocks-dummies-and-stubs.html))

* Torin Billups - Ember Conf TDD [EMBERCONF 2015 - TEST-DRIVEN DEVELOPMENT BY EXAMPLE - YouTube](https://www.youtube.com/watch?v=2b1vcg_XSR8)

*Watch*This is the TDD talk that made everything click for me. It goes over component testing and how useful it can really be. 

*  Kent C. Dodds - Testing Practices and Principles [Learn Jest Testing Framework – JavaScript Testing Practices and Principles](https://frontendmasters.com/courses/testing-practices-principles/jest-testing-framework/)



*Interactive* - If you want to spend time going through an FEM workshop on how to test, Kent C. Dodds is your guy.
 
* Yoni Goldberg - 5 new shiny test types [Beyond Unit Tests: 5 Shiny Node.JS Test Types (2019) - YouTube](https://www.youtube.com/watch?v=-2zP494wdUY&feature=youtu.be)

Here are some advanced topics. These are the things that each person should get to know and think about as they move further into the world of testing. These are the things that we should start doing to make better, more comprehensive, and more reliable tests in 2020.
Made with Slides.com