Extracting out a field-finder function

Both of our tests include the following line, which reaches inside the form to pull out the firstName field:

const field = form('customer').elements.firstName;

This DOM manipulation is not related to what we're testing: while we care about the value of field, we are not interested in how the DOM API works.

We can improve the readability of our tests by keeping code within tests at a high level of abstraction, and extracting lower-level logic into helper methods. Since our tests are passing at the moment, now is a great opportunity to refactor.

Extract this field variable into a new function called firstNameField, as shown:

const firstNameField = () => form('customer').elements.firstName;

In the process of converting this variable into a function, we renamed it from field to firstNameField. A short, generic variable name such as field is fine inside the short scope of a single test. But once you pull the variable up into the describe scope, you need to be more specific in your naming.

The last test we wrote now simplifies to this:

it('includes the existing value for the first name', () => {
  render(<CustomerForm firstName="Ashley" />);
  expect(firstNameField().value).toEqual('Ashley');
});

Update the first test in the same way:

it('renders as a text box', () => {
  render(<CustomerForm />);
  expectToBeInputFieldOfTypeText(firstNameField());
});

It's worth pointing out here that, if we hadn't extracted the three expectations into this function, we could have called this new function three times, rather than calling it once and saving that value in a variable. I probably wouldn't do this in my production code, but it's fine in tests; readability is more important than minimizing computation:

expect(firstNameField()).not.toBeNull();
expect(firstNameField()).toEqual('INPUT');
expect(firstNameField()).toEqual('text');