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