Nesting describe blocks

We can nest describe blocks to break similar tests up into logical contexts. We can invent our own convention for how to name these describe blocks. Whereas the top level is named after the form itself, the second-level describe blocks are named after the form fields.

Here's how we'd like them to end up:

describe('CustomerForm', () => {
  describe('first name field', () => {
    // ... tests ...
  };
  describe('last name field', () => {
    // ... tests ...
  };
  describe('phone number field', () => {
    // ... tests ...
  };
});

With this structure in place, you can simplify the it descriptive text by removing the name of the field. For example, 'renders the first name field as a text box' becomes 'renders as a text box', because it has already been scoped by the 'first name field' describe block. Because of the way Jest displays describe block names before test names in test output, each of these still reads like a plain-English sentence, but without the verbiage. In the example just given, Jest will show us: CustomerForm first name field renders as a text box.

Let's do that now for the first name field. Wrap the six existing tests in a describe block, and then rename the tests, as shown:

describe('first name field', () => {
  it('renders as a text box' ... );

  it('includes the existing value' ... );

  it('renders a label' ... );

  it('assigns an id that matches the label id' ... );

  it('saves existing value when submitted' ... );

  it('saves new value when submitted' ... );
});