diff --git a/specs/Modal.events.spec.js b/specs/Modal.events.spec.js index 5e223288..ab454927 100644 --- a/specs/Modal.events.spec.js +++ b/specs/Modal.events.spec.js @@ -15,20 +15,27 @@ import { } from "./helper"; export default () => { - it("should trigger the onAfterOpen callback", () => { + it("should trigger the onAfterOpen callback", done => { const afterOpenCallback = sinon.spy(); const props = { isOpen: true, onAfterOpen: afterOpenCallback }; - withModal(props, null, () => {}); - afterOpenCallback.called.should.be.ok(); + withModal(props, null, () => { + requestAnimationFrame(() => { + afterOpenCallback.called.should.be.ok(); + done(); + }); + }); }); - it("should call onAfterOpen with overlay and content references", () => { + it("should call onAfterOpen with overlay and content references", done => { const afterOpenCallback = sinon.spy(); const props = { isOpen: true, onAfterOpen: afterOpenCallback }; withModal(props, null, modal => { - sinon.assert.calledWith(afterOpenCallback, { - overlayEl: modal.portal.overlay, - contentEl: modal.portal.content + requestAnimationFrame(() => { + sinon.assert.calledWith(afterOpenCallback, { + overlayEl: modal.portal.overlay, + contentEl: modal.portal.content + }); + done(); }); }); }); diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js index 47c25482..9186f4e7 100644 --- a/specs/Modal.spec.js +++ b/specs/Modal.spec.js @@ -347,7 +347,7 @@ export default () => { }); }); - it("overrides content classes with custom object className", () => { + it("overrides content classes with custom object className", done => { const props = { isOpen: true, className: { @@ -357,11 +357,14 @@ export default () => { } }; withModal(props, null, modal => { - mcontent(modal).className.should.be.eql("myClass myClass_after-open"); + requestAnimationFrame(() => { + mcontent(modal).className.should.be.eql("myClass myClass_after-open"); + done(); + }); }); }); - it("overrides overlay classes with custom object overlayClassName", () => { + it("overrides overlay classes with custom object overlayClassName", done => { const props = { isOpen: true, overlayClassName: { @@ -371,9 +374,12 @@ export default () => { } }; withModal(props, null, modal => { - moverlay(modal).className.should.be.eql( - "myOverlayClass myOverlayClass_after-open" - ); + requestAnimationFrame(() => { + moverlay(modal).className.should.be.eql( + "myOverlayClass myOverlayClass_after-open" + ); + done(); + }); }); }); @@ -667,12 +673,15 @@ export default () => { }); }); - it("adds --after-open for animations", () => { + it("adds --after-open for animations", done => { const props = { isOpen: true }; + const rg = /--after-open/i; withModal(props, null, modal => { - const rg = /--after-open/i; - rg.test(mcontent(modal).className).should.be.ok(); - rg.test(moverlay(modal).className).should.be.ok(); + requestAnimationFrame(() => { + rg.test(mcontent(modal).className).should.be.ok(); + rg.test(moverlay(modal).className).should.be.ok(); + done(); + }); }); }); diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js index b7ac6cea..d28ee455 100644 --- a/src/components/ModalPortal.js +++ b/src/components/ModalPortal.js @@ -222,14 +222,16 @@ export default class ModalPortal extends Component { } this.setState({ isOpen: true }, () => { - this.setState({ afterOpen: true }); - - if (this.props.isOpen && this.props.onAfterOpen) { - this.props.onAfterOpen({ - overlayEl: this.overlay, - contentEl: this.content - }); - } + requestAnimationFrame(() => { + this.setState({ afterOpen: true }); + + if (this.props.isOpen && this.props.onAfterOpen) { + this.props.onAfterOpen({ + overlayEl: this.overlay, + contentEl: this.content + }); + } + }); }); } };