silverstripe-framework/thirdparty/jquery-entwine/spec/spec.entwine.events.js

describe('Entwine', function(){

	beforeEach(function(){
		$('body').append('<div id="dom_test"></div>');
	});

	afterEach(function(){
		$('#dom_test').remove();
	});

	describe('Events', function(){

		beforeEach(function(){
			$.entwine.synchronous_mode();
			$.entwine.clear_all_rules();
			$('#dom_test').html('<div id="a" class="a b c"></div>');
		});

		it('calls onfoo when foo triggered', function(){
			var a = 0;

			$('#a').entwine({
				onfoo: function(){a = 1;}
			});

			expect(a).toEqual(0);

			$('#a').trigger('foo');
			expect(a).toEqual(1);
		});

		it('only calls most specific onfoo when foo triggered', function(){
			var a = 0, b = 0;

			$('#a.a').entwine({
				onfoo: function(){a = 1;}
			});
			$('#a').entwine({
				onfoo: function(){b = 1;}
			});

			expect(a).toEqual(0);
			expect(b).toEqual(0);

			$('#a').trigger('foo');
			expect(a).toEqual(1);
			expect(b).toEqual(0);
		});

		it('calls namespaced onfoo when foo triggered', function(){
			var a = 0;

			$('#a').entwine('bar', function($){return{
				onfoo: function(){a = 1;}
			};});

			expect(a).toEqual(0);

			$('#a').trigger('foo');
			expect(a).toEqual(1);
		});

		it('calls most specific namespaced onfoo and most specific non-namespaced onfoo when foo triggered', function(){
			var a = 0, b = 0, c = 0, d = 0;

			$('#a.a').entwine({
				onfoo: function(){a = 1;}
			});
			$('#a').entwine({
				onfoo: function(){b = 1;}
			});
			$('#a.a').entwine('bar', function($){return{
				onfoo: function(){c = 1;}
			};});
			$('#a').entwine('bar', function($){return{
				onfoo: function(){d = 1;}
			};});

			expect([a, b, c, d]).toEqual([0, 0, 0, 0]);

			$('#a').trigger('foo');
			expect([a, b, c, d]).toEqual([1, 0, 1, 0]);
		});

		it('calls up correctly on _super', function(){
			var a = 0, b = 0;

			$('#a').entwine({
				onfoo: function(){a += 1;}
			});
			$('#a.a').entwine({
				onfoo: function(){this._super(); b += 1; this._super();}
			});

			expect([a, b]).toEqual([0, 0]);

			$('#a').trigger('foo')
			expect([a, b]).toEqual([2, 1]);
		});

		it('passes event object', function(){
			var event;

			$('#a').entwine({
				onfoo: function(e){event = e;}
			});

			$('#a').trigger('foo');
			expect(event.type).toBeDefined();
			expect(event.type).toEqual('foo');
			expect(event.target).toHaveAttr('id', 'a');
		});

		it('delegates submit events to forms', function(){
			var a = 0;
			$('<form class="foo" action="javascript:undefined">').appendTo('#dom_test');

			$('.foo').entwine({
				onsubmit: function(e, d){a = 1;}
			});

			expect(a).toEqual(0);

			$('.foo').trigger('submit');
			expect(a).toEqual(1);
		});

		describe('can pass event data', function(){

			it('on custom events', function(){
				var data;

				$('#a').entwine({
					onfoo: function(e, d){data = d;}
				});

				$('#a').trigger('foo', {cheese: 'burger'});
				expect(data.cheese).toEqual('burger');
			});

			it('on normal events', function(){
				var data;

				$('#a').entwine({
					onclick: function(e, d){data = d;}
				});

				$('#a').trigger('click', {finger: 'left'});
				expect(data.finger).toEqual('left');
			});

			it('on submit', function(){
				var data;
				$('<form class="foo" action="javascript:undefined">').appendTo('#dom_test');

				$('.foo').entwine({
					onsubmit: function(e, d){data = d; return false;}
				});

				$('.foo').trigger('submit', {cheese: 'burger'});
				expect(data.cheese).toEqual('burger');
			});
		});

		describe('calls onchange on checkboxes properly', function(){

			beforeEach(function(){
				$('#dom_test').html('<input id="i" type="checkbox" name="test_input_i"  value="i" />');
			});

			it('calls onchange', function(){
				var a = 0;

				$('#i').entwine({
					onchange: function(){a += 1;}
				});

				// Can't just "click()" - it's not the same as an actual click event
				$('#i').trigger('focusin');
				$('#i')[0].click();
				expect(a).toEqual(1);
			});

			it('calls onchange only once per change', function(){
				var a = 0;

				$('#i').entwine({
					onchange: function(){a += 1;}
				});

				$('#i').trigger('focusin');
				$('#i')[0].click();
				expect(a).toEqual(1);

				$('#i').trigger('focusout');
				$('#i').trigger('focusin');
				$('#i').trigger('focusout');
				expect(a).toEqual(1);

				$('#i')[0].click();
				expect(a).toEqual(2);
			});

			it('calls onchange even if checked attribute altered in mean time', function(){
				var a = 0;

				$('#i').entwine({
					onchange: function(){a += 1;}
				});

				$('#i').trigger('focusin');
				$('#i')[0].click();
				expect(a).toEqual(1);

				$('#i').removeAttr('checked');

				$('#i').trigger('focusin');
				$('#i')[0].click();
				expect(a).toEqual(2);
			});
		});
	});
});