Remove all throw Error in useRecordsApi and readapt tests

src/components/App/App.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { BrowserRouter, MemoryRouter } from "react-router-dom";
 import userEvent from "@testing-library/user-event";
 import { Auth, User, signInWithPopup, signOut } from "firebase/auth";
@@ -49,7 +49,7 @@ describe("Given an App component", () => {
         name: expectedHeading,
       });
 
-      waitFor(() => expect(heading).toBeInTheDocument());
+      expect(heading).toBeInTheDocument();
     });
 
     test("Then it should show an image with an alternative text 'Drocer's app logo'", () => {
@@ -70,7 +70,7 @@ describe("Given an App component", () => {
 
       const image = screen.getByAltText(expectedAltText);
 
-      waitFor(() => expect(image).toBeInTheDocument());
+      expect(image).toBeInTheDocument();
     });
 
     test("Then it should show two links with the text 'Add' and 'Records'", async () => {
@@ -92,15 +92,15 @@ describe("Given an App component", () => {
         </Provider>,
       );
 
-      const addLink = await screen.findByRole("link", {
+      const addLink = screen.getByRole("link", {
         name: expectedAddText,
       });
-      const recordsLink = await screen.findByRole("link", {
+      const recordsLink = screen.getByRole("link", {
         name: expectedRecordsText,
       });
 
-      waitFor(() => expect(addLink).toBeInTheDocument());
-      waitFor(() => expect(recordsLink).toBeInTheDocument());
+      expect(addLink).toBeInTheDocument();
+      expect(recordsLink).toBeInTheDocument();
     });
 
     describe("And the user clicks on the button 'Logout'", () => {
@@ -122,11 +122,11 @@ describe("Given an App component", () => {
           </Provider>,
         );
 
-        const button = await screen.findByRole("button", { name: buttonText });
+        const button = await screen.getByRole("button", { name: buttonText });
 
         await userEvent.click(button);
 
-        waitFor(() => expect(signOut).toHaveBeenCalled());
+        expect(signOut).toHaveBeenCalled();
       });
     });
 
@@ -158,13 +158,12 @@ describe("Given an App component", () => {
           name: expectedHeading,
         });
 
-        waitFor(() => expect(heading).toBeInTheDocument());
+        expect(heading).toBeInTheDocument();
       });
     });
 
     describe("And the path is '/add-new-record' and the user types 'FKA Twigs', 'LP1', 2014, 4, 'LP1 is the debut studio...', '40:46', 'Young Turks', 'Avant-pop, electronic, art pop R&B, trip hop' and 'http://example.com/image.png' on each input and clicks on the 'Add' button it should be enabled", () => {
       test("Then it should show a heading 'Records'", async () => {
-        const intervalTime = 9000;
         const initialPath = paths.addRecord;
         const textButton = "Add";
         const expectedHeading = "Records";
@@ -247,21 +246,16 @@ describe("Given an App component", () => {
 
         await userEvent.click(button);
 
-        const heading = await screen.findByRole(
-          "heading",
-          {
-            name: expectedHeading,
-          },
-          { interval: intervalTime },
-        );
+        const heading = await screen.findByRole("heading", {
+          name: expectedHeading,
+        });
 
-        waitFor(() => expect(heading).toBeInTheDocument());
+        expect(heading).toBeInTheDocument();
       });
     });
 
     describe(`And the path is '/records and the user click on the Radiohead's cover image'`, () => {
       test("Then it should show a text 'Self-released'", async () => {
-        const intervalTime = 9000;
         const initialPath = paths.records;
         const expectedText = "Self-released";
 
@@ -285,21 +279,15 @@ describe("Given an App component", () => {
           </MemoryRouter>,
         );
 
-        const link = await screen.findByRole(
-          "link",
-          {
-            name: "Link to details about Radiohead's record In Rainbows",
-          },
-          { interval: intervalTime },
-        );
+        const link = await screen.findByRole("link", {
+          name: "Link to details about Radiohead's record In Rainbows",
+        });
 
         await userEvent.click(link);
 
         const recordLabel = await screen.findByText(expectedText);
 
-        await waitFor(() => {
-          expect(recordLabel).toBeInTheDocument();
-        });
+        expect(recordLabel).toBeInTheDocument();
       });
     });
   });
@@ -329,8 +317,8 @@ describe("Given an App component", () => {
         name: expectedRecordsText,
       });
 
-      waitFor(() => expect(addLink).not.toBeInTheDocument());
-      waitFor(() => expect(recordsLink).not.toBeInTheDocument());
+      expect(addLink).not.toBeInTheDocument();
+      expect(recordsLink).not.toBeInTheDocument();
     });
 
     describe("And the user clicks on the button 'Sign in'", () => {
@@ -354,7 +342,7 @@ describe("Given an App component", () => {
 
         await userEvent.click(button);
 
-        waitFor(() => expect(signInWithPopup).toHaveBeenCalled());
+        expect(signInWithPopup).toHaveBeenCalled();
       });
     });
 
@@ -380,7 +368,7 @@ describe("Given an App component", () => {
           name: headingText,
         });
 
-        waitFor(() => expect(heading).toBeInTheDocument());
+        expect(heading).toBeInTheDocument();
       });
     });
   });

