diff --git a/frontend/components/tests/App.test.js b/frontend/components/tests/App.test.js index f1f6de28..b6f1efb5 100644 --- a/frontend/components/tests/App.test.js +++ b/frontend/components/tests/App.test.js @@ -17,10 +17,12 @@ describe('Stranger Things App', () => { }) test('App mounts without crashing', () => { // 👉 TASK: print the simulated DOM using screen.debug + screen.debug() }) test('App renders the correct texts', async () => { // 👉 TASK: click on the button that displays "Press to Get Show Data" - + await user.click(screen.getByText('Press to Get Show Data')) + // 👉 TASK: create a waitFor and await for the following to be true: // - The text "Press to Get Show Data" is no longer in the DOM // - The text "Stranger Things" exists in the DOM @@ -28,16 +30,29 @@ describe('Stranger Things App', () => { // - The text "Select A Season" exists in the DOM // ❗ You will need { exact: false } to select the longer text + await waitFor(() => { + expect(screen.queryByText('Press to Get Show Data')).not.toBeInTheDocument() + expect(screen.getByText('Stranger Things')).toBeInTheDocument() + expect(screen.getByText("A love letter to the '80s classics that captivated a generation", { exact: false })).toBeInTheDocument() + expect(screen.getByText('Select A Season')).toBeInTheDocument() + }) + // 👉 TASK: select Season 2 from the dropdown // ❗ Don't forget user actions need the await keyword // ❗ Use the selectOptions user action // ❗ Grab the select element using querySelector + await user.selectOptions(document.querySelector('select'), '1') + + screen.debug() // 👉 TASK: create the following assertions: // - The text "Season 2, Episode 1" exists in the DOM // - The text "Chapter One: MADMAX" exists in the DOM // - The text "One year after the events with the Upside Down and the Demogorgon" exists in the DOM // ❗ You will need { exact: false } to select the longer text - + screen.getByText("Season 2, Episode 1") + screen.getByText("Chapter One: MADMAX") + screen.getByText("One year after the events with the \ +Upside Down and the Demogorgon", {exact: false}) }) -}) +}) \ No newline at end of file diff --git a/frontend/components/tests/Episode.test.js b/frontend/components/tests/Episode.test.js index 34ebe627..68325d40 100644 --- a/frontend/components/tests/Episode.test.js +++ b/frontend/components/tests/Episode.test.js @@ -26,29 +26,42 @@ their own search, and meet a mysterious girl in the forest.", describe('Episode component', () => { test("renders without error", () => { // 👉 TASK: render the component passing episode data + render() // 👉 TASK: print the simulated DOM using screen.debug - + }) test("renders texts and alt texts correctly", () => { // 👉 TASK: render the component passing episode data and getting the rerender utility - + const {rerender} = render() + // 👉 TASK: check that the summary renders to the DOM - + screen.getByText(exampleEpisodeData.summary) + // 👉 TASK: check that the alt text "episode image" is present - + screen.getByAltText('episode image') + // 👉 TASK: rerender the component passing episode data lacking an image // ❗ Study the Episode component to understand what happens in this case - + const {image, ...rest} = exampleEpisodeData + rerender() + // 👉 TASK: check that the default image appears in the DOM // ❗ Use querySelector to select the image by its src attribute - + expect(document.querySelector('img[src="https://i.ibb.co/2FsfXqM/stranger-things.png"]')).toBeInTheDocument() + // 👉 TASK: check that the "generic episode image" alt text is present - + screen.getAllByAltText('generic episode image') + + // 👉 TASK: rerender the component passing an undefined episode + rerender() + // ❗ Study the Episode component to understand what happens in this case - + // 👉 TASK: check that the "Loading episode..." text is present - + screen.getByText('Loading episode...') + + screen.debug() }) -}) +}) \ No newline at end of file