Added tests for error handling when trying to save or delete appointment

src/components/__tests__/Application.test.js

@@ -3,6 +3,7 @@ import React from "react";
 import { render, cleanup, waitForElement, fireEvent, getByText, prettyDOM, getAllByTestId, getByPlaceholderText, getByAltText, getAllByText, queryByText, queryByAltText } from "@testing-library/react";
 
 import Application from "components/Application";
+import axios from "axios";
 
 afterEach(cleanup);
 describe("Application", () => {
@@ -81,10 +82,10 @@ describe("Application", () => {
     // 2. Wait until the text "Archie Cohen" is displayed.
     await waitForElement(() => getByText(container, "Archie Cohen"));
 
+    // 3. Click the "Edit" button on the booked appointment.
     const appointment = getAllByTestId(container, "appointment").find(
       appointment => queryByText(appointment, "Archie Cohen")
     );
-    // 3. Click the "Delete" button on the booked appointment.
     fireEvent.click(queryByAltText(appointment, "Edit"));
 
     // 4. Change the name and save the interview
@@ -95,11 +96,72 @@ describe("Application", () => {
 
     // 5. Check that the element with the text "Saving" is displayed.
     expect(getByText(appointment, "Saving")).toBeInTheDocument();
-    
+
     await waitForElement(() => getByText(appointment, "Name Change"));
 
     const day = getAllByTestId(container, "day")
       .find(day => queryByText(day, "Monday"));
     expect(getByText(day, "1 spot remaining")).toBeInTheDocument();
   })
+
+  it("shows the save error when failing to save an appointment", async () => {
+    // 1. Reject axios put request when called later in test
+    axios.put.mockRejectedValueOnce();
+    // 2. Render the Application
+    const { container, debug } = render(<Application />);
+
+    // 3. Wait until the text "Archie Cohen" is displayed.
+    await waitForElement(() => getByText(container, "Archie Cohen"));
+
+    const appointments = getAllByTestId(container, "appointment");
+    const appointment = appointments[0];
+
+    // 4. Click 'Add' to start creating appointment
+    fireEvent.click(getByAltText(appointment, "Add"));
+
+    // 5. Write name "Lydia Miller-Jones" and select interviewer "Sylvia Palmer"
+    fireEvent.change(getByPlaceholderText(appointment, /enter student name/i), {
+      target: { value: "Lydia Miller-Jones" }
+    });
+    fireEvent.click(getByAltText(appointment, "Sylvia Palmer"));
+
+    // 6. Click 'Save' and the put request will be rejected
+    fireEvent.click(getByText(appointment, "Save"));
+
+    // 7. Click 'Close' to close the Error message
+    // NOTE: need to wait for error to render
+    await waitForElement(() => getByText(appointment, "Error"));
+    fireEvent.click(getByAltText(appointment, "Close"));
+
+    // 8. Check that we are at EMPTY mode with Add button
+    expect(getByAltText(appointment, "Add")).toBeInTheDocument();
+  });
+
+  it("shows the delete error when failing to delete an existing appointment", async () => {
+    // 1. Reject axios delete request when called later in test
+    axios.delete.mockRejectedValueOnce();
+    // 2. Render the Application
+    const { container, debug } = render(<Application />);
+
+    // 3. Wait until the text "Archie Cohen" is displayed.
+    await waitForElement(() => getByText(container, "Archie Cohen"));
+
+    // 4. Click the "Delete" button on the booked appointment.
+    const appointment = getAllByTestId(container, "appointment").find(
+      appointment => queryByText(appointment, "Archie Cohen")
+    );
+    fireEvent.click(queryByAltText(appointment, "Delete"));
+
+    // 5. Check that the confirmation message is shown and click "Confirm".
+    expect(getByText(appointment, "Are you sure you want to delete?")).toBeInTheDocument();
+    fireEvent.click(getByText(appointment, "Confirm"));
+
+    // 6. Click 'Close' to close the Error message
+    // NOTE: need to wait for error to render
+    await waitForElement(() => getByText(appointment, "Error"));
+    fireEvent.click(getByAltText(appointment, "Close"));
+
+    // 6. Check that we are at SHOW mode with "Archie Cohen"
+    expect(getByText(appointment, "Archie Cohen")).toBeInTheDocument();
+  })
 });