Merge branch 'main' into 47-workflow-merge-main-check-for-pull-requests

src/components/MovieCard/MovieCard.tsx

@@ -61,7 +61,11 @@ function MovieCard(movie: MovieProps) {
           </Box>
         </Link>
 
-        <Box onClick={handleBookmarkClick} className='bookmark-box'>
+        <Box
+          onClick={handleBookmarkClick}
+          className='bookmark-box'
+          data-testid={`bookmark-${movie.title}`}
+        >
           {/* If movie is bookmarked, show a text with text "OO" else show FaRegBookmark icon. */}
           {bookmarkedMovies.some(m => m.title === movie.title) ? (
             <FaBookmark size={"30px"} />

src/contexts/MovieContext.tsx

@@ -1,3 +1,4 @@
+import { useSessionStorage } from "@mantine/hooks";
 import { createContext, useEffect, useState } from "react";
 import data from "../../data/movies.json";
 
@@ -30,10 +31,12 @@ export const MovieContext = createContext<MovieContextValue>({
 
 export default function SearchProvider({ children }: Props) {
   const [movies, setMovies] = useState<Movie[]>([]);
-  const [bookmarkedMovies, setBookmarkedMovies] = useState<Movie[]>([]);
+  const [bookmarkedMovies, setBookmarkedMovies] = useSessionStorage<Movie[]>({
+    key: "bookmarked",
+    defaultValue: [],
+  });
   useEffect(() => {
     setMovies(data);
-    setBookmarkedMovies([]);
   }, []);
 
   return (

src/main.tsx

@@ -11,7 +11,7 @@ import App from "./App";
 import MovieContextProvider from "./contexts/MovieContext";
 import "./index.css";
 import { theme } from "./mantineTheme";
-import BookMarkedPage from "./pages/BookmarkedPage";
+import BookMarkedPage from "./pages/BookMarkedPage";
 import CategoryPage from "./pages/CategoryPage";
 import MovieViewPage from "./pages/MovieViewPage";
 import NotFoundPage from "./pages/NotFoundPage";

src/tests/BookMarkedMovies.test.tsx

@@ -0,0 +1,111 @@
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it } from "vitest";
+import BookmarkedMovies from "../components/BookmarkedMovies/BookmarkedMovies";
+import { render, screen } from "../utils/test-utils";
+
+const mockMovies = [
+  {
+    title: "The Shawshank Redemption",
+    year: 1994,
+    rating: "R",
+    actors: ["Tim Robbins", "Morgan Freeman", "Bob Gunton"],
+    genre: "Drama",
+    synopsis:
+      "Over the course of several years, two convicts form a friendship, seeking consolation and, eventually, redemption through basic compassion.",
+    thumbnail:
+      "https://m.media-amazon.com/images/M/MV5BNDE3ODcxYzMtY2YzZC00NmNlLWJiNDMtZDViZWM2MzIxZDYwXkEyXkFqcGdeQXVyNjAwNDUxODI@._V1_QL75_UX380_CR0,4,380,562_.jpg",
+  },
+  {
+    title: "The Lord of the Rings: The Return of the King",
+    year: 2003,
+    rating: "PG-13",
+    actors: ["Elijah Wood", "Viggo Mortensen", "Ian McKellen"],
+    genre: "Action, Adventure, Drama",
+    synopsis:
+      "Gandalf and Aragorn lead the World of Men against Sauron's army to draw his gaze from Frodo and Sam as they approach Mount Doom with the One Ring.",
+    thumbnail:
+      "https://m.media-amazon.com/images/M/MV5BNzA5ZDNlZWMtM2NhNS00NDJjLTk4NDItYTRmY2EwMWZlMTY3XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SY1000_CR0,0,675,1000_AL_.jpg",
+    isTrending: true,
+  },
+];
+
+describe("Bookmarked", async () => {
+  // Clear sessionStorage
+  beforeEach(() => {
+    window.sessionStorage.clear();
+  });
+  // setup userEvent
+  const user = userEvent.setup();
+
+  it("Should render 'You don't have any movies bookmarked.' if no items are bookmarked", async () => {
+    render(
+      <MemoryRouter>
+        <BookmarkedMovies />
+      </MemoryRouter>
+    );
+    expect(await screen.findByText("You dont have any movies bookmarked.")).toBeInTheDocument();
+  });
+
+  it("Should render movies from sessionStorage", async () => {
+    // Add test data to sessionStorage
+    window.sessionStorage.setItem("bookmarked", JSON.stringify(mockMovies));
+
+    render(
+      <MemoryRouter>
+        <BookmarkedMovies />
+      </MemoryRouter>
+    );
+
+    // Expect all titles of movies from sessionStorage to be rendered
+    for (const movie of mockMovies) {
+      expect(await screen.findByText(movie.title)).toBeInTheDocument();
+    }
+  });
+
+  it("Should be possible to remove a bookmarked movie", async () => {
+    // Add test data
+    window.sessionStorage.setItem("bookmarked", JSON.stringify(mockMovies));
+
+    render(
+      <MemoryRouter>
+        <BookmarkedMovies />
+      </MemoryRouter>
+    );
+
+    for (const movie of mockMovies) {
+      expect(await screen.findByText(movie.title)).toBeInTheDocument();
+      expect(mockMovies).toContainEqual(mockMovies[0]);
+    }
+
+    // Click on first movies bookmark button
+    const firstBookmarkButton = await screen.findByTestId(`bookmark-${mockMovies[0].title}`);
+    await user.click(firstBookmarkButton);
+
+    // Check that movie no longer renderes on page
+    expect(screen.queryByText(mockMovies[0].title)).toBeNull();
+
+    // Check if the movie is removed from sessionStorage and still contains the other movie
+    let updatedBookmarkedMovies = JSON.parse(window.sessionStorage.getItem("bookmarked") || "[]");
+    expect(updatedBookmarkedMovies).not.toContainEqual(mockMovies[0]);
+    expect(updatedBookmarkedMovies).toContainEqual(mockMovies[1]);
+
+    // Click on second movies bookmark button
+    const secondBookmarkButton = await screen.findByTestId(`bookmark-${mockMovies[1].title}`);
+    await user.click(secondBookmarkButton);
+
+    // Check if second movie is removed from sessionStorage
+    updatedBookmarkedMovies = JSON.parse(window.sessionStorage.getItem("bookmarked") || "[]");
+    expect(updatedBookmarkedMovies).not.toContainEqual(mockMovies[1]);
+
+    // Expect no bookmark text to be rendered
+    expect(await screen.findByText("You dont have any movies bookmarked.")).toBeInTheDocument();
+  });
+});
+
+// const bookmarkedString = window.sessionStorage.getItem("bookmarked");
+// if (bookmarkedString) {
+//   console.log(JSON.parse(bookmarkedString));
+// } else {
+//   console.log("No movies.");
+// }