We expand our test driven development process to a more complex problem and discover state and the need for test isolation.

Example code https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%202/theatre-booking-1

We look at how to fit a tidy up into the test cycle, and cover given/when/then

https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%202/theatre-booking-1

Making code that's testable often involves making code that's more self-contained. We look at a few patterns to avoid the dreaded global variable favoured by JavaScript.

Various solutions discussed:
https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%202/theatre-booking-1-class
https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%202/theatre-booking-1-object-factory
https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%202/theatre-booking-1-pure-functions

Let's mature and extend the code behind the example we've been working on.

Example code - https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%202/theatre-booking-2

A little coding challenge for you to try.

See `theatre-booking-2` from the repo at linktr.ee/ashleyfriezetdd and github.com/ashleyfrieze/easy-tdd-typescript

https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%202/theatre-booking-2

We look at a possible solution to the spare seats problems posed in the exercise.

https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%202/theatre-booking-2-solution

A deeper look at assertions.

Let's solve some algorithmic problems test first, starting with a little string manipulation of titles.

Example code - https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%203/kebab-case-1

A challenge to follow from the previous example by reversing the algorithm. The code is at

https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%203/kebab-case-1

We look at how to solve the exercise, and consider the benefits of adding round trip tests to see that the data converts correctly each way.

https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%203/kebab-case-1-solution

An exercise to try. Get used to the rhythm of building tests and algorithms one step at a time.

Start with the `kebab-case-1-solution` project - https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%203/kebab-case-1-solution

We look at a solution for converting Kebab Case to Title Case, then we look at how to reverse the algorithm, along with experimenting with regular expressions in regexr.com

Example code at - https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%203/kebab-case-2

This is a more complex component with more complex objects and relationships. We look at where to start.

Example code: https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%203/org-chart-1

As we progress from day 1, we write more of the real algorithms and get into more tests. Test data factories help us go faster by making test data for us.

Example code: https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%203/org-chart-1

We look at how to solve the challenge around building an org chart component

Solution found at: https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%203/org-chart-2

Now we've built some algorithms test first, what have we learned about the process?

For tests to be helpful and useful, we need to know how to maintain them and run them. We look at how the tests can be a valuable part of our repo.

Refactoring of org-chart into a separate test directory looks like this - https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%203/org-chart-2-test-dir

We may write production code that uses environment variables for configuration. We look at how to write that code test first and safely manipulate environment variables within a test fixture.

Example code: https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-id-1

As we structure code that depends on environment variables in a more complex way, we need to rethink how we test it.

Example code: https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-id-2

Sometimes our code depends on knowing the time. Let's look at how to assert and control for that at test time.

Example code: https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-id-3

While we can set environment variables within our test fixtures, we may prefer to set some global environment variables via a .env file.

Example code: https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-id-4

When our code uses real dependencies, we may need to replace those at test time, and see what happened when they were called.

Includes an exercise found at https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-push-1

Solution to the exercise set in the previous lecture. How to mock and spy on dependencies injected into a function.

Solution at: https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-push-2

When dependency injection is not the solution we can use mocks and spies at module level.

Example code - https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-push-3

Before we can fetch the source data from our web service, we need to be able to convert it into our program's format. A short exercise - the source code for this is over on https://github.com/ashleyfrieze/easy-tdd-typescript in the vitest/section 4/record-source-push-3 directory

Let's solve the data conversion challenge from the previous video

https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-push-4

The time has come to hook up to a web service, but can we make it one which we control at test time?

Example code https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-push-msw-1

While MSW makes it possible to provide mock web services, we look at how to combine it with vi.fn() to give us variable responses at test time, and spying on the calls received by MSW.

Example code: https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-push-msw-2

A look back at the main techniques and decisions within this section.

We look at the basic set up of a project which uses React, React Testing Library and Vitest together. We look at how to assert what's on the screen and what happens after interactions.

It's followed by an exercise found in https://github.com/ashleyfrieze/easy-tdd-typescript/section 5/react-example-1

We solve the Go Down problem from the previous lecture, and then look at modularising react components and how to test them, along with the use of `vi.fn()` as a way to capture callback events.

Code found at https://github.com/ashleyfrieze/easy-tdd-typescript/section 5/react-example-2

I hope you enjoyed this course. Please ask questions if you have them. Good luck in putting these techniques into practice.

Attached are some cheat sheets, also available here - https://github.com/ashleyfrieze/easy-tdd-typescript/blob/main/cheatsheets.md

This is a summary of the main lessons, along with some notes for those wishing to use Jest.