Add 'label-is-selection' and 'label-in-selection' tests

test/specs/TickLabelSpec.js

@@ -71,4 +71,183 @@ describe("Tick Label Render Tests", function() {
 	//test both horizontal and vertical orientations
 	testOrientation('horizontal');
 	testOrientation('vertical');
+});
+
+describe("Tick Labels 'is-selection' and 'in-selection' Tests", function() {
+	var $inputSlider;
+	var options;
+	var keyboardEvent;
+	var $slider;
+	var $handle1;
+	var $handle2;
+	var $tickLabels;
+	var tickLabelCount;
+
+	// Setup
+	beforeEach(function() {
+		options = {
+			id: 'slider1',
+			ticks: [0, 1, 2, 3, 4],
+			value: 2,
+			ticks_labels:['$0', '$1', '$2', '$3', '$4'],
+		};
+
+		tickLabelCount = options.ticks_labels.length;
+
+		// Create keyboard event
+		keyboardEvent = document.createEvent('Event');
+		keyboardEvent.initEvent('keydown', true, true);
+	});
+
+	// Cleanup
+	afterEach(function() {
+		$inputSlider.slider('destroy');
+		$inputSlider = null;
+	});
+
+	describe("Tick Labels 'is-selection' Tests", function() {
+
+		describe("'options.selection = 'before'", function() {
+
+			beforeEach(function() {
+				options.selection = 'before';
+				$inputSlider = $('#testSlider1').slider(options);
+				$slider = $('#slider1');
+				$tickLabels = $slider.find('.slider-tick-label-container div.slider-tick-label');
+			});
+
+			it("Should show the correct tick labels as 'is-selection'", function() {
+				// There should only be one tick label with the 'label-is-selection' class
+				expect($slider.find('.label-is-selection').length).toBe(1);
+				// Only the third tick label should have the 'label-is-selection' class
+				expect($tickLabels.eq(2).hasClass('label-is-selection')).toBe(true);
+			});
+
+			it("Should show the correct tick labels as 'is-selection' when keying to the left", function(done) {
+				$handle1 = $('#slider1').find('.slider-handle:first');
+
+				expect($slider.find('.label-is-selection').length).toBe(1);
+				expect($tickLabels.eq(2).hasClass('label-is-selection')).toBe(true);
+
+				$handle1.on('keydown', function() {
+					expect($slider.find('.label-is-selection').length).toBe(1);
+					expect($tickLabels.eq(1).hasClass('label-is-selection')).toBe(true);
+					done();
+				});
+
+				// Move handle1 to the left with keyboard
+				$handle1.focus();
+				keyboardEvent.keyCode = keyboardEvent.which = 37;
+				$handle1[0].dispatchEvent(keyboardEvent);
+			});
+		});
+
+		describe("'options.selection = 'after'", function() {
+
+			beforeEach(function() {
+				options.selection = 'after';
+				$inputSlider = $('#testSlider1').slider(options);
+				$slider = $('#slider1');
+				$tickLabels = $slider.find('.slider-tick-label-container div.slider-tick-label');
+			});
+
+			it("Should show the correct tick labels as 'is-selection'" , function() {
+				expect($slider.find('.label-is-selection').length).toBe(1);
+				expect($tickLabels.eq(2).hasClass('label-is-selection')).toBe(true);
+			});
+
+			it("Should show the correct tick labels as 'is-selection' when keying to the right" , function(done) {
+				$handle1 = $('#slider1').find('.slider-handle:first');
+
+				expect($slider.find('.label-is-selection').length).toBe(1);
+				expect($tickLabels.eq(2).hasClass('label-is-selection')).toBe(true);
+
+				$handle1.on('keydown', function() {
+					expect($slider.find('.label-is-selection').length).toBe(1);
+					expect($tickLabels.eq(3).hasClass('label-is-selection')).toBe(true);
+					done();
+				});
+
+				// Move handle1 to the right with keyboard
+				$handle1.focus();
+				keyboardEvent.keyCode = keyboardEvent.which = 39;
+				$handle1[0].dispatchEvent(keyboardEvent);
+			});
+		});
+	});
+
+	describe("Tick Labels 'in-selection' Tests", function() {
+
+		function checkTickLabels($labels, expectedLabels) {
+			var next = 0;
+
+			// There are only 5 tick labels.
+			expect($labels.length).toBe(tickLabelCount);
+
+			for (var i = 0; i < tickLabelCount; i++) {
+				if (i === expectedLabels[next]) {
+					expect($labels.eq(i).hasClass('label-in-selection')).toBe(true);
+					next++;
+				}
+				else {
+					expect($labels.eq(i).hasClass('label-in-selection')).toBe(false);
+				}
+			}
+		}
+
+		// Setup
+		beforeEach(function() {
+			options.value = [1, 3];
+			$inputSlider = $('#testSlider1').slider(options);
+			$slider = $('#slider1');
+			$tickLabels = $slider.find('.slider-tick-label-container div.slider-tick-label');
+		});
+
+		it("Should show the correct tick labels as 'in-selection'", function() {
+			expect($slider.find('.label-is-selection').length).toBe(3);
+			checkTickLabels($tickLabels, [1, 2, 3]);
+		});
+
+		it("Should show the correct tick labels as 'in-selection' when keying to the left", function(done) {
+			$handle1 = $('#slider1').find('.slider-handle:first');
+
+			// There should be 3 tick labels with the 'label-in-selection' class
+			expect($slider.find('.label-in-selection').length).toBe(3);
+
+			// Check that the correct tick labels have the 'label-in-selection' class
+			checkTickLabels($tickLabels, [1, 2, 3]);
+
+			$handle1.on('keydown', function() {
+				expect($slider.find('.label-in-selection').length).toBe(4);
+
+				// Check the labels again
+				checkTickLabels($tickLabels, [0, 1, 2, 3]);
+				done();
+			});
+
+			// Move handle1 to the left with keyboard
+			$handle1.focus();
+			keyboardEvent.keyCode = keyboardEvent.which = 37;
+			$handle1[0].dispatchEvent(keyboardEvent);
+		});
+
+		it("Should show the correct tick labels as 'in-selection' when keying to the right" , function(done) {
+			$handle2 = $('#slider1').find('.slider-handle:last');
+
+			expect($slider.find('.label-in-selection').length).toBe(3);
+
+			checkTickLabels($tickLabels, [1, 2, 3]);
+
+			$handle2.on('keydown', function() {
+				expect($slider.find('.label-in-selection').length).toBe(4);
+				checkTickLabels($tickLabels, [1, 2, 3, 4]);
+				done();
+			});
+
+			// Move handle2 to the right with keyboard
+			$handle2.focus();
+			keyboardEvent.keyCode = keyboardEvent.which = 39;
+			$handle2[0].dispatchEvent(keyboardEvent);
+		});
+	});
 });