diff --git a/src/__mocks__/utils.ts b/src/__mocks__/utils.ts new file mode 100644 index 00000000..089e979f --- /dev/null +++ b/src/__mocks__/utils.ts @@ -0,0 +1,13 @@ +import { canUseDOM as _canUseDom } from "../utils"; + +// tslint:disable-next-line:variable-name +let __canUseDom = true; + +export type MockCanUseDomFunction = typeof _canUseDom & { + __set: (v: boolean) => void; +}; + +export const canUseDOM: MockCanUseDomFunction = Object.assign( + () => __canUseDom, + { __set: (value: boolean) => (__canUseDom = value) }, +); diff --git a/src/components/modal/__tests__/modal-container.test.tsx b/src/components/modal/__tests__/modal-container.test.tsx index 786dec53..5bea50a5 100644 --- a/src/components/modal/__tests__/modal-container.test.tsx +++ b/src/components/modal/__tests__/modal-container.test.tsx @@ -11,8 +11,12 @@ import { ModalContextValue, } from "src/components/modal/modal-context"; import { ModalPortal } from "src/components/modal/modal-portal"; +import { canUseDOM } from "src/utils"; -import { withEnzymeMount, withWindow } from "src/__tests__/testing"; +import { withEnzymeMount } from "src/__tests__/testing"; +import { MockCanUseDomFunction } from "src/__mocks__/utils"; + +jest.mock("src/utils"); // const COMPONENT = ModalContainer; const DISPLAY_NAME = "Modal.Container"; @@ -24,16 +28,19 @@ const makeNode = (props: ModalContainerProps) => { }; describe(`${DISPLAY_NAME} component`, () => { + beforeEach(() => { + (canUseDOM as MockCanUseDomFunction).__set(true); + }); + describe("ssr", () => { it("should render without window being available (ssr)", () => { - withWindow({}, () => { - const ref = React.createRef(); - const wrapper = Enzyme.shallow( - , - ); - wrapper.unmount(); - expect(wrapper.type()).toBeNull(); - }); + (canUseDOM as MockCanUseDomFunction).__set(false); + const ref = React.createRef(); + const wrapper = Enzyme.shallow( + , + ); + wrapper.unmount(); + expect(wrapper.type()).toBeNull(); }); }); diff --git a/src/components/modal/modal-container.tsx b/src/components/modal/modal-container.tsx index 01a65bf3..5edf1ec5 100644 --- a/src/components/modal/modal-container.tsx +++ b/src/components/modal/modal-container.tsx @@ -33,20 +33,16 @@ export class ModalContainer extends React.PureComponent { } public componentDidMount() { - if (canUseDOM()) { - /* istanbul ignore else: typescript typeguard */ - if (this.el !== undefined) { - this.document.body.appendChild(this.el); - } + /* istanbul ignore else: typescript typeguard */ + if (this.el !== undefined) { + this.document.body.appendChild(this.el); } } public componentWillUnmount() { - if (canUseDOM()) { - /* istanbul ignore else: typescript typeguard */ - if (this.el !== undefined) { - this.document.body.removeChild(this.el); - } + /* istanbul ignore else: typescript typeguard */ + if (this.el !== undefined) { + this.document.body.removeChild(this.el); } } diff --git a/src/components/navbar/__tests__/navbar-container.test.tsx b/src/components/navbar/__tests__/navbar-container.test.tsx index da4602a0..34f8df8e 100644 --- a/src/components/navbar/__tests__/navbar-container.test.tsx +++ b/src/components/navbar/__tests__/navbar-container.test.tsx @@ -16,13 +16,16 @@ import { NavbarContext, NavbarContextValue, } from "src/components/navbar/navbar-context"; +import { canUseDOM } from "src/utils"; import { testForwardRefAsExoticComponentIntegration, testThemeIntegration, withEnzymeMount, - withWindow, } from "src/__tests__/testing"; +import { MockCanUseDomFunction } from "src/__mocks__/utils"; + +jest.mock("src/utils"); const COMPONENT = NavbarContainer; const DISPLAY_NAME = "Navbar.Container"; @@ -52,6 +55,10 @@ const makeGenericHOCShallowWrapperInContextConsumer = ( }; describe(`${DISPLAY_NAME} component`, () => { + beforeEach(() => { + (canUseDOM as MockCanUseDomFunction).__set(true); + }); + testForwardRefAsExoticComponentIntegration(COMPONENT, { displayName: DISPLAY_NAME, bulmaClassName: BULMA_CLASS_NAME, @@ -66,13 +73,12 @@ describe(`${DISPLAY_NAME} component`, () => { describe("ssr", () => { it("should render without window being available (ssr)", () => { - withWindow({}, () => { - const ref = React.createRef(); - const wrapper = Enzyme.shallow(); - expect(wrapper.children().hasClass("navbar")).toBe(true); - wrapper.unmount(); - expect(wrapper.type()).toBeNull(); - }); + (canUseDOM as MockCanUseDomFunction).__set(false); + const ref = React.createRef(); + const wrapper = Enzyme.shallow(); + expect(wrapper.children().hasClass("navbar")).toBe(true); + wrapper.unmount(); + expect(wrapper.type()).toBeNull(); }); }); diff --git a/src/components/navbar/navbar-container.tsx b/src/components/navbar/navbar-container.tsx index b4ffd10c..29647ec5 100644 --- a/src/components/navbar/navbar-container.tsx +++ b/src/components/navbar/navbar-container.tsx @@ -58,13 +58,11 @@ export class NavbarContainer extends React.PureComponent< } public componentWillUnmount() { - if (canUseDOM()) { - const { fixed } = this.props; - const html = this.document.querySelector("html"); - /* istanbul ignore else: typeguard */ - if (html !== null) { - html.classList.remove(`has-navbar-fixed-${fixed}`); - } + const { fixed } = this.props; + const html = this.document.querySelector("html"); + /* istanbul ignore else: typeguard */ + if (html !== null) { + html.classList.remove(`has-navbar-fixed-${fixed}`); } }