Frontend tests knowledge share 📚

frontend-tests.md

What are tests?

Unit test: A test written by a programmer for the purpose of ensuring that the production code does what the programmer expects it to do.

Other types of tests: integration test, end-to-end test, acceptance test, etc.

Why test?

• Tests can improve API design 🏗
• Tests can help document what something is supposed to do 📃
• Tests can improve developer confidence 😁

Tools & libraries 🔨

• jest: JavaScript test runner 🏃‍♂️
• ts-jest: enables you to test Typescript projects with jest
  • Don't worry, wizardry config sets this up for us
• jest-extended: provides additional jest matchers
  • Ex. .toBeTrue(), .toIncludeAllMembers([members]), .toSatisfy(predicate)
• enzyme: enables you to test the DOM representation of a component
  • Use this to shallow render a component
• pupeteer: enables you to run tests in Chrome (headless by default)
• cypress: end-to-end testing framework

How to write tests?

Example from report-common

/**
 * Inserts the provided separator after every item except the last one in the provided array of React nodes, returning a
 * new array.
 */
function joinChildren(children: React.ReactNode[], renderSeparator: (index: number) => React.ReactNode) {
  // intentionally empty 
}

describe("joinChildren", () => {
    it("handles an empty array", () => {
        expect(joinChildren([], renderComma)).toEqual([]);
    });
});

• describe("joinChildren, fn) => used to logically group tests together
• it("handles an empty array", fn) => alias for test. fn contains the expectations to test
• toEqual => matcher

Traits of good tests

• Run fast 🚀
• Easy to read 📖
• Test API rather than implementation
• Prevent regressions (catch bugs) 🐛

How to run tests?

In a wizard package run yarn test

View test results in console or in browser via open ./build/jest/test-results.html

Jest / Wizard config ⚙️

In a wizard package run yarn test --inspect-jest-configuration

Example report-app's jest-config

Test coverage

• Statement: Has each statement in the program been executed?
• Branch: Has every branch of a control structure (ex. if / else) been executed?
• Function: Has each function in the program been called?
• Line: Has every line of the program been executed?

Under the hood jest uses istanbul for coverage reports 🚗

Example report-app's test-coverage

Takeaways

There are many ways to test the same piece of code.

• Try to write tests before implementation code. A lot of the benefit of writing tests comes from writing test-able code
• Focus on readability

Topic for debate: describe.each table exists but is it readable? 👩‍⚖️

What next?

• Refactor existing tests (one idea <QuillEditor>)
• Add tests to an untested component

Additional Resources

• Reading
  • First-Class Tests - by Robert C. Martin (Uncle Bob)
  • Is Unit Testing worth the effort? - StackOverflow
• Code
  • jest examples - Github
  • jsdom - Github
• YouTube 🎥🍿
  • Delightful JavaScript Testing with Jest
  • UI and Unit Testing with Airbnb's Enzyme
  • Testing The Way It Should Be (aka Intro Into Cypress)