Mastering React Test-Driven Development

Test-driving Data Input with React

In this chapter, we'll explore React forms and controlled components. We'll work with textboxes, select boxes, and radio buttons to build out these forms:

• CustomerForm, which is used when adding or modifying customers, with three fields: first name, last name, and phone number
• AppointmentForm, for adding and modifying appointments, which contains two fields for choosing a salon service and an appointment time

In the process of building these forms, we'll dig deeper into testing complex DOM trees.

The following topics will be covered in this chapter:

• Extracting a test helper
• Adding a form element
• Accepting text input
• Selecting from a dropdown
• Making a choice from radio buttons

But, first, we will start ...