Selecting from a dropdown

Let's move on to creating our appointment form. This form is used to book an appointment for a customer. The first field is the service the customer requires: cut, color, blow-dry, and so on:

1. Create a new file, test/AppointmentForm.test.js, with the following test and setup:

import React from 'react';
import { createContainer } from './domManipulators';
import { AppointmentForm } from '../src/AppointmentForm';

describe('AppointmentForm', () => {
  let render, container;

  beforeEach(() => {
    ({ render, container } = createContainer());
  });

  const form = id =>
    container.querySelector(`form[id="${id}"]`);

  it('renders a form', () => {
    render(<AppointmentForm />);
    expect(form('appointment')).not.toBeNull();
  });
});

1. Fix this test by implementing the production code in src/AppointmentForm.js, as shown:

import React from 'react';

export const AppointmentForm = () => <form id="appointment" />;

1. Create a nested describe block for the service field. We do this right away because we know this form will have multiple fields:

describe('service field', () => {
});

1. Add the following test in the describe block:

it('renders as a select box', () => {
  render(<AppointmentForm />);
  expect(form('appointment').elements.service)
    .not.toBeNull();
  expect(form('appointment').elements.service.tagName)
    .toEqual('SELECT');
});

1. To make this test pass, modify the AppointmentForm component as follows:

export const AppointmentForm = () => (
  <form id="appointment">
    <select name="service" />
  </form>
);

1. Run tests and ensure all are passing.
2. Simplify the test code by extracting a function for retrieving the service field. The function is essentially the same as the field function from the CustomerForm tests, the only difference being the form that it accesses:

const field = name => form('appointment').elements[name];

it('renders as a select box') {
  expect(field('service')).not.toBeNull();
  expect(field('service').tagName).toEqual('SELECT');
});