Skip to content

Modupe d #85

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Modupe d #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e3fef85
stated changing things
Aug 17, 2021
5009146
trying
Aug 19, 2021
c394a70
submitted
ModupeD Sep 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 21 additions & 17 deletions src/components/Episode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(<div className="episode" key={id}>
<img className="episode-image" src={imgsrc} alt={imgsrc} />
<div className="episode-info">
<p className="episode-number">Season {season}, Episode {number}</p>
<h3>{name}</h3>
<p>{summary}</p>
<div className="flex-spacer" />
<p className="episode-runtime">{runtime} minutes</p>
</div>
</div>)
}
return (
<div className="episode" key={id}>
<img className="episode-image" src={imgsrc} alt={imgsrc} />
<div className="episode-info">
<p className="episode-number">
Season {season}, Episode {number}
</p>
<h3>{name}</h3>
<p>{summary}</p>
<div className="flex-spacer" />
<p className="episode-runtime">{runtime} minutes</p>
</div>
</div>
);
};

export default Episode;
export default Episode;
58 changes: 33 additions & 25 deletions src/components/Show.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <Loading />
const Show = props => {
const { handleSelect, selectedSeason, show } = props;

return(<div data-testid="show-container">
<h1>{show.name}</h1>
<p>{show.summary}</p>
if (!show) return <Loading />;

<label htmlFor="seasons">Select A Season</label><br/>
<select onChange={handleSelect} name="seasons" id="seasons">
<option value="none"></option>
{
show.seasons.map(season=>{
return(<option data-testid="season-option" key={season.id} value={season.id}>{season.name}</option>);
})
}
</select>
return (
<div data-testid="show-container">
<h1>{show.name}</h1>
<p>{show.summary}</p>

{
(selectedSeason !== "none") && <Episodes episodes={show.seasons[selectedSeason].episodes} />
}
</div>);
}
<label htmlFor="seasons">Select A Season</label>
<br />
<select onChange={handleSelect} name="seasons" id="seasons">
<option value="none"></option>
{show.seasons.map(season => {
return (
<option
data-testid="season-option"
key={season.id}
value={season.id}
>
{season.name}
</option>
);
})}
</select>

export default Show;
{selectedSeason !== "none" && (
<Episodes episodes={show.seasons[selectedSeason].episodes} />
)}
</div>
);
};

export default Show;
54 changes: 33 additions & 21 deletions src/components/tests/Episode.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(<Episode episode={testEpisode} />);
});

test("renders the summury test passed as prop", ()=>{

});
test("renders the summury test passed as prop", () => {
render(<Episode episode={testEpisode} />);
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(<Episode episode={testEpisodeWithoutImage} />);
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'.
//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'.
51 changes: 37 additions & 14 deletions src/components/tests/Show.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,55 @@
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(<Show show={testShow} selectedSeason={"none"} />);
});

test('renders Loading component when prop show is null', () => {
test("renders Loading component when prop show is null", () => {
render(<Show loading={null} />);
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(<Show show={testShow} selectedSeason={"none"} />);
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(<Show show={testShow} selectedSeason={"none"} />);
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.
//2. Test that the Show component renders when your test data is passed in through show and "none" is passed in through selectedSeason.
//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.
//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.