refactor DOMReady Specs

mootools · Feb 24, 2015 · 54ca50d · 54ca50d
1 parent 80b6695
commit 54ca50d
Show file tree

Hide file tree

Showing 9 changed files with 249 additions and 25 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -1,4 +1,14 @@
 "use strict";
+var fs = require('fs');
+var path = require('path');
+var http = require('http');
+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';
+})();
+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('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;
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/**/*.*', 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,27 @@
+"use strict";
+
+var fs = require('fs');
+var path = require('path');
+var http = require('http');
+var assets = require('./assets.js');
+
+function getQuery(path){
+	var match = path.match(/=(\w+)/);
+	return match ? match[1] : null;
+}
+
+module.exports = function(build){
+	http.createServer(function(req, res){
+
+		var src = '/base/mootools-' + build;
+		var customFunction = getQuery(req.url);
+
+		if (customFunction) return assets[customFunction].call(null, req, res, src);
+		var filePath = path.join(__dirname, req.url);
+		fs.readFile(filePath, 'utf-8', function (err, content){
+			if (err) return console.log(err);
+			content = content.replace('mootoolsPath', src);
+			res.end(content);
+		});
+	}).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"
   }
 }