Dev: Standardized the selectable test suite. Fixed #8752 - Dev: Get selectable test suite to pass

Author: mikesherov

build/tasks/testswarm.js

@@ -22,7 +22,7 @@ var versions = {
 		"Position": "position/position.html",
 		"Progressbar": "progressbar/progressbar.html",
 		//"Resizable": "resizable/resizable.html",
-		//"Selectable": "selectable/selectable.html",
+		"Selectable": "selectable/selectable.html",
 		//"Slider": "slider/slider.html",
 		//"Sortable": "sortable/sortable.html",
 		"Spinner": "spinner/spinner.html",

grunt.js

@@ -281,13 +281,13 @@ grunt.initConfig({
 		files: grunt.file.expandFiles( "tests/unit/**/*.html" ).filter(function( file ) {
 			// disabling everything that doesn't (quite) work with PhantomJS for now
 			// TODO except for all|index|test, try to include more as we go
-			return !( /(all|all-active|index|test|droppable|selectable|resizable|sortable|dialog|slider|datepicker|tabs|tooltip)\.html$/ ).test( file );
+			return !( /(all|all-active|index|test|droppable|resizable|sortable|dialog|slider|datepicker|tabs|tooltip)\.html$/ ).test( file );
 		})
 	},
 	lint: {
 		ui: grunt.file.expandFiles( "ui/*.js" ).filter(function( file ) {
 			// TODO remove items from this list once rewritten
-			return !( /(mouse|datepicker|droppable|resizable|selectable|sortable)\.js$/ ).test( file );
+			return !( /(mouse|datepicker|droppable|resizable|sortable)\.js$/ ).test( file );
 		}),
 		grunt: [ "grunt.js", "build/**/*.js" ],
 		tests: "tests/unit/**/*.js"

tests/unit/all-active.html

@@ -29,7 +29,7 @@
 			"position/position.html",
 			"progressbar/progressbar.html",
 			//"resizable/resizable.html",
-			//"selectable/selectable.html",
+			"selectable/selectable.html",
 			//"slider/slider.html",
 			//"sortable/sortable.html",
 			"spinner/spinner.html",

tests/unit/all.html

@@ -29,7 +29,7 @@
 			"position/position.html",
 			"progressbar/progressbar.html",
 			//"resizable/resizable.html",
-			//"selectable/selectable.html",
+			"selectable/selectable.html",
 			"slider/slider.html",
 			//"sortable/sortable.html",
 			"spinner/spinner.html",

tests/unit/selectable/selectable_common.js

@@ -3,6 +3,7 @@ TestHelpers.commonWidgetTests('selectable', {
 		appendTo: 'body',
 		autoRefresh: true,
 		cancel: 'input,textarea,button,select,option',
+		create: null,
 		delay: 0,
 		disabled: false,
 		distance: 0,

tests/unit/selectable/selectable_core.js

@@ -2,15 +2,15 @@
  * selectable_core.js
  */
 
-var el;
-
-TestHelpers.selectableDrag = function drag(dx, dy) {
-	var off = el.offset(), pos = { clientX: off.left, clientY: off.top };
-	el.simulate("mousedown", pos);
-	$(document).simulate("mousemove", pos);
-	pos.clientX += dx;
-	pos.clientY += dy;
-	$(document).simulate("mousemove", pos);
-	$(document).simulate("mouseup", pos);
-};
-
+TestHelpers.selectable = {
+	drag: function drag(el, dx, dy) {
+		var off = el.offset(),
+			pos = { clientX: off.left, clientY: off.top };
+		el.simulate("mousedown", pos);
+		$(document).simulate("mousemove", pos);
+		pos.clientX += dx;
+		pos.clientY += dy;
+		$(document).simulate("mousemove", pos);
+		$(document).simulate("mouseup", pos);
+	}
+};

tests/unit/selectable/selectable_events.js

@@ -7,7 +7,7 @@ module("selectable: events");
 
 test("start", function() {
 	expect(2);
-	el = $("#selectable1");
+	var el = $("#selectable1");
 	el.selectable({
 		start: function() {
 			ok(true, "drag fired start callback");
@@ -19,7 +19,7 @@ test("start", function() {
 
 test("stop", function() {
 	expect(2);
-	el = $("#selectable1");
+	var el = $("#selectable1");
 	el.selectable({
 		start: function() {
 			ok(true, "drag fired stop callback");

tests/unit/selectable/selectable_methods.js

@@ -6,7 +6,7 @@
 module("selectable: methods");
 
 test("init", function() {
-	expect(6);
+	expect( 5 );
 
 	$("<div></div>").appendTo('body').selectable().remove();
 	ok(true, '.selectable() called on element');
@@ -17,10 +17,7 @@ test("init", function() {
 	$("<div></div>").selectable().remove();
 	ok(true, '.selectable() called on disconnected DOMElement');
 
-	$("<div></div>").selectable().selectable("foo").remove();
-	ok(true, 'arbitrary method called after init');
-
-	el = $("<div></div>").selectable();
+	var el = $("<div></div>").selectable();
 	el.selectable("option", "foo");
 	el.remove();
 	ok(true, 'arbitrary option getter after init');
@@ -30,6 +27,8 @@ test("init", function() {
 });
 
 test("destroy", function() {
+	expect( 4 );
+
 	$("<div></div>").appendTo('body').selectable().selectable("destroy").remove();
 	ok(true, '.selectable("destroy") called on element');
 
@@ -39,9 +38,6 @@ test("destroy", function() {
 	$("<div></div>").selectable().selectable("destroy").remove();
 	ok(true, '.selectable("destroy") called on disconnected DOMElement');
 
-	$("<div></div>").selectable().selectable("destroy").selectable("foo").remove();
-	ok(true, 'arbitrary method called after destroy');
-
 	var expected = $('<div></div>').selectable(),
 		actual = expected.selectable('destroy');
 	equal(actual, expected, 'destroy is chainable');
@@ -50,9 +46,9 @@ test("destroy", function() {
 test("enable", function() {
 	expect(3);
 	var expected, actual,
-		fired = false;
+		fired = false,
+		el = $("#selectable1");
 
-	el = $("#selectable1");
 	el.selectable({
 		disabled: true,
 		start: function() { fired = true; }
@@ -72,9 +68,9 @@ test("enable", function() {
 test("disable", function() {
 	expect(3);
 	var expected, actual,
-		fired = false;
+		fired = false,
+		el = $("#selectable1");
 
-	el = $("#selectable1");
 	el.selectable({
 		disabled: false,
 		start: function() { fired = true; }

tests/unit/selectable/selectable_options.js

@@ -7,37 +7,42 @@ module("selectable: options");
 
 test("autoRefresh", function() {
 	expect(3);
-	el = $("#selectable1");
-	var actual, sel = $("*", el), selected = function() { actual += 1; };
 
-	actual = 0;
+	var actual = 0,
+		el = $("#selectable1"),
+		sel = $("*", el),
+		selected = function() { actual += 1; };
+
 	el = $("#selectable1").selectable({ autoRefresh: false,	selected: selected });
 	sel.hide();
-	TestHelpers.selectableDrag(1000, 1000);
+	TestHelpers.selectable.drag(el, 1000, 1000);
 	equal(actual, sel.length);
 	el.selectable("destroy");
 
 	actual = 0;
 	sel.show();
 	el = $("#selectable1").selectable({ autoRefresh: true,	selected: selected });
 	sel.hide();
-	TestHelpers.selectableDrag(1000, 1000);
+	TestHelpers.selectable.drag(el, 1000, 1000);
 	equal(actual, 0);
 	sel.show();
-	TestHelpers.selectableDrag(1000, 1000);
+	TestHelpers.selectable.drag(el, 1000, 1000);
 	equal(actual, sel.length);
 	el.selectable("destroy");
 	sel.show();
 });
 
 test("filter", function() {
 	expect(2);
-	el = $("#selectable1");
-	var actual, sel = $("*", el), selected = function() { actual += 1; };
 
-	actual = 0;
+	var actual =0,
+		el = $("#selectable1"),
+		sel = $("*", el),
+		selected = function() { actual += 1; };
+
+
 	el = $("#selectable1").selectable({ filter: '.special', selected: selected });
-	TestHelpers.selectableDrag(1000, 1000);
+	TestHelpers.selectable.drag(el, 1000, 1000);
 	ok(sel.length !== 1, "this test assumes more than 1 selectee");
 	equal(actual, 1);
 	el.selectable("destroy");

ui/jquery.ui.selectable.js

@@ -25,20 +25,20 @@ $.widget("ui.selectable", $.ui.mouse, {
 		tolerance: 'touch'
 	},
 	_create: function() {
-		var that = this;
+		var selectees,
+			that = this;
 
 		this.element.addClass("ui-selectable");
 
 		this.dragged = false;
 
 		// cache selectee children based on filter
-		var selectees;
 		this.refresh = function() {
 			selectees = $(that.options.filter, that.element[0]);
 			selectees.addClass("ui-selectee");
 			selectees.each(function() {
-				var $this = $(this);
-				var pos = $this.offset();
+				var $this = $(this),
+					pos = $this.offset();
 				$.data(this, "selectable-item", {
 					element: this,
 					$element: $this,
@@ -72,14 +72,14 @@ $.widget("ui.selectable", $.ui.mouse, {
 	},
 
 	_mouseStart: function(event) {
-		var that = this;
+		var that = this,
+			options = this.options;
 
 		this.opos = [event.pageX, event.pageY];
 
-		if (this.options.disabled)
+		if (this.options.disabled) {
 			return;
-
-		var options = this.options;
+		}
 
 		this.selectees = $(options.filter, this.element[0]);
 
@@ -114,9 +114,10 @@ $.widget("ui.selectable", $.ui.mouse, {
 		});
 
 		$(event.target).parents().andSelf().each(function() {
-			var selectee = $.data(this, "selectable-item");
+			var doSelect,
+				selectee = $.data(this, "selectable-item");
 			if (selectee) {
-				var doSelect = (!event.metaKey && !event.ctrlKey) || !selectee.$element.hasClass('ui-selected');
+				doSelect = (!event.metaKey && !event.ctrlKey) || !selectee.$element.hasClass('ui-selected');
 				selectee.$element
 					.removeClass(doSelect ? "ui-unselecting" : "ui-selected")
 					.addClass(doSelect ? "ui-selecting" : "ui-unselecting");
@@ -140,28 +141,37 @@ $.widget("ui.selectable", $.ui.mouse, {
 	},
 
 	_mouseDrag: function(event) {
-		var that = this;
+
 		this.dragged = true;
 
-		if (this.options.disabled)
+		if (this.options.disabled) {
 			return;
+		}
 
-		var options = this.options;
+		var tmp,
+			that = this,
+			options = this.options,
+			x1 = this.opos[0],
+			y1 = this.opos[1],
+			x2 = event.pageX,
+			y2 = event.pageY;
 
-		var x1 = this.opos[0], y1 = this.opos[1], x2 = event.pageX, y2 = event.pageY;
-		if (x1 > x2) { var tmp = x2; x2 = x1; x1 = tmp; }
-		if (y1 > y2) { var tmp = y2; y2 = y1; y1 = tmp; }
+		if (x1 > x2) { tmp = x2; x2 = x1; x1 = tmp; }
+		if (y1 > y2) { tmp = y2; y2 = y1; y1 = tmp; }
 		this.helper.css({left: x1, top: y1, width: x2-x1, height: y2-y1});
 
 		this.selectees.each(function() {
-			var selectee = $.data(this, "selectable-item");
+			var selectee = $.data(this, "selectable-item"),
+				hit = false;
+
 			//prevent helper from being selected if appendTo: selectable
-			if (!selectee || selectee.element == that.element[0])
+			if (!selectee || selectee.element === that.element[0]) {
 				return;
-			var hit = false;
-			if (options.tolerance == 'touch') {
+			}
+
+			if (options.tolerance === 'touch') {
 				hit = ( !(selectee.left > x2 || selectee.right < x1 || selectee.top > y2 || selectee.bottom < y1) );
-			} else if (options.tolerance == 'fit') {
+			} else if (options.tolerance === 'fit') {
 				hit = (selectee.left > x1 && selectee.right < x2 && selectee.top > y1 && selectee.bottom < y2);
 			}
 
@@ -228,8 +238,6 @@ $.widget("ui.selectable", $.ui.mouse, {
 
 		this.dragged = false;
 
-		var options = this.options;
-
 		$('.ui-unselecting', this.element[0]).each(function() {
 			var selectee = $.data(this, "selectable-item");
 			selectee.$element.removeClass('ui-unselecting');