diff --git a/src/App.js b/src/App.js index bf2163a..393dd2f 100644 --- a/src/App.js +++ b/src/App.js @@ -13,31 +13,12 @@ class App extends Component { super(); this.state = { movies: [], - selectedMovie: 0, + selectedMovie: null, error: "", loader: true, }; } - componentDidMount() { - getMovies() - .then((response) => this.setState({ movies: response.movies })) - .then(this.setState({ loader: false })) - .catch((err) => this.setState({ error: err })); - } - - returnToHome = (event) => { - this.setState({ - selectedMovie: 0, - }); - }; - - handleClick = (event) => { - getMovie(event.target.id) - .then((response) => this.setState({ selectedMovie: response.movie })) - .catch((err) => this.setState({ error: err })); - }; - render() { if (this.state.loader) { return ( @@ -55,6 +36,11 @@ class App extends Component { /> + + + {this.state.error && {this.state.error}} + + ); } @@ -91,6 +77,25 @@ class App extends Component { ); } + + componentDidMount() { + getMovies() + .then((response) => this.setState({ movies: response.movies })) + .then(this.setState({ loader: false })) + .catch((err) => this.setState({ error: err })); + } + + returnToHome = (event) => { + this.setState({ + selectedMovie: 0, + }); + }; + + handleClick = (event) => { + getMovie(event.target.id) + .then((response) => this.setState({ selectedMovie: response.movie })) + .catch((err) => this.setState({ error: err })); + }; } export default App; diff --git a/src/App.scss b/src/App.scss index 4931613..e994711 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,3 +1,3 @@ .App { text-align: center; -} +} \ No newline at end of file diff --git a/src/App.test.js b/src/App.test.js index 5cfe40f..f9132fa 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,3 +1,4 @@ +import React from "react"; import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import App from "./App"; diff --git a/src/Components/FeaturedMovies/FeaturedMovies.js b/src/Components/FeaturedMovies/FeaturedMovies.js index 7341a49..a1b256e 100644 --- a/src/Components/FeaturedMovies/FeaturedMovies.js +++ b/src/Components/FeaturedMovies/FeaturedMovies.js @@ -20,11 +20,11 @@ function FeaturedMovies() { This bitch -

This bitch

+

Don't eat in the bed

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 diff --git a/src/Components/MovieCard/MovieCard.test.js b/src/Components/MovieCard/MovieCard.test.js index adcaaef..705386f 100644 --- a/src/Components/MovieCard/MovieCard.test.js +++ b/src/Components/MovieCard/MovieCard.test.js @@ -1,5 +1,59 @@ -//it should display a movie poster +import React from "react"; +import { render, screen } from "@testing-library/react"; +import MovieCard from "./MovieCard"; +import userEvent from "@testing-library/user-event"; -//it should display a movie title +const handleClick = jest.fn(); +const mockMovieCard = { + movies: [ + { + id: 1, + title: "Movie Title", + poster_path: "someURL", + backdrop_path: "someURL", + release_date: "2019-12-04", + overview: "Some overview", + average_rating: 6, + }, + { + id: 2, + title: "Second Movie Title", + poster_path: "someURL", + backdrop_path: "someURL", + release_date: "2019-12-04", + overview: "Some overview", + average_rating: 4, + }, + ], +}; -// should be able to click on a movie card +describe("MovieCard", () => { + it("should display a poster, title, release Date, and rating", () => { + render( + + ); + const movieCardTitle = screen.getByText("Movie Title"); + const movieCardPoster = screen.getByRole("img"); + const movieCardReleaseDate = screen.getByText("Released: 2019-12-04"); + const movieCardRating = screen.getByText("Average Rating: 6"); + + expect(movieCardPoster).toBeInTheDocument(); + expect(movieCardTitle).toBeInTheDocument(); + expect(movieCardReleaseDate).toBeInTheDocument(); + expect(movieCardRating).toBeInTheDocument(); + }); + + it("should invoke a function when a movie card is clicked", () => { + render(); + const movieCardPoster = screen.getByRole("img"); + + userEvent.click(movieCardPoster); + + expect(handleClick).toHaveBeenCalled(); + }); +}); diff --git a/src/Components/NavBar/NavBar.test.js b/src/Components/NavBar/NavBar.test.js index e69de29..dfbca6e 100644 --- a/src/Components/NavBar/NavBar.test.js +++ b/src/Components/NavBar/NavBar.test.js @@ -0,0 +1,28 @@ +import React from 'react'; +import { render, screen } from "@testing-library/react"; +import NavBar from './NavBar'; +import userEvent from '@testing-library/user-event'; + +const returnHome = jest.fn(); + +describe("NavBar", () => { + it("should render a navbar with a home button", () => { + render(); + const navBar = screen.getByText("Rancid Tomatillos") + const navBarButton = screen.getByText("Home") + + expect(navBar).toBeInTheDocument(); + expect(navBarButton).toBeInTheDocument(); + }); + + it("should invoke a function when clicked", () => { + render(); + const navBarButton = screen.getByText("Home"); + + userEvent.click(navBarButton); + + expect(returnHome).toHaveBeenCalled(); + }) +}) \ No newline at end of file diff --git a/src/Components/SelectedMovie/SelectedMovie.test.js b/src/Components/SelectedMovie/SelectedMovie.test.js index e69de29..4d5c63b 100644 --- a/src/Components/SelectedMovie/SelectedMovie.test.js +++ b/src/Components/SelectedMovie/SelectedMovie.test.js @@ -0,0 +1,62 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; +import SelectedMovie from "./SelectedMovie"; + +const mockMovieData = { + movie: { + id: 1, + title: "Movie Title", + poster_path: "someURL", + backdrop_path: "someURL", + release_date: "December", + overview: "Some overview", + average_rating: 6, + genres: ["Drama"], + budget: 63000000, + revenue: 100853753, + runtime: 139, + tagline: "Movie Tagline", + }, +}; + +describe("Selected Movie", () => { + it("Should render the title, tagline, movie backdrop, overview, release date, rating, genres, budget, revenue, and runtime", () => { + render( + + ); + + let movieTitle = screen.getByText("Movie Title"); + let movieBackdrop = screen.getByRole("img"); + let movieReleaseDate = screen.getByText("Release Date: December"); + let movieOverview = screen.getByText("Overview: Some overview"); + let movieAverageRating = screen.getByText("Rating: 6"); + let movieGenres = screen.getByText("Drama"); + let movieBudget = screen.getByText("Budget: $63000000"); + let movieRevenue = screen.getByText("Revenue: $100853753"); + let movieRuntime = screen.getByText("Duration: 139 minutes"); + let movieTagline = screen.getByText("Movie Tagline"); + + expect(movieTitle).toBeInTheDocument(); + expect(movieBackdrop).toBeInTheDocument(); + expect(movieReleaseDate).toBeInTheDocument(); + expect(movieOverview).toBeInTheDocument(); + expect(movieAverageRating).toBeInTheDocument(); + expect(movieGenres).toBeInTheDocument(); + expect(movieBudget).toBeInTheDocument(); + expect(movieRevenue).toBeInTheDocument(); + expect(movieRuntime).toBeInTheDocument(); + expect(movieTagline).toBeInTheDocument(); + }); +});