diff --git a/specs/Modal.testability.spec.js b/specs/Modal.testability.spec.js new file mode 100644 index 00000000..4b162ed8 --- /dev/null +++ b/specs/Modal.testability.spec.js @@ -0,0 +1,20 @@ +/* eslint-env mocha */ +import ReactDOM from "react-dom"; +import sinon from "sinon"; +import { mcontent, renderModal, emptyDOM } from "./helper"; + +export default () => { + afterEach("cleaned up all rendered modals", emptyDOM); + + it("renders as expected, initially", () => { + const modal = renderModal({ isOpen: true }, "hello"); + mcontent(modal).should.be.ok(); + }); + + it("allows ReactDOM.createPortal to be overridden in real-time", () => { + const createPortalSpy = sinon.spy(ReactDOM, "createPortal"); + renderModal({ isOpen: true }, "hello"); + createPortalSpy.called.should.be.ok(); + ReactDOM.createPortal.restore(); + }); +}; diff --git a/specs/index.js b/specs/index.js index b9e03b91..2d7b0dee 100644 --- a/specs/index.js +++ b/specs/index.js @@ -4,8 +4,10 @@ import ModalState from "./Modal.spec"; import ModalEvents from "./Modal.events.spec"; import ModalStyle from "./Modal.style.spec"; import ModalHelpers from "./Modal.helpers.spec"; +import ModalTestability from "./Modal.testability.spec"; describe("State", ModalState); describe("Style", ModalStyle); describe("Events", ModalEvents); describe("Helpers", ModalHelpers); +describe("Testability", ModalTestability); diff --git a/src/components/Modal.js b/src/components/Modal.js index 7a9a959b..498f8467 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -11,9 +11,11 @@ export const portalClassName = "ReactModalPortal"; export const bodyOpenClassName = "ReactModal__Body--open"; const isReact16 = ReactDOM.createPortal !== undefined; -const createPortal = isReact16 - ? ReactDOM.createPortal - : ReactDOM.unstable_renderSubtreeIntoContainer; + +const getCreatePortal = () => + isReact16 + ? ReactDOM.createPortal + : ReactDOM.unstable_renderSubtreeIntoContainer; function getParentElement(parentSelector) { return parentSelector(); @@ -180,6 +182,7 @@ class Modal extends Component { }; renderPortal = props => { + const createPortal = getCreatePortal(); const portal = createPortal( this, , @@ -197,6 +200,7 @@ class Modal extends Component { this.node = document.createElement("div"); } + const createPortal = getCreatePortal(); return createPortal(