added mock for canUseDom, testing ssr on modal-container and navbar-c…

…ontainer
zookatron · Jun 14, 2019 · d4eb5d9 · d4eb5d9
1 parent d0593f2
commit d4eb5d9
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 34 deletions.
diff --git a/src/__mocks__/utils.ts 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
@@ -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<HTMLDivElement>();
-        const wrapper = Enzyme.shallow(
-          <ModalContainer innerRef={ref} onClose={jest.fn()} active />,
-        );
-        wrapper.unmount();
-        expect(wrapper.type()).toBeNull();
-      });
+      (canUseDOM as MockCanUseDomFunction).__set(false);
+      const ref = React.createRef<HTMLDivElement>();
+      const wrapper = Enzyme.shallow(
+        <ModalContainer innerRef={ref} onClose={jest.fn()} active />,
+      );
+      wrapper.unmount();
+      expect(wrapper.type()).toBeNull();
     });
   });
 

diff --git a/src/components/modal/modal-container.tsx b/src/components/modal/modal-container.tsx
@@ -33,20 +33,16 @@ export class ModalContainer extends React.PureComponent<ModalContainerProps> {
   }
 
   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
@@ -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<HTMLDivElement>();
-        const wrapper = Enzyme.shallow(<NavbarContainer innerRef={ref} />);
-        expect(wrapper.children().hasClass("navbar")).toBe(true);
-        wrapper.unmount();
-        expect(wrapper.type()).toBeNull();
-      });
+      (canUseDOM as MockCanUseDomFunction).__set(false);
+      const ref = React.createRef<HTMLDivElement>();
+      const wrapper = Enzyme.shallow(<NavbarContainer innerRef={ref} />);
+      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
@@ -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}`);
     }
   }