From e44b0238fdc8ef97ec6b490df4f0e28acdafbe6c Mon Sep 17 00:00:00 2001 From: Caleb Cyphers Date: Sat, 5 Dec 2020 13:07:25 -0700 Subject: [PATCH 1/6] Add new integreation test to app --- src/App.test.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.test.js b/src/App.test.js index 5cfe40f..6e864ac 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"; From 36b18cf877c50eb3aee09e35312d8c272e5edd3f Mon Sep 17 00:00:00 2001 From: Caleb Cyphers Date: Sat, 5 Dec 2020 13:08:12 -0700 Subject: [PATCH 2/6] Build up tests for Navbar --- src/Components/NavBar/NavBar.test.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) 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 From 484b8435c3c20593410502a0f256a00c4c7da122 Mon Sep 17 00:00:00 2001 From: Caleb Cyphers Date: Sat, 5 Dec 2020 13:09:23 -0700 Subject: [PATCH 3/6] Build up tests for SelectedMovie --- .../SelectedMovie/SelectedMovie.test.js | 62 +++++++++++++++++++ 1 file changed, 62 insertions(+) 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(); + }); +}); From 4552596e5bbd5c1209b73e628fc034d304f69947 Mon Sep 17 00:00:00 2001 From: Caleb Cyphers Date: Sat, 5 Dec 2020 13:13:34 -0700 Subject: [PATCH 4/6] Adjust labels --- src/Components/FeaturedMovies/FeaturedMovies.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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.

 From a538057fe39092b29310c6b8e85cfb7c2f8c8d54 Mon Sep 17 00:00:00 2001 From: Caleb Cyphers Date: Sat, 5 Dec 2020 14:10:32 -0700 Subject: [PATCH 5/6] Build up tests for MovieCard --- src/Components/MovieCard/MovieCard.test.js | 60 ++++++++++++++++++++-- 1 file changed, 57 insertions(+), 3 deletions(-) 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(); + }); +}); From 81166624cece6ac5127452a33f3776f1d8c2f29b Mon Sep 17 00:00:00 2001 From: Caleb Cyphers Date: Sat, 5 Dec 2020 14:46:58 -0700 Subject: [PATCH 6/6] Add error handling --- src/App.js | 45 +++++++++++++++++++++++++-------------------- src/App.scss | 2 +- src/App.test.js | 2 +- 3 files changed, 27 insertions(+), 22 deletions(-) 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 6e864ac..f9132fa 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,4 +1,4 @@ -import React from 'react' +import React from "react"; import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import App from "./App";