Skip to content

Commit

Permalink
[chore] refactoring tests...
Browse files Browse the repository at this point in the history
* separate tests for events, styles and state.
* added helpers to find dom nodes, dispatch events...
* simplify assertitions.
  • Loading branch information
diasbruno committed Jun 12, 2017
1 parent fb89f8b commit 3bc4719
Show file tree
Hide file tree
Showing 4 changed files with 443 additions and 331 deletions.
137 changes: 137 additions & 0 deletions specs/Modal.events.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
import sinon from 'sinon';
import expect from 'expect';
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import Modal from '../lib/components/Modal';
import * as ariaAppHider from '../lib/helpers/ariaAppHider';
import {
isBodyWithReactModalOpenClass, findDOMWithClass,
contentAttribute, overlayAttribute,
moverlay, mcontent,
clickAt, mouseDownAt, mouseUpAt, escKeyDown, tabKeyDown,
renderModal, unmountModal, emptyDOM
} from './helper';

describe('Events', () => {
afterEach('Unmount modal', emptyDOM);

it('should trigger the onAfterOpen callback', () => {
var afterOpenCallback = sinon.spy();
renderModal({ isOpen: true, onAfterOpen: afterOpenCallback });
expect(afterOpenCallback.called).toBeTruthy();
});

it('keeps focus inside the modal when child has no tabbable elements', () => {
var tabPrevented = false;
var modal = renderModal({ isOpen: true }, 'hello');
const content = mcontent(modal);
expect(document.activeElement).toEqual(content);
tabKeyDown(content, {
preventDefault: function() { tabPrevented = true; }
});
expect(tabPrevented).toEqual(true);
});

it('handles case when child has no tabbable elements', () => {
var modal = renderModal({ isOpen: true }, 'hello');
const content = mcontent(modal);
tabKeyDown(content);
expect(document.activeElement).toEqual(content);
});

it('should close on Esc key event', () => {
var requestCloseCallback = sinon.spy();
var modal = renderModal({
isOpen: true,
shouldCloseOnOverlayClick: true,
onRequestClose: requestCloseCallback
});
escKeyDown(mcontent(modal));
expect(requestCloseCallback.called).toBeTruthy();
// Check if event is passed to onRequestClose callback.
var event = requestCloseCallback.getCall(0).args[0];
expect(event).toExist();
});

it('verify overlay click when shouldCloseOnOverlayClick sets to false', () => {
const requestCloseCallback = sinon.spy();
const modal = renderModal({
isOpen: true,
shouldCloseOnOverlayClick: false
});
var overlay = moverlay(modal);
clickAt(overlay);
expect(!requestCloseCallback.called).toBeTruthy();
});

it('verify overlay click when shouldCloseOnOverlayClick sets to true', () => {
var requestCloseCallback = sinon.spy();
var modal = renderModal({
isOpen: true,
shouldCloseOnOverlayClick: true,
onRequestClose: function() {
requestCloseCallback();
}
});
clickAt(moverlay(modal));
expect(requestCloseCallback.called).toBeTruthy();
});

it('verify overlay mouse down and content mouse up when shouldCloseOnOverlayClick sets to true', () => {
const requestCloseCallback = sinon.spy();
const modal = renderModal({
isOpen: true,
shouldCloseOnOverlayClick: true,
onRequestClose: requestCloseCallback
});
mouseDownAt(moverlay(modal));
mouseUpAt(mcontent(modal));
expect(!requestCloseCallback.called).toBeTruthy();
});

it('verify content mouse down and overlay mouse up when shouldCloseOnOverlayClick sets to true', () => {
var requestCloseCallback = sinon.spy();
var modal = renderModal({
isOpen: true,
shouldCloseOnOverlayClick: true,
onRequestClose: function() {
requestCloseCallback();
}
});
mouseDownAt(mcontent(modal));
mouseUpAt(moverlay(modal));
expect(!requestCloseCallback.called).toBeTruthy();
});

it('should not stop event propagation', () => {
var hasPropagated = false;
var modal = renderModal({
isOpen: true,
shouldCloseOnOverlayClick: true
});
window.addEventListener('click', () => {
hasPropagated = true;
});
moverlay(modal).dispatchEvent(new MouseEvent('click', { bubbles: true }));
expect(hasPropagated).toBeTruthy();
});

it('verify event passing on overlay click', () => {
var requestCloseCallback = sinon.spy();
var modal = renderModal({
isOpen: true,
shouldCloseOnOverlayClick: true,
onRequestClose: requestCloseCallback
});
// click the overlay
clickAt(moverlay(modal), {
// Used to test that this was the event received
fakeData: 'ABC'
});
expect(requestCloseCallback.called).toBeTruthy();
// Check if event is passed to onRequestClose callback.
var event = requestCloseCallback.getCall(0).args[0];
expect(event).toExist();
});
});
Loading

0 comments on commit 3bc4719

Please sign in to comment.