Mastering React Test-Driven Development

Hiding input controls

How can we get to the right implementation? We do that by testing that having no available time slots renders no radio buttons at all:

1. Add the following test:

it('does not render radio buttons for unavailable time slots', () => {  render(<AppointmentForm availableTimeSlots={[]} />);  const timesOfDay = timeSlotTable().querySelectorAll(    'input'  );  expect(timesOfDay).toHaveLength(0);});

2. Define the mergeDateAndTime function above the TimeSlotTable component. This takes the date from a column header together with a time from a row header and converts them into a timestamp that we can then use to compare against the startsAt fields in availableTimeSlots:

const mergeDateAndTime = (date, timeSlot) => { const time = new Date(timeSlot); ...