exercise 05

Author: Peter Hozak

08-testing-hooks/README.md

@@ -20,7 +20,7 @@ yarn test
 
 - https://reactjs.org/docs/thinking-in-react.html
 - https://reactjs.org/docs/hooks-intro.html
-- https://reactjs.org/docs/testing-recipes.html#events
+- https://reactjs.org/docs/testing-recipes.html
 
 Questions possible at any time.
 

08-testing-hooks/src/04/04-exercise.js

@@ -10,7 +10,7 @@ const Main = () => {
 
   return (
     <div className="Main">
-      <h3>Adding State</h3>
+      <h3>Libraries for testing</h3>
       <input placeholder={defaultColor} value={color} onChange={handleChange} />
       <div className="Main-box" style={{ backgroundColor: color || defaultColor }} />
     </div>

08-testing-hooks/src/04/04-solution.js

@@ -10,7 +10,7 @@ const Main = () => {
 
   return (
     <div className="Main">
-      <h3>Adding State</h3>
+      <h3>Libraries for testing</h3>
       <input placeholder={defaultColor} value={color} onChange={handleChange} />
       <div className="Main-box" style={{ backgroundColor: color || defaultColor }} />
     </div>

08-testing-hooks/src/05/05-exercise.js

@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react'
+
+const Main = () => {
+  const [color, setColor] = useState('orange')
+
+  // useEffect(() => {
+  //   window.fetch('https://jsonplaceholder.typicode.com/users/1').then((data) => {
+  //     setColor('green')
+  //   })
+  // }, [])
+
+  useEffect(() => {
+    const fetchPromise = window.fetch('https://jsonplaceholder.typicode.com/users/1')
+    const timeoutPromise = new Promise((resolve, reject) => {
+      setTimeout(reject, 1000)
+    })
+    Promise.race([fetchPromise, timeoutPromise]).then((data) => {
+      setColor('green')
+    }).catch(() => {
+      setColor('red')
+    })
+  }, [])
+
+  return (
+    <div className="Main">
+      <h3>Fetch and timeout</h3>
+      <div className="Main-box" style={{ backgroundColor: color }} />
+    </div>
+  )
+}
+
+export default Main

08-testing-hooks/src/05/05-exercise.test.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { render, unmountComponentAtNode } from 'react-dom'
+import { act } from "react-dom/test-utils"
+import Main from './05-exercise'
+
+let div
+beforeEach(() => {
+  div = document.createElement('div')
+  document.body.appendChild(div)
+})
+afterEach(() => {
+  unmountComponentAtNode(div)
+  div.remove()
+})
+
+test('default color', () => {
+  act(() => {
+    render(<Main />, div)
+  })
+  expect(div.querySelector('.Main-box').style.backgroundColor).toBe('orange')
+})
+
+test('modified color', () => {
+  // ???
+})

08-testing-hooks/src/05/05-solution.js

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react'
+
+const Main = () => {
+  const [color, setColor] = useState('orange')
+
+  useEffect(() => {
+    const fetchPromise = window.fetch('https://jsonplaceholder.typicode.com/users/1')
+    let cancellable
+    const timeoutPromise = new Promise((resolve, reject) => {
+      cancellable = setTimeout(reject, 1000)
+    })
+    Promise.race([fetchPromise, timeoutPromise]).then((data) => {
+      setColor('green')
+    }).catch(() => {
+      setColor('red')
+    })
+    return () => {
+      clearTimeout(cancellable)
+    }
+  }, [])
+
+  return (
+    <div className="Main">
+      <h3>Fetch and timeout</h3>
+      <div className="Main-box" style={{ backgroundColor: color }} />
+    </div>
+  )
+}
+
+export default Main

08-testing-hooks/src/05/05-solution.test.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import { render, unmountComponentAtNode } from 'react-dom'
+import { act } from "react-dom/test-utils"
+import Main from './05-solution'
+
+jest.useFakeTimers()
+
+let div
+beforeEach(() => {
+  div = document.createElement('div')
+  document.body.appendChild(div)
+})
+afterEach(() => {
+  unmountComponentAtNode(div)
+  div.remove()
+})
+
+test('default color', () => {
+  act(() => {
+    render(<Main />, div)
+  })
+  expect(div.querySelector('.Main-box').style.backgroundColor).toBe('orange')
+})
+
+test('success', async () => {
+  jest.spyOn(global, "fetch").mockImplementation(() =>
+    Promise.resolve({
+      json: () => Promise.resolve({ id: 0, name: 'John' })
+    })
+  );
+
+  await act(async () => {
+    render(<Main />, div)
+  })
+  expect(div.querySelector('.Main-box').style.backgroundColor).toBe('green')
+
+  global.fetch.mockRestore()
+})
+
+test('timeout', async () => {
+  await act(async () => {
+    render(<Main />, div)
+    jest.advanceTimersByTime(1000)
+  })
+  expect(div.querySelector('.Main-box').style.backgroundColor).toBe('red')
+})

08-testing-hooks/src/App.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-const prefixes = Array.from(Array(4)).map((_, i) => `0${i + 1}`)
+const prefixes = Array.from(Array(5)).map((_, i) => `0${i + 1}`)
 const links = prefixes.map((i) =>
   <li key={i}>
     {i}: <a href={`#${i}-exercise`} id={`${i}-exercise`}>exercise</a>

08-testing-hooks/src/index.css

@@ -68,4 +68,5 @@ input {
   display: flex;
   justify-content: center;
   align-items: center;
+  transition: 200ms;
 }