exercise 04

Author: Peter Hozak

08-testing-hooks/README.md

@@ -59,9 +59,9 @@ Move the color logic to a reusable custom hook:
 
 > [src/04](src/04)
 
-Simplify tests to react-testing-library:
+Simplify tests with react-testing-library:
 - replace `act()`
-- replace `modify()`
+- replace modification of input value
 
 
 ## 05 react-redux

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

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

08-testing-hooks/src/04/04-exercise.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 './04-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', () => {
+  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/04/04-solution.js

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

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import Main from './04-solution'
+
+test('default color', () => {
+  const { container: div } = render(<Main />)
+  expect(div.querySelector('.Main-box').style.backgroundColor).toBe('orange')
+})
+
+test('modified color', () => {
+  const { container: div } = render(<Main />)
+  const input = div.querySelector('input')
+  expect(input).toHaveProperty('value', '')
+
+  fireEvent.change(input, { target: { value: 'green' } })
+  expect(input).toHaveProperty('value', 'green')
+  expect(div.querySelector('.Main-box').style.backgroundColor).toBe('green')
+})

08-testing-hooks/src/App.js

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