Merge branch 'master' of github.com:shower/shower

Gruntfile.js

@@ -11,19 +11,28 @@ module.exports = function(grunt) {
 				dest: 'shower.min.js'
 			}
 		},
-		dalek: {
+		connect: {
-			test: {
+			ribbon: {
-				src: [
+				options: {
-					'tests/shortcuts.js',
+					port: 7497
-					'tests/inner-nav.js'
-				]
 				}
 			}
+		},
+		dalek: {
+			options: {
+				browser: ['chrome']
+			},
+			src: [
+				'tests/*.js'
+			]
+		}
 	});
 
 	grunt.loadNpmTasks('grunt-contrib-uglify');
+	grunt.loadNpmTasks('grunt-contrib-connect');
 	grunt.loadNpmTasks('grunt-dalek');
 
 	grunt.registerTask('default', ['uglify']);
+	grunt.registerTask('test', ['connect', 'dalek']);
 
 };

package.json

@@ -6,9 +6,11 @@
   "private": true,
   "devDependencies": {
     "dalekjs": "0.0.8",
+    "dalek-browser-chrome": "0.0.9",
     "grunt": "~0.4.2",
-    "grunt-contrib-uglify": "~0.3.0",
+    "grunt-contrib-uglify": "~0.3.2",
     "grunt-dalek": "~0.2.0",
-    "grunt-contrib-watch": "~0.5.3"
+    "grunt-contrib-watch": "~0.5.3",
+    "grunt-contrib-connect": "~0.6.0"
   }
 }

shower.js

