Add full screen tests

Author: Marcin Szczepanski

src/gallery.js

@@ -23,14 +23,13 @@
 		};
 	};
 
-	Gallery.start = function (elem) {
-		var galleryNode = elem.querySelector('.gallery');
-		if (!galleryNode) return; // early exit if no gallery
-
-
+	Gallery.start = function (galleryNode) {
 		galleryMode = galleryNode.dataset.mode || 'normal';
 
 		if (galleryMode === 'full-screen') {
+			// FIXME remove depenency on Reveal, have a callback? function
+			// that will get a root node to move full screen slides to (ie. slidesNode)
+
 			// for full screen mode we need to: 
 			// - take the gallery out of the flow and insert it before "slides"
 			// - hide slides
@@ -41,7 +40,9 @@
 			galleryNode.parentNode.replaceChild(placeholder, galleryNode);
 
 			var slidesNode = document.querySelector(".slides");
-			slidesNode.parentNode.insertBefore(galleryNode, slidesNode);
+			if (slidesNode) {
+				slidesNode.parentNode.insertBefore(galleryNode, slidesNode);
+			}
 		}
 
 		var items = Array.prototype.slice.apply(galleryNode.querySelectorAll("li"));
@@ -73,6 +74,7 @@
 		galleryTimer = setInterval(Gallery.step(items, iterations), interval);
 	};
 
+	// FIXME Gallery.stop should take elem and root nodes as well
 	Gallery.stop = function () {
 		clearInterval(galleryTimer);
 

tests/test.gallery.js

@@ -3,55 +3,62 @@
 describe('Gallery', function () {
 	var expect = chai.expect;
 
-	describe('#start', function () {
-		var itemElem1, itemElem2, items, galleryElem;
-		var MockItem = function (hasLabel, attributes) {
-			this.hasLabel = hasLabel;
-			this.attributes = attributes;
-			return this;
+	var itemElem1, itemElem2, items, galleryElem;
+	var MockItem = function (hasLabel, attributes) {
+		this.hasLabel = hasLabel;
+		this.attributes = attributes;
+		this.style = {};
+		this.img = {
+			style: {},
+			attributes: this.attributes,
+			src: "SRC"
 		};
-		MockItem.prototype.querySelector = function (selector) {
-			if (selector === "label") {
-				return this.hasLabel;
-			} else if (selector === "img") {
-				return {
-					style: {},
-					attributes: this.attributes
-				};
+		return this;
+	};
+	MockItem.prototype.querySelector = function (selector) {
+		if (selector === "label") {
+			return this.hasLabel;
+		} else if (selector === "img") {
+			return this.img;
+		}
+	};
+	MockItem.prototype.appendChild = function () {};
+	var intervalStub, stepSpy;
+
+	beforeEach(function () {
+		/* Mock Item elements */
+		itemElem1 = new MockItem(true, {});
+		itemElem2 = new MockItem(false, {alt: { value: "ALT"}});
+		items = [itemElem1, itemElem2];
+		/* Mock DOM Gallery element */
+		galleryElem = {
+			dataset: {},
+			// return SOMETHING!
+			querySelector: function (selector) {
+				return this;
+			},
+			querySelectorAll: function (selector) {
+				return items;
+			},
+			parentNode: {
+				replaceChild: function () {}
 			}
 		};
-		MockItem.prototype.appendChild = function () {};
-		var intervalStub, stepSpy;
-		
-		beforeEach(function () {
-			/* Mock Item elements */
-			itemElem1 = new MockItem(true, {});			
-			itemElem2 = new MockItem(false, {alt: { value: "ALT"}});
-			items = [itemElem1, itemElem2];
-			/* Mock DOM Gallery element */
-			galleryElem = {
-				dataset: {},
-				// return SOMETHING!
-				querySelector: function (selector) {
-					return this;
-				},
-				querySelectorAll: function (selector) {
-					return items;
-				}
-			};
-			intervalStub = sinon.stub(window, "setInterval");
-			stepSpy = sinon.spy(Gallery, "step");
-		});
-
-		afterEach(function () {
-			intervalStub.restore();
-			stepSpy.restore();
-		});
+		intervalStub = sinon.stub(window, "setInterval");
+		stepSpy = sinon.spy(Gallery, "step");
+	});
+	afterEach(function () {
+		intervalStub.restore();
+		stepSpy.restore();
+	});
 
+	describe('#start', function () {
 		it("initialises the gallery with defaults", function () {
 			Gallery.start(galleryElem);
 			expect(stepSpy.calledWith(items, 1)).to.be.true;
 			expect(intervalStub.calledWith(sinon.match.any, 1000)).to.be.true;
+			expect(itemElem1.style.backgroundImage).to.be.undefined;
+			expect(itemElem1.img.style.display).to.equal("");
 		});
 
 		it("initialises the gallery with custom iterations", function () {
@@ -82,6 +89,23 @@ describe('Gallery', function () {
 			expect(appendChildSpy2.called).to.be.false;
 			appendChildSpy2.restore();
 		});
+		it("handles a full screen gallery", function () {
+			galleryElem.dataset.mode = "full-screen";
+			Gallery.start(galleryElem);
+			expect(itemElem1.img.style.display).to.equal("none");
+			expect(itemElem2.img.style.display).to.equal("none");
+			expect(itemElem1.style.backgroundImage).to.equal("url(SRC)");
+		});
+	});
+	describe('#stop', function () {
+		it("restores a full screen gallery", function () {
+			galleryElem.dataset.mode = "full-screen";
+			Gallery.start(galleryElem);
+			Gallery.stop();
+			expect(itemElem1.img.style.display).to.equal("");
+			expect(itemElem2.img.style.display).to.equal("");
+			expect(itemElem1.style.backgroundImage).to.equal("");
+		});
 	});
 	describe('#step', function () {
 		var items;