Async testing

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 {
               />
             </Col>
           </Row>
+          <Row className="d-flex justify-content-center">
+            <Col md="auto">
+              {this.state.error && <Alert variant="danger">{this.state.error}</Alert>}
+            </Col>
+          </Row>
         </Container>
       );
     }
@@ -91,6 +77,25 @@ class App extends Component {
       </React.Fragment>
     );
   }
+
+  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;

src/App.scss

@@ -1,3 +1,3 @@
 .App {
   text-align: center;
-}
+}

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";

src/Components/FeaturedMovies/FeaturedMovies.js

@@ -20,11 +20,11 @@ function FeaturedMovies() {
         <img
           className="d-block w-100"
           src="https://images.unsplash.com/photo-1521967906867-14ec9d64bee8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
-          alt="This bitch"
+          alt="bed eater"
         />
 
         <Carousel.Caption>
-          <h3>This bitch</h3>
+          <h3>Don't eat in the bed</h3>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         </Carousel.Caption>
       </Carousel.Item>

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(
+      <MovieCard
+        poster={mockMovieCard.movies[0].poster_path}
+        title={mockMovieCard.movies[0].title}
+        release={mockMovieCard.movies[0].release_date}
+        rating={mockMovieCard.movies[0].average_rating}
+      />
+    );
+    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(<MovieCard handleClick={handleClick} />);
+    const movieCardPoster = screen.getByRole("img");
+
+    userEvent.click(movieCardPoster);
+
+    expect(handleClick).toHaveBeenCalled();
+  });
+});

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(<NavBar />);
+        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(<NavBar
+          returnToHome={returnHome}
+        />);
+        const navBarButton = screen.getByText("Home");
+
+        userEvent.click(navBarButton);
+
+        expect(returnHome).toHaveBeenCalled();
+    })
+})

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(
+      <SelectedMovie
+        title={mockMovieData.movie.title}
+        tagline={mockMovieData.movie.tagline}
+        poster={mockMovieData.movie.poster_path}
+        backdrop={mockMovieData.movie.backdrop_path}
+        overview={mockMovieData.movie.overview}
+        release={mockMovieData.movie.release_date}
+        rating={mockMovieData.movie.average_rating}
+        genres={mockMovieData.movie.genres}
+        budget={mockMovieData.movie.budget}
+        revenue={mockMovieData.movie.revenue}
+        runtime={mockMovieData.movie.runtime}
+      />
+    );
+
+    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();
+  });
+});