test updates
This commit is contained in:
parent
6ca7efc2f6
commit
1af5f64790
|
@ -1,16 +1,23 @@
|
||||||
import "@testing-library/jest-dom";
|
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 = {
|
const movie = {
|
||||||
Title: "Dune",
|
Title: "Dune",
|
||||||
Year: "2000",
|
Year: "2000",
|
||||||
imdbID: "tt0142032",
|
imdbID: "tt0142032",
|
||||||
Type: "series",
|
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");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
|
@ -3,37 +3,39 @@ import { fireEvent, render, screen } from "@testing-library/react";
|
||||||
import SearchBar from "@/app/Search/SearchBar.tsx";
|
import SearchBar from "@/app/Search/SearchBar.tsx";
|
||||||
import { queryOMDb } from "@/api/omdb";
|
import { queryOMDb } from "@/api/omdb";
|
||||||
|
|
||||||
test("SearchBar Allows user input", () => {
|
describe("SearchBar Operations", () => {
|
||||||
render(<SearchBar />);
|
test("SearchBar Allows user input", () => {
|
||||||
const input = screen.getByPlaceholderText("Search by Title");
|
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();
|
|
||||||
// });
|
|
||||||
|
|
|
@ -1,18 +1,16 @@
|
||||||
import "@testing-library/jest-dom";
|
import "@testing-library/jest-dom";
|
||||||
import { queryOMDb } from "../src/api/omdb.ts";
|
import { queryOMDb } from "../src/api/omdb.ts";
|
||||||
|
|
||||||
test("queryOMDb returns movie data successfully", async () => {
|
describe("OMDb API Integration", () => {
|
||||||
const data = await queryOMDb("s=back to");
|
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 () => {
|
expect(data).toHaveProperty("Response", "True");
|
||||||
const data = await queryOMDb("f=dune");
|
});
|
||||||
|
|
||||||
expect(data).toHaveProperty("Response", "False");
|
|
||||||
});
|
|
||||||
|
|
||||||
|
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
|
expect(data).toHaveProperty("Response", "False");
|
||||||
// The `punycode` module is deprecated. Please use a userland alternative instead.
|
});
|
||||||
|
});
|
2
movie-search/package-lock.json
generated
2
movie-search/package-lock.json
generated
|
@ -14,7 +14,7 @@
|
||||||
"@types/react-dom": "^18.3.0",
|
"@types/react-dom": "^18.3.0",
|
||||||
"framer-motion": "^11.2.6",
|
"framer-motion": "^11.2.6",
|
||||||
"next": "^14.2.3",
|
"next": "^14.2.3",
|
||||||
"react": "^18",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18",
|
"react-dom": "^18",
|
||||||
"ts-node-dev": "^2.0.0"
|
"ts-node-dev": "^2.0.0"
|
||||||
},
|
},
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
"@types/react-dom": "^18.3.0",
|
"@types/react-dom": "^18.3.0",
|
||||||
"framer-motion": "^11.2.6",
|
"framer-motion": "^11.2.6",
|
||||||
"next": "^14.2.3",
|
"next": "^14.2.3",
|
||||||
"react": "^18",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18",
|
"react-dom": "^18",
|
||||||
"ts-node-dev": "^2.0.0"
|
"ts-node-dev": "^2.0.0"
|
||||||
},
|
},
|
||||||
|
|
|
@ -14,22 +14,17 @@ export default function SearchBar() {
|
||||||
<form action={searchMovies} className={`md:flex gap-4 m-4 justify-center`}>
|
<form action={searchMovies} className={`md:flex gap-4 m-4 justify-center`}>
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
<input
|
<input
|
||||||
|
data-testid="SearchBar-input"
|
||||||
className="rounded px-2 mb-2 md:mb-0"
|
className="rounded px-2 mb-2 md:mb-0"
|
||||||
placeholder="Search by Title"
|
placeholder="Search by Title"
|
||||||
name="movieTitle"
|
name="movieTitle"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-4 justify-center">
|
<div className="flex gap-4 justify-center">
|
||||||
<button
|
<button type="submit" className={primaryBtn}>
|
||||||
type="submit"
|
|
||||||
className={primaryBtn}
|
|
||||||
>
|
|
||||||
Search
|
Search
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button type="reset" className={secondaryBtn}>
|
||||||
type="reset"
|
|
||||||
className={secondaryBtn}
|
|
||||||
>
|
|
||||||
Clear
|
Clear
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -18,7 +18,7 @@ export default function MovieCard({ movie }: IMovieCardProps) {
|
||||||
>
|
>
|
||||||
<div className="flex flex-col gap-4">
|
<div className="flex flex-col gap-4">
|
||||||
<h3 className=" text-lg font-semibold">{movie.Title}</h3>
|
<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">
|
<div className="flex gap-3 justify-around">
|
||||||
<Link href={`/Movie?i=${movie.imdbID}`}>
|
<Link href={`/Movie?i=${movie.imdbID}`}>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user