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

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 make them all pass. Update CustomerForm to include a single input field, as shown:

export const CustomerForm = () => (
  <form id="customer">
    <input
      type="text"
      name="firstName"
    />
  </form>
);