test: adding more integration tests for favorites page

src/components/home/__tests__/home.test.tsx

@@ -76,6 +76,7 @@ describe("<Home/>", () => {
     await waitFor(() =>
       expect(screen.queryByRole("status")).not.toBeInTheDocument()
     );
+
     expect(
       screen.getByRole("heading", {
         level: 5,

src/components/pets/__tests__/favorites.test.tsx

@@ -1,14 +1,19 @@
 import { screen, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
 import { Provider } from "react-supabase";
+import { FavoritePets, ISupaState } from "reducers/supaReducer";
 
-import { AuthProvider } from "../../../context/SupaContext";
-import PetAuthProvider from "../../../context/TokenContext";
+import { AuthContext, AuthProvider } from "../../../context/SupaContext";
+import PetAuthProvider, {
+  PetAuthContext,
+  PetTokenType,
+} from "../../../context/TokenContext";
 import { customRender } from "../../../swrconfigtest";
 import { supabase } from "../../../testServer";
 import Favorites from "../Favorites";
 
-describe.skip("Favorites", () => {
-  it("should render user favorite pets", async () => {
+describe("Favorites", () => {
+  it("should render no favorite pets", async () => {
     customRender(
       <Provider value={supabase}>
         <PetAuthProvider>
@@ -18,10 +23,6 @@ describe.skip("Favorites", () => {
         </PetAuthProvider>
       </Provider>
     );
-    expect(screen.getAllByRole("status")).toHaveLength(3);
-    await waitFor(() =>
-      expect(screen.queryByRole("status")).not.toBeInTheDocument()
-    );
 
     expect(
       screen.getByRole("heading", {
@@ -30,4 +31,53 @@ describe.skip("Favorites", () => {
       })
     ).toBeInTheDocument();
   });
+
+  it("should render user favorited pets", async () => {
+    const start: Date = new Date();
+    const favoritePets: FavoritePets[] = [
+      {
+        id: 50,
+        pet: "2",
+        created_at: start,
+      },
+      {
+        id: 51,
+        pet: "3",
+        created_at: start,
+      },
+      {
+        id: 52,
+        pet: "4",
+        created_at: start,
+      },
+    ];
+    const supaInitialState = {
+      favoritePets: favoritePets,
+    } as ISupaState;
+    const initialState: PetTokenType = {
+      tokenHeaders: "yayeet",
+      loading: false,
+      errors: false,
+    };
+    customRender(
+      <BrowserRouter>
+        <Provider value={supabase}>
+          <PetAuthContext.Provider value={initialState}>
+            <AuthContext.Provider
+              value={{ ...supaInitialState, dispatch: () => undefined }}
+            >
+              <Favorites />
+            </AuthContext.Provider>
+          </PetAuthContext.Provider>
+        </Provider>
+      </BrowserRouter>
+    );
+
+    expect(screen.getAllByRole("status")).toHaveLength(3);
+    await waitFor(() =>
+      expect(screen.queryAllByRole("status")).not.toHaveLength(3)
+    );
+    const petCards = screen.getAllByRole("button", { name: /More Info/i });
+    expect(petCards).toHaveLength(3);
+  });
 });

src/context/TokenContext.tsx

@@ -1,7 +1,7 @@
 import jwtDecode from "jwt-decode";
 import React, { createContext, useContext, useEffect, useState } from "react";
 
-type PetTokenType = {
+export type PetTokenType = {
   tokenHeaders: string | null;
   loading: boolean;
   errors: boolean;

src/reducers/supaReducer.ts

@@ -13,7 +13,7 @@ import {
   UpdateProfile,
 } from "./supaActions";
 
-export type FavoritePets = { id: number; pet: string; create_at: Date };
+export type FavoritePets = { id: number; pet: string; created_at: Date };
 
 export type IProfileUpdate = {
   username: string;

src/testServer.ts

@@ -48,6 +48,76 @@ const petList = {
   },
 };
 
+const petListFav = [
+  {
+    animal: {
+      id: 2,
+
+      name: "Courage the Cowardly Dog",
+      type: "dog",
+      age: "Baby",
+      gender: "male",
+      description: "Woof",
+      primary_photo_cropped: {
+        medium: "courage.jpg",
+      },
+      breeds: {
+        primary: "dog",
+      },
+      photos: [
+        {
+          medium: "courage.medium.jpg",
+          large: "courage.large.jpg",
+        },
+      ],
+    },
+  },
+  {
+    animal: {
+      id: 3,
+      name: "jake",
+      type: "dog",
+      age: "young",
+      gender: "male",
+      description: "finns friend",
+      primary_photo_cropped: {
+        medium: "jake.png",
+      },
+      breeds: {
+        primary: "dog",
+      },
+      photos: [
+        {
+          medium: "finn.medium.jpg",
+          large: "finn.large.jpg",
+        },
+      ],
+    },
+  },
+  {
+    animal: {
+      id: 4,
+      name: "puss n boots",
+      type: "cat",
+      age: "young",
+      gender: "male",
+      description: "masterr of sowrds",
+      primary_photo_cropped: {
+        medium: "boots.jpg",
+      },
+      breeds: {
+        primary: "cat",
+      },
+      photos: [
+        {
+          medium: "cat.medium.jpg",
+          large: "cat.large.jpg",
+        },
+      ],
+    },
+  },
+];
+
 const server = setupServer(
   rest.get(
     "https://api.github.com/repos/redxzeta/Awesome-Adoption/contributors",
@@ -60,10 +130,23 @@ const server = setupServer(
   }),
   rest.get("https://api.petfinder.com/v2/animals/:id", (req, res, ctx) => {
     const { id } = req.params;
-    if (id === "1") {
-      return res(ctx.status(200), ctx.json(petList));
+
+    switch (id) {
+      case "1":
+        return res(ctx.status(200), ctx.json(petList));
+      case "2":
+        return res(ctx.status(200), ctx.json(petListFav[0]));
+      case "3":
+        return res(ctx.status(200), ctx.json(petListFav[1]));
+      case "4":
+        return res(ctx.status(200), ctx.json(petListFav[2]));
+
+      default:
+        return res(
+          ctx.status(404),
+          ctx.json({ message: "Yoda does not exist" })
+        );
     }
-    return res(ctx.status(404), ctx.json({ message: "Yoda does not exist" }));
   }),
   rest.get("https://api.petfinder.com/v2/animals", (req, res, ctx) => {
     const sort = req.url.searchParams.get("sort");