From 1af5f64790674005b8a263c1c3b9a92333f3fd7c Mon Sep 17 00:00:00 2001
From: cscough <curtiscoughenour0@gmail.com>
Date: Sun, 2 Jun 2024 01:21:21 -0400
Subject: [PATCH] test updates

---
 movie-search/__tests__/MovieCard.test.jsx     | 37 ++++++-----
 movie-search/__tests__/SearchBar.test.jsx     | 64 ++++++++++---------
 movie-search/__tests__/omdb.test.jsx          | 22 +++----
 movie-search/package-lock.json                |  2 +-
 movie-search/package.json                     |  2 +-
 movie-search/src/app/Search/SearchBar.tsx     | 11 +---
 .../src/common/components/MovieCard.tsx       |  2 +-
 7 files changed, 71 insertions(+), 69 deletions(-)

diff --git a/movie-search/__tests__/MovieCard.test.jsx b/movie-search/__tests__/MovieCard.test.jsx
index 07c43eb..afd49cb 100644
--- a/movie-search/__tests__/MovieCard.test.jsx
+++ b/movie-search/__tests__/MovieCard.test.jsx
@@ -1,16 +1,23 @@
 import "@testing-library/jest-dom";
-import {render, screen} from '@testing-library/react'
-import MovieCard from '../src/common/components/MovieCard.tsx'
-const movie =  {
-    Title: "Dune",
-    Year: "2000",
-    imdbID: "tt0142032",
-    Type: "series",
-    Poster: "https://m.media-amazon.com/images/M/MV5BMTU4MjMyMTkxN15BMl5BanBnXkFtZTYwODA5OTU5._V1_SX300.jpg"
-  }
-
-test('MovieCard Renders',()=>{
-    render(<MovieCard movie={movie} />)
-    const movieTitle = screen.getByRole('heading')
-    expect(movieTitle).toHaveTextContent('Dune')
-})
\ No newline at end of file
+import { render, screen } from "@testing-library/react";
+import MovieCard from "../src/common/components/MovieCard.tsx";
+const movie = {
+  Title: "Dune",
+  Year: "2000",
+  imdbID: "tt0142032",
+  Type: "series",
+  Poster:
+    "https://m.media-amazon.com/images/M/MV5BMTU4MjMyMTkxN15BMl5BanBnXkFtZTYwODA5OTU5._V1_SX300.jpg",
+};
+describe("MovieCard Rendering", () => {
+  test("should render with Dune title.", () => {
+    render(<MovieCard movie={movie} />);
+    const movieTitle = screen.getByRole("heading");
+    expect(movieTitle).toHaveTextContent("Dune");
+  });
+  test("should render with Year 2000.", () => {
+    render(<MovieCard movie={movie} />);
+    const movieTitle = screen.getByTestId("MovieCard-Year");
+    expect(movieTitle).toHaveTextContent("2000");
+  });
+});
diff --git a/movie-search/__tests__/SearchBar.test.jsx b/movie-search/__tests__/SearchBar.test.jsx
index 9d871ff..6e63c87 100644
--- a/movie-search/__tests__/SearchBar.test.jsx
+++ b/movie-search/__tests__/SearchBar.test.jsx
@@ -3,37 +3,39 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import SearchBar from "@/app/Search/SearchBar.tsx";
 import { queryOMDb } from "@/api/omdb";
 
