Skip to content

Commit

Permalink
[fixed] Allow ReactDOM.createPortal to be mocked in tests
Browse files Browse the repository at this point in the history
Fixes reactjs#553 - PR  reactjs#701

* Allow ReactDOM.createPortal to be mocked in tests (9cd0891)
* add testability tests (6a67946)
* linting (f29e7b0)
* more linting (5992f97)
  • Loading branch information
devrelm authored and diasbruno committed Oct 27, 2018
1 parent 6a6bcf7 commit fc53400
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 3 deletions.
20 changes: 20 additions & 0 deletions specs/Modal.testability.spec.js
Original file line number Diff line number Diff line change
@@ -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();
});
};
2 changes: 2 additions & 0 deletions specs/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
10 changes: 7 additions & 3 deletions src/components/Modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -180,6 +182,7 @@ class Modal extends Component {
};

renderPortal = props => {
const createPortal = getCreatePortal();
const portal = createPortal(
this,
<ModalPortal defaultStyles={Modal.defaultStyles} {...props} />,
Expand All @@ -197,6 +200,7 @@ class Modal extends Component {
this.node = document.createElement("div");
}

const createPortal = getCreatePortal();
return createPortal(
<ModalPortal
ref={this.portalRef}
Expand Down

0 comments on commit fc53400

Please sign in to comment.