Skip to content

Instantly share code, notes, and snippets.

@haywoood
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