Main

frontend/components/tests/App.test.js

@@ -17,27 +17,42 @@ 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
     //    - The text "A love letter to the '80s classics that captivated a generation" exists in the DOM
     //    - 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}) 
   })
-})
+})

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(<Episode episode={exampleEpisodeData}/>)
 
     // 👉 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(<Episode episode={exampleEpisodeData}/>)
+
     // 👉 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(<Episode episode = {rest}/>)
+
     // 👉 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(<Episode/>)
+
     // ❗ 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()
   })
-})
+})