add tests for 01

Author: Peter Hozak

08-testing-hooks/README.md

@@ -11,47 +11,62 @@ yarn
 yarn start
 ```
 
+And in a separate terminal window:
+```
+yarn test
+```
+
 ## 00 introduction
 
+- https://reactjs.org/docs/thinking-in-react.html
 - https://reactjs.org/docs/hooks-intro.html
+- https://reactjs.org/docs/testing-recipes.html#events
+
+## 01 testing useState
+> [src/01](src/01)
 
-> Following is a list of TODO items, not course content yet:
+Starting with a stateless component with a test:
+- add state to component - render background color based on the input value
+- update test
 
-## 01 testing useState (exercise)
 
-- code+test without useState
-- add state to component
-- add test
+## 02 TDD
+> [src/02](src/02)
 
-## 02 low priority for unit-testing effects (demo)
+Starting with the above solution and boilerplate code, display the last valid color name:
+- add validation test
+- implement validation
+- update component tests
+- update component
+
+## 03 low priority for unit-testing effects
+> [src/03](src/03)
 
 - code+test without state or effect
 - add effect that modifies state after fetching data
 - test 2 states (initial render, with data) without unit-testing the effect itself
 
-## 03 TDD (exercise)
-
-- code+test without state, dummy event handler
-- add test of the event
-- implement event handler
-
-## 04 custom hooks (demo)
+## 04 custom hooks
+> [src/04](src/04)
 
 - code of component with lots of logic + test for just initial render
 - move to a new custom hook
 - add test for the hook, using dummy component
 
-## 05 testing libraries (overview)
+## 05 testing libraries
+> [src/05](src/05)
 
 - links to useful libraries (disclaimer whether or not I had time to try them)
 
-## 06 react-redux (demo)
+## 06 react-redux
+> [src/06](src/06)
 
 - existing actions, reducer, ... and simple tests for them
 - add useDispatch, useSelector to component
 - mock the selectors, use dummy dispatch and connect
 
-## 07 add a feature using redux (exercise or homework)
+## 07 add a feature using redux
+> [src/07](src/07)
 
 - working solution from 06
 - add new JSON property to data

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

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

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import { render, unmountComponentAtNode } from 'react-dom'
+import { act } from "react-dom/test-utils"
+import Main from './01-solution'
+
+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', () => {
+  act(() => {
+    render(<Main />, div)
+  })
+  const input = div.querySelector('input')
+  expect(input).toHaveProperty('value', '')
+  act(() => {
+    // input.value = "green" does not work in React 16, see https://stackoverflow.com/a/46012210/1176601
+    const inputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
+    inputValueSetter.call(input, 'green');
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+  expect(input).toHaveProperty('value', 'green')
+  expect(div.querySelector('.Main-box').style.backgroundColor).toBe('green')
+})

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

@@ -0,0 +1,20 @@
+import React, { useState } from 'react'
+
+const Main = () => {
+  const defaultColor = 'orange'
+
+  const [color, setColor] = useState('')
+  const handleHange = (event) => {
+    setColor(event.target.value)
+  }
+
+  return (
+    <div className="Main">
+      <h3>Adding State</h3>
+      <input placeholder={defaultColor} value={color} onChange={handleHange} />
+      <div className="Main-box" style={{ backgroundColor: color || defaultColor }} />
+    </div>
+  )
+}
+
+export default Main

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

@@ -0,0 +1,39 @@
+import React from 'react'
+import { render, unmountComponentAtNode } from 'react-dom'
+import { act } from "react-dom/test-utils"
+import Main from './02-exercise'
+
+describe('component', () => {
+  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', () => {
+    act(() => {
+      render(<Main />, div)
+    })
+    const input = div.querySelector('input')
+    expect(input).toHaveProperty('value', '')
+    act(() => {
+      // input.value = "green" does not work in React 16, see https://stackoverflow.com/a/46012210/1176601
+      const inputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
+      inputValueSetter.call(input, 'green');
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+    })
+    expect(input).toHaveProperty('value', 'green')
+    expect(div.querySelector('.Main-box').style.backgroundColor).toBe('green')
+  })
+})

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

@@ -0,0 +1,20 @@
+import React, { useState } from 'react'
+
+const Main = () => {
+  const defaultColor = 'orange'
+
+  const [color, setColor] = useState('')
+  const handleHange = (event) => {
+    setColor(event.target.value)
+  }
+
+  return (
+    <div className="Main">
+      <h3>Adding State</h3>
+      <input placeholder={defaultColor} value={color} onChange={handleHange} />
+      <div className="Main-box" style={{ backgroundColor: color || defaultColor }} />
+    </div>
+  )
+}
+
+export default Main

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import { render, unmountComponentAtNode } from 'react-dom'
+import { act } from "react-dom/test-utils"
+import Main from './02-solution'
+
+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', () => {
+  act(() => {
+    render(<Main />, div)
+  })
+  const input = div.querySelector('input')
+  expect(input).toHaveProperty('value', '')
+  act(() => {
+    // input.value = "green" does not work in React 16, see https://stackoverflow.com/a/46012210/1176601
+    const inputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
+    inputValueSetter.call(input, 'green');
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+  expect(input).toHaveProperty('value', 'green')
+  expect(div.querySelector('.Main-box').style.backgroundColor).toBe('green')
+});