React tutorial

message.coffee

TU = React.addons.TestUtils

{ div
  h1
  h3
  button } = React.DOM

# Component actions
toggleAction = (state) ->
  val = state.get 'showSubhead'
  newState = state.set 'showSubhead', not val
  render newState

incrementCounter = (state) ->
  val = state.get 'count'
  newState = state.set 'count', val + 1
  render newState

# React component definition
Message = React.createClass
  render: ->
    data             = @props.data
    # Breaking our immutable property into variables
    count            = data.get 'count'
    subhead          = data.get 'subhead'
    message          = data.get 'message'
    showSubhead      = data.get 'showSubhead'
    toggleAction     = data.get 'toggleAction'
    incrementCounter = data.get 'incrementCounter'
    # Template with values plugged in
    div null, [
      h1 { ref: 'messageTitle' }, "hi #{message} #{count}"
      h3 { ref: 'subhead' }, subhead if showSubhead
      div { className: 'u-displayFlex u-spaceBy--5px' }, [
        button
          ref: 'toggleActionBtn'
          onClick: toggleAction.bind @, data
        , if showSubhead then 'hide subhead' else 'show subhead'
        button
          ref: 'incrementCounterBtn'
          onClick: incrementCounter.bind @, data
        , 'increment counter'
      ]
    ]

# Generic function to render our component into the body tag
render = (state) ->
  mountNode = document.getElementsByTagName('body')[0]
  message = React.createElement Message, data: state
  React.render message, mountNode

# The map of values we pass to our component to display
state = Immutable.fromJS
  count: 0
  message: 'world!'
  subhead: 'im the subhead'
  showSubhead: false
  toggleAction: toggleAction
  incrementCounter: incrementCounter

# Render the component onto the page
render state

# Tests
# Create our test state
testState = Immutable.fromJS
  count: 0
  message: 'world!'
  subhead: 'im the subhead'
  showSubhead: false
  toggleAction: sinon.spy()
  incrementCounter: sinon.spy()

# Default component with default test state
messageComponent = React.createElement Message, data: testState
messageTest = TU.renderIntoDocument messageComponent

# Test 1
test = messageTest.refs.messageTitle.props.children is "hi world! 0"
console.log 'it should display the message and count value: ', test

# Test 2
messageComponent2 = React.createElement Message, data: testState.set 'showSubhead', true
messageTest2 = TU.renderIntoDocument messageComponent2
test = TU.isDOMComponent messageTest2.refs.subhead
console.log 'it should display the subhead when showSubhead is true: ', test

# Test 3
btn = messageTest.refs.toggleActionBtn.getDOMNode()
TU.Simulate.click btn
action = testState.get 'toggleAction'
test = action.called
console.log 'it should call the toggleAction when show subhead is clicked: ', test
stateArg = action.args[0][0] # Args is [Array[3]]
test = Immutable.is testState, stateArg
console.log 'it calls the toggleAction action with the state object', test

# Test 4
btn = messageTest.refs.incrementCounterBtn.getDOMNode()
TU.Simulate.click btn
action = testState.get 'incrementCounter'
test = action.called
console.log 'it should call the incrementCounter action when increment is clicked: ', test
stateArg = action.args[0][0] # Args is [Array[3]]
test = Immutable.is testState, stateArg
console.log 'it calls the incrementCounter action with the state object', test