@danielkalen/simplybind/comparison/src/KnockoutJS@3.4.0/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': 100
	'timesToRun': 10000
	'setupFn': (container$)->
		_ = @
		@obj = 'prop': ko.observable 'value'
		currentValue = 0

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

		container$.html("<input type='text' data-bind='textInput: prop' />")
		ko.applyBindings(@obj, container$[0])


	'teardownFn': (container$)->
		ko.cleanNode(container$[0])
		container$.empty()

		delete @obj
		delete @getNewValue


	'testFn': ()-> @obj.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$)->
		_ = @
		@obj = 'prop': ko.observable 'value'
		currentValue = 0

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

		container$.html ("<input type='text' data-bind='textInput: prop' />".repeat(100))
		ko.applyBindings(@obj, container$[0])


	'teardownFn': (container$)->
		ko.cleanNode(container$[0])
		container$.empty()

		delete @obj
		delete @getNewValue


	'testFn': ()-> @obj.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': 100
	'timesToRun': 10000
	'setupFn': (container$)->
		_ = @
		@obj = new ()->
			@prop = ko.observable 'value'
			@propTransformed = ko.computed ()=> @prop().toUpperCase()
			return @

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

		container$.html("<input type='text' data-bind='textInput: propTransformed' />")
		ko.applyBindings(@obj, container$[0])


	'teardownFn': (container$)->
		ko.cleanNode(container$[0])
		container$.empty()

		delete @obj
		delete @getNewValue


	'testFn': ()-> @obj.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$)->
		_ = @
		@obj = 'prop': ko.observable 'value'
		currentValue = 0

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

		container$.html("<div data-bind='html: prop'></div>")
		ko.applyBindings(@obj, container$[0])


	'teardownFn': (container$)->
		ko.cleanNode(container$[0])
		container$.empty()

		delete @obj
		delete @getNewValue


	'testFn': ()-> @obj.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$)->
		_ = @
		@obj = 'prop': ko.observable 'value'

		container$.html("<div data-bind='html: prop'></div>")
		ko.applyBindings(@obj, container$[0])


	'teardownFn': (container$)->
		ko.cleanNode(container$[0])
		container$.empty()

		delete @obj
		delete @getNewValue


	'testFn': ()-> @obj.prop 'value'








new TestSuite 
	'title': 'Div HTML Placeholder'
	'subtitle': 'Update a placeholder in the content of a div 10,000 times'
	'measureMethod': 'sync'
	'timesToRun': 10000
	'setupFn': (container$)->
		_ = @
		@obj = new ()->
			@prop = ko.observable 'value'
			@propTransformed = ko.computed ()=> "Current #{@prop()} Works."
			return @

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

		container$.html("<div data-bind='html: propTransformed'></div>")
		ko.applyBindings(@obj, container$[0])


	'teardownFn': (container$)->
		ko.cleanNode(container$[0])
		container$.empty()

		delete @obj
		delete @getNewValue


	'testFn': ()-> @obj.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$)->
		_ = @
		@obj = new ()->
			@prop = ko.observable 'value'
			@propTransformed = ko.computed ()=> "Current #{@prop()} Works."
			return @

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

		container$.html("<div data-bind='html: propTransformed'></div>".repeat(250))
		ko.applyBindings(@obj, container$[0])


	'teardownFn': (container$)->
		ko.cleanNode(container$[0])
		container$.empty()

		delete @obj
		delete @getNewValue


	'testFn': ()-> @obj.prop @getNewValue()







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

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

		container$.html("<div data-bind='text: prop'></div>")
		ko.applyBindings(@obj, container$[0])


	'teardownFn': (container$)->
		ko.cleanNode(container$[0])
		container$.empty()

		delete @obj
		delete @getNewValue


	'testFn': ()-> @obj.prop @getNewValue()








new TestSuite 
	'title': 'Div Text Placeholder'
	'subtitle': 'Update a placeholder in the content of a div 10,000 times'
	'measureMethod': 'sync'
	'timesToRun': 10000
	'setupFn': (container$)->
		_ = @
		@obj = new ()->
			@prop = ko.observable 'value'
			@propTransformed = ko.computed ()=> "Current #{@prop()} Works."
			return @

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

		container$.html("<div data-bind='text: propTransformed'></div>")
		ko.applyBindings(@obj, container$[0])


	'teardownFn': (container$)->
		ko.cleanNode(container$[0])
		container$.empty()

		delete @obj
		delete @getNewValue


	'testFn': ()-> @obj.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': ko.observableArray()
		@offset = 0		

		container$.html("<div data-bind='foreach: divs'>  <div data-bind='text: $data'></div>  </div>")
		# container$.html("<div data-bind='html: prop'></div>".repeat(250))
		ko.applyBindings(@obj, container$[0])


	'teardownFn': (container$)->
		ko.cleanNode(container$[0])
		container$.empty()

		delete @obj
		delete @getNewValue


	'testFn': ()->
		@obj.divs (i+@offset for i in [1..1000])
		@offset += 1000








# 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', 'divs': (i for i in [1..1000])
# 		_ = @
	
# 		@getNewValue = ()->
# 			currentValue = !currentValue
# 			return if currentValue then 'valueA' else 'valueB'

# 		@updateValue = ()=>
# 			@obj.prop = @getNewValue()

# 		component = "
# 			<div>
# 				<div ng-app='ANGULAR' ng-controller='CONTROLLER'>
# 					<div ng-repeat='value in obj.divs'>{{obj.prop}}</div>
# 				</div>
# 			</div>
# 		"
# 		container$.html(component)

# 		@app = angular.module('ANGULAR', []).controller 'CONTROLLER', ($scope)=>
# 			$scope.obj = @obj
# 			@appScope = $scope

# 		angular.bootstrap container$.children()[0], ['ANGULAR']

# 		return

# 	'teardownFn': (container$)->
# 		ko.cleanNode(container$[0])
# 		container$.empty()

# 		delete @obj
# 		delete @getNewValue


# 	'testFn': ()-> @appScope.$apply(@updateValue)








new TestSuite 
	'title': 'Update 1k DOM Els'
	'subtitle': 'Update 1000 existing elements 100 times'
	'measureMethod': 'sync'
	# 'warmUps': 100
	'timesToRun': 100
	'setupFn': (container$)->
		_ = @
		@obj = 'prop': ko.observable 'value'
		currentValue = 0

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

		container$.html("<div data-bind='text: prop'></div>".repeat(1000))
		ko.applyBindings(@obj, container$[0])


	'teardownFn': (container$)->
		ko.cleanNode(container$[0])
		container$.empty()

		delete @obj
		delete @getNewValue


	'testFn': ()-> @obj.prop @getNewValue()