Accepting text input

The Git tag for this section is accepting-text-input.

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');
});

This test makes use of the DOM form API: any form allows access to all of its input elements using the elements indexer. This is a simpler way of accessing form fields than CSS selectors, so I prefer to use it when it's an option.

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...