src/components/RecordCard/RecordCard.tsx

@@ -24,7 +24,7 @@ const RecordCard = ({
   const dispatch = useAppDispatch();
   const { deleteRecord, modifyRecord } = useRecordsApi();
 
-  const delteRecordById = async (id: string) => {
+  const deleteRecordById = async (id: string) => {
     await deleteRecord(id);
     dispatch(deleteRecordActionCreator(id));
   };
@@ -35,15 +35,17 @@ const RecordCard = ({
     };
     const modifiedRecord = await modifyRecord(id, rateUpdate);
 
-    dispatch(modifyRecordActionCreator(modifiedRecord));
+    if (modifiedRecord) {
+      dispatch(modifyRecordActionCreator(modifiedRecord));
+    }
   };
 
   return (
     <article className="record">
       <Button
         className="record__button-icon"
         actionOnClick={() => {
-          delteRecordById(id);
+          deleteRecordById(id);
         }}
       >
         <img

src/hooks/__tests__/addRecord.test.tsx

@@ -16,6 +16,7 @@ import authHook, {
 import { setupStore } from "../../store";
 import { Provider } from "react-redux";
 import { BrowserRouter } from "react-router-dom";
+import * as utils from "../../utils/showFeedback";
 
 describe("Given an addRecord  function", () => {
   const wrapper = ({ children }: PropsWithChildren): React.ReactElement => {
@@ -52,9 +53,14 @@ describe("Given an addRecord  function", () => {
   });
 
   describe("When it's called and there's an error on posting the record", () => {
-    test("Then it should throw an error 'Couldn't add record' when rejecting", () => {
+    test("Then it should call the function showFeedback with 'Couldn't add record' and 'error'", async () => {
       server.resetHandlers(...errorHandlers);
-      const expectedError = new Error("Couldn't add record");
+
+      const expectedErrorMessage = "Couldn't add record";
+      const expectedErrorType = "error";
+
+      const spyShowFeedback = vitest.spyOn(utils, "showFeedback");
+
       const user: Partial<User> = {
         getIdToken: vi.fn().mockResolvedValue("token"),
       };
@@ -73,9 +79,12 @@ describe("Given an addRecord  function", () => {
 
       server.resetHandlers(...errorHandlers);
 
-      const recordsPromise = addRecord(recordToAddMock);
+      await addRecord(recordToAddMock);
 
-      expect(recordsPromise).rejects.toThrowError(expectedError);
+      expect(spyShowFeedback).toHaveBeenCalledWith(
+        expectedErrorMessage,
+        expectedErrorType,
+      );
     });
   });
 });

src/hooks/__tests__/addRecordUserError.test.tsx

@@ -5,6 +5,7 @@ import { PropsWithChildren } from "react";
 import { recordToAddMock, recordsMock } from "../../mocks/recordsMock";
 import { setupStore } from "../../store";
 import { BrowserRouter } from "react-router-dom";
+import * as utils from "../../utils/showFeedback";
 
 describe("Given a addRecord function", () => {
   describe("When it's called and there's no user", () => {
@@ -18,18 +19,24 @@ describe("Given a addRecord function", () => {
       );
     };
 
-    test("Then it should throw an error 'Failed to add record' when rejecting", async () => {
-      const expectedError = new Error("Failed to add record");
+    test("Then it should call the function showFeedback with 'Failed to add record'  and 'error'", async () => {
+      const expectedErrorMessage = "Failed to add record";
+      const expectedFeedbackType = "error";
+
+      const spyShowFeedback = vitest.spyOn(utils, "showFeedback");
 
       const {
         result: {
           current: { addRecord },
         },
       } = renderHook(() => useRecordsApi(), { wrapper });
 
-      const promise = addRecord(recordToAddMock);
+      await addRecord(recordToAddMock);
 
-      expect(promise).rejects.toThrowError(expectedError);
+      expect(spyShowFeedback).toHaveBeenCalledWith(
+        expectedErrorMessage,
+        expectedFeedbackType,
+      );
     });
   });
 });

src/hooks/__tests__/deleteRecord.test.tsx

@@ -16,6 +16,7 @@ import useRecordsApi from "../useRecordsApi";
 import { server } from "../../mocks/server";
 import { errorHandlers } from "../../mocks/handlers";
 import { BrowserRouter } from "react-router-dom";
+import * as utils from "../../utils/showFeedback";
 
 describe("Given a deleteRecord function", () => {
   const wrapper = ({ children }: PropsWithChildren): React.ReactElement => {
@@ -56,31 +57,38 @@ describe("Given a deleteRecord function", () => {
   });
 
   describe("When it's called and there's an error on deleting the record", () => {
-    test("Then it should throw an error 'Couldn't delete record' when rejecting", () => {
-      const expectedError = new Error("Couldn't delete record");
-      const idToDelete = wrongIdMock;
+    const idToDelete = wrongIdMock;
 
-      const user: Partial<User> = {
-        getIdToken: vi.fn().mockResolvedValue("token"),
-      };
+    const user: Partial<User> = {
+      getIdToken: vi.fn().mockResolvedValue("token"),
+    };
 
-      const idTokenHook: Partial<IdTokenHook> = [user as User];
-      const authStateHookMock: Partial<AuthStateHook> = [user as User];
+    const idTokenHook: Partial<IdTokenHook> = [user as User];
+    const authStateHookMock: Partial<AuthStateHook> = [user as User];
 
-      authHook.useIdToken = vi.fn().mockReturnValue(idTokenHook);
-      authHook.useAuthState = vi.fn().mockReturnValue(authStateHookMock);
+    authHook.useIdToken = vi.fn().mockReturnValue(idTokenHook);
+    authHook.useAuthState = vi.fn().mockReturnValue(authStateHookMock);
+
+    test("Then it should call the function showFeedback with 'Couldn't delete record' and 'error'", async () => {
+      server.resetHandlers(...errorHandlers);
+
+      const expectedErrorMessage = "Couldn't delete record";
+      const expectedErrorType = "error";
+
+      const spyShowFeedback = vitest.spyOn(utils, "showFeedback");
 
       const {
         result: {
           current: { deleteRecord },
         },
       } = renderHook(() => useRecordsApi(), { wrapper });
 
-      server.resetHandlers(...errorHandlers);
-
-      const messagePromise = deleteRecord(idToDelete);
+      await deleteRecord(idToDelete);
 
-      expect(messagePromise).rejects.toThrowError(expectedError);
+      expect(spyShowFeedback).toHaveBeenCalledWith(
+        expectedErrorMessage,
+        expectedErrorType,
+      );
     });
   });
 });

src/hooks/__tests__/deleteRecordUserError.test.tsx

@@ -5,6 +5,7 @@ import { PropsWithChildren } from "react";
 import { recordIdMock, recordsMock } from "../../mocks/recordsMock";
 import { setupStore } from "../../store";
 import { BrowserRouter } from "react-router-dom";
+import * as utils from "../../utils/showFeedback";
 
 describe("Given a deleteRecord function", () => {
   describe("When it's called and there's no user", () => {
@@ -18,19 +19,25 @@ describe("Given a deleteRecord function", () => {
       );
     };
 
-    test("Then it should throw an error 'Failed to delete record' when rejecting", async () => {
-      const expectedError = new Error("Failed to delete record");
+    test("Then it should call the function showFeedback with 'Failed to delete record' and 'error'", async () => {
+      const expectedErrorMessage = "Failed to delete record";
+      const expectedFeedbackType = "error";
       const idRecordToDelete = recordIdMock;
 
+      const spyShowFeedback = vitest.spyOn(utils, "showFeedback");
+
       const {
         result: {
           current: { deleteRecord },
         },
       } = renderHook(() => useRecordsApi(), { wrapper });
 
-      const promise = deleteRecord(idRecordToDelete);
+      await deleteRecord(idRecordToDelete);
 
-      expect(promise).rejects.toThrowError(expectedError);
+      expect(spyShowFeedback).toHaveBeenCalledWith(
+        expectedErrorMessage,
+        expectedFeedbackType,
+      );
     });
   });
 });