@danielkalen/simplybind/comparison/src/ReactJS@15.3.1/test.coffee

Magically simple, framework-less one-way/two-way data binding for frontend/backend in ~5kb.

new TestSuite 
	'title': 'Input Update'
	'subtitle': 'Update the value of an input field 10,000 times'
	'measureMethod': 'sync'
	'warmUps': 10000
	'timesToRun': 10000
	'setupFn': (container$)->
		_ = @
		currentValue = 0
		@obj = 'prop':'value'

		@getNewValue = ()-> "value#{currentValue++}"
		
		input = React.createClass
			getInitialState: ()-> _.obj
			render: ()-> React.DOM.input 'value': @state.prop
			componentWillMount: ()-> _.input = @

		ReactDOM.render React.createElement(input), container$[0]

		return

	'teardownFn': (container$)->
		ReactDOM.unmountComponentAtNode(container$[0])
		container$.empty()

		delete @obj
		delete @input
		delete @getNewValue


	'testFn': ()-> @input.setState 'prop':@getNewValue()








new TestSuite 
	'title': 'Input x100 Update'
	'subtitle': 'Update the value of 100 input fields 1,000 times'
	'measureMethod': 'sync'
	'warmUps': 10
	'timesToRun': 1000
	'setupFn': (container$)->
		_ = @
		currentValue = 0
		@obj = 'prop':'value'

		@getNewValue = ()-> "value#{currentValue++}"
		
		input = React.createClass
			getInitialState: ()-> _.obj
			render: ()->
				inputs = for i in [1..100]
					React.DOM.input 'value': @state.prop
				
				return React.DOM.div null, inputs
			
			componentWillMount: ()-> _.input = @

		ReactDOM.render React.createElement(input), container$[0]

		return

	'teardownFn': (container$)->
		ReactDOM.unmountComponentAtNode(container$[0])
		container$.empty()

		delete @obj
		delete @input
		delete @getNewValue


	'testFn': ()-> @input.setState 'prop':@getNewValue()








new TestSuite 
	'title': 'Input Transform'
	'subtitle': 'Update the value of an input field 10,000 times and apply a transform function'
	'measureMethod': 'sync'
	'warmUps': 10000
	'timesToRun': 10000
	'setupFn': (container$)->
		_ = @
		currentValue = 0
		@obj = 'prop':'value'

		@getNewValue = ()-> "value#{currentValue++}"

		@transform = (value)-> value.toUpperCase()

		input = React.createClass
			getInitialState: ()-> _.obj
			render: ()-> React.DOM.input 'value': _.transform(@state.prop)
			componentWillMount: ()-> _.input = @

		ReactDOM.render React.createElement(input), container$[0]

		return

	'teardownFn': (container$)->
		ReactDOM.unmountComponentAtNode(container$[0])
		container$.empty()

		delete @obj
		delete @input
		delete @getNewValue


	'testFn': ()-> @input.setState 'prop':@getNewValue()







new TestSuite 
	'title': 'Div HTML Update'
	'subtitle': 'Update the content of a div 10,000 times'
	'measureMethod': 'sync'
	'warmUps': 10000
	'timesToRun': 10000
	'setupFn': (container$)->
		_ = @
		currentValue = 0
		@obj = 'prop':'value'

		@getNewValue = ()-> "value#{currentValue++}"
		
		div = React.createClass
			getInitialState: ()-> _.obj
			render: ()-> React.DOM.div 'dangerouslySetInnerHTML': __html:@state.prop
			componentWillMount: ()-> _.div = @

		ReactDOM.render React.createElement(div), container$[0]

		return

	'teardownFn': (container$)->
		ReactDOM.unmountComponentAtNode(container$[0])
		container$.empty()

		delete @obj
		delete @div
		delete @getNewValue


	'testFn': ()-> @div.setState 'prop':@getNewValue()







new TestSuite 
	'title': 'Div HTML Same Update'
	'subtitle': 'Update the content of a div with the same value 10,000 times'
	'measureMethod': 'sync'
	'warmUps': 10000
	'timesToRun': 10000
	'setupFn': (container$)->
		_ = @
		currentValue = 0
		@obj = 'prop':'value'
		
		div = React.createClass
			getInitialState: ()-> _.obj
			render: ()-> React.DOM.div 'dangerouslySetInnerHTML': __html:@state.prop
			componentWillMount: ()-> _.div = @

		ReactDOM.render React.createElement(div), container$[0]

		return

	'teardownFn': (container$)->
		ReactDOM.unmountComponentAtNode(container$[0])
		container$.empty()

		delete @obj
		delete @div
		delete @getNewValue


	'testFn': ()-> @div.setState 'prop':'value'








new TestSuite 
	'title': 'Div HTML Placeholder'
	'subtitle': 'Update a placeholder in the content of a div 10,000 times'
	'measureMethod': 'sync'
	'warmUps': 10000
	'timesToRun': 10000
	'setupFn': (container$)->
		_ = @
		currentValue = 0
		@obj = 'prop':'value'

		@getNewValue = ()-> "value#{currentValue++}"
		
		div = React.createClass
			getInitialState: ()-> _.obj
			render: ()-> React.DOM.div 'dangerouslySetInnerHTML': __html:'Current '+@state.prop+' Works.'
			componentWillMount: ()-> _.div = @

		ReactDOM.render React.createElement(div), container$[0]

		return

	'teardownFn': (container$)->
		ReactDOM.unmountComponentAtNode(container$[0])
		container$.empty()

		delete @obj
		delete @div
		delete @getNewValue


	'testFn': ()-> @div.setState 'prop':@getNewValue()








