From: Marius Olbertz <marius.olbertz@gmail.com>
Date: Sun, 2 Oct 2016 16:09:41 +0000 (+0200)
Subject: Added unit tests for Reveal.
X-Git-Tag: v6.3-rc1~26^2~7^2~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=44a20c5e2ceb3d4751a7bac18449bdac623901b3;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Added unit tests for Reveal.
---

diff --git a/test/javascript/components/reveal.js b/test/javascript/components/reveal.js
index 01a25ea24..afec91fdd 100644
--- a/test/javascript/components/reveal.js
+++ b/test/javascript/components/reveal.js
@@ -1,20 +1,245 @@
 describe('Reveal', function() {
 	var plugin;
 	var $html;
+	var template = `<div class="reveal" id="exampleModal1" data-reveal>
+	  Modal content
+	  <button class="close-button" data-close aria-label="Close modal" type="button">
+	    <span aria-hidden="true">&times;</span>
+	  </button>
+	</div>`;
 
-	// afterEach(function() {
-	// 	plugin.destroy();
-	// 	$html.remove();
-	// });
+  afterEach(function() {
+    plugin.destroy();
+    $html.remove();
+  });
 
-	describe('constructor()', function() {
-		// it('', function() {
-		// 	$html = $('').appendTo('body');
-		// 	plugin = new Foundation.Reveal($html, {});
+  describe('constructor()', function() {
+    it('stores the element and plugin options', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {});
 
-		// 	plugin.$element.should.be.an('object');
-		// 	plugin.options.should.be.an('object');
-		// });
-	});
+      plugin.$element.should.be.an('object');
+      plugin.options.should.be.an('object');
+    });
+  });
 
+  describe('init()', function() {
+    it('sets ARIA attributes for modal', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {});
+
+      $html.should.have.attr('aria-hidden', 'true');
+      $html.should.have.attr('role', 'dialog');
+    });
+
+    it('detects anchor if one exists', function() {
+      $html = $(template).appendTo('body');
+      var $anchor = $('<button data-open="exampleModal1">Open</button>').appendTo('body');
+      plugin = new Foundation.Reveal($html, {});
+
+      plugin.$anchor[0].should.be.equal($anchor[0]);
+    });
+
+    it('sets ARIA attributes for anchor if one exists', function() {
+      $html = $(template).appendTo('body');
+      var $anchor = $('<button data-open="exampleModal1">Open</button>').appendTo('body');
+      plugin = new Foundation.Reveal($html, {});
+
+      $anchor.should.have.attr('aria-haspopup', 'true');
+      $anchor.should.have.attr('aria-controls', $html.attr('id'));
+    });
+  });
+
+  describe('makeOverlay()', function() {
+		it('creates an overlay if overlay option is true', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {overlay: true});
+
+      plugin.$overlay.should.be.an('object');
+      plugin.$overlay.should.have.class('reveal-overlay');
+      $.contains(document.body, plugin.$overlay[0]).should.be.true;
+    });
+  });
+
+  describe('open()', function() {
+		it('opens the modal', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {});
+
+      plugin.open();
+
+      $html.should.be.visible;
+    });
+    it('opens the overlay', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {overlay: true});
+
+      plugin.open();
+
+      plugin.$overlay.should.be.visible;
+    });
+    it('toggles ARIA attributes', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {});
+
+      plugin.open();
+
+      $html.should.have.attr('aria-hidden', 'false');
+      $html.should.have.attr('tabindex', '-1');
+    });
+    it('adds class to body', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {});
+
+      plugin.open();
+
+      $('body').should.have.class('is-reveal-open');
+    });
+    // TODO: Check if  this.$element.trigger('closeme.zf.reveal', this.id) is correctly used.
+    
+    // it('closes previously opened modal if multipleOpened option is false', function(done) {
+    //   $html = $(template).appendTo('body');
+    //   $html2 = $(template).attr('id', 'exampleModal2').appendTo('body');
+
+    //   plugin = new Foundation.Reveal($html, {multipleOpened: false});
+    //   plugin2 = new Foundation.Reveal($html2, {multipleOpened: false});
+
+    //   plugin.open();
+
+    //   plugin2.open();
+
+    //   $html.should.be.hidden;
+
+    //   plugin2.destroy();
+    //   $html2.remove();
+    // });
+    it('fires open.zf.reveal event', function(done) {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {});
+
+      $html.on('open.zf.reveal', function() {
+      	$html.should.be.visible;
+      	done();
+      });
+
+      plugin.open();
+    });
+  });
+
+	describe('close()', function() {
+		it('closes the modal', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {});
+
+      // Open it first
+      plugin.open();
+
+      plugin.close();
+
+      $html.should.be.hidden;
+    });
+    it('closes the overlay', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {overlay: true});
+
+      // Open it first
+      plugin.open();
+
+      plugin.close();
+
+      plugin.$overlay.should.be.hidden;
+    });
+    it('toggles ARIA attributes', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {});
+
+      // Open it first
+      plugin.open();
+
+      plugin.close();
+
+      $html.should.have.attr('aria-hidden', 'true');
+    });
+    it('removes class from body', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {});
+
+      // Open it first
+      plugin.open();
+
+      plugin.close();
+
+      $('body').should.not.have.class('is-reveal-open');
+    });
+    it('fires closed.zf.reveal event', function(done) {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {});
+
+      // Open it first
+      plugin.open();
+
+      $html.on('closed.zf.reveal', function() {
+      	$html.should.be.hidden;
+      	done();
+      });
+      
+      plugin.close();
+    });
+  });
+
+	describe('toggle()', function() {
+    it('opens a closed modal', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {overlay: true});
+
+      plugin.open();
+
+      plugin.$overlay.should.be.visible;
+    });
+		it('closes an open modal', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {});
+
+      // Open it first
+      plugin.open();
+
+      plugin.close();
+
+      $html.should.be.hidden;
+    });
+  });
+
+  describe('events()', function() {
+    it('opens the modal on anchor click', function() {
+      $html = $(template).appendTo('body');
+      var $anchor = $('<button data-open="exampleModal1">Open</button>').appendTo('body');
+      plugin = new Foundation.Reveal($html, {});
+
+      $anchor.trigger('click');
+
+      plugin.$overlay.should.be.visible;
+    });
+		it('closes a modal on overlay click if closeOnClick option is true', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {overlay: true, closeOnClick: true});
+
+      // Open it first
+      plugin.open();
+
+      plugin.$overlay.trigger('click');
+
+      $html.should.be.hidden;
+    });
+    it('not closes a modal on overlay click if closeOnClick option is true', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {overlay: true, closeOnClick: false});
+
+      // Open it first
+      plugin.open();
+
+      plugin.$overlay.trigger('click');
+
+      $html.should.be.visible;
+    });
+  });
 });
\ No newline at end of file