Completed writing and passing test for cancelling an interview

Edited mock axios to include delete function

src/__mocks__/axios.js

@@ -83,19 +83,18 @@ export default {
     }
   }),
   delete: jest.fn(url => {
-    if (url === "/api/appointments") {
-      return Promise.resolve({
-        status: 204,
-        statusText: "No Content"
-      });
-    }
+    return Promise.resolve({
+      status: 204,
+      statusText: "No Content"
+    });
   }),
+
   put: jest.fn((url, data) => {
-      return Promise.resolve({
-        status: 204,
-        statusText: "No Content",
-        data: data
-      });
+    return Promise.resolve({
+      status: 204,
+      statusText: "No Content",
+      data: data
+    });
   })
 
 };

src/components/__tests__/Application.test.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { render, cleanup, waitForElement, fireEvent, getByText, prettyDOM, getAllByTestId, getByPlaceholderText, getByAltText, getAllByText, queryByText } from "@testing-library/react";
+import { render, cleanup, waitForElement, fireEvent, getByText, prettyDOM, getAllByTestId, getByPlaceholderText, getByAltText, getAllByText, queryByText, queryByAltText } from "@testing-library/react";
 
 import Application from "components/Application";
 
@@ -40,4 +40,37 @@ describe("Application", () => {
       .find(day => queryByText(day, "Monday"));
     expect(getByText(day, "no spots remaining")).toBeInTheDocument();
   });
+
+  it("loads data, cancels an interview and increases the spots remaining for Monday by 1", async () => {
+    //1. Render the Application
+    const { container, debug } = render(<Application />);
+
+    // 2. Wait until the text "Archie Cohen" is displayed.
+    await waitForElement(() => getByText(container, "Archie Cohen"));
+
+    // 3. Click the "Delete" button on the booked appointment.
+    const appointment = getAllByTestId(container, "appointment").find(
+      appointment => queryByText(appointment, "Archie Cohen")
+    );
+
+    fireEvent.click(queryByAltText(appointment, "Delete"));
+
+    // 4. Check that the confirmation message is shown.
+    expect(getByText(appointment, "Are you sure you want to delete?")).toBeInTheDocument();
+
+    // 5. Click the "Confirm" button on the confirmation.
+    fireEvent.click(getByText(appointment, "Confirm"));
+
+    // 6. Check that the element with the text "Deleting" is displayed.
+    expect(getByText(appointment, "Deleting")).toBeInTheDocument();
+
+    // 7. Wait until the element with the "Add" button is displayed.
+    await waitForElement(() => getByAltText(appointment, "Add"));
+
+    // 8. Check that the DayListItem with the text "Monday" also has the text "2 spots remaining".
+    const day = getAllByTestId(container, "day")
+      .find(day => queryByText(day, "Monday"));
+
+    expect(getByText(day, "2 spots remaining")).toBeInTheDocument();
+  })
 });