Skip to content

Commit

Permalink
[chore] use afterEach to cleanup modals automatically.
Browse files Browse the repository at this point in the history
  • Loading branch information
@diasbruno
diasbruno committed Feb 19, 2017
1 parent ba2fe90 commit a8b7aa0
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 43 deletions.
53 changes: 10 additions & 43 deletions specs/Modal.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,32 +12,25 @@ import expect from 'expect';
import ReactDOM from 'react-dom';
import Modal from '../lib/components/Modal';
import * as ariaAppHider from '../lib/helpers/ariaAppHider';
import { renderModal, unmountModal } from './helper';
import { renderModal, unmountModal, emptyDOM } from './helper';

const Simulate = TestUtils.Simulate;


describe('Modal', () => {
afterEach('check if test cleaned up rendered modals', () => {
const overlay = document.querySelectorAll('.ReactModal__Overlay');
const content = document.querySelectorAll('.ReactModal__Content');
expect(overlay.length).toBe(0);
expect(content.length).toBe(0);
});
afterEach('check if test cleaned up rendered modals', emptyDOM);

it('scopes tab navigation to the modal');
it('focuses the last focused element when tabbing in from browser chrome');

it('can be open initially', () => {
const component = renderModal({ isOpen: true }, 'hello');
expect(component.portal.content.innerHTML.trim()).toEqual('hello');
unmountModal();
});

it('can be closed initially', () => {
const component = renderModal({}, 'hello');
expect(ReactDOM.findDOMNode(component.portal).innerHTML.trim()).toEqual('');
unmountModal();
});

it('accepts appElement as a prop', () => {
Expand Down Expand Up @@ -73,21 +66,18 @@ describe('Modal', () => {
const child = 'I am a child of Modal, and he has sent me here...';
const component = renderModal({ isOpen: true }, child);
expect(component.portal.content.innerHTML).toEqual(child);
unmountModal();
});

it('renders the modal content with a dialog aria role when provided ', () => {
const child = 'I am a child of Modal, and he has sent me here...';
const component = renderModal({ isOpen: true, role: 'dialog' }, child);
expect(component.portal.content.getAttribute('role')).toEqual('dialog');
unmountModal();
});

it('renders the modal with a aria-label based on the contentLabel prop', () => {
const child = 'I am a child of Modal, and he has sent me here...';
const component = renderModal({ isOpen: true, contentLabel: 'Special Modal' }, child);
expect(component.portal.content.getAttribute('aria-label')).toEqual('Special Modal');
unmountModal();
});

it('has default props', () => {
Expand All @@ -114,16 +104,13 @@ describe('Modal', () => {
it('focuses the modal content', () => {
renderModal({ isOpen: true }, null, function checkModalContentFocus () {
expect(document.activeElement).toEqual(this.portal.content);
unmountModal();
});
});

it('give back focus to previous element or modal.', (done) => {
const modal = renderModal({
isOpen: true,
onRequestClose () {
unmountModal();
unmountModal();
done();
}
}, null, () => {});
Expand Down Expand Up @@ -160,7 +147,6 @@ describe('Modal', () => {

renderModal({ isOpen: true }, input, () => {
expect(document.activeElement).toEqual(document.querySelector('.focus_input'));
unmountModal();
});
});

Expand All @@ -169,7 +155,6 @@ describe('Modal', () => {
expect(() => {
Simulate.keyDown(component.portal.content, { key: 'Tab', keyCode: 9, which: 9 });
}).toNotThrow();
unmountModal();
});

it('keeps focus inside the modal when child has no tabbable elements', () => {
Expand All @@ -183,61 +168,51 @@ describe('Modal', () => {
preventDefault () { tabPrevented = true; }
});
expect(tabPrevented).toEqual(true);
unmountModal();
});

it('supports portalClassName', () => {
const modal = renderModal({ isOpen: true, portalClassName: 'myPortalClass' });
expect(modal.node.className).toEqual('myPortalClass');
unmountModal();
});

it('supports custom className', () => {
const modal = renderModal({ isOpen: true, className: 'myClass' });
expect(modal.portal.content.className.indexOf('myClass')).toNotEqual(-1);
unmountModal();
});

it('supports overlayClassName', () => {
const modal = renderModal({ isOpen: true, overlayClassName: 'myOverlayClass' });
expect(modal.portal.overlay.className.indexOf('myOverlayClass')).toNotEqual(-1);
unmountModal();
});

it('overrides the default styles when a custom classname is used', () => {
const modal = renderModal({ isOpen: true, className: 'myClass' });
expect(modal.portal.content.style.top).toEqual('');
unmountModal();
});

it('overrides the default styles when a custom overlayClassName is used', () => {
const modal = renderModal({ isOpen: true, overlayClassName: 'myOverlayClass' });
expect(modal.portal.overlay.style.backgroundColor).toEqual('');
unmountModal();
});

it('supports adding style to the modal contents', () => {
const modal = renderModal({ isOpen: true, style: { content: { width: '20px' } } });
expect(modal.portal.content.style.width).toEqual('20px');
unmountModal();
});

it('supports overriding style on the modal contents', () => {
const modal = renderModal({ isOpen: true, style: { content: { position: 'static' } } });
expect(modal.portal.content.style.position).toEqual('static');
unmountModal();
});

it('supports adding style on the modal overlay', () => {
const modal = renderModal({ isOpen: true, style: { overlay: { width: '75px' } } });
expect(modal.portal.overlay.style.width).toEqual('75px');
unmountModal();
});

it('supports overriding style on the modal overlay', () => {
const modal = renderModal({ isOpen: true, style: { overlay: { position: 'static' } } });
expect(modal.portal.overlay.style.position).toEqual('static');
unmountModal();
});

it('supports overriding the default styles', () => {
Expand All @@ -248,7 +223,6 @@ describe('Modal', () => {
const modal = renderModal({ isOpen: true });
expect(modal.portal.content.style.position).toEqual(newStyle);
Modal.defaultStyles.content.position = previousStyle;
unmountModal();
});

it('adds class to body when open', () => {
Expand All @@ -262,7 +236,6 @@ describe('Modal', () => {

renderModal({ isOpen: false });
expect(document.body.className.indexOf('ReactModal__Body--open') !== -1).toEqual(false);
unmountModal();
});

it('removes class from body when unmounted without closing', () => {
Expand Down Expand Up @@ -290,19 +263,15 @@ describe('Modal', () => {
const content = document.querySelector('.ReactModal__Content');
expect(overlay.className.match(/ReactModal__Overlay--after-open/)).toExist();
expect(content.className.match(/ReactModal__Content--after-open/)).toExist();
unmountModal();
});

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

it('check the state of the modal after close with time out and reopen it', () => {
Expand All @@ -315,7 +284,6 @@ describe('Modal', () => {
modal.portal.open();
modal.portal.closeWithoutTimeout();
expect(!modal.portal.state.isOpen).toBeTruthy();
unmountModal();
});

it('should close on Esc key event', () => {
Expand All @@ -340,15 +308,14 @@ describe('Modal', () => {
expect(event).toBeTruthy();
expect(event.constructor).toBeTruthy();
expect(event.key).toEqual('FakeKeyToTestLater');
unmountModal();
});

describe('should close on overlay click', () => {
afterEach('Unmount modal', () => {
unmountModal();
});
afterEach('Unmount modal', emptyDOM);

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

it('verify default prop of shouldCloseOnOverlayClick', () => {
const modal = renderModal({ isOpen: true });
expect(modal.props.shouldCloseOnOverlayClick).toEqual(true);
Expand All @@ -361,6 +328,8 @@ describe('Modal', () => {
});

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

it('verify overlay click when shouldCloseOnOverlayClick sets to false', () => {
const requestCloseCallback = sinon.spy();
const modal = renderModal({
Expand Down Expand Up @@ -395,9 +364,7 @@ describe('Modal', () => {
const modal = renderModal({
isOpen: true,
shouldCloseOnOverlayClick: true,
onRequestClose () {
requestCloseCallback();
}
onRequestClose: requestCloseCallback
});
expect(modal.props.isOpen).toEqual(true);
const overlay = TestUtils.scryRenderedDOMComponentsWithClass(modal.portal, 'ReactModal__Overlay');
Expand Down Expand Up @@ -481,6 +448,7 @@ describe('Modal', () => {
});

modal.portal.closeWithTimeout();
unmountModal();

const overlay = TestUtils.findRenderedDOMComponentWithClass(modal.portal, 'ReactModal__Overlay');
const content = TestUtils.findRenderedDOMComponentWithClass(modal.portal, 'ReactModal__Content');
Expand All @@ -489,7 +457,6 @@ describe('Modal', () => {
expect(/ReactModal__Content--before-close/.test(content.className)).toBe(true);

modal.portal.closeWithoutTimeout();
unmountModal();
});

it('keeps the modal in the DOM until closeTimeoutMS elapses', (done) => {
Expand Down
6 changes: 6 additions & 0 deletions specs/helper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,9 @@ export const unmountModal = () => {
ReactDOM.unmountComponentAtNode(currentDiv);
document.body.removeChild(currentDiv);
};

export const emptyDOM = () => {
while (divStack.length) {
unmountModal();
}
};

0 comments on commit a8b7aa0

Please sign in to comment.