Refactored Reveal tests to work correctly with async execution.

diff --git a/test/javascript/components/reveal.js b/test/javascript/components/reveal.js
index 717b6c55a7e593319259b3fe253ee977e35a78f8..dc902c927407fb429cff7e67f13f8bbcc94f870d 100644 (file)
--- a/test/javascript/components/reveal.js
+++ b/test/javascript/components/reveal.js
@@ -66,46 +66,61 @@ describe('Reveal', function() {
   });
 
   describe('open()', function() {
-               it('opens the modal', function() {
+               it('opens the modal', function(done) {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Reveal($html, {});
 
-      plugin.open();
+      $html.on('open.zf.reveal', function() {
+        $html.should.be.visible;
+        done();
+      });
 
-      $html.should.be.visible;
+      plugin.open();
     });
-    it('opens the overlay', function() {
+    it('opens the overlay', function(done) {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Reveal($html, {overlay: true});
 
-      plugin.open();
+      $html.on('open.zf.reveal', function() {
+        plugin.$overlay.should.be.visible;
+        done();
+      });
 
-      plugin.$overlay.should.be.visible;
+      plugin.open();
     });
-    it('toggles ARIA attributes', function() {
+    it('toggles ARIA attributes', function(done) {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Reveal($html, {});
 
-      plugin.open();
+      $html.on('open.zf.reveal', function() {
+        $html.should.have.attr('aria-hidden', 'false');
+        $html.should.have.attr('tabindex', '-1');
+        done();
+      });
 
-      $html.should.have.attr('aria-hidden', 'false');
-      $html.should.have.attr('tabindex', '-1');
+      plugin.open();
     });
-    it('adds class to body', function() {
+    it('adds class to body', function(done) {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Reveal($html, {});
 
-      plugin.open();
+      $html.on('open.zf.reveal', function() {
+        $('body').should.have.class('is-reveal-open');
+        done();
+      });
 
-      $('body').should.have.class('is-reveal-open');
+      plugin.open();
     });
-    it('adds optional overlay classes overlay element', function() {
+    it('adds optional overlay classes overlay element', function(done) {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Reveal($html, {additionalOverlayClasses: 'default'});
 
-      plugin.open();
+      $html.on('open.zf.reveal', function() {
+        $('.reveal-overlay').should.have.class('default');
+        done();
+      });
 
-      $('.reveal-overlay').should.have.class('default');
+      plugin.open();
     });
     // TODO: Check if  this.$element.trigger('closeme.zf.reveal', this.id) is correctly used.
 
@@ -137,51 +152,64 @@ describe('Reveal', function() {
       plugin.open();
     });
 
-    it('traps focus if trapFocus option is true', function() {
+    it('traps focus if trapFocus option is true', function(done) {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Reveal($html, {trapFocus: true});
 
       let spy = sinon.spy(Foundation.Keyboard, 'trapFocus');
-      plugin.open();
 
-      sinon.assert.called(spy);
-      Foundation.Keyboard.trapFocus.restore();
+      $html.on('open.zf.reveal', function() {
+        sinon.assert.called(spy);
+        Foundation.Keyboard.trapFocus.restore();
+       done();
+      });
+
+      plugin.open();
     });
   });
 
        describe('close()', function() {
-               it('closes the modal', function() {
+               it('closes the modal', function(done) {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Reveal($html, {});
 
       // Open it first
       plugin.open();
 
-      plugin.close();
+      $html.on('closed.zf.reveal', function() {
+        $html.should.be.hidden;
+       done();
+      });
 
-      $html.should.be.hidden;
+      plugin.close();
     });
-    it('closes the overlay', function() {
+    it('closes the overlay', function(done) {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Reveal($html, {overlay: true});
 
       // Open it first
       plugin.open();
 
-      plugin.close();
+      $html.on('closed.zf.reveal', function() {
+        plugin.$overlay.should.be.hidden;
+       done();
+      });
 
-      plugin.$overlay.should.be.hidden;
+      plugin.close();
     });
-    it('toggles ARIA attributes', function() {
+    it('toggles ARIA attributes', function(done) {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Reveal($html, {});
 
       // Open it first
       plugin.open();
 
-      plugin.close();
+      $html.on('closed.zf.reveal', function() {
+        $html.should.have.attr('aria-hidden', 'true');
+       done();
+      });
 
-      $html.should.have.attr('aria-hidden', 'true');
+      plugin.close();
     });
     it('removes class from body', function(done) {
       $html = $(template).appendTo('body');
@@ -235,7 +263,7 @@ describe('Reveal', function() {
       plugin.close();
     });
 
-    it('releases focus if trapFocus option is true', function() {
+    it('releases focus if trapFocus option is true', function(done) {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Reveal($html, {trapFocus: true});
 
@@ -243,58 +271,75 @@ describe('Reveal', function() {
       plugin.open();
 
       let spy = sinon.spy(Foundation.Keyboard, 'releaseFocus');
-      plugin.close();
 
-      sinon.assert.called(spy);
-      Foundation.Keyboard.releaseFocus.restore();
+      $html.on('closed.zf.reveal', function() {
+        sinon.assert.called(spy);
+        Foundation.Keyboard.releaseFocus.restore();
+        done();
+      });
+
+      plugin.close();
     });
   });
 
        describe('toggle()', function() {
-    it('opens a closed modal', function() {
+    it('opens a closed modal', function(done) {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Reveal($html, {overlay: true});
 
-      plugin.open();
+      $html.on('open.zf.reveal', function() {
+        plugin.$overlay.should.be.visible;
+        done();
+      });
 
-      plugin.$overlay.should.be.visible;
+      plugin.open();
     });
-               it('closes an open modal', function() {
+               it('closes an open modal', function(done) {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Reveal($html, {});
 
       // Open it first
       plugin.open();
 
-      plugin.close();
+      $html.on('closed.zf.reveal', function() {
+        $html.should.be.hidden;
+       done();
+      });
 
-      $html.should.be.hidden;
+      plugin.close();
     });
   });
 
   describe('events()', function() {
-    it('opens the modal on anchor click', function() {
+    it('opens the modal on anchor click', function(done) {
       $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;
-      $anchor.remove();
+      $html.on('open.zf.reveal', function() {
+        plugin.$overlay.should.be.visible;
+        $anchor.remove();
+       done();
+      });
+
+      $anchor.trigger('click');
     });
-               it('closes a modal on overlay click if closeOnClick option is true', function() {
+               it('closes a modal on overlay click if closeOnClick option is true', function(done) {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Reveal($html, {overlay: true, closeOnClick: true});
 
       // Open it first
       plugin.open();
 
-      plugin.$overlay.trigger('click');
+      $html.on('closed.zf.reveal', function() {
+        $html.should.be.hidden;
+       done();
+      });
 
-      $html.should.be.hidden;
+      plugin.$overlay.trigger('click');
     });
-    it('not closes a modal on overlay click if closeOnClick option is true', function() {
+    it('not closes a modal on overlay click if closeOnClick option is true', function(done) {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Reveal($html, {overlay: true, closeOnClick: false});
 
@@ -303,7 +348,12 @@ describe('Reveal', function() {
 
       plugin.$overlay.trigger('click');
 
-      $html.should.be.visible;
+      // Add timeout to make sure it does not close
+      // Timeout is required because closed event will not be fired
+      setTimeout(function() {
+        $html.should.be.visible;
+        done();
+      }, 10);
     });
   });
 });