415 lines
11 KiB
JavaScript
415 lines
11 KiB
JavaScript
|
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">×</span>
|
||
|
|
</button>
|
||
|
|
</div>`;
|
||
|
|
|
||
|
|
afterEach(function() {
|
||
|
|
plugin.destroy();
|
||
|
|
document.activeElement.blur();
|
||
|
|
$html.remove();
|
||
|
|
});
|
||
|
|
|
||
|
|
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');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
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]);
|
||
|
|
|
||
|
|
$anchor.remove();
|
||
|
|
});
|
||
|
|
|
||
|
|
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'));
|
||
|
|
|
||
|
|
$anchor.remove();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
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(done) {
|
||
|
|
$html = $(template).appendTo('body');
|
||
|
|
plugin = new Foundation.Reveal($html, {});
|
||
|
|
|
||
|
|
$html.on('open.zf.reveal', function() {
|
||
|
|
$html.should.be.visible;
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
|
||
|
|
plugin.open();
|
||
|
|
});
|
||
|
|
it('opens the overlay', function(done) {
|
||
|
|
$html = $(template).appendTo('body');
|
||
|
|
plugin = new Foundation.Reveal($html, {overlay: true});
|
||
|
|
|
||
|
|
$html.on('open.zf.reveal', function() {
|
||
|
|
plugin.$overlay.should.be.visible;
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
|
||
|
|
plugin.open();
|
||
|
|
});
|
||
|
|
it('toggles ARIA attributes', function(done) {
|
||
|
|
$html = $(template).appendTo('body');
|
||
|
|
plugin = new Foundation.Reveal($html, {});
|
||
|
|
|
||
|
|
$html.on('open.zf.reveal', function() {
|
||
|
|
$html.should.have.attr('aria-hidden', 'false');
|
||
|
|
$html.should.have.attr('tabindex', '-1');
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
|
||
|
|
plugin.open();
|
||
|
|
});
|
||
|
|
it('adds class to body', function(done) {
|
||
|
|
$html = $(template).appendTo('body');
|
||
|
|
plugin = new Foundation.Reveal($html, {});
|
||
|
|
|
||
|
|
$html.on('open.zf.reveal', function() {
|
||
|
|
$('html').should.have.class('is-reveal-open');
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
|
||
|
|
plugin.open();
|
||
|
|
});
|
||
|
|
it('adds optional overlay classes overlay element', function(done) {
|
||
|
|
$html = $(template).appendTo('body');
|
||
|
|
plugin = new Foundation.Reveal($html, {additionalOverlayClasses: 'default'});
|
||
|
|
|
||
|
|
$html.on('open.zf.reveal', function() {
|
||
|
|
$('.reveal-overlay').should.have.class('default');
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
|
||
|
|
plugin.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();
|
||
|
|
});
|
||
|
|
|
||
|
|
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');
|
||
|
|
|
||
|
|
$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(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();
|
||
|
|
});
|
||
|
|
it('closes the overlay', function(done) {
|
||
|
|
$html = $(template).appendTo('body');
|
||
|
|
plugin = new Foundation.Reveal($html, {overlay: true});
|
||
|
|
|
||
|
|
// Open it first
|
||
|
|
plugin.open();
|
||
|
|
|
||
|
|
$html.on('closed.zf.reveal', function() {
|
||
|
|
plugin.$overlay.should.be.hidden;
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
|
||
|
|
plugin.close();
|
||
|
|
});
|
||
|
|
it('toggles ARIA attributes', function(done) {
|
||
|
|
$html = $(template).appendTo('body');
|
||
|
|
plugin = new Foundation.Reveal($html, {});
|
||
|
|
|
||
|
|
// Open it first
|
||
|
|
plugin.open();
|
||
|
|
|
||
|
|
$html.on('closed.zf.reveal', function() {
|
||
|
|
$html.should.have.attr('aria-hidden', 'true');
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
|
||
|
|
plugin.close();
|
||
|
|
});
|
||
|
|
it('removes class from body', function(done) {
|
||
|
|
$html = $(template).appendTo('body');
|
||
|
|
plugin = new Foundation.Reveal($html, {});
|
||
|
|
|
||
|
|
// Open it first
|
||
|
|
plugin.open();
|
||
|
|
|
||
|
|
|
||
|
|
$html.on('closed.zf.reveal', function() {
|
||
|
|
$('html').should.not.have.class('is-reveal-open');
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
|
||
|
|
plugin.close();
|
||
|
|
});
|
||
|
|
it('does not remove class from body if another reveal is open', function(done) {
|
||
|
|
$html = $(template).appendTo('body');
|
||
|
|
plugin = new Foundation.Reveal($html, {multipleOpened: true});
|
||
|
|
|
||
|
|
let $html2 = $(template).attr('id', 'exampleModal2').appendTo('body');
|
||
|
|
let plugin2 = new Foundation.Reveal($html2, {multipleOpened: true, vOffset: 10});
|
||
|
|
|
||
|
|
// Open both first
|
||
|
|
plugin.open();
|
||
|
|
plugin2.open();
|
||
|
|
|
||
|
|
|
||
|
|
$html.on('closed.zf.reveal', function() {
|
||
|
|
|
||
|
|
$('html').should.have.class('is-reveal-open');
|
||
|
|
plugin2.destroy();
|
||
|
|
$html2.remove();
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
|
||
|
|
plugin.close();
|
||
|
|
});
|
||
|
|
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();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('releases focus if trapFocus option is true', function(done) {
|
||
|
|
$html = $(template).appendTo('body');
|
||
|
|
plugin = new Foundation.Reveal($html, {trapFocus: true});
|
||
|
|
|
||
|
|
// Open it first
|
||
|
|
plugin.open();
|
||
|
|
|
||
|
|
let spy = sinon.spy(Foundation.Keyboard, 'releaseFocus');
|
||
|
|
|
||
|
|
$html.on('closed.zf.reveal', function() {
|
||
|
|
sinon.assert.called(spy);
|
||
|
|
Foundation.Keyboard.releaseFocus.restore();
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
|
||
|
|
plugin.close();
|
||
|
|
});
|
||
|
|
it('sets focus to anchor', function(done) {
|
||
|
|
$html = $(template).appendTo('body');
|
||
|
|
var $anchor = $('<button data-open="exampleModal1">Open</button>').appendTo('body');
|
||
|
|
plugin = new Foundation.Reveal($html, {});
|
||
|
|
|
||
|
|
// Open it first
|
||
|
|
plugin.open();
|
||
|
|
|
||
|
|
$html.on('closed.zf.reveal', function() {
|
||
|
|
setTimeout(function() {
|
||
|
|
$anchor[0].should.be.equal(document.activeElement);
|
||
|
|
$anchor.remove();
|
||
|
|
done();
|
||
|
|
}, 0);
|
||
|
|
});
|
||
|
|
|
||
|
|
plugin.close();
|
||
|
|
});
|
||
|
|
it('sets focus to anchor that opened it', function(done) {
|
||
|
|
$html = $(template).appendTo('body');
|
||
|
|
var $anchor = $('<button data-open="exampleModal1">Open</button>').appendTo('body');
|
||
|
|
var $anchor2 = $('<button data-open="exampleModal1">Open2</button>').appendTo('body');
|
||
|
|
plugin = new Foundation.Reveal($html, {});
|
||
|
|
$anchor.focus();
|
||
|
|
|
||
|
|
// Open it first
|
||
|
|
plugin.open();
|
||
|
|
|
||
|
|
$html.on('closed.zf.reveal', function() {
|
||
|
|
setTimeout(function() {
|
||
|
|
$anchor[0].should.be.equal(document.activeElement);
|
||
|
|
$anchor.remove();
|
||
|
|
$anchor2.remove();
|
||
|
|
done();
|
||
|
|
}, 0);
|
||
|
|
});
|
||
|
|
|
||
|
|
plugin.close();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('toggle()', function() {
|
||
|
|
it('opens a closed modal', function(done) {
|
||
|
|
$html = $(template).appendTo('body');
|
||
|
|
plugin = new Foundation.Reveal($html, {overlay: true});
|
||
|
|
|
||
|
|
$html.on('open.zf.reveal', function() {
|
||
|
|
plugin.$overlay.should.be.visible;
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
|
||
|
|
plugin.open();
|
||
|
|
});
|
||
|
|
it('closes an open modal', 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('events()', 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, {});
|
||
|
|
|
||
|
|
|
||
|
|
$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(done) {
|
||
|
|
$html = $(template).appendTo('body');
|
||
|
|
plugin = new Foundation.Reveal($html, {overlay: true, closeOnClick: true});
|
||
|
|
|
||
|
|
// Open it first
|
||
|
|
plugin.open();
|
||
|
|
|
||
|
|
$html.on('closed.zf.reveal', function() {
|
||
|
|
$html.should.be.hidden;
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
|
||
|
|
plugin.$overlay.trigger('click');
|
||
|
|
});
|
||
|
|
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});
|
||
|
|
|
||
|
|
// Open it first
|
||
|
|
plugin.open();
|
||
|
|
|
||
|
|
plugin.$overlay.trigger('click');
|
||
|
|
|
||
|
|
// 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);
|
||
|
|
});
|
||
|
|
it('closes Reveal with click on close button', 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();
|
||
|
|
});
|
||
|
|
|
||
|
|
$html.find('[data-close]').focus()
|
||
|
|
.trigger('click');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|