test updates

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'
+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')
-})
+  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");
+  });
+});

movie-search/__tests__/SearchBar.test.jsx

@@ -3,6 +3,7 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import SearchBar from "@/app/Search/SearchBar.tsx";
 import { queryOMDb } from "@/api/omdb";
 
+describe("SearchBar Operations", () => {
   test("SearchBar Allows user input", () => {
     render(<SearchBar />);
     const input = screen.getByPlaceholderText("Search by Title");
@@ -14,7 +15,7 @@ test("SearchBar Allows user input", () => {
 
   test("SearchBar Allows user input and Clear button clears", () => {
     render(<SearchBar />);
-  const input = screen.getByPlaceholderText("Search by Title");
+    const input = screen.getByTestId("SearchBar-input");
     const clear = screen.getByText("Clear");
 
     fireEvent.change(input, { target: { value: "some value" } });
@@ -22,7 +23,7 @@ test("SearchBar Allows user input and Clear button clears", () => {
 
     fireEvent.click(clear);
 
-  expect(input.value).toBe('');
+    expect(input.value).toBe("");
   });
 
   // test("SearchBar Allows user submit", () => {
@@ -37,3 +38,4 @@ test("SearchBar Allows user input and Clear button clears", () => {
   //   // https://github.com/vercel/next.js/issues/54757
   //   //  expect(spy).toHaveBeenCalled();
   // });
+});

movie-search/__tests__/omdb.test.jsx

@@ -1,6 +1,7 @@
 import "@testing-library/jest-dom";
 import { queryOMDb } from "../src/api/omdb.ts";
 
+describe("OMDb API Integration", () => {
   test("queryOMDb returns movie data successfully", async () => {
     const data = await queryOMDb("s=back to");
 
@@ -12,7 +13,4 @@ test("queryOMDb returns movie with error", async () => {
 
     expect(data).toHaveProperty("Response", "False");
   });
-
-
-// Warning: React does not recognize the `fetchPriority` prop on a DOM element
-// The `punycode` module is deprecated. Please use a userland alternative instead.
+});

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"
       },

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"
   },

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>

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}`}>