From e3fef8530368fb3a603125ffecd4c5104a17ce0a Mon Sep 17 00:00:00 2001 From: Bimisola Daniel Date: Tue, 17 Aug 2021 13:46:01 +0100 Subject: [PATCH 1/3] stated changing things --- src/components/Episodes.test.js | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/components/Episodes.test.js diff --git a/src/components/Episodes.test.js b/src/components/Episodes.test.js new file mode 100644 index 00000000..365c52dc --- /dev/null +++ b/src/components/Episodes.test.js @@ -0,0 +1,5 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; + +import Episode from "./Episode"; From 5009146c710b270aa88e74b7ca0dcf13960d307b Mon Sep 17 00:00:00 2001 From: Bimisola Daniel Date: Thu, 19 Aug 2021 04:25:50 +0100 Subject: [PATCH 2/3] trying --- src/components/Episode.js | 38 +++++++++++--------- src/components/Episodes.test.js | 5 --- src/components/Show.test.js | 0 src/components/tests/Episode.test.js | 54 +++++++++++++++++----------- 4 files changed, 54 insertions(+), 43 deletions(-) delete mode 100644 src/components/Episodes.test.js create mode 100644 src/components/Show.test.js diff --git a/src/components/Episode.js b/src/components/Episode.js index 101b3f4e..1a117678 100644 --- a/src/components/Episode.js +++ b/src/components/Episode.js @@ -1,20 +1,24 @@ -import React from 'react'; +import React from "react"; -const Episode = (props)=> { - const {episode} = props; - const {id, image, name, season, number, summary, runtime} = episode; - const imgsrc = image || './stranger_things.png'; +const Episode = props => { + const { episode } = props; + const { id, image, name, season, number, summary, runtime } = episode; + const imgsrc = image || "./stranger_things.png"; - return(
- {imgsrc} -
-

Season {season}, Episode {number}

-

{name}

-

{summary}

-
-

{runtime} minutes

-
-
) -} + return ( +
+ {imgsrc} +
+

+ Season {season}, Episode {number} +

+

{name}

+

{summary}

+
+

{runtime} minutes

+
+
+ ); +}; -export default Episode; \ No newline at end of file +export default Episode; diff --git a/src/components/Episodes.test.js b/src/components/Episodes.test.js deleted file mode 100644 index 365c52dc..00000000 --- a/src/components/Episodes.test.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from "react"; -import { render, screen } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; - -import Episode from "./Episode"; diff --git a/src/components/Show.test.js b/src/components/Show.test.js new file mode 100644 index 00000000..e69de29b 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'. From c394a7004b905a6b2581c904ea4b30fd39997b6a Mon Sep 17 00:00:00 2001 From: ModupeD Date: Fri, 3 Sep 2021 06:09:17 +0100 Subject: [PATCH 3/3] submitted --- src/components/Show.js | 58 ++++++++++++++++++------------- src/components/Show.test.js | 0 src/components/tests/Show.test.js | 51 +++++++++++++++++++-------- 3 files changed, 70 insertions(+), 39 deletions(-) delete mode 100644 src/components/Show.test.js 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/Show.test.js b/src/components/Show.test.js deleted file mode 100644 index e69de29b..00000000 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.