add DOMReady specs

mootools · Jan 24, 2015 · 3720df5 · 3720df5
1 parent 0dbb4d5
commit 3720df5
Show file tree

Hide file tree

Showing 10 changed files with 236 additions and 25 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -1,4 +1,12 @@
 "use strict";
+var fs = require('fs');
+var build = (function(){
+	// travis testing
+	if (process.env && process.env.BUILD) return process.env.BUILD == 'default' ? 'all' : 'nocompat'; 
+	// local testing
+	else return process.argv[2] == null || process.argv[2] == 'all' ? 'all' : 'nocompat';
+})();
+var htmlFileServer = require('./Tests/httpserver.js')(build);
 
 module.exports = function(grunt) {
 

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('DOMReady.flushA.html~DOMReady.flushB.html');
+		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.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.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.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.flushA.html b/Tests/DOMReady/DOMReady.flushA.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+        <title>Flushed page scenario</title>
+        <script src="mootoolsPath.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>
diff --git a/Tests/DOMReady/DOMReady.flushB.html b/Tests/DOMReady/DOMReady.flushB.html
@@ -0,0 +1,6 @@
+	<body>
+	    <div>body added...</div>
+	    <script>
+	        moments.push(document.readyState);
+	    </script>
+	</body>
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/gruntfile-options.js b/Tests/gruntfile-options.js
@@ -66,7 +66,15 @@ var karmaOptions = {
     captureTimeout: 60000 * 2,
     singleRun: true,
     frameworks: ['jasmine', 'sinon'],
-    files: ['Tests/Utilities/*.js', 'mootools-*.js'],
+    files: [
+		'Tests/Utilities/*.js',
+		'mootools-*.js',
+		{pattern: 'Source/**/*.*', included: false, served: true},
+		{pattern: 'Tests/DOMReady/*.*', included: false, served: true}
+	],
+	proxies: {
+        '/specsserver/': 'http://localhost:9000/'
+	},
     sauceLabs: {
         username: process.env.SAUCE_USERNAME,
         accessKey: process.env.SAUCE_ACCESS_KEY,

diff --git a/Tests/httpserver.js b/Tests/httpserver.js
@@ -0,0 +1,37 @@
+"use strict";
+
+var fs = require('fs');
+var path = require('path');
+var http = require('http');
+
+module.exports = function(build){
+
+	var getFileContent = function(url, callback){
+		fs.readFile(url, 'utf-8', function (err, content) {
+			if (err) return console.log(err);
+			content = content.replace('mootoolsPath', '/base/mootools-' + build);
+			callback(content);
+		});
+	}
+
+	http.createServer(function(req, res){
+		if (req.url.indexOf('~') != -1){	// multiple files to send as chunks
+			var partials = req.url.split('~');
+			partials.push(null); // res.end()
+			res.writeHead(200, {'Content-Type': 'text/html'});
+			partials.forEach(function(file, i){
+				setTimeout(function(){
+					if (!file) res.end('</html>');
+					else getFileContent(path.join(__dirname, '/DOMReady/', file), function(data){
+						res.write(data);
+					});
+				}, 2000 * i + 1);
+			})
+		} else { // single files
+			getFileContent(path.join(__dirname, '/DOMReady/', req.url), function(data){
+				res.end(data);
+			});
+		}
+	}).listen(9000);
+}
+
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "karma-firefox-launcher": "~0.1.3",
     "karma-ie-launcher": "~0.1",
     "karma-safari-launcher": "~0.1",
+    "path": "^0.11.14",
     "js-yaml": "^3.0.2"
   }
 }