+ );
+};
-export default Episode;
\ No newline at end of file
+export default Episode;
diff --git a/src/components/Show.js b/src/components/Show.js
index 1cd25f06..007fd77e 100644
--- a/src/components/Show.js
+++ b/src/components/Show.js
@@ -1,31 +1,39 @@
-import React from 'react';
+import React from "react";
import Episodes from "./Episodes";
-import Loading from './Loading';
+import Loading from "./Loading";
-const Show = (props) => {
- const { handleSelect, selectedSeason, show } = props;
-
- if (!show)
- return
+const Show = props => {
+ const { handleSelect, selectedSeason, show } = props;
- return(
-
{show.name}
-
{show.summary}
+ if (!show) return ;
-
-
+ return (
+
+
{show.name}
+
{show.summary}
- {
- (selectedSeason !== "none") &&
- }
-
);
-}
+
+
+
-export default Show;
\ No newline at end of file
+ {selectedSeason !== "none" && (
+
+ )}
+
+ );
+};
+
+export default Show;
diff --git a/src/components/tests/Episode.test.js b/src/components/tests/Episode.test.js
index 24b4c2dc..41c79d4e 100644
--- a/src/components/tests/Episode.test.js
+++ b/src/components/tests/Episode.test.js
@@ -1,34 +1,46 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import Episode from './../Episode';
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Episode from "./../Episode";
const testEpisode = {
- id:1,
- name: "",
- image: "http://static.tvmaze.com/uploads/images/medium_landscape/67/168918.jpg",
- season: 1,
- number: 1,
- summary: "",
- runtime: 1
-}
+ id: 1,
+ name: "",
+ image:
+ "http://static.tvmaze.com/uploads/images/medium_landscape/67/168918.jpg",
+ season: 1,
+ number: 1,
+ summary: "test summary",
+ runtime: 1
+};
const testEpisodeWithoutImage = {
- //Add in approprate test data structure here.
-}
+ id: 1,
+ name: "",
+ image:"null",
+ season: 1,
+ number: 1,
+ summary: "test summary",
+ runtime: 1
+};
test("renders without error", () => {
-
+ render();
});
-test("renders the summury test passed as prop", ()=>{
-
-});
+test("renders the summury test passed as prop", () => {
+ render();
+ const summary = screen.queryByText(/test summary/i);
+ expect(summary).toBeInTheDocument();
+ expect(summary).toBeTruthy();
+ expect(sumary).toHaveTextContent("test summary");
-test("renders default image when image is not defined", ()=>{
-
-})
+test("renders default image when image is not defined", () => {
+ render();
+ const image = screen.queryByAltText('./stranger_things.png')
+ expect(image).toBeInTheDocument();
+});
//Tasks
//1. Complete a test that shows the Episode component renders. Pass in the provided example episode data as a test prop.
//2. Modify the test data to display a specific summary statement. Complete a test that shows that the summary value passed in to the Episode component displays as expected. Use no more then 3 different expect statements to test the the existance of the summary value.
-//3. The episode component displays a default value ('./stranger_things.png') when a image url is not provided. Create a new piece of test data with the image property set to null. Test that the alt tag of the image displayed is set to './stranger_things.png'.
\ No newline at end of file
+//3. The episode component displays a default value ('./stranger_things.png') when a image url is not provided. Create a new piece of test data with the image property set to null. Test that the alt tag of the image displayed is set to './stranger_things.png'.
diff --git a/src/components/tests/Show.test.js b/src/components/tests/Show.test.js
index 5d030167..766f0e60 100644
--- a/src/components/tests/Show.test.js
+++ b/src/components/tests/Show.test.js
@@ -1,27 +1,50 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
-import Show from './../Show';
+import Show from "./../Show";
const testShow = {
- //add in approprate test data structure here.
-}
-
-test('renders testShow and no selected Season without errors', ()=>{
+ //add in approprate test data structure here.
+ name: "test show",
+ summary: "test summary",
+ seasons: [
+ {
+ id: 0,
+ name: "Season 1",
+ episode: []
+ },
+ {
+ id: 0,
+ name: "Season 2",
+ episode: []
+ }
+ ]
+};
+
+test("renders testShow and no selected Season without errors", () => {
+ render();
});
-test('renders Loading component when prop show is null', () => {
+test("renders Loading component when prop show is null", () => {
+ render();
+ const loading = screen.queryByTestId("loading-container");
+ expect(loading).toBeInTheDocumeant();
});
-test('renders same number of options seasons are passed in', ()=>{
+test("renders same number of options seasons are passed in", () => {
+ render();
+ const seaseonOptions = screen.queryAllByTestId("season-option");
+ expect(seasoningOptions).toHaveLength(2);
});
-test('handleSelect is called when an season is selected', () => {
+test("handleSelect is called when an season is selected", () => {
+ render();
+ const select = screen.getByLabelText(/Select A Season/i);
+ userEvenet.selectOptions;
});
-test('component renders when no seasons are selected and when rerenders with a season passed in', () => {
-});
+test("component renders when no seasons are selected and when rerenders with a season passed in", () => {});
//Tasks:
//1. Build an example data structure that contains the show data in the correct format. A show should contain a name, a summary and an array of seasons, each with a id, name and (empty) list of episodes within them. Use console.logs within the client code if you need to to verify the structure of show data.
@@ -29,4 +52,4 @@ test('component renders when no seasons are selected and when rerenders with a s
//3. Test that the Loading component displays when null is passed into the show prop (look at the Loading component to see how to test for it's existance)
//4. Test that when your test data is passed through the show prop, the same number of season select options appears as there are seasons in your test data.
//5. Test that when an item is selected, the handleSelect function is called. Look at your code to see how to get access to the select Dom element and userEvent reference materials to see how to trigger a selection.
-//6. Test that the episode component DOES NOT render when the selectedSeason props is "none" and DOES render the episode component when the selectedSeason prop has a valid season index.
\ No newline at end of file
+//6. Test that the episode component DOES NOT render when the selectedSeason props is "none" and DOES render the episode component when the selectedSeason prop has a valid season index.