add tests for 13

Author: Kent C. Dodds

src/__tests__/13.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import {renderToggle, Simulate} from '../../test/utils'
+import Usage from '../exercises-final/13'
+// import Usage from '../exercises/13'
+
+const renderRendux = () => {
+  const utils = renderToggle(<Usage />)
+  const printedState = utils.getByTestId('printed-state')
+  const input = utils.getByPlaceholderText('Type')
+  return {
+    getPrintedState: () => JSON.parse(printedState.textContent),
+    input,
+    changeInputValue: (value, extraEventProps) =>
+      Simulate.change(input, {target: {value}, ...extraEventProps}),
+    ...utils,
+  }
+}
+
+test('toggle and input state interact', () => {
+  const {
+    toggleButton,
+    getPrintedState,
+    changeInputValue,
+    getByText,
+    input,
+  } = renderRendux(<Usage />)
+  expect(toggleButton).toBeOn()
+  expect(getPrintedState()).toEqual({
+    on: true,
+  })
+  changeInputValue('off')
+  expect(toggleButton).toBeOff()
+  expect(getPrintedState()).toEqual({
+    on: false,
+    inputValue: 'off',
+  })
+  Simulate.click(getByText('reset'))
+  expect(toggleButton).toBeOn()
+  expect(getPrintedState()).toEqual({
+    on: true,
+  })
+  expect(input.value).toBe('on')
+  changeInputValue('something else')
+  expect(input.value).toBe('something else')
+  expect(getPrintedState()).toEqual({
+    on: true,
+    inputValue: 'something else',
+  })
+})

src/exercises-final/13.js

@@ -69,7 +69,7 @@ function MyInput() {
     <Rendux.Consumer>
       {rendux => (
         <input
-          defaultValue={rendux.state.on ? 'on' : 'off'}
+          value={rendux.state.inputValue || (rendux.state.on ? 'on' : 'off')}
           placeholder="Type 'off' or 'on'"
           onChange={event => {
             if (event.target.value === 'on') {
@@ -122,7 +122,9 @@ function MySwitch() {
 const StatePrinter = withRendux(({rendux}) => (
   <div style={{textAlign: 'left'}}>
     state:
-    <pre>{JSON.stringify(rendux.state, null, 2)}</pre>
+    <pre data-testid="printed-state">
+      {JSON.stringify(rendux.state, null, 2)}
+    </pre>
   </div>
 ))
 

src/exercises/13.js

@@ -78,7 +78,9 @@ function MySwitch() {
 const StatePrinter = withRendux(({rendux}) => (
   <div style={{textAlign: 'left'}}>
     state:
-    <pre>{JSON.stringify(rendux.state, null, 2)}</pre>
+    <pre data-testid="printed-state">
+      {JSON.stringify(rendux.state, null, 2)}
+    </pre>
   </div>
 ))