@danielkalen/simplybind/comparison/src/AngularJS@1.5.8/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':'value'
		currentValue = 0

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

		@updateValue = ()=> @obj.prop = @getNewValue()
		
		component = "
			<div>
				<div ng-app='ANGULAR' ng-controller='CONTROLLER'>
					<input type='text' ng-model='obj.prop' />
				</div>
			</div>
		"
		container$.html(component)

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

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


	'teardownFn': (container$)->
		@appScope.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @appScope
		delete @getNewValue


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








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':'value'
		currentValue = 0

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

		@updateValue = ()=> @obj.prop = @getNewValue()
		
		component = "
			<div>
				<div ng-app='ANGULAR' ng-controller='CONTROLLER'>
				</div>
			</div>
		"
		container$.html(component)
		container$.find('div[ng-app="ANGULAR"]').html ("<input type='text' ng-model='obj.prop' />" for i in [1..100])

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

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


	'teardownFn': (container$)->
		@appScope.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @appScope
		delete @getNewValue


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








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 = 'prop':'value'
		currentValue = 0

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

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

		@updateValue = ()=>
			@obj.prop = @transform @getNewValue()
		
		component = "
			<div>
				<div ng-app='ANGULAR' ng-controller='CONTROLLER'>
					<input type='text' ng-model='obj.prop' />
				</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$)->
		@appScope.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @appScope
		delete @getNewValue


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







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++}"

		@updateValue = ()=> @obj.prop = @getNewValue()
		
		component = "
			<div>
				<div ng-app='ANGULAR' ng-controller='CONTROLLER'>
					<div ng-bind-html='obj.prop'></div>
				</div>
			</div>
		"
		container$.html(component)

		@app = angular.module('ANGULAR', [])
			.config ($sceProvider)-> $sceProvider.enabled false
			.controller 'CONTROLLER', ($scope)=>
				$scope.obj = @obj
				@appScope = $scope

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

	'teardownFn': (container$)->
		@appScope.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @appScope
		delete @getNewValue


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







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'
		
		@updateValue = ()=>
			@obj.prop = 'value'
		
		component = "
			<div>
				<div ng-app='ANGULAR' ng-controller='CONTROLLER'>
					<div ng-bind-html='obj.prop'></div>
				</div>
			</div>
		"
		container$.html(component)

		@app = angular.module('ANGULAR', [])
			.config ($sceProvider)-> $sceProvider.enabled false
			.controller 'CONTROLLER', ($scope)=>
				$scope.obj = @obj
				@appScope = $scope

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

	'teardownFn': (container$)->
		@appScope.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @appScope
		delete @getNewValue


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








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

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

		@updateValue = ()=> @obj.prop = @getNewValue()
		
		component = "
			<div>
				<div ng-app='ANGULAR' ng-controller='CONTROLLER'>
					<div ng-bind-html='\"Current \"+obj.prop+\" Works.\"'></div>
				</div>
			</div>
		"
		container$.html(component)

		@app = angular.module('ANGULAR', [])
			.config ($sceProvider)-> $sceProvider.enabled false
			.controller 'CONTROLLER', ($scope)=>
				$scope.obj = @obj
				@appScope = $scope

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

	'teardownFn': (container$)->
		@appScope.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @appScope
		delete @getNewValue


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








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++}"

		@updateValue = ()=> @obj.prop = @getNewValue()
		
		value = 'obj.prop+\" \"+'.repeat(250)
		component = "
			<div>
				<div ng-app='ANGULAR' ng-controller='CONTROLLER'>
					<div ng-bind-html='#{value}\"\"'></div>
				</div>
			</div>
		"
		container$.html(component)

		@app = angular.module('ANGULAR', [])
			.config ($sceProvider)-> $sceProvider.enabled false
			.controller 'CONTROLLER', ($scope)=>
				$scope.obj = @obj
				@appScope = $scope

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

	'teardownFn': (container$)->
		@appScope.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @appScope
		delete @getNewValue


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







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

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

		@updateValue = ()=> @obj.prop = @getNewValue()
		
		component = "
			<div>
				<div ng-app='ANGULAR' ng-controller='CONTROLLER'>
					<div>{{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$)->
		@appScope.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @appScope
		delete @getNewValue


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








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

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

		@updateValue = ()=> @obj.prop = @getNewValue()
		
		component = "
			<div>
				<div ng-app='ANGULAR' ng-controller='CONTROLLER'>
					<div>Current {{obj.prop}} Works.</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$)->
		@appScope.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @appScope
		delete @getNewValue


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










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':[]
		@offset = 0
		_ = @
		
		@updateValue = ()=>
			@obj.divs = (i+@offset for i in [1..1000])
			@offset += 1000
			return

		component = "
			<div>
				<div ng-app='ANGULAR' ng-controller='CONTROLLER'>
					<div ng-repeat='value in obj.divs'>{{value}}</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$)->
		@appScope.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @appScope
		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':'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$)->
# 		@appScope.$destroy()
# 		container$.empty()

# 		delete @obj
# 		delete @app
# 		delete @appScope
# 		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':'value'
		_ = @
	
		@updateValue = ()=>
			@obj.prop = value

		component = "
			<div>
				<div ng-app='ANGULAR' ng-controller='CONTROLLER'>
				</div>
			</div>
		"
		container$.html(component)
		container$.find('div[ng-app="ANGULAR"]').html ("<div>{{obj.prop}}</div>" for i in [1..1000])

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

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

		return

	'teardownFn': (container$)->
		@appScope.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @appScope
		delete @getNewValue


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