exercise 02

Author: Peter Hozak

08-testing-hooks/README.md

@@ -22,6 +22,9 @@ yarn test
 - https://reactjs.org/docs/hooks-intro.html
 - https://reactjs.org/docs/testing-recipes.html#events
 
+Questions possible at any time.
+
+
 ## 01 testing useState
 > [src/01](src/01)
 
@@ -34,44 +37,28 @@ Starting with a stateless component with a test:
 > [src/02](src/02)
 
 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)
+- add validation test + update component tests
+- implement validation + update component
 
-- 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
 
-## 04 custom hooks
-> [src/04](src/04)
+## 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
 
-## 05 testing libraries
-> [src/05](src/05)
+
+## 04 testing libraries
+> [src/04](src/04)
 
 - links to useful libraries (disclaimer whether or not I had time to try them)
 
-## 06 react-redux
-> [src/06](src/06)
+
+## 05 react-redux
+> [src/05](src/05)
 
 - 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
-> [src/07](src/07)
-
-- working solution from 06
-- add new JSON property to data
-- update redux code
-- update component
-- extra challenge: TDD
-
-Q&A possible at any time.

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

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

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

@@ -1,9 +1,24 @@
 import React from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'
 import { act } from "react-dom/test-utils"
-import Main from './02-exercise'
+import Main, { validateColor } from './02-exercise'
 
-describe('component', () => {
+describe('validateColor', () => {
+  test('some colors', () => {
+    expect(validateColor('')).toBeFalsy()
+    expect(validateColor('orang')).toBeFalsy()
+    // expect(validateColor('orange')).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')
@@ -15,25 +30,23 @@ describe('component', () => {
   })
 
   test('default color', () => {
-    act(() => {
-      render(<Main />, div)
-    })
-    expect(div.querySelector('.Main-box').style.backgroundColor).toBe('orange')
+    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)
-    })
+    act(() => { render(<Main />, div) })
+
     const input = div.querySelector('input')
+    const box = div.querySelector('.Main-box')
     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 }))
-    })
+
+    act(() => { modify(input, 'green') })
+
     expect(input).toHaveProperty('value', 'green')
-    expect(div.querySelector('.Main-box').style.backgroundColor).toBe('green')
+    expect(box.style.backgroundColor).toBe('green')
   })
 })

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

@@ -1,18 +1,33 @@
 import React, { useState } from 'react'
 
+export const validateColor = (value) => {
+  const div = document.createElement('div')
+  div.style.color = value
+  return !!div.style.color
+}
+
 const Main = () => {
   const defaultColor = 'orange'
 
-  const [color, setColor] = useState('')
+  const [inputColor, setInputColor] = useState('')
+  const [validColor, setValidColor] = useState(defaultColor)
   const handleHange = (event) => {
-    setColor(event.target.value)
+    const { value } = event.target
+    setInputColor(value)
+    if (!value) {
+      setValidColor(defaultColor)
+    } else if (validateColor(value)) {
+      setValidColor(value)
+    }
   }
 
   return (
     <div className="Main">
       <h3>Adding State</h3>
-      <input placeholder={defaultColor} value={color} onChange={handleHange} />
-      <div className="Main-box" style={{ backgroundColor: color || defaultColor }} />
+      <input placeholder={defaultColor} value={inputColor} onChange={handleHange} />
+      <div className="Main-box" style={{ backgroundColor: validColor }}>
+        {validColor}
+      </div>
     </div>
   )
 }

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

@@ -1,37 +1,75 @@
 import React from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'
 import { act } from "react-dom/test-utils"
-import Main from './02-solution'
+import Main, { validateColor } from './02-solution'
 
-let div
-beforeEach(() => {
-  div = document.createElement('div')
-  document.body.appendChild(div)
-})
-afterEach(() => {
-  unmountComponentAtNode(div)
-  div.remove()
-})
+describe('validateColor', () => {
+  test('some colors', () => {
+    expect(validateColor('')).toBeFalsy()
+    expect(validateColor('orang')).toBeFalsy()
+    expect(validateColor('abc')).toBeFalsy()
 
-test('default color', () => {
-  act(() => {
-    render(<Main />, div)
+    expect(validateColor('orange')).toBeTruthy()
+    expect(validateColor('green')).toBeTruthy()
+    expect(validateColor('#abc')).toBeTruthy()
   })
-  expect(div.querySelector('.Main-box').style.backgroundColor).toBe('orange')
-});
+})
 
-test('modified color', () => {
-  act(() => {
-    render(<Main />, div)
+// 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()
   })
-  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 }))
+
+  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')
   })
-  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(8)).map((_, i) => `0${i + 1}`)
+const prefixes = Array.from(Array(2)).map((_, i) => `0${i + 1}`)
 const links = prefixes.map((i) =>
   <li key={i}>
     {i}: <a href={`#${i}-exercise`} id={`${i}-exercise`}>exercise</a>
@@ -9,7 +9,7 @@ const links = prefixes.map((i) =>
 )
 
 const components = {}
-prefixes.filter((i) => i <= '01').forEach((i) => {
+prefixes.forEach((i) => {
   import(`./${i}/${i}-exercise`).then((imported) => {
     components[`${i}-exercise`] = imported.default
   })

08-testing-hooks/src/index.css

@@ -65,4 +65,7 @@ input {
 .Main-box {
   width: 200px;
   height: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }