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 { render, screen } from "@testing-library/react";
-import MovieCard from '../src/common/components/MovieCard.tsx'
+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"
+  Poster:
-  }
+    "https://m.media-amazon.com/images/M/MV5BMTU4MjMyMTkxN15BMl5BanBnXkFtZTYwODA5OTU5._V1_SX300.jpg",
-
+};
-test('MovieCard Renders',()=>{
+describe("MovieCard Rendering", () => {
-    render(<MovieCard movie={movie} />)
+  test("should render with Dune title.", () => {
-    const movieTitle = screen.getByRole('heading')
+    render(<MovieCard movie={movie} />);
-    expect(movieTitle).toHaveTextContent('Dune')
+    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,18 +3,19 @@ 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", () => {
+describe("SearchBar Operations", () => {
+  test("SearchBar Allows user input", () => {
     render(<SearchBar />);
     const input = screen.getByPlaceholderText("Search by Title");
 
     fireEvent.change(input, { target: { value: "some value" } });
 
     expect(input.value).toBe("some value");
-});
+  });
 
-test("SearchBar Allows user input and Clear button clears", () => {
+  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,18 +23,19 @@ 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", () => {
+  //   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 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();
-// });

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 () => {
+describe("OMDb API Integration", () => {
+  test("queryOMDb returns movie data successfully", async () => {
     const data = await queryOMDb("s=back to");
 
     expect(data).toHaveProperty("Response", "True");
-});
+  });
 
-test("queryOMDb returns movie with error", async () => {
+  test("queryOMDb returns movie with error", async () => {
     const data = await queryOMDb("f=dune");
 
     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
+        <button type="submit" className={primaryBtn}>
-          type="submit"
-          className={primaryBtn}
-        >
           Search
         </button>
-        <button
+        <button type="reset" className={secondaryBtn}>
-          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}`}>