In the first chapter, our test suites shared common code for constructing a DOM container element before each test. This element was used as the React root element. By doing this for each test, we avoided modifying global state. Let's extract that code so that we can re-use it across all of our test suites.

The shared code can be split into four parts:

• A common declaration of container in the describe block, accessible by all tests
• A beforeEach call to set container to a newly constructed container element...

Let's create our first form:

1. Create a new file called test/CustomerForm.test.js and add the following:

import React from 'react';
import { createContainer } from './domManipulators';
import { CustomerForm } from '../src/CustomerForm';

describe('CustomerForm', () => {
  let render, container;

  beforeEach(() => {
    ({ render, container } = createContainer());
  });
});

2. Add the following test into the describe block:

it(...

Let's render an HTML text input field onto the page. Add the following test to test/CustomerForm.test.js:

it('renders the first name field as a text box', () => {
  render(<CustomerForm />);
  const field = form('customer').elements.firstName;
  expect(field).not.toBeNull();
  expect(field.tagName).toEqual('INPUT');
  expect(field.type).toEqual('text');
});

There are three expectations in this test:

• For there to be a form element with the name firstName
• For it to be an input element
• For it to have a type of text

Let's...

Let's move on to creating our appointment form. This form is used to book an appointment for a customer. The first field is the service the customer requires: cut, color, blow-dry, and so on:

1. Create a new file, test/AppointmentForm.test.js, with the following test and setup:

import React from 'react';
import { createContainer } from './domManipulators';
import { AppointmentForm } from '../src/AppointmentForm';

describe('AppointmentForm', () => {
  let render, container;

  beforeEach(() => {
    ({ render, container } = createContainer());
  });

  const form = id =>
    container.querySelector(`form[id="${id}"]`);

  it('renders a form', () => {
    render(<AppointmentForm />);
    expect(form('appointment')).not.toBeNull(...

It's time to apply what we've learn to a more complicated HTML setup. In this section, we'll test-drive a whole bunch of interconnected elements. To make things harder, we'll also be manipulating times and dates using the standard JavaScript Date object. As you'll soon see, our tests give us a structure to our work that makes even complicated scenarios straightforward.

We'd like to display available time slots over the next seven days as a grid, with columns representing days and rows representing 30-minute time slots, just like a standard calendar view. The user will be able to quickly find a time slot that works for them and then select the right radio button before submitting the form:

Here's an example of the HTML structure that we're aiming to build...

This chapter has covered usage of four HTML form elements: textboxes, selects, radio buttons, and, of course, labels.

Although these controls are basic, we've used this opportunity to dig much deeper into test-driven React. We've built controlled components, used defaultProps, and split our top-level component into a hierarchy of smaller components and plain JavaScript functions.

We've also gone much further with Jest. We extracted common test logic into modules, used nested describe blocks, and built assertions using the document.form property and CSS selectors.

In Chapter 3, Exploring Test Doubles, we'll discover how to get data into and out of our components using the fetch API.

• Add the ability to choose a stylist before choosing a time slot. This should be a dropdown that filters based on the service required, as not all stylists will be qualified to provide all services. You'll need to decide on a suitable data structure to hold this data. Modify availableTimeSlots to list which stylists are available at each time, and update the table to reflect which stylist has been chosen and their availability during the week.

• Supported React events that can be simulated: https://reactjs.org/docs/events.html#form-events
• useCallback hook: https://reactjs.org/docs/hooks-reference.html#usecallback