exercise 03

Author: Peter Hozak

08-testing-hooks/README.md

@@ -36,23 +36,32 @@ Starting with a stateless component with a test:
 ## 02 TDD
 > [src/02](src/02)
 
-Starting with the above solution and boilerplate code, display the last valid color name:
-- add validation test + update component tests
-- implement validation + update component
+Display the last valid color name:
+- add validation test
+- implement validation
+- update component tests
+- update component
 
 
 ## 03 custom hooks
 > [src/03](src/03)
 
-- 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
+Move the color logic to a reusable custom hook:
+- e.g. following API: `{rawColor, validColor, setColor} = useColor(defaultColor)`
+- refactor component (no need to update tests at this stage!)
+- add tests for the custom hook
+- use the hook multiple times
 
 
-## 04 testing libraries
+## 04 libraries for testing
+- https://testing-library.com/docs/react-testing-library/intro
+- https://airbnb.io/enzyme/
+
 > [src/04](src/04)
 
-- links to useful libraries (disclaimer whether or not I had time to try them)
+Simplify tests to react-testing-library:
+- replace `act()`
+- replace `modify()`
 
 
 ## 05 react-redux

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

@@ -4,14 +4,14 @@ const Main = () => {
   const defaultColor = 'orange'
 
   const [color, setColor] = useState('')
-  const handleHange = (event) => {
+  const handleChange = (event) => {
     setColor(event.target.value)
   }
 
   return (
     <div className="Main">
       <h3>Adding State</h3>
-      <input placeholder={defaultColor} value={color} onChange={handleHange} />
+      <input placeholder={defaultColor} value={color} onChange={handleChange} />
       <div className="Main-box" style={{ backgroundColor: color || defaultColor }} />
     </div>
   )

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

@@ -6,7 +6,7 @@ const Main = () => {
   const defaultColor = 'orange'
 
   const [inputColor, setInputColor] = useState('')
-  const handleHange = (event) => {
+  const handleChange = (event) => {
     const { value } = event.target
     setInputColor(value)
     if (validateColor(value)) {
@@ -16,8 +16,8 @@ const Main = () => {
 
   return (
     <div className="Main">
-      <h3>Adding State</h3>
-      <input placeholder={defaultColor} value={inputColor} onChange={handleHange} />
+      <h3>TDD</h3>
+      <input placeholder={defaultColor} value={inputColor} onChange={handleChange} />
       <div className="Main-box" style={{ backgroundColor: inputColor || defaultColor }}>
         {'orange '}
       </div>

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

@@ -11,7 +11,7 @@ const Main = () => {
 
   const [inputColor, setInputColor] = useState('')
   const [validColor, setValidColor] = useState(defaultColor)
-  const handleHange = (event) => {
+  const handleChange = (event) => {
     const { value } = event.target
     setInputColor(value)
     if (!value) {
@@ -23,8 +23,8 @@ const Main = () => {
 
   return (
     <div className="Main">
-      <h3>Adding State</h3>
-      <input placeholder={defaultColor} value={inputColor} onChange={handleHange} />
+      <h3>TDD</h3>
+      <input placeholder={defaultColor} value={inputColor} onChange={handleChange} />
       <div className="Main-box" style={{ backgroundColor: validColor }}>
         {validColor}
       </div>

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

@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+
+export const validateColor = (value) => {
+  const div = document.createElement('div')
+  div.style.color = value
+  return !!div.style.color
+}
+export const useColor = (defaultColor) => {
+  const [rawColor, setRawColor] = useState('')
+  const [validColor, setValidColor] = useState(defaultColor)
+
+  const setColor = (value) => {
+    setRawColor(value)
+    if (!value) {
+      setValidColor(defaultColor)
+    } else if (validateColor(value)) {
+      setValidColor(value)
+    }
+  }
+
+  return { rawColor, validColor, setColor }
+}
+
+const Main = () => {
+  const defaultColor = 'orange'
+
+  // TODO: replace with the custom hook
+  const [inputColor, setInputColor] = useState('')
+  const [validColor, setValidColor] = useState(defaultColor)
+  const handleChange = (event) => {
+    const { value } = event.target
+    setInputColor(value)
+    if (!value) {
+      setValidColor(defaultColor)
+    } else if (validateColor(value)) {
+      setValidColor(value)
+    }
+  }
+  // Tip:
+  // const { rawColor, validColor, setColor } = useColor()
+
+  return (
+    <div className="Main">
+      <h3>Custom Hooks</h3>
+      <input placeholder={defaultColor} value={inputColor} onChange={handleChange} />
+      <div className="Main-box" style={{ backgroundColor: validColor }}>
+        {validColor}
+      </div>
+    </div>
+  )
+}
+
+export default Main

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

@@ -0,0 +1,90 @@
+import React from 'react'
+import { render, unmountComponentAtNode } from 'react-dom'
+import { act } from "react-dom/test-utils"
+import Main, { validateColor, useColor } from './03-exercise'
+
+describe('useColor', () => {
+  let div
+  beforeEach(() => {
+    div = document.createElement('div')
+    document.body.appendChild(div)
+  })
+  afterEach(() => {
+    unmountComponentAtNode(div)
+    div.remove()
+  })
+
+  test('default value', () => { })
+  test('modify value', () => { })
+})
+
+describe('validateColor', () => {
+  test('some colors', () => {
+    expect(validateColor('')).toBeFalsy()
+    expect(validateColor('orang')).toBeFalsy()
+    expect(validateColor('abc')).toBeFalsy()
+
+    expect(validateColor('orange')).toBeTruthy()
+    expect(validateColor('green')).toBeTruthy()
+    expect(validateColor('#abc')).toBeTruthy()
+  })
+})
+
+// input.value = "green" does not work in React 16, see https://stackoverflow.com/a/46012210/1176601
+const inputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
+const modify = (input, value) => {
+  inputValueSetter.call(input, value);
+  input.dispatchEvent(new Event('input', { bubbles: true }))
+}
+
+describe('Main', () => {
+  let div
+  beforeEach(() => {
+    div = document.createElement('div')
+    document.body.appendChild(div)
+  })
+  afterEach(() => {
+    unmountComponentAtNode(div)
+    div.remove()
+  })
+
+  test('default color', () => {
+    act(() => { render(<Main />, div) })
+
+    const box = div.querySelector('.Main-box')
+    expect(box.style.backgroundColor).toBe('orange')
+    expect(box.textContent).toBe('orange')
+  });
+
+  test('modified color', () => {
+    act(() => { render(<Main />, div) })
+
+    const input = div.querySelector('input')
+    const box = div.querySelector('.Main-box')
+    expect(input).toHaveProperty('value', '')
+
+    act(() => { modify(input, 'gree') })
+
+    expect(input).toHaveProperty('value', 'gree')
+    expect(box.style.backgroundColor).toBe('orange')
+    expect(box.textContent).toBe('orange')
+
+    act(() => { modify(input, 'green') })
+
+    expect(input).toHaveProperty('value', 'green')
+    expect(box.style.backgroundColor).toBe('green')
+    expect(box.textContent).toBe('green')
+
+    act(() => { modify(input, 'g') })
+
+    expect(input).toHaveProperty('value', 'g')
+    expect(box.style.backgroundColor).toBe('green')
+    expect(box.textContent).toBe('green')
+
+    act(() => { modify(input, '') })
+
+    expect(input).toHaveProperty('value', '')
+    expect(box.style.backgroundColor).toBe('orange')
+    expect(box.textContent).toBe('orange')
+  })
+})

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

@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+
+export const validateColor = (value) => {
+  const div = document.createElement('div')
+  div.style.color = value
+  return !!div.style.color
+}
+export const useColor = (defaultColor) => {
+  const [rawColor, setRawColor] = useState('')
+  const [validColor, setValidColor] = useState(defaultColor)
+
+  const setColor = (value) => {
+    setRawColor(value)
+    if (!value) {
+      setValidColor(defaultColor)
+    } else if (validateColor(value)) {
+      setValidColor(value)
+    }
+  }
+
+  return { rawColor, validColor, setColor }
+}
+
+const Main = () => {
+  const { rawColor: bgInput, validColor: bgColor, setColor: bgSet } = useColor('orange')
+  const { rawColor: fgInput, validColor: fgColor, setColor: fgSet } = useColor('blue')
+  const bgChange = (event) => { bgSet(event.target.value) }
+  const fgChange = (event) => { fgSet(event.target.value) }
+
+  return (
+    <div className="Main">
+      <h3>Custom Hooks</h3>
+      <input placeholder="background" value={bgInput} onChange={bgChange} />
+      <input placeholder="foreground" value={fgInput} onChange={fgChange} />
+      <div className="Main-box" style={{ backgroundColor: bgColor, color: fgColor }}>
+        {bgColor}/{fgColor}
+      </div>
+    </div>
+  )
+}
+
+export default Main