new TestSuite 
	'title': 'Div HTML 250 Placeholders'
	'subtitle': 'Update 250 placeholders in the content of a div 1,000 times'
	'measureMethod': 'sync'
	'warmUps': 100
	'timesToRun': 1000
	'setupFn': (container$)->
		_ = @
		currentValue = 0
		@obj = 'prop':'value'

		@getNewValue = ()-> "value#{currentValue++}"
		
		div = React.createClass
			getInitialState: ()-> _.obj
			render: ()-> React.DOM.div 'dangerouslySetInnerHTML': __html:(@state.prop+' ').repeat(250)
			componentWillMount: ()-> _.div = @

		ReactDOM.render React.createElement(div), container$[0]

		return

	'teardownFn': (container$)->
		ReactDOM.unmountComponentAtNode(container$[0])
		container$.empty()

		delete @obj
		delete @div
		delete @getNewValue


	'testFn': ()-> @div.setState 'prop':@getNewValue()







new TestSuite 
	'title': 'Div Text Update'
	'subtitle': 'Update the textContent of a div 10,000 times'
	'measureMethod': 'sync'
	'warmUps': 10000
	'timesToRun': 10000
	'setupFn': (container$)->
		_ = @
		currentValue = 0
		@obj = 'prop':'value'

		@getNewValue = ()-> "value#{currentValue++}"
		
		div = React.createClass
			getInitialState: ()-> _.obj
			render: ()-> React.DOM.div null, @state.prop
			componentWillMount: ()-> _.div = @

		ReactDOM.render React.createElement(div), container$[0]

		return

	'teardownFn': (container$)->
		ReactDOM.unmountComponentAtNode(container$[0])
		container$.empty()

		delete @obj
		delete @div
		delete @getNewValue


	'testFn': ()-> @div.setState 'prop':@getNewValue()








new TestSuite 
	'title': 'Div Text Placeholder'
	'subtitle': 'Update a placeholder in the textContent of a div 10,000 times'
	'measureMethod': 'sync'
	'warmUps': 10000
	'timesToRun': 10000
	'setupFn': (container$)->
		_ = @
		currentValue = 0
		@obj = 'prop':'value'

		@getNewValue = ()-> "value#{currentValue++}"
		
		div = React.createClass
			getInitialState: ()-> _.obj
			render: ()-> React.DOM.div null, 'Current '+@state.prop+' Works.'
			componentWillMount: ()-> _.div = @

		ReactDOM.render React.createElement(div), container$[0]

		return

	'teardownFn': (container$)->
		ReactDOM.unmountComponentAtNode(container$[0])
		container$.empty()

		delete @obj
		delete @div
		delete @getNewValue


	'testFn': ()-> @div.setState 'prop':@getNewValue()










new TestSuite 
	'title': 'Create 1k DOM Els'
	'subtitle': 'Create 1000 elements from array & insert into a div'
	'measureMethod': 'sync'
	'warmUps': 10
	'timesToRun': 10
	'setupFn': (container$)->
		@obj = 'divs':[]
		_ = @

		masterDiv = React.createClass
			getInitialState: ()-> _.obj
			render: ()-> React.DOM.div null, @state.divs.map (itemValue)->
				React.DOM.div null, itemValue
			componentWillMount: ()-> _.masterDiv = @

		ReactDOM.render React.createElement(masterDiv), container$[0]

		return

	'teardownFn': (container$)->
		ReactDOM.unmountComponentAtNode(container$[0])
		container$.empty()

		delete @obj
		delete @masterDiv
		delete @getNewValue


	'testFn': ()->
		divs = ('value' for i in [1..1000])
		@masterDiv.setState {divs}








new TestSuite 
	'title': 'Update 1k DOM Els'
	'subtitle': 'Update 1000 existing elements 100 times'
	'measureMethod': 'sync'
	# 'warmUps': 100
	'timesToRun': 100
	'setupFn': (container$)->
		_ = @
		@obj = 'prop':'value'
		subDiv = React.createClass
			render: ()-> React.DOM.div null, @props.prop
		
		masterDiv = React.createClass
			getInitialState: ()-> _.obj
			render: ()-> React.DOM.div null, (React.createElement(subDiv, @state) for i in [1..1000])
			componentWillMount: ()-> _.masterDiv = @

		currentValue = 0
		@getNewValue = ()-> "value#{currentValue++}"

		ReactDOM.render React.createElement(masterDiv), container$[0]	


	'teardownFn': (container$)->
		ReactDOM.unmountComponentAtNode(container$[0])
		container$.empty()

		delete @obj
		delete @masterDiv
		delete @getNewValue


	'testFn': ()->
		@masterDiv.setState 'prop':@getNewValue()









new TestSuite 
	'title': 'Create DOM Bindings'
	'subtitle': 'Create 1000 bindings to DOM elements'
	'measureMethod': 'sync'
	'nonSharedTest': true
	'timesToRun': 1
	'setupFn': (container$)->
		@obj = 'prop':'value'
		@container$ = container$


	'teardownFn': (container$)->
		ReactDOM.unmountComponentAtNode(container$[0])
		container$.empty()

		delete @obj
		delete @masterDiv
		delete @getNewValue


	'testFn': ()->
		_ = @
		subDiv = React.createClass
			render: ()-> React.DOM.div null, @props.prop
		
		masterDiv = React.createClass
			getInitialState: ()-> _.obj
			render: ()-> React.DOM.div null, (React.createElement(subDiv, @state) for i in [1..1000])

		ReactDOM.render React.createElement(masterDiv), @container$[0]