From de29b2ee328de36af68fdf241ac049be5e223f2b Mon Sep 17 00:00:00 2001 From: Rick Date: Sat, 14 Aug 2021 13:06:54 -0500 Subject: [PATCH 01/13] Rick Mansfield's Pull/push Trail for U3.3 M1 Testing React --- .vscode/settings.json | 7 +++++++ README.md | 16 ++++++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..f5cba135 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "workbench.colorCustomizations": { + "activityBar.background": "#0C276E", + "titleBar.activeBackground": "#11379A", + "titleBar.activeForeground": "#FCFCFF" + } +} \ No newline at end of file diff --git a/README.md b/README.md index 06fd745b..455495fc 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,18 @@ This module explored passing props into test components, rerendering components and using mocks to both monitor functional props and override the functionality of external modules. In this project, you will practice each of these practices in the testing of an application that displays TV show data. +- [Unit Testing React Module Project: Stranger Things](#unit-testing-react-module-project-stranger-things) + - [Objectives](#objectives) + - [Introduction](#introduction) + - [Instructions](#instructions) + - [Task 1: Project Set Up](#task-1-project-set-up) + - [Task 2: Project Requirements](#task-2-project-requirements) + - [The Episode Component](#the-episode-component) + - [The Show Component](#the-show-component) + - [The Display Component](#the-display-component) + - [Stretch goals](#stretch-goals) + - [Rick Mansfield's Pull/push trail for Project Testing React](#rick-mansfields-pullpush-trail-for-project-testing-react) + ## Objectives - Understand how to test the effects of passing specific props into a component - Understand how to monitor the behavior of functional mock props. @@ -60,3 +72,7 @@ Get the project fired up and start using it as a user would. Try to go through t - Look up the `TVMaze` API. Add a dropdown with the titles of some other popular shows. Add the user sequence of choosing a different show to fetch data for different shows. - Add React Router, and add the functionality to click an episode and navigate to an episode page. + +## Rick Mansfield's Pull/push trail for Project Testing React + +- [Link for convenience]() From 48dd529a4e67975c914b7d674d96791f2417af6c Mon Sep 17 00:00:00 2001 From: Rick Date: Sat, 14 Aug 2021 13:08:57 -0500 Subject: [PATCH 02/13] Added Pull Req to bottom of README.MD --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 455495fc..5c63ca2a 100644 --- a/README.md +++ b/README.md @@ -75,4 +75,4 @@ Get the project fired up and start using it as a user would. Try to go through t ## Rick Mansfield's Pull/push trail for Project Testing React -- [Link for convenience]() +- [Link for convenience](https://github.com/LambdaSchool/web-module-project-testing-react/pull/65) From fa0cd7be67eb7e9fa03e9aaf9afc5a5eb26b49e8 Mon Sep 17 00:00:00 2001 From: Rick Date: Sat, 14 Aug 2021 13:57:15 -0500 Subject: [PATCH 03/13] update README.md --- .vscode/settings.json | 6 ++-- README.md | 78 ------------------------------------------- 2 files changed, 3 insertions(+), 81 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index f5cba135..031aa104 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,7 +1,7 @@ { "workbench.colorCustomizations": { - "activityBar.background": "#0C276E", - "titleBar.activeBackground": "#11379A", - "titleBar.activeForeground": "#FCFCFF" + "activityBar.background": "#0D3507", + "titleBar.activeBackground": "#124A0A", + "titleBar.activeForeground": "#F3FDF1" } } \ No newline at end of file diff --git a/README.md b/README.md index 5c63ca2a..e69de29b 100644 --- a/README.md +++ b/README.md @@ -1,78 +0,0 @@ -# Unit Testing React Module Project: Stranger Things - -This module explored passing props into test components, rerendering components and using mocks to both monitor functional props and override the functionality of external modules. In this project, you will practice each of these practices in the testing of an application that displays TV show data. - -- [Unit Testing React Module Project: Stranger Things](#unit-testing-react-module-project-stranger-things) - - [Objectives](#objectives) - - [Introduction](#introduction) - - [Instructions](#instructions) - - [Task 1: Project Set Up](#task-1-project-set-up) - - [Task 2: Project Requirements](#task-2-project-requirements) - - [The Episode Component](#the-episode-component) - - [The Show Component](#the-show-component) - - [The Display Component](#the-display-component) - - [Stretch goals](#stretch-goals) - - [Rick Mansfield's Pull/push trail for Project Testing React](#rick-mansfields-pullpush-trail-for-project-testing-react) - -## Objectives -- Understand how to test the effects of passing specific props into a component -- Understand how to monitor the behavior of functional mock props. -- Understand how and when to test using the rerender method -- Learn how to mock the use an external module - -## Introduction -As a developer, you will often be asked to write tests for the feature you are building and even on features other developers have built. In this project, we will mimic a situation where you are asked to test someone else's code. - -Get the project fired up and start using it as a user would. Try to go through the user sequences for this feature that you think users would go through. Once you have those in mind, you will have an idea of what to test in your application. - -![Stranger Example](project_example.gif) - -***Make sure to complete your tasks one at a time and complete test each task before proceeding forward.*** - -## Instructions -### Task 1: Project Set Up -* [ ] Create a forked copy of this project. -* [ ] Clone your OWN version of the repository in your terminal -* [ ] cd into the project base directory `cd web-module-project-reducer-pattern` -* [ ] Download project dependencies by running `npm install` -* [ ] Start up the app using `npm start` -- [ ] With each saved change in your editor, the test runner will re-run all the tests -- [ ] **IMPORTANT** If a test fails, use the test runner's error messages to find out why it is failing - -### Task 2: Project Requirements -#### The Episode Component -> *This component displays a single episode worth of data. To test it, let's try our some different varieties on what we should pass into our component's props.* - -* [ ] Complete a test that shows the Episode component renders. Pass in the provided example episode data as a test prop. -* [ ] 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 at least then 3 different types of expect statements to test the the existence of the summary value.** -* [ ] 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'. - -### The Show Component -> *This component holds all general information on our featured show. Here we will once again work with data props, mock a function for testing and rerender our component for a change in data.* - -* [ ] 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 an (empty) list of episodes within them. Use console.logs within the client code if you need to to verify the structure of show data. -* [ ] Test that the Show component renders when your test data is passed in through show prop and "none" is passed in through selectedSeason prop. -* [ ] 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 existence) -* [ ] Test that when your test data is passed through the show prop, the same number of season select options appear as there are seasons within your test data. -* [ ] 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](https://testing-library.com/docs/ecosystem-user-event/) to see how to trigger a selection. -* [ ] 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. - -### The Display Component -> *This component holds the state values of the application and handles api calls. In this component's tests, you work with mocking external modules and working with async / await / waitFor* -* [ ] Test that the Display component renders without any passed in props. -* [ ] Rebuild or copy the show test data element as used in the previous set of tests. -* [ ] Test that when the fetch button is pressed, the show component will display. Make sure to account for the api call and change of state in building your test. -* [ ] Test that when the fetch button is pressed, the amount of select options rendered is equal to the amount of seasons in your test data. -* [ ] Notice the optional functional prop passed in to the Display component client code. Test that when the fetch button is pressed, this function is called. - -### Stretch goals - -- Add in a testing suite for the episodes component. - -- Look up the `TVMaze` API. Add a dropdown with the titles of some other popular shows. Add the user sequence of choosing a different show to fetch data for different shows. - -- Add React Router, and add the functionality to click an episode and navigate to an episode page. - -## Rick Mansfield's Pull/push trail for Project Testing React - -- [Link for convenience](https://github.com/LambdaSchool/web-module-project-testing-react/pull/65) From 47ec636c254fc2960e2d823fd432d2f93db89299 Mon Sep 17 00:00:00 2001 From: Rick Date: Sun, 15 Aug 2021 13:23:12 -0500 Subject: [PATCH 04/13] Completed all Episode.test.js test --- src/components/tests/Episode.test.js | 38 ++++++++++++++++++++++------ 1 file changed, 30 insertions(+), 8 deletions(-) diff --git a/src/components/tests/Episode.test.js b/src/components/tests/Episode.test.js index 24b4c2dc..aa86aa78 100644 --- a/src/components/tests/Episode.test.js +++ b/src/components/tests/Episode.test.js @@ -8,27 +8,49 @@ const testEpisode = { image: "http://static.tvmaze.com/uploads/images/medium_landscape/67/168918.jpg", season: 1, number: 1, - summary: "", + summary: "Test for Passing Text Correctly", runtime: 1 } const testEpisodeWithoutImage = { //Add in approprate test data structure here. + id:1, + name: "", + image: null, + season: 1, + number: 1, + summary: "", + runtime: 1 } - +//1. Complete a test that shows the Episode component renders. Pass in the provided example episode data as a test prop. test("renders without error", () => { - + render() }); +//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. test("renders the summury test passed as prop", ()=>{ - + //Arrange + //Also See Above //Add in appropriate test data to testEpisode summary + render() + + //Act (Const's to find data) + const summary = screen.queryByText(/Test for Passing Text Correctly/i); + //Assert + expect(summary).toHaveTextContent(/Test for Passing Text Correctly/i); + expect(summary).toBeTruthy(); + expect(summary).toBeInTheDocument(); }); + +//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'. test("renders default image when image is not defined", ()=>{ + //Arrange (render) + render(); + //Action (const/screen) + const image = screen.getByAltText("./stranger_things.png"); + //Assert (expect) + expect(image).toBeInTheDocument(); + expect(image).toBeTruthy(); }) -//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 From 21d72085f5d55a764d10f0436b4e76d84f082585 Mon Sep 17 00:00:00 2001 From: Rick Date: Sun, 15 Aug 2021 14:32:31 -0500 Subject: [PATCH 05/13] update readme.md --- README.md | 118 +++++++++++++++++++++++++++++++++++++++++++ src/api/fetchShow.js | 2 +- 2 files changed, 119 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e69de29b..8149699b 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,118 @@ +# Unit Testing React Module Project: Stranger Things + +This module explored passing props into test components, rerendering components and using mocks to both monitor functional props and override the functionality of external modules. In this project, you will practice each of these practices in the testing of an application that displays TV show data. + +- [Unit Testing React Module Project: Stranger Things](#unit-testing-react-module-project-stranger-things) + - [Objectives](#objectives) + - [Introduction](#introduction) + - [Instructions](#instructions) + - [Task 1: Project Set Up](#task-1-project-set-up) + - [Task 2: Project Requirements](#task-2-project-requirements) + - [The Episode Component](#the-episode-component) + - [The Show Component](#the-show-component) + - [The Display Component](#the-display-component) + - [Stretch goals](#stretch-goals) + - [Rick Mansfield's Pull/push trail for Project Testing React](#rick-mansfields-pullpush-trail-for-project-testing-react) + - [class Questions](#class-questions) + - [Questions to ask yourself to create good Tests](#questions-to-ask-yourself-to-create-good-tests) + - [What are some Possible unit Tests for MissionFrom.js?](#what-are-some-possible-unit-tests-for-missionfromjs) + - [Arrange Act Assert](#arrange-act-assert) + +## Objectives +- Understand how to test the effects of passing specific props into a component +- Understand how to monitor the behavior of functional mock props. +- Understand how and when to test using the rerender method +- Learn how to mock the use an external module + +## Introduction +As a developer, you will often be asked to write tests for the feature you are building and even on features other developers have built. In this project, we will mimic a situation where you are asked to test someone else's code. + +Get the project fired up and start using it as a user would. Try to go through the user sequences for this feature that you think users would go through. Once you have those in mind, you will have an idea of what to test in your application. + +![Stranger Example](project_example.gif) + +***Make sure to complete your tasks one at a time and complete test each task before proceeding forward.*** + +## Instructions +### Task 1: Project Set Up +* [ ] Create a forked copy of this project. +* [ ] Clone your OWN version of the repository in your terminal +* [ ] cd into the project base directory `cd web-module-project-reducer-pattern` +* [ ] Download project dependencies by running `npm install` +* [ ] Start up the app using `npm start` +- [ ] With each saved change in your editor, the test runner will re-run all the tests +- [ ] **IMPORTANT** If a test fails, use the test runner's error messages to find out why it is failing + +### Task 2: Project Requirements +#### The Episode Component +> *This component displays a single episode worth of data. To test it, let's try our some different varieties on what we should pass into our component's props.* + +* [ ] Complete a test that shows the Episode component renders. Pass in the provided example episode data as a test prop. +* [ ] 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 at least then 3 different types of expect statements to test the the existence of the summary value.** +* [ ] 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'. + +### The Show Component +> *This component holds all general information on our featured show. Here we will once again work with data props, mock a function for testing and rerender our component for a change in data.* + +* [ ] 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 an (empty) list of episodes within them. Use console.logs within the client code if you need to to verify the structure of show data. +* [ ] Test that the Show component renders when your test data is passed in through show prop and "none" is passed in through selectedSeason prop. +* [ ] 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 existence) +* [ ] Test that when your test data is passed through the show prop, the same number of season select options appear as there are seasons within your test data. +* [ ] 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](https://testing-library.com/docs/ecosystem-user-event/) to see how to trigger a selection. +* [ ] 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. + +### The Display Component +> *This component holds the state values of the application and handles api calls. In this component's tests, you work with mocking external modules and working with async / await / waitFor* +* [ ] Test that the Display component renders without any passed in props. +* [ ] Rebuild or copy the show test data element as used in the previous set of tests. +* [ ] Test that when the fetch button is pressed, the show component will display. Make sure to account for the api call and change of state in building your test. +* [ ] Test that when the fetch button is pressed, the amount of select options rendered is equal to the amount of seasons in your test data. +* [ ] Notice the optional functional prop passed in to the Display component client code. Test that when the fetch button is pressed, this function is called. + +### Stretch goals + +- Add in a testing suite for the episodes component. + +- Look up the `TVMaze` API. Add a dropdown with the titles of some other popular shows. Add the user sequence of choosing a different show to fetch data for different shows. + +- Add React Router, and add the functionality to click an episode and navigate to an episode page. + +## Rick Mansfield's Pull/push trail for Project Testing React + +- [Link for convenience](https://github.com/LambdaSchool/web-module-project-testing-react/pull/65) + +## class Questions +1. **What is end to end testing?** + 1. End-to-end testing is a technique that tests the entire software product from beginning to end to ensure the application flow behaves as expected. It defines the product’s system dependencies and ensures all integrated pieces work together as expected. The main purpose of End-to-end (E2E) testing is to test from the end user’s experience by simulating the real user scenario and validating the system under test and its components for integration and data integrity. End-To-End (E2E) testing is a technique used to test an entire flow as if we were an actual user by simulating their actions (clicks, pressing certain keys, typing into a field, etc). + 2. Simulates a user Clicking through a site + 3. evaluates Entrie Applications + 4. **_Cypress_** + +2. **What is integration Testing , and whay is it used?** [TestingXperts](https://www.testingxperts.com/blog/what-is-integration-testing) + 1. What it is = Integration testing is one of the agile methodologies of software testing where individual components or units of code are tested to validate interactions among different software system modules. In this process, these system components are either tested as a single group or organized iteratively. + 2. Why used = to validate the performance of the entire software system as a whole. + 3. Verify several components work together + 4. Evaluates Application Systems + 5. **_React-Testing-Library_** + +3. **Unit Tests** + 1. Test Individual Functions/components + 2. Evaluates Small Units of Code (not UI) + 3. **_Jest_** +## Questions to ask yourself to create good Tests +1. Does the component render by default without errors? +2. How does the component changed depending on the props passed in? +3. Does the component respond to user input? +4. Does the compnent respont o state change (async calls / redux)? +5. Does the component have error states? + +## What are some Possible unit Tests for MissionFrom.js? +1. Does MissionForm Render Correctly without errors +2. Does it render the message "We are fetching data" correctly when isFetchingData is True? +3. Does the button render correctly when isfetchingData is false? +4. Does it correctly call props.getData() when button is clicked? + +## Arrange Act Assert +1. Arrange: Setup the react components to be tested. +2. Act: Execute the behaviour (if there is one) and extract what is being tested. +3. Assert: Check to see if the expected responses occur. \ No newline at end of file diff --git a/src/api/fetchShow.js b/src/api/fetchShow.js index ab70e5bc..4702cac6 100644 --- a/src/api/fetchShow.js +++ b/src/api/fetchShow.js @@ -23,7 +23,7 @@ const formatSeasons = (allEpisodes) => { const fetchShow = () => { return axios - .get("https://api.tvmaze.com/singlesearch/shows?q=stranger-things&embed=episodes") + .get("https://api.tvmaze.com/singlesearch/shows?q=stranger+things&embed=episodes") .then(res => { const { data } = res; From c62817967b16b8ded5f4ffec698fb4012f554f50 Mon Sep 17 00:00:00 2001 From: Rick Date: Sun, 15 Aug 2021 15:00:27 -0500 Subject: [PATCH 06/13] Correct URL in fetchShow.js & Comment Showtest.js --- src/api/fetchShow.js | 2 +- src/components/tests/Show.test.js | 24 ++++++++++++++++++++++-- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/api/fetchShow.js b/src/api/fetchShow.js index 4702cac6..05408b3c 100644 --- a/src/api/fetchShow.js +++ b/src/api/fetchShow.js @@ -26,7 +26,7 @@ const fetchShow = () => { .get("https://api.tvmaze.com/singlesearch/shows?q=stranger+things&embed=episodes") .then(res => { const { data } = res; - + console.log('FETSH SHOW DATA',data); return { name: data.name, image: data.image, diff --git a/src/components/tests/Show.test.js b/src/components/tests/Show.test.js index 5d030167..314fec21 100644 --- a/src/components/tests/Show.test.js +++ b/src/components/tests/Show.test.js @@ -6,8 +6,28 @@ import Show from './../Show'; 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" + }, + summary: "Test Summary blah blah blah", + seasons: [ + {id:0, name: "Test Season 1", episodes: []}, + {id:1, name: "Tet Season 2", episodes: []}, + {id:2, name: "Test Season 3", episodes: []}, + {id:3, name: "Test Season 4", episodes: [{ + id:3, + image: null, + name: "", + number:3, + runtime: 3, + season: 3, + summary: "Text to test if passed or not" + }]}], } - +//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 test('renders testShow and no selected Season without errors', ()=>{ }); @@ -24,7 +44,7 @@ test('component renders when no seasons are selected and when rerenders with a s }); //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. From 36694a59a4a9e57d4c6f617faa35c6043d6c52c4 Mon Sep 17 00:00:00 2001 From: Rick Date: Sun, 15 Aug 2021 15:08:41 -0500 Subject: [PATCH 07/13] update Show.test.js additional guiding comments. --- src/components/tests/Show.test.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/tests/Show.test.js b/src/components/tests/Show.test.js index 314fec21..b93c9ad6 100644 --- a/src/components/tests/Show.test.js +++ b/src/components/tests/Show.test.js @@ -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(); }); 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. From f93c05ee0c5825d427fac6ee1c53fdf993a1cfbb Mon Sep 17 00:00:00 2001 From: Rick Date: Sun, 15 Aug 2021 15:19:21 -0500 Subject: [PATCH 08/13] More comments on Show.test.js Soln#1 --- src/components/tests/Show.test.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/tests/Show.test.js b/src/components/tests/Show.test.js index b93c9ad6..b62e2dce 100644 --- a/src/components/tests/Show.test.js +++ b/src/components/tests/Show.test.js @@ -7,12 +7,14 @@ import Show from './../Show'; //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 + name: "Test Show", summary: "Test Summary blah blah blah", + //note seasons is from fetchShow.js line 34 seasons: formatSeasons(data._embedded.episodes). Which is becuase the res data returns _embedded as episodes: Array seasons: [ {id:0, name: "Test Season 1", episodes: []}, {id:1, name: "Tet Season 2", episodes: []}, From f4cfcc4bf891c514527716f7a91fda498774f639 Mon Sep 17 00:00:00 2001 From: Rick Date: Sun, 15 Aug 2021 15:24:15 -0500 Subject: [PATCH 09/13] Show.test.js Soln#3 Complete. --- src/components/tests/Show.test.js | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/src/components/tests/Show.test.js b/src/components/tests/Show.test.js index b62e2dce..62dcd476 100644 --- a/src/components/tests/Show.test.js +++ b/src/components/tests/Show.test.js @@ -36,22 +36,35 @@ test('renders testShow and no selected Season without errors', ()=>{ render(); }); + +//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) test('renders Loading component when prop show is null', () => { + //Arrange + render(); + //Act + const loadingComponent = screen.getByTestId("loading-container"); + //Assert + expect(loadingComponent).toBeInTheDocument(); + expect(loadingComponent).toBeTruthy(); + expect(loadingComponent).toHaveTextContent(/fetching data.../i); + }); + +//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. test('renders same number of options seasons are passed in', ()=>{ }); +//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. test('handleSelect is called when an season is selected', () => { }); +//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. test('component renders when no seasons are selected and when rerenders with a season passed in', () => { }); -//Tasks: -//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 + + + From 04cb9fb44907503012987821e1bd0a6af43c414d Mon Sep 17 00:00:00 2001 From: Rick Date: Sun, 15 Aug 2021 15:55:46 -0500 Subject: [PATCH 10/13] Completed Test 5 with jest --- src/components/tests/Show.test.js | 58 ++++++++++++++++++++++--------- 1 file changed, 42 insertions(+), 16 deletions(-) diff --git a/src/components/tests/Show.test.js b/src/components/tests/Show.test.js index 62dcd476..dfd7721e 100644 --- a/src/components/tests/Show.test.js +++ b/src/components/tests/Show.test.js @@ -7,32 +7,34 @@ import Show from './../Show'; //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. - + 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 + },//I retrieved this image data from the chrome console from the res data name: "Test Show", summary: "Test Summary blah blah blah", //note seasons is from fetchShow.js line 34 seasons: formatSeasons(data._embedded.episodes). Which is becuase the res data returns _embedded as episodes: Array seasons: [ - {id:0, name: "Test Season 1", episodes: []}, - {id:1, name: "Tet Season 2", episodes: []}, - {id:2, name: "Test Season 3", episodes: []}, - {id:3, name: "Test Season 4", episodes: [{ - id:3, - image: null, - name: "", - number:3, - 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. + { id: 0, name: "Test Season 1", episodes: [] }, + { id: 1, name: "Tet Season 2", episodes: [] }, + { id: 2, name: "Test Season 3", episodes: [] }, + { + id: 3, name: "Test Season 4", episodes: [{ + id: 3, + image: null, + name: "", + number: 3, + 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. } //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', ()=>{ +test('renders testShow and no selected Season without errors', () => { render(); }); @@ -52,15 +54,39 @@ test('renders Loading component when prop show is null', () => { //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. -test('renders same number of options seasons are passed in', ()=>{ +test('renders same number of options seasons are passed in', () => { + //Arrange - render + render(); + //Act - const/screen + const seasonSelection = screen.getAllByTestId("season-option");//found in Show.js + //Assert - expect + expect(seasonSelection.length).toBe(4); + expect(seasonSelection.length === 4).toBeTruthy(); +}); + +//My Own extra test out of curiosity... +test('Episode component is not loaded when no season is selected', () => { + render(); + const theEpisodeDiv = document.getElementsByClassName("episode"); + expect(theEpisodeDiv.length).toBe(0); }); //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. test('handleSelect is called when an season is selected', () => { + //Arrange - render - becomes a mock function as the prop this time. + const mockHandleSelect = jest.fn(() => { return ("TEST") }); + render(); + //Act - const/screen - could pick anything. Tried Season 3. + const season3Option = screen.getByTestId("seasons");//had to add data-testid="seasons" to Show.js line 16 + //Assert - expect + userEvent.selectOptions(season3Option, [2]); }); //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. test('component renders when no seasons are selected and when rerenders with a season passed in', () => { + //Arrange + //Act + //Assert }); From e808b3b89a0f31205c5337c8d851e32d98bbe3a0 Mon Sep 17 00:00:00 2001 From: Rick Date: Sun, 15 Aug 2021 16:05:45 -0500 Subject: [PATCH 11/13] Show.test.js All Tests complete and passing --- src/components/tests/Show.test.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/components/tests/Show.test.js b/src/components/tests/Show.test.js index dfd7721e..2b333b52 100644 --- a/src/components/tests/Show.test.js +++ b/src/components/tests/Show.test.js @@ -85,8 +85,18 @@ test('handleSelect is called when an season is selected', () => { //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. test('component renders when no seasons are selected and when rerenders with a season passed in', () => { //Arrange + const { rerender } = render(); //Act + let episodeDiv = document.getElementsByClassName("episode"); //Assert + expect(episodeDiv.length).toBe(0); + + //Arrange + rerender()//remember above I selected season 3 + //Act + episodeDiv = document.getElementsByClassName("episode");//already defined above useing let + //Assert + expect(episodeDiv.length).toBe(1); }); From 13a24facc139572a319139b7f425acfdba3e49ca Mon Sep 17 00:00:00 2001 From: Rick Date: Sun, 15 Aug 2021 16:07:25 -0500 Subject: [PATCH 12/13] added data-testid="seasons" to Show.js --- src/components/Show.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Show.js b/src/components/Show.js index 1cd25f06..a4a00b6c 100644 --- a/src/components/Show.js +++ b/src/components/Show.js @@ -13,7 +13,7 @@ const Show = (props) => {

{show.summary}


- { show.seasons.map(season=>{ From 1c7afccfc1c8848931586cfaa40d3a739764b1ed Mon Sep 17 00:00:00 2001 From: Rick Date: Sun, 15 Aug 2021 16:11:52 -0500 Subject: [PATCH 13/13] Added soln Display.test.js all suites tests pass --- src/components/tests/Display.test.js | 74 ++++++++++++++++++++++++++-- 1 file changed, 69 insertions(+), 5 deletions(-) diff --git a/src/components/tests/Display.test.js b/src/components/tests/Display.test.js index 5a01416b..79729657 100644 --- a/src/components/tests/Display.test.js +++ b/src/components/tests/Display.test.js @@ -1,15 +1,79 @@ +import React from 'react'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import Display from './../Display'; +// mockFetchShow is used in the last 2 tests, where it is called indirectly +import mockFetchShow from '../../api/fetchShow'; +jest.mock('../../api/fetchShow'); +//3. Rebuild or copy a show test data element as used in the previous set of tests. +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" + }, + seasons: [{id: 0, name: "Test Season 1", episodes: []}, + {id: 1, name: "Test Season 2", episodes: [{ + //Add in approprate test data structure here. + id:1, + name: "", + image: null, + season: 1, + number: 1, + summary: "Text to test if correct content is passed.", + runtime: 1 + }]}, + {id: 2, name: "Test Season 3", episodes: []}], + summary: "Test summary text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi pariatur ratione quos itaque, tempore dolore iste aut veritatis provident dolorem debitis, amet accusamus, quam adipisci distinctio quod eligendi similique ipsum!" +} +//2. Test that the Display component renders without any passed in props. +test('Display component renders without any passed in props', ()=>{ + render(); + const imageSelector = screen.queryByAltText("header image"); + expect(imageSelector).toBeInTheDocument(); +}); +//4. Test that when the fetch button is pressed, the show component will display. Make sure to account for the api call and change of state in building your test. +test('when the fetch button is pressed, the show component will display with correct # of seasons', async ()=>{ + // Arrange + render(); + mockFetchShow.mockResolvedValueOnce(testShow); + // Act + const button = screen.getByRole("button"); + userEvent.click(button); + // Assert the show-container div displays + await waitFor(()=> { + const showContainer = screen.getByTestId("show-container"); + expect(showContainer).toBeInTheDocument(); + }); +//5. Test that when the fetch button is pressed, the amount of select options rendered is equal to the amount of seasons in your test data. + // Assert number of seasons equal to test data (3) + const seasonOptions = screen.getAllByTestId("season-option"); + expect(seasonOptions).toHaveLength(3); +}); +test("calls displayFunc when button is clicked", async ()=>{ + mockFetchShow.mockResolvedValue(testShow); + const mockDisplayFunc = jest.fn(); + //Arrange: renders component + render() + //Act: Click button + const button = screen.getByRole("button"); + userEvent.click(button); - - - - - + // //Assert: ? + await waitFor(()=>{ + expect(mockDisplayFunc.mock.calls.length === 1).toBeTruthy(); + expect(mockDisplayFunc.mock.calls.length).toBe(1); + expect(mockDisplayFunc.mock.calls).toHaveLength(1); + expect(mockDisplayFunc).toHaveBeenCalled(); + }); +});