-test("SearchBar Allows user input", () => {
-  render(<SearchBar />);
-  const input = screen.getByPlaceholderText("Search by Title");
+describe("SearchBar Operations", () => {
+  test("SearchBar Allows user input", () => {
+    render(<SearchBar />);
+    const input = screen.getByPlaceholderText("Search by Title");
 
-  fireEvent.change(input, { target: { value: "some value" } });
+    fireEvent.change(input, { target: { value: "some value" } });
 
-  expect(input.value).toBe("some value");
+    expect(input.value).toBe("some value");
+  });
+
+  test("SearchBar Allows user input and Clear button clears", () => {
+    render(<SearchBar />);
+    const input = screen.getByTestId("SearchBar-input");
+    const clear = screen.getByText("Clear");
+
+    fireEvent.change(input, { target: { value: "some value" } });
+    expect(input.value).toBe("some value");
+
+    fireEvent.click(clear);
+
+    expect(input.value).toBe("");
+  });
+
+  // test("SearchBar Allows user submit", () => {
+  //   render(<SearchBar />);
+  //   const input = screen.getByPlaceholderText("Search by Title");
+  //   const submit = screen.getByText("Search");
+  //   const spy = jest.spyOn({ queryOMDb }, "queryOMDb");
+
+  //   fireEvent.change(input, { target: { value: "back to the" } });
+  //   fireEvent.click(submit);
+  //   // Somehow test for form submission - currently facing this issue
+  //   // https://github.com/vercel/next.js/issues/54757
+  //   //  expect(spy).toHaveBeenCalled();
+  // });
 });
-
-test("SearchBar Allows user input and Clear button clears", () => {
-  render(<SearchBar />);
-  const input = screen.getByPlaceholderText("Search by Title");
-  const clear = screen.getByText("Clear");
-
-  fireEvent.change(input, { target: { value: "some value" } });
-  expect(input.value).toBe("some value");
-
-  fireEvent.click(clear);
-
-  expect(input.value).toBe('');
-});
-
-// test("SearchBar Allows user submit", () => {
-//   render(<SearchBar />);
-//   const input = screen.getByPlaceholderText("Search by Title");
-//   const submit = screen.getByText("Search");
-//   const spy = jest.spyOn({ queryOMDb }, "queryOMDb");
-
-//   fireEvent.change(input, { target: { value: "back to the" } });
-//   fireEvent.click(submit);
-//   // Somehow test for form submission - currently facing this issue
-//   // https://github.com/vercel/next.js/issues/54757
-//   //  expect(spy).toHaveBeenCalled();
-// });
diff --git a/movie-search/__tests__/omdb.test.jsx b/movie-search/__tests__/omdb.test.jsx
index 3f0af43..918cdf6 100644
--- a/movie-search/__tests__/omdb.test.jsx
+++ b/movie-search/__tests__/omdb.test.jsx
@@ -1,18 +1,16 @@
 import "@testing-library/jest-dom";
 import { queryOMDb } from "../src/api/omdb.ts";
 
-test("queryOMDb returns movie data successfully", async () => {
-  const data = await queryOMDb("s=back to");
-  
-  expect(data).toHaveProperty("Response", "True");
-});
+describe("OMDb API Integration", () => {
+  test("queryOMDb returns movie data successfully", async () => {
+    const data = await queryOMDb("s=back to");
 
-test("queryOMDb returns movie with error", async () => {
-  const data = await queryOMDb("f=dune");
-  
-  expect(data).toHaveProperty("Response", "False");
-});
+    expect(data).toHaveProperty("Response", "True");
+  });
 
+  test("queryOMDb returns movie with error", async () => {
+    const data = await queryOMDb("f=dune");
 
-// Warning: React does not recognize the `fetchPriority` prop on a DOM element
-// The `punycode` module is deprecated. Please use a userland alternative instead.
\ No newline at end of file
+    expect(data).toHaveProperty("Response", "False");
+  });
+});
\ No newline at end of file
diff --git a/movie-search/package-lock.json b/movie-search/package-lock.json
index 163e02a..43d3bb7 100644
--- a/movie-search/package-lock.json
+++ b/movie-search/package-lock.json
@@ -14,7 +14,7 @@
         "@types/react-dom": "^18.3.0",
         "framer-motion": "^11.2.6",
         "next": "^14.2.3",
-        "react": "^18",
+        "react": "^18.2.0",
         "react-dom": "^18",
         "ts-node-dev": "^2.0.0"
       },
diff --git a/movie-search/package.json b/movie-search/package.json
index e30a84f..440343a 100644
--- a/movie-search/package.json
+++ b/movie-search/package.json
@@ -17,7 +17,7 @@
     "@types/react-dom": "^18.3.0",
     "framer-motion": "^11.2.6",
     "next": "^14.2.3",
-    "react": "^18",
+    "react": "^18.2.0",
     "react-dom": "^18",
     "ts-node-dev": "^2.0.0"
   },
diff --git a/movie-search/src/app/Search/SearchBar.tsx b/movie-search/src/app/Search/SearchBar.tsx
index 281de12..f56bdf7 100644
--- a/movie-search/src/app/Search/SearchBar.tsx
+++ b/movie-search/src/app/Search/SearchBar.tsx
@@ -14,22 +14,17 @@ export default function SearchBar() {
     <form action={searchMovies} className={`md:flex gap-4 m-4 justify-center`}>
       <div className="flex justify-center">
         <input
+          data-testid="SearchBar-input"
           className="rounded px-2 mb-2 md:mb-0"
           placeholder="Search by Title"
           name="movieTitle"
         />
       </div>
       <div className="flex gap-4 justify-center">
-        <button
-          type="submit"
-          className={primaryBtn}
-        >
+        <button type="submit" className={primaryBtn}>
           Search
         </button>
-        <button
-          type="reset"
-          className={secondaryBtn}
-        >
+        <button type="reset" className={secondaryBtn}>
           Clear
         </button>
       </div>
diff --git a/movie-search/src/common/components/MovieCard.tsx b/movie-search/src/common/components/MovieCard.tsx
index bfa0f0b..7cac5f3 100644
--- a/movie-search/src/common/components/MovieCard.tsx
+++ b/movie-search/src/common/components/MovieCard.tsx
@@ -18,7 +18,7 @@ export default function MovieCard({ movie }: IMovieCardProps) {
     >
       <div className="flex flex-col gap-4">
         <h3 className=" text-lg font-semibold">{movie.Title}</h3>
-        <p className=" text-sm text-gray-700">Circa: {movie.Year}</p>
+        <p data-testid='MovieCard-Year' className=" text-sm text-gray-700">Circa: {movie.Year}</p>
 
         <div className="flex gap-3  justify-around">
           <Link href={`/Movie?i=${movie.imdbID}`}>