refactor DOMReady specs

mootools · Feb 11, 2015 · ba054dd · ba054dd
1 parent 915eb47
commit ba054dd
Show file tree

Hide file tree

Showing 5 changed files with 202 additions and 24 deletions.
diff --git a/Specs/Utilities/DOMReady.js b/Specs/Utilities/DOMReady.js
@@ -6,30 +6,96 @@ provides: ~
 ...
 */
 
-/* todo
-document.addListener = function(type, fn){
-	if (this.addEventListener) this.addEventListener(type, fn, false);
-	else this.attachEvent('on' + type, fn);
-	return this;
-};
-
-document.removeListener = function(type, fn){
-	if (this.removeEventListener) this.removeEventListener(type, fn, false);
-	else this.detachEvent('on' + type, fn);
-	return this;
-};
-
-
-window.fireEvent =
-document.fireEvent = function(type){
-	if (type == 'domready')
-	for (var i = 0; i < domreadyCallbacks.length; ++i){
+describe("DOMReady", function(){
+
+	var win, frame, cb, ready;
+	function checkStatus(){
+		ready = win && win.callbackFired;
+		if (ready) cb();
+		return ready;
 	}
-	domreadyCallbacks[i]();
-};
 
-window.addEvent = function(){};
+	function newFrame(url){
+		var iframe = new IFrame({
+			src: 'specsserver/' + url
+		});
+		document.getElement('body').adopt(iframe);
+		return iframe;
+	}
+
+	beforeEach(function(){
+		cb = jasmine.createSpy('DOMReady!');
+	});
+
+	afterEach(function(){
+		frame.destroy();
+		win = cb = frame = ready = null;
+	});
+
+	it('should fire DOMReady, after flushing, when the DOM is ready', function(){
+		frame = newFrame('foo?assets=flush');
+		frame.addEvent('load', function(){
+			win = frame.contentWindow;
+			expect(win.moments[0]).toEqual('loading');
+			expect(win.moments[1]).toEqual('loading');
+			expect(win.moments[2] == 'interactive' || win.moments[2] == 'complete').toBeTruthy();
+		});
+
+		waitsFor(function(){
+			return checkStatus();
+		}, "the iframe to load", 8000);
+		runs(function(){
+			expect(cb).toHaveBeenCalled();
+		});
+	});	
+
+	it('should fire DOMReady when the DOM is ready', function(){
+		frame = newFrame('DOMReady/DOMReady.head.html');
+		frame.addEvent('load', function(){
+			win = frame.contentWindow;
+		});
+		waitsFor(function(){
+			return checkStatus();
+		}, "the iframe to load", 1500);
+		runs(function(){
+			expect(cb).toHaveBeenCalled();
+		});
+	});
+
+	it('should fire DOMReady when a new `addEvent("domready"` is added', function(){
+		frame = newFrame('DOMReady/DOMReady.onAdd.html');
+		frame.addEvent('load', function(){
+			win = frame.contentWindow;
+			win.addEvent('domready', win.callback);
+		});
+		waitsFor(function(){
+			return checkStatus();
+		}, "the iframe to load", 1500);
+		runs(function(){
+			expect(cb).toHaveBeenCalled();
+		});
+	});
+
+	it('should fire when MooTools was loaded into a already-ready page', function(){
+		frame = newFrame('DOMReady/DOMReady.delayed.html');
+		var ready;
+		frame.addEvent('load', function(){
+			win = frame.contentWindow;
+			expect(win.MooTools).toBeFalsy(); // because MooTools should not be loaded yet
+			var i = setInterval(function(){
+				if (win.addEvent && win.callback){
+					win.addEvent('domready', win.callback);
+					if (ready) clearInterval(i);
+				}
+			}, 50);
+		});
+		waitsFor(function(){
+			return checkStatus();
+		}, "the iframe to load and MooTools to be deployed", 6000);
+		runs(function(){
+			expect(cb).toHaveBeenCalled();
+		});
+	});
+
+});
 
-var Element = this.Element || {};
-Element.Events = {};
-*/
diff --git a/Tests/DOMReady/DOMReady.delayed.html b/Tests/DOMReady/DOMReady.delayed.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+		<title>Add MooTools when page is already ready</title>
+	</head>
+	<body>
+
+		<script>
+		function callback(){
+			window.callbackFired = true;
+		}
+
+		function addScript(path){
+			var script = document.createElement('script');
+			script.type = 'text/javascript';
+			script.src = path;
+			document.getElementsByTagName('head')[0].appendChild(script);
+		}
+
+		window.callbackFired = false;
+		window.onload = function(){
+			addScript('mootoolsPath.js');
+		}
+		</script>
+	</body>
+</html>
diff --git a/Tests/DOMReady/DOMReady.head.html b/Tests/DOMReady/DOMReady.head.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+		<title>Normal DOMReady scenario</title>
+
+		<script src="mootoolsPath.js" type="text/javascript"></script>
+	</head>
+	<body>
+
+		<script>
+		function callback(){
+			window.callbackFired = true;
+		}
+
+		window.callbackFired = false;
+		window.addEvent('domready', callback);
+		</script>
+	</body>
+</html>
+
diff --git a/Tests/DOMReady/DOMReady.onAdd.html b/Tests/DOMReady/DOMReady.onAdd.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+		<title>DOMReady added when page is already loaded</title>
+
+		<script src="mootoolsPath.js" type="text/javascript"></script>
+	</head>
+	<body>
+
+		<script>
+		function callback(){
+			window.callbackFired = true;
+		}
+
+		window.callbackFired = false;
+		</script>
+	</body>
+</html>
diff --git a/Tests/assets.js b/Tests/assets.js
@@ -0,0 +1,45 @@
+"use strict";
+
+// custom behaviours to test
+var assets = {
+
+	flush: function(req, res, src){
+
+		var headString = '' +
+			'<html>' +
+				'<head>' +
+					'<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />' +
+					'<title>Flushed page scenario</title>' +
+					'<script src="' + src + '.js" type="text/javascript"></script>' +
+					'<script>' +
+						'window.moments = [];' +
+						'moments.push(document.readyState);' +
+						'function callback(){' +
+							'window.callbackFired = true;' +
+							'moments.push(document.readyState);' +
+						'}' +
+						'window.callbackFired = false;' +
+						'window.addEvent("domready", callback);' +
+					'</script>' +
+				'</head>';
+		var bodyString = '' +
+				'<body>' +
+					'<div>body added...</div>' +
+					'<script>' +
+						'moments.push(document.readyState);' +
+					'</script>' +
+				'</body>';
+		var endString = '</html>';
+
+		res.writeHead(200, {'Content-Type': 'text/html'});
+		res.write(headString);
+		setTimeout(function() { 	
+			res.write(bodyString);                                                          
+			setTimeout(function() { 
+				res.end(endString);
+			}, 2000);                                                                      
+		}, 2000);
+	}
+}
+
+module.exports = assets;