@danielkalen/simplybind/test/specs/stage-2-methods/bothWays.coffee

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

suite ".bothWays()", ()->
	suiteSetup(restartSandbox)
	test "Create two-way bindings", ()->
		# ==== Objects =================================================================================
		SimplyBind('prop').of(objectA).to('prop').of(objectB).bothWays()
		expect(objectA.prop).to.be.undefined
		
		objectA.prop = 'from objectA'
		expect(objectA.prop).to.equal 'from objectA'
		expect(objectB.prop).to.equal 'from objectA'

		objectB.prop = 'from objectB'
		expect(objectA.prop).to.equal 'from objectB'
		expect(objectB.prop).to.equal 'from objectB'


		# ==== Arrays =================================================================================
		SimplyBind('array:list').of(objectA).to('array:list').of(objectB).bothWays()
		expect(objectA.list.length).to.equal 10
		expect(objectB.list.length).to.equal 10
		expect(objectA.list).not.to.equal(objectB.list)
		expect(objectA.list).to.eql(objectB.list)
		
		objectA.list.push(1)
		objectA.list.push(1)
		expect(objectA.list.length).to.equal 12
		expect(objectB.list.length).to.equal 12
		expect(objectA.list).not.to.equal(objectB.list)
		expect(objectA.list).to.eql(objectB.list)
		
		objectB.list.push(1)
		objectB.list.push(1)
		expect(objectA.list.length).to.equal 14
		expect(objectB.list.length).to.equal 14
		expect(objectA.list).not.to.equal(objectB.list)
		expect(objectA.list).to.eql(objectB.list)


		if isBrowser
			# ==== DOMAttr =================================================================================
			SimplyBind('attr:someattr').of(regA).to('attr:someattr').of(regB).bothWays()
			expect(regA.getAttribute('someattr')).to.equal null
			
			SimplyBind('attr:someattr').of(regA).set 'from regElementA'
			expect(regA.getAttribute('someattr')).to.equal 'from regElementA'
			expect(regB.getAttribute('someattr')).to.equal 'from regElementA'

			SimplyBind('attr:someattr').of(regB).set 'from regElementB'
			expect(regA.getAttribute('someattr')).to.equal 'from regElementB'
			expect(regB.getAttribute('someattr')).to.equal 'from regElementB'


			# ==== DOMText =================================================================================
			regA.textContent = ''
			SimplyBind('textContent').of(regA).to('textContent').of(regB).bothWays()
			expect(regA.textContent).to.equal ''
			
			SimplyBind('textContent').of(regA).set 'from regElementA'
			expect(regA.textContent).to.equal 'from regElementA'
			expect(regB.textContent).to.equal 'from regElementA'

			SimplyBind('textContent').of(regB).set 'from regElementB'
			expect(regA.textContent).to.equal 'from regElementB'
			expect(regB.textContent).to.equal 'from regElementB'


			# ==== DOMValue =================================================================================
			SimplyBind('value').of(inputA).to('value').of(inputB).bothWays()
			expect(inputA.value).to.equal ''
			
			inputA.value = 'from inputA'
			inputA.emit 'change'
			expect(inputA.value).to.equal 'from inputA'
			expect(inputB.value).to.equal 'from inputA'

			inputB.value = 'from inputB'
			inputB.emit 'change'
			expect(inputA.value).to.equal 'from inputB'
			expect(inputB.value).to.equal 'from inputB'


			# ==== DOMCheckbox =================================================================================
			binding = SimplyBind('checked').of(checkboxFields).to('prop2').of(objectB).bothWays()
			expect(objectB.prop2).to.be.instanceOf Array
			expect(objectB.prop2.length).to.equal 0
			
			objectB.prop2 = 'changed from objectB'
			expect($checkboxFields.filter(':checked').length).to.equal 0
			expect(binding.value).to.be.instanceOf Array
			expect(binding.value.length).to.equal 0
			
			objectB.prop2 = 'checkboxB'
			expect($checkboxFields.filter(':checked').val()).to.equal 'checkboxB'
			expect(binding.value.length).to.equal 1
			
			objectB.prop2 = ['checkboxA', 'checkboxC']
			expect($checkboxFields.filter(':checked').length).to.equal 2
			expect(binding.value.length).to.equal 2
			
			$checkboxA.click()
			expect(objectB.prop2).to.be.instanceOf Array
			expect(objectB.prop2.length).to.equal 1
			expect(objectB.prop2[0]).to.equal 'checkboxC'

			restartSandbox()


			# ==== DOMRadio =================================================================================
			SimplyBind('checked').of(radioFields).to('prop3').of(objectB).bothWays()
			
			objectB.prop3 = 'changed from objectB'
			expect($radioFields.filter(':checked').length).to.equal 0
			
			objectB.prop3 = 'radioB'
			expect($radioFields.filter(':checked').val()).to.equal 'radioB'
			
			$radioA.click()
			expect(objectB.prop3).to.equal 'radioA'

			restartSandbox()



		SimplyBind.defaultOptions.updateOnBind = true
		restartSandbox()



	



	test "Will apply the call only to the last proxied dependent", ()->
		restartSandbox()
		SimplyBind('prop1').of(objectA)
			.to('prop1').of(objectB).bothWays()
			.and.to('prop2').of(objectB)
			.and.to('prop3').of(objectB).bothWays()
			.and.to('prop4').of objectB
		
		objectA.prop1 = 'all at once'
		expect(objectB.prop1).to.equal 'all at once'
		expect(objectB.prop2).to.equal 'all at once'
		expect(objectB.prop3).to.equal 'all at once'
		expect(objectB.prop4).to.equal 'all at once'
		
		objectB.prop1 = 'almost all as well since objectA.prop1 gets updated and updates all of its decendents'
		expect(objectA.prop1).to.equal 'almost all as well since objectA.prop1 gets updated and updates all of its decendents'
		expect(objectB.prop2).to.equal 'almost all as well since objectA.prop1 gets updated and updates all of its decendents'
		expect(objectB.prop3).to.equal 'almost all as well since objectA.prop1 gets updated and updates all of its decendents'
		expect(objectB.prop4).to.equal 'almost all as well since objectA.prop1 gets updated and updates all of its decendents'
	
		objectB.prop3 = 'just a few'
		expect(objectA.prop1).to.equal 'just a few'
		expect(objectB.prop1).to.equal 'just a few'
		expect(objectB.prop2).to.equal 'just a few'
		expect(objectB.prop4).to.equal 'just a few'






	suite "DOMValue other than input", ()->
		suiteSetup ()-> if not isBrowser then @skip()
		test "Create two-way bindings between textarea fields", ()->
			SimplyBind('value').of(textarea).to('value').of(inputB).bothWays()

			$textarea.val('changed from input1')[0].emit 'change'
			expect($inputB.val()).to.equal 'changed from input1'

			$inputB.val('changed from input2')[0].emit 'change'
			expect($textarea.val()).to.equal 'changed from input2'




		test "Create two-way bindings between select fields", ()->
			SimplyBind('value').of($select).to('prop3').of(objectB).bothWays()
		
			objectB.prop3 = 'valid'
			expect($select.val()).to.equal 'valid'
		
			$select.val('valid2')[0].emit 'change'
			expect(objectB.prop3).to.equal 'valid2'
			restartSandbox()



	suite.skip "DOMRadio", ()->
		test "Create two-way bindings between radio fields", ()->
			SimplyBind('value').of($('#radio').children()).to('prop3').of(objectB).bothWays()
			
			objectB.prop3 = 'changed from objectB'
			expect($('input:checked').length).to.equal 0
			
			objectB.prop3 = 'radioB'
			expect($('input:checked').val()).to.equal 'radioB'
			
			$radioA.click()[0].emit 'change'
			expect(objectB.prop3).to.equal 'radioA'

			restartSandbox()



	suite.skip "DOMCheckbox", ()->
		test "Create two-way bindings between checkbox fields", ()->
			$checkboxA.prop 'checked', true
			SimplyBind('value').of($('#checkbox')[0].children).to('prop3').of(objectB).bothWays()
			
			objectB.prop3 = 'changed from objectB'
			expect($('input:checked').length).to.equal 0
			
			objectB.prop3 = 'checkboxB'
			expect($('input:checked').val()).to.equal 'checkboxB'
			
			$checkboxA.click()[0].emit 'change'
			expect(objectB.prop3).to.equal 'checkboxA'

			restartSandbox()