Initial selection of data

Let's start by asserting that each li element has a button element:

1. First up, let's display a message to the user if there are no appointments scheduled for today. In the AppointmentsDayView describe block, add this test:

it('initially shows a message saying there are no appointments today', () => {
  render(<AppointmentsDayView appointments={[]} />);
  expect(container.textContent).toMatch(
    'There are no appointments scheduled for today.'
  );
});

1. Make that pass by adding in a message at the bottom of rendered output. We don't need a check for an empty appointments array just yet; we'll need another test to triangulate to that:

return (
  <div id="appointmentsDayView">
    ...
    <p>There are no appointments scheduled for today.</p>
  </div>
);

1. If there are appointments scheduled, then we start off by showing the first one of the day. We can check for a rendered customer firstName to determine whether the right customer is shown:

it('selects the first appointment by default', () => {
  render(<AppointmentsDayView appointments={appointments} />);
  expect(container.textContent).toMatch('Ashley');
});

1. Since we're looking for the customer name, we'll need to make sure that's available in the appointments array. Update it now to include the customer firstName:

  const appointments = [
    {
      startsAt: today.setHours(12, 0),
      customer: { firstName: 'Ashley' }
    },
    {
      startsAt: today.setHours(13, 0),
      customer: { firstName: 'Jordan' }
    }
  ];

1. Let's make that pass by using our Appointment component. Modify the last line of the div component to read as follows:

<div id="appointmentsDayView">
  // ... existing code here ...
  {appointments.length === 0 ? (
    <p>There are no appointments scheduled for today.</p>
  ) : (
    <Appointment {...appointments[0]} />
  )}
</div>

Now, we're ready to let the user make a selection.