@@ -493,7 +493,7 @@ window.shower = window.shower || (function(window, document, undefined) {
 	shower.first = function(callback) {
 		var slide = shower.slideList[shower.getCurrentSlideNumber()];
 
-		slide.timing && slide.stopTimer();
+		slide && slide.timing && slide.stopTimer();
 		shower.go(0);
 
 		if (typeof(callback) === 'function') {
@@ -508,7 +508,7 @@ window.shower = window.shower || (function(window, document, undefined) {
 	shower.last = function(callback) {
 		var slide = shower.slideList[shower.getCurrentSlideNumber()];
 
-		slide.timing && slide.stopTimer();
+		slide && slide.timing && slide.stopTimer();
 		shower.go(shower.slideList.length - 1);
 
 		if (typeof(callback) === 'function') {
@@ -599,13 +599,18 @@ window.shower = window.shower || (function(window, document, undefined) {
 	/**
 	* Get current slide number. Starts from zero. Warning: when you have
 	* slide number 1 in URL this method will return 0.
-	* If something is wrong return 0 to get the first slide.
+	* If there is no slide number in url, return -1.
+	* If there is a slide number in url, but the slide does not exist, return 0.
 	* @returns {Number}
 	*/
 	shower.getCurrentSlideNumber = function() {
 		var i = shower.slideList.length - 1,
 			currentSlideId = url.hash.substr(1);
 
+		if (currentSlideId === '') {
+			return -1;
+		}
+
 		// As fast as you can ;-)
 		// http://jsperf.com/for-vs-foreach/46
 		for (; i >= 0; --i) {
@@ -634,6 +639,11 @@ window.shower = window.shower || (function(window, document, undefined) {
 			throw new Error('You can\'t scroll to because you in slide mode. Please, switch to list mode.');
 		}
 
+		// @TODO: WTF?
+		if (-1 === slideNumber) {
+			return ret;
+		}
+
 		if (shower.slideList[slideNumber]) {
 			currentSlide = document.getElementById(shower.slideList[slideNumber].id);
 			window.scrollTo(0, currentSlide.offsetTop);
@@ -804,13 +814,27 @@ window.shower = window.shower || (function(window, document, undefined) {
 	// Event handlers
 
 	window.addEventListener('DOMContentLoaded', function() {
-		if (body.classList.contains('full') || shower.isSlideMode()) {
+		var currentSlideNumber = shower.getCurrentSlideNumber(),
-			shower.go(shower.getCurrentSlideNumber());
+			isSlideMode = body.classList.contains('full') || shower.isSlideMode();
+
+		if (currentSlideNumber === -1 && isSlideMode) {
+			shower.go(0);
+		} else if (currentSlideNumber ===  0 || isSlideMode) {
+			shower.go(currentSlideNumber);
+		}
+
+		if (isSlideMode) {
 			shower.enterSlideMode();
 		}
 	}, false);
 
 	window.addEventListener('popstate', function() {
+		var currentSlideNumber = shower.getCurrentSlideNumber();
+
+		if (currentSlideNumber !== -1) {
+			shower.go(currentSlideNumber);
+		}
+
 		if (shower.isListMode()) {
 			shower.enterListMode();
 		} else {
@@ -826,7 +850,7 @@ window.shower = window.shower || (function(window, document, undefined) {
 
 	document.addEventListener('keydown', function(e) {
 		var currentSlideNumber = shower.getCurrentSlideNumber(),
-			slide = shower.slideList[currentSlideNumber],
+			slide = shower.slideList[ currentSlideNumber !== -1 ? currentSlideNumber : 0 ],
 			slideNumber;
 
 		switch (e.which) {
@@ -860,7 +884,7 @@ window.shower = window.shower || (function(window, document, undefined) {
 			break;
 
 			case 13: // Enter
-				if (shower.isListMode() && currentSlideNumber) {
+				if (shower.isListMode() && -1 !== currentSlideNumber) {
 					e.preventDefault();
 
 					shower.enterSlideMode();

tests/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>Test page for Shower</title>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=792, user-scalable=no">
+	<meta http-equiv="x-ua-compatible" content="ie=edge">
+	<link rel="stylesheet" href="../themes/ribbon/styles/screen.css">
+</head>
+<body class="list">
+	<section class="slide"><div>
+		<h2>1</h2>
+	</div></section>
+	<section class="slide"><div>
+		<h2>2</h2>
+	</div></section>
+	<section class="slide" data-timing="00:03"><div>
+		<h2>3</h2>
+	</div></section>
+	<section class="slide"><div>
+		<h2>4</h2>
+	</div></section>
+	<section class="slide"><div>
+		<h2>5</h2>
+		<div class="next">1</div>
+		<div class="next">2</div>
+		<div class="next">3</div>
+	</div></section>
+	<section class="slide"><div>
+		<h2>6</h2>
+	</div></section>
+	<script src="../shower.js"></script>
+</body>
+</html>

tests/inner-nav.js

@@ -1,10 +0,0 @@
-module.exports = {
-	// Right
-	'Right Arrow key is switching .next to .active': function (test) {
-		test
-			.open('themes/ribbon/index.html?full#20')
-			.sendKeys('body', '\uE014') // Right
-			.assert.attr('[id="20"] li:nth-child(2)', 'class', 'next active', 'First .next is .active')
-		.done();
-	}
-};

tests/navigation.js

@@ -0,0 +1,48 @@
+module.exports = {
+	'Right Arrow key is switching first Next item to Active': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#5')
+			.sendKeys('body', '\uE014') // Right
+			.assert.attr('[id="5"] .next:first-of-type', 'class').to.contain('active', 'First Next item is Active')
+		.done();
+	},
+	'Left Arrow key is switching Active items back to Next': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#5')
+			.sendKeys('body', '\uE014') // Right
+			.sendKeys('body', '\uE014') // Right
+			.sendKeys('body', '\uE012') // Left
+			.sendKeys('body', '\uE012') // Left
+			.assert.numberOfElements('[id="5"] .next.active', 0, 'There are no Active items')
+		.done();
+	},
+	'Right Arrow key is switching to next slide once all Next items becomes Active': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#5')
+			.sendKeys('body', '\uE014') // Right
+			.sendKeys('body', '\uE014') // Right
+			.sendKeys('body', '\uE014') // Right
+			.sendKeys('body', '\uE014') // Right
+			.assert.attr('[id="6"]', 'class').to.contain('active', 'Next slide is Active')
+		.done();
+	},
+	'Left Arrow key is switching to previous slide when all Next items becomes Active': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#5')
+			.sendKeys('body', '\uE014') // Right
+			.sendKeys('body', '\uE014') // Right
+			.sendKeys('body', '\uE014') // Right
+			.sendKeys('body', '\uE012') // Left
+			// Not sure why it’s failing. It works fine manually
+			.assert.attr('[id="4"]', 'class').to.contain('active', 'Previous slide is Active')
+		.done();
+	},
+	'Reload reset navigation': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#5')
+			.sendKeys('body', '\uE014') // Right
+			.reload()
+			.assert.numberOfElements('[id="5"] .next.active', 0, 'There are no Active items')
+		.done();
+	}
+};

tests/shortcuts.js

@@ -1,75 +1,250 @@
 module.exports = {
-	'Body class is switching from `list` to `full` on F5': function (test) {
+	// --------------------------------
-		test
-			.open('themes/ribbon/index.html')
-			.sendKeys('body', '\uE035') // F5
-			.assert.attr('body', 'class', 'full', 'Mode is full')
-		.done();
-	},
 	// F5
-	'Body class is switching from `full` to `list` on F5': function (test) {
+	// --------------------------------
+	'F5 is switching from List to Full': function (test) {
 		test
-			.open('themes/ribbon/index.html?full')
+			.open('http://localhost:7497/tests/')
 			.sendKeys('body', '\uE035') // F5
-			.assert.attr('body', 'class', 'list', 'Mode is list')
+			.assert.attr('body', 'class', 'full', 'Mode is Full')
 		.done();
 	},
-	// Cmd Alt P — how to test multiple keys?
+	'F5 is switching from Full to List': function (test) {
-	// 'Body class is switching from `list` to `full` on Cmd Alt P': function (test) {
+		test
-	// 	test
+			.open('http://localhost:7497/tests/?full')
-	// 		.open('themes/ribbon/index.html')
+			.sendKeys('body', '\uE035') // F5
-	// 		.sendKeys('body', '\uE03D\uE00A\u0050') // Cmd Alt P
+			.assert.attr('body', 'class', 'list', 'Mode is List')
-	// 		.assert.attr('body', 'class', 'full')
+		.done();
-	// 	.done();
+	},
-	// },
+	// --------------------------------
+	// Cmd Alt P
+	// --------------------------------
+	'Cmd Alt P keys are switching from List to Full': function (test) {
+		test
+			.open('http://localhost:7497/tests/')
+			.sendKeys('body', '\uE03D\uE00A\u0070') // Cmd Alt P
+			.assert.attr('body', 'class', 'full', 'Mode is Full')
+		.done();
+	},
+	'Cmd Alt P keys are not switching from Full to List': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#1')
+			.sendKeys('body', '\uE03D\uE00A\u0070') // Cmd Alt P
+			.assert.attr('body', 'class', 'full', 'Mode is Full')
+		.done();
+	},
+	// --------------------------------
 	// Esc
-	'Body class is switching from `full` to `list` on Esc': function (test) {
+	// --------------------------------
+	'Esc is switching from Full to List': function (test) {
 		test
-			.open('themes/ribbon/index.html?full')
+			.open('http://localhost:7497/tests/?full#1')
 			.sendKeys('body', '\uE00C') // Esc
-			.assert.attr('body', 'class', 'list', 'Mode is list')
+			.assert.attr('body', 'class').to.contain('list', 'Mode is List')
 		.done();
 	},
-	// End
+	// --------------------------------
-	'End key select the last slide': function (test) {
+	// Left
+	// --------------------------------
+	'Left Arrow key is switching to the previous slide': function (test) {
 		test
-			.open('themes/ribbon/index.html')
+			.open('http://localhost:7497/tests/?full#2')
-			.sendKeys('body', '\uE010') // End
+			.sendKeys('body', '\uE012') // Left
-			.assert.attr('.slide:last-of-type', 'class', 'slide active', 'Last slide is active')
+			.assert.attr('[id="1"]', 'class').to.contain('active', 'Previous slide is Active')
 		.done();
 	},
+	// --------------------------------
+	// Right
+	// --------------------------------
+	'Right Arrow key is switching to the next slide': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#1')
+			.sendKeys('body', '\uE014') // Right
+			.assert.attr('[id="2"]', 'class').to.contain('active', 'Next slide is Active')
+		.done();
+	},
+	// --------------------------------
+	// Up
+	// --------------------------------
+	'Up Arrow key is switching to the previous slide': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#2')
+			.sendKeys('body', '\uE013') // Up
+			.assert.attr('[id="1"]', 'class').to.contain('active', 'Previous slide is Active')
+		.done();
+	},
+	// --------------------------------
+	// Down
+	// --------------------------------
+	'Down Arrow key is switching to the next slide': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#1')
+			.sendKeys('body', '\uE015') // Down
+			.assert.attr('[id="2"]', 'class').to.contain('active', 'Next slide is Active')
+		.done();
+	},
+	// --------------------------------
+	// H
+	// --------------------------------
+	'H key is switching to the previous slide': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#2')
+			.sendKeys('body', '\u0068') // H
+			.assert.attr('[id="1"]', 'class').to.contain('active', 'Previous slide is Active')
+		.done();
+	},
+	// --------------------------------
+	// K
+	// --------------------------------
+	'K key is switching to the previous slide': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#2')
+			.sendKeys('body', '\u006B') // K
+			.assert.attr('[id="1"]', 'class').to.contain('active', 'Previous slide is Active')
+		.done();
+	},
+	// --------------------------------
+	// J
+	// --------------------------------
+	'J key is switching to the next slide': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#1')
+			.sendKeys('body', '\u006A') // J
+			.assert.attr('[id="2"]', 'class').to.contain('active', 'Next slide is Active')
+		.done();
+	},
+	// --------------------------------
+	// L
+	// --------------------------------
+	'L key is switching to the next slide': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#1')
+			.sendKeys('body', '\u006C') // L
+			.assert.attr('[id="2"]', 'class').to.contain('active', 'Next slide is Active')
+		.done();
+	},
+	// --------------------------------
+	// Space
+	// --------------------------------
+	'Space key is switching to the next slide': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#1')
+			.sendKeys('body', '\uE00D') // Space
+			.assert.attr('[id="2"]', 'class').to.contain('active', 'Next slide is Active')
+		.done();
+	},
+	'Shift Space keys are switching to the previous slide': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#2')
+			.sendKeys('body', '\uE008\uE00D') // Shift Space
+			.assert.attr('[id="1"]', 'class').to.contain('active', 'Previous slide is Active')
+		.done();
+	},
+	// --------------------------------
+	// Tab
+	// --------------------------------
+	'Tab key is switching to the next slide': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#1')
+			.sendKeys('body', '\uE004') // Tab
+			// Not sure why it’s failing. It works fine manually
+			.assert.attr('[id="2"]', 'class').to.contain('active', 'Next slide is Active')
+		.done();
+	},
+	'Shift Tab keys are switching to the previous slide': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#2')
+			.sendKeys('body', '\uE008\uE004') // Shift Tab
+			// Not sure why it’s failing. It works fine manually
+			.assert.attr('[id="1"]', 'class').to.contain('active', 'Previous slide is Active')
+		.done();
+	},
+	// --------------------------------
+	// PageUp
+	// --------------------------------
+	'PageUp key is switching to the previous slide': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#2')
+			.sendKeys('body', '\uE00E') // PageUp
+			.assert.attr('[id="1"]', 'class').to.contain('active', 'Previous slide is Active')
+		.done();
+	},
+	// --------------------------------
+	// PageDown
+	// --------------------------------
+	'PageDown key is switching to the next slide': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#1')
+			.sendKeys('body', '\uE00F') // PageDown
+			.assert.attr('[id="2"]', 'class').to.contain('active', 'Next slide is Active')
+		.done();
+	},
+	// --------------------------------
 	// Home
-	'Home key select the first slide': function (test) {
+	// --------------------------------
+	'Home key select the first slide in List mode': function (test) {
 		test
-			.open('themes/ribbon/index.html#20')
+			.open('http://localhost:7497/tests/')
 			.sendKeys('body', '\uE011') // Home
-			.assert.attr('.slide:first-of-type', 'class', 'slide active', 'First slide is active')
+			// Failing unlike next one with current slide
+			.assert.attr('[id="1"]', 'class').to.contain('active', 'First slide is active')
 		.done();
 	},
+	'Home key select the first slide in List mode (with current)': function (test) {
+		test
+			.open('http://localhost:7497/tests/#5')
+			.sendKeys('body', '\uE011') // Home
+			.assert.attr('[id="1"]', 'class').to.contain('active', 'First slide is active')
+		.done();
+	},
+	'Home key select the first slide in Full mode': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#5')
+			.sendKeys('body', '\uE011') // Home
+			.assert.attr('[id="1"]', 'class').to.contain('active', 'First slide is active')
+		.done();
+	},
+	// --------------------------------
+	// End
+	// --------------------------------
+	'End key select the last slide in List mode': function (test) {
+		test
+			.open('http://localhost:7497/tests/')
+			.sendKeys('body', '\uE010') // End
+			// Failing unlike next one with current slide
+			.assert.attr('[id="6"]', 'class').to.contain('active', 'Last slide is active')
+		.done();
+	},
+	'End key select the last slide in List mode (with current)': function (test) {
+		test
+			.open('http://localhost:7497/tests/#1')
+			.sendKeys('body', '\uE010') // End
+			.assert.attr('[id="6"]', 'class').to.contain('active', 'Last slide is active')
+		.done();
+	},
+	'End key select the last slide in Full mode': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#1')
+			.sendKeys('body', '\uE010') // End
+			.assert.attr('[id="6"]', 'class').to.contain('active', 'Last slide is active')
+		.done();
+	},
+	// --------------------------------
 	// Enter
+	// --------------------------------
 	'Enter is opening current slide': function (test) {
 		test
-			.open('themes/ribbon/index.html#1')
+			.open('http://localhost:7497/tests/#1')
 			.sendKeys('body', '\uE007') // Enter
 			.assert.attr('body', 'class', 'full', 'Full mode')
-			.assert.attr('[id="1"]', 'class', 'slide active', 'Slide #1 is active')
+			.assert.attr('[id="1"]', 'class').to.contain('active', 'First slide is active')
 		.done();
 	},
-	// Enter
 	'Enter is not opening any slide if there’s no current': function (test) {
 		test
-			.open('themes/ribbon/index.html')
+			.open('http://localhost:7497/tests/')
 			.sendKeys('body', '\uE007') // Enter
-			.assert.attr('body', 'class', 'list', 'Mode is list')
+			.assert.attr('body', 'class', 'list', 'Mode is List')
 		.done();
 	}
-	// uE004 Tab
-	// uE008 Shift
-	// uE00D Space
-	// uE00E PageUp
-	// uE00F PageDown
-	// uE012 Left
-	// uE013 Up
-	// uE014 Right
-	// uE015 Down
 };

tests/timer.js

@@ -0,0 +1,31 @@
+module.exports = {
+	'Timer is switching to the next slide when finished': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#3')
+			.wait(5000)
+			.assert.attr('[id="4"]', 'class').to.contain('active', 'Next slide is Active')
+		.done();
+	},
+	'Timer becomes Active and switching to the next slide when finished': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#4')
+			.sendKeys('body', '\uE012') // Left
+			.wait(5000)
+			.assert.attr('[id="4"]', 'class').to.contain('active', 'Next slide is Active')
+		.done();
+	},
+	'Left Arrow key is skipping timer while it’s not finished': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#3')
+			.sendKeys('body', '\uE012') // Left
+			.assert.attr('[id="2"]', 'class').to.contain('active', 'Previous slide is Active')
+		.done();
+	},
+	'Right Arrow key is skipping timer while it’s not finished': function (test) {
+		test
+			.open('http://localhost:7497/tests/?full#3')
+			.sendKeys('body', '\uE014') // Right
+			.assert.attr('[id="4"]', 'class').to.contain('active', 'Next slide is Active')
+		.done();
+	}
+};