Finish basic implementation

Author: reergymerej

Diff for: src/components/App.js

@@ -23,7 +23,6 @@ class App extends Component {
         <PasswordHelper />
 
         <RubiksCube />
-
         <WidgetContainer />
       </div>
     )

Diff for: src/components/Widget.js

@@ -1,7 +1,25 @@
 import React from 'react'
 
-export default (props) => (
-  <div>
-    {props.value}
-  </div>
-)
+class Widget extends React.Component {
+  handleInputChange = (event) => {
+    this.props.onChange(event.target.value)
+  }
+
+  render() {
+    return (
+      <div>
+        <input value={this.props.value} onChange={this.handleInputChange} />
+        <button onClick={this.props.onReverse}>
+          Reverse
+        </button>
+      </div>
+    )
+  }
+}
+
+Widget.defaultProps = {
+  onChange() {},
+  onReverse() {},
+}
+
+export default Widget

Diff for: src/components/Widget.test.js

@@ -9,9 +9,30 @@ const factory = (props = {}) => (
 )
 
 describe('<Widget />', () => {
-  it('should render "value"', () => {
-    const value = 'balloon'
-    const wrapper = shallow(factory({ value }))
-    expect(wrapper.text()).toBe(value)
+  fdescribe('<input />', () => {
+    it('should set value', () => {
+      const value = 'balloon'
+      const wrapper = shallow(factory({ value }))
+      const comp = wrapper.find('input')
+      expect(comp.prop('value')).toBe(value)
+    })
+
+    it('should trigger "onChange"', () => {
+      const onChange = jest.fn()
+      const wrapper = shallow(factory({ onChange }))
+      const comp = wrapper.find('input')
+      comp.simulate('change', { target: { value: 'boo!' } })
+      expect(onChange).toHaveBeenCalledWith('boo!')
+    })
+  })
+
+  describe('<button />', () => {
+    it('should trigger "onReverse"', () => {
+      const onReverse = jest.fn()
+      const wrapper = shallow(factory({ onReverse }))
+      const comp = wrapper.find('button')
+      comp.simulate('click')
+      expect(onReverse).toHaveBeenCalled()
+    })
   })
 })

Diff for: src/containers/WidgetContainer.js

@@ -1,15 +1,23 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import Widget from '../components/Widget'
+import { actions } from '../redux/modules/value'
 
 const WidgetContainer = (props) => (
   <Widget
-    value={props.user}
-    />
+    value={props.value}
+    onChange={props.onChange}
+    onReverse={props.onReverse}
+  />
 )
 
-const mapStateToProps = (state) => ({
-  user: state.root.user,
+const mapPropsToState = (state) => ({
+  value: state.value,
 })
 
-export default connect(mapStateToProps)(WidgetContainer)
+const mapDispatchToProps = {
+  onChange: actions.change,
+  onReverse: actions.reverse,
+}
+
+export default connect(mapPropsToState, mapDispatchToProps)(WidgetContainer)

Diff for: src/containers/WidgetContainer.test.js

@@ -9,7 +9,26 @@ const factory = (props = {}) => (
 )
 
 describe('<WidgetContainer />', () => {
-  it('should render', () => {
-    shallow(factory())
+  it('should map "value"', () => {
+    const value = 'xyz'
+    const wrapper = shallow(factory({ value }))
+    const comp = wrapper.find('Widget')
+    expect(comp.prop('value')).toBe(value)
+  })
+
+  it('should relay "onChange"', () => {
+    const onChange = jest.fn()
+    const wrapper = shallow(factory({ onChange }))
+    const comp = wrapper.find('Widget')
+    comp.simulate('change', 'blue')
+    expect(onChange).toHaveBeenCalledWith('blue')
+  })
+
+  it('should relay "onReverse"', () => {
+    const onReverse = jest.fn()
+    const wrapper = shallow(factory({ onReverse }))
+    const comp = wrapper.find('Widget')
+    comp.simulate('reverse')
+    expect(onReverse).toHaveBeenCalled()
   })
 })

Diff for: src/helpers.test.js

@@ -2,6 +2,6 @@ import * as helpers from './helpers'
 
 describe('helpers', () => {
   it('should reverse a string', () => {
-    expect(helpers.reverse('aloha')).toBe('ahola')
+    expect(helpers.reverse('blue')).toBe('eulb')
   })
 })

Diff for: src/redux/modules/string.js

@@ -0,0 +1,22 @@
+import * as helpers from '../../helpers'
+
+const CHANGE = 'value.CHANGE'
+const REVERSE  = 'value.REVERSE'
+
+export const actions = {
+  change: (value) => ({ type: CHANGE, value }),
+  reverse: () => ({ type: REVERSE }),
+}
+
+export const reducer = (state = '', action) => {
+  switch (action.type) {
+    case CHANGE:
+      return action.value
+
+    case REVERSE:
+      return helpers.reverse(state)
+
+    default:
+      return state
+  }
+}

Diff for: src/redux/modules/string.test.js

@@ -0,0 +1,13 @@
+import { reducer, actions } from './value'
+
+describe('actions/reducer', () => {
+  it('should handle CHANGE', () => {
+    const action = actions.change('donk')
+    expect(reducer('', action)).toEqual('donk')
+  })
+
+  it('should handle REVERSE', () => {
+    const action = actions.reverse()
+    expect(reducer('aloha', action)).toEqual('ahola')
+  })
+})

Diff for: src/redux/modules/value.js

@@ -1,4 +1,8 @@
 import { combineReducers } from 'redux'
 import { reducer as root } from './modules/root'
+import { reducer as value } from './modules/value'
 
-export default combineReducers({ root })
+export default combineReducers({
+  root,
+  value,
+})