Skip to content
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.

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

Rick Mansfield's Pull/push Trail for U3.3 M1 Testing React #65

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Prev Previous commit
Next Next commit
update Show.test.js additional guiding comments.
Rick committed Aug 15, 2021
commit 36694a59a4a9e57d4c6f617faa35c6043d6c52c4
15 changes: 9 additions & 6 deletions src/components/tests/Show.test.js
Original file line number Diff line number Diff line change
@@ -3,14 +3,15 @@ import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import Show from './../Show';

//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.
//NOTE NOTE NOTE I had to console.log('FETSH SHOW DATA',data); on line 29 of fetchShow.js to get the proper structure. I started by mimicking the format from lines 24-37 of fetchShow.js and expanding that to inclue the data I found on the console.log
const testShow = {
//add in approprate test data structure here.
name: "Test Show",
image: {
medium: "https://static.tvmaze.com/uploads/images/medium_portrait/200/501942.jpg",
original: "https://static.tvmaze.com/uploads/images/original_untouched/200/501942.jpg"
},
},//I retrieved this image data from the chrome console from the res data
summary: "Test Summary blah blah blah",
seasons: [
{id:0, name: "Test Season 1", episodes: []},
@@ -24,11 +25,13 @@ const testShow = {
runtime: 3,
season: 3,
summary: "Text to test if passed or not"
}]}],
}]}],//the res data has more to it but this is all our app is useing. I put it in the same order as the chrome console.log of the response data just as can see it there on in postman.
}
//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.
//NOTE NOTE NOTE I had to console.log('FETSH SHOW DATA',data); on line 29 of fetchShow.js to get the proper structure. I started by mimicking the format from lines 24-37 of fetchShow.js and expanding that to inclue the data I found on the console.log


//2. Test that the Show component renders when your test data is passed in through show and "none" is passed in through selectedSeason.
test('renders testShow and no selected Season without errors', ()=>{
render(<Show show={testShow} selectedSeason="none" />);
});

test('renders Loading component when prop show is null', () => {
@@ -45,7 +48,7 @@ test('component renders when no seasons are selected and when rerenders with a s

//Tasks:

//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.