automated tests for getClientRect/getScrollbarWidths

build/karma.conf.js

@@ -37,6 +37,7 @@ module.exports = function(config) {
 			'../lib/jasmine-jquery/lib/jasmine-jquery.js',
 			'../lib/jasmine-fixture/dist/jasmine-fixture.js',
 			'../tests/lib/jasmine-ext.js',
+			'../tests/lib/css-utils.js',
 			'../tests/lib/dnd-resize-utils.js',
 
 			'../dist/fullcalendar.js',

tests/automated/getClientRect.js

@@ -0,0 +1,86 @@
+
+describe('getClientRect', function() {
+
+	var getClientRect = $.fullCalendar.getClientRect;
+
+	defineTests(
+		'when margin',
+		{ margin: '5px 10px' },
+		{ width: 100, height: 100 },
+		{ width: 100, height: 100 }
+	);
+	defineTests(
+		'when border',
+		{ border: '5px solid red' },
+		{ width: 100, height: 100 },
+		{ width: 100, height: 100 }
+	);
+	defineTests(
+		'when padding',
+		{ padding: '5px 10px' },
+		{ width: 100, height: 100 },
+		{ width: 120, height: 110 }
+	);
+	defineTests(
+		'when border and padding',
+		{ border: '5px solid red', padding: '5px 10px' },
+		{ width: 100, height: 100 },
+		{ width: 120, height: 110 }
+	);
+
+	function defineTests(description, cssProps, innerDims, dims) {
+		describe(description, function() {
+			describe('when no scrolling', function() {
+				describe('when LTR', function() {
+					defineTest(false, 'ltr', cssProps, innerDims, dims);
+				});
+				describe('when RTL', function() {
+					defineTest(false, 'rtl', cssProps, innerDims, dims);
+				});
+			});
+			describe('when scrolling', function() {
+				describe('when LTR', function() {
+					defineTest(true, 'ltr', cssProps, innerDims, dims);
+				});
+				describe('when RTL', function() {
+					defineTest(true, 'rtl', cssProps, innerDims, dims);
+				});
+			});
+		});
+	}
+
+	function defineTest(isScrolling, dir, cssProps, innerDims, dims) {
+		it('computes correct dimensions', function() {
+			var el = $(
+				'<div style="position:absolute" />'
+				)
+				.css('overflow', isScrolling ? 'scroll' : 'hidden')
+				.css('direction', dir)
+				.css(cssProps)
+				.append(
+					$('<div style="position:relative" />').css(innerDims)
+				)
+				.appendTo('body');
+
+			var rect = getClientRect(el);
+			var offset = el.offset();
+			var borderLeftWidth = parseFloat(el.css('border-left-width')) || 0;
+			var borderTopWidth = parseFloat(el.css('border-top-width')) || 0;
+			var scrollbarWidths;
+
+			if (isScrolling) {
+				scrollbarWidths = getStockScrollbarWidths(dir);
+			}
+			else {
+				scrollbarWidths = { left: 0, right: 0, top: 0, bottom: 0 };
+			}
+
+			expect(rect.left).toBe(offset.left + borderLeftWidth + scrollbarWidths.left);
+			expect(rect.top).toBe(offset.top + borderTopWidth + scrollbarWidths.top);
+			expect(rect.right - rect.left).toBe(dims.width);
+			expect(rect.bottom - rect.top).toBe(dims.height);
+
+			el.remove();
+		});
+	}
+});

tests/automated/getScrollbarWidths.js

@@ -0,0 +1,73 @@
+
+describe('getScrollbarWidths', function() {
+
+	var getScrollbarWidths = $.fullCalendar.getScrollbarWidths;
+
+	defineTests(
+		'when margin',
+		{ margin: '5px 10px' }
+	);
+	defineTests(
+		'when border',
+		{ border: '5px solid red' }
+	);
+	defineTests(
+		'when padding',
+		{ padding: '5px 10px' }
+	);
+	defineTests(
+		'when border and padding',
+		{ border: '5px solid red', padding: '5px 10px' }
+	);
+
+	function defineTests(description, cssProps) {
+		describe(description, function() {
+			describe('when no scrolling', function() {
+				describe('when LTR', function() {
+					defineTest(false, 'ltr', cssProps);
+				});
+				describe('when RTL', function() {
+					defineTest(false, 'rtl', cssProps);
+				});
+			});
+			describe('when scrolling', function() {
+				describe('when LTR', function() {
+					defineTest(true, 'ltr', cssProps);
+				});
+				describe('when RTL', function() {
+					defineTest(true, 'rtl', cssProps);
+				});
+			});
+		});
+	}
+
+	function defineTest(isScrolling, dir, cssProps) {
+		it('computes correct widths', function() {
+			var el = $(
+				'<div style="position:absolute" />'
+				)
+				.css('overflow', isScrolling ? 'scroll' : 'hidden')
+				.css('direction', dir)
+				.css(cssProps)
+				.append('<div style="position:relative;width:100px;height:100px" />')
+				.appendTo('body');
+
+			var widths = getScrollbarWidths(el);
+			var correctWidths;
+
+			if (isScrolling) {
+				correctWidths = getStockScrollbarWidths(dir);
+			}
+			else {
+				correctWidths = { left: 0, right: 0, top: 0, bottom: 0 };
+			}
+
+			expect(widths.left).toBe(correctWidths.left);
+			expect(widths.right).toBe(correctWidths.right);
+			expect(widths.top).toBe(correctWidths.top);
+			expect(widths.bottom).toBe(correctWidths.bottom);
+
+			el.remove();
+		});
+	}
+});

tests/lib/css-utils.js

@@ -0,0 +1,30 @@
+
+function getStockScrollbarWidths(dir) {
+	var el = $('<div><div style="position:relative"/></div>')
+		.css({
+			position: 'absolute',
+			top: -1000,
+			left: 0,
+			border: 0,
+			padding: 0,
+			overflow: 'scroll',
+			direction: dir || 'ltr'
+		})
+		.appendTo('body');
+
+	var innerEl = el.children();
+	var width = el.width();
+	var height = el.height();
+	var offset = el.offset();
+	var innerOffset = innerEl.offset();
+	var girths = {
+		left: innerOffset.left - offset.left,
+		right: offset.left + width - innerOffset.left,
+		top: innerOffset.top - offset.top,
+		bottom: offset.top + height - innerOffset.top
+	};
+
+	el.remove();
+
+	return girths;
+}