Skip to content

Instantly share code, notes, and snippets.

@haywoood haywoood/message.coffee
Last active Aug 29, 2015

Embed
What would you like to do?
React tutorial
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.