mock useContext for shallow rendered tests

mitodl · Dec 12, 2023 · d96e268 · ChristopherChudzicki · Dec 12, 2023 · d96e268
1 parent 704ef30
commit d96e268
Show file tree

Hide file tree

Showing 22 changed files with 117 additions and 28 deletions.
diff --git a/frontend/public/src/components/CourseProductDetailEnroll_test.js b/frontend/public/src/components/CourseProductDetailEnroll_test.js
@@ -45,7 +45,7 @@ describe("CourseProductDetailEnroll", () => {
     course = makeCourseDetailWithRuns()
     enrollment = makeCourseRunEnrollment()
     currentUser = makeUser()
-    renderPage = helper.configureMountRenderer(
+    renderPage = helper.configureHOCRenderer(
       CourseProductDetailEnroll,
       InnerCourseProductDetailEnroll,
       {
@@ -289,6 +289,7 @@ describe("CourseProductDetailEnroll", () => {
     const enrollBtn = inner.find("form > button.enroll-now")
     assert.isTrue(enrollBtn.exists())
   })
+
   ;[
     [true, 201],
     [false, 400]

diff --git a/frontend/public/src/components/NotificationContainer_test.js b/frontend/public/src/components/NotificationContainer_test.js
@@ -26,7 +26,7 @@ describe("NotificationContainer component", () => {
     getAlertPropsStub = helper.sandbox
       .stub(notificationsApi, "getNotificationAlertProps")
       .returns({})
-    render = helper.configureMountRenderer(
+    render = helper.configureHOCRenderer(
       NotificationContainer,
       InnerNotificationContainer,
       {

diff --git a/frontend/public/src/components/PrivateRoute_test.js b/frontend/public/src/components/PrivateRoute_test.js
@@ -20,7 +20,7 @@ describe("PrivateRoute component", () => {
 
   beforeEach(() => {
     helper = new IntegrationTestHelper()
-    renderComponent = helper.configureMountRenderer(
+    renderComponent = helper.configureHOCRenderer(
       PrivateRoute,
       InnerPrivateRoute,
       {},

diff --git a/frontend/public/src/components/ProgramProductDetailEnroll_test.js b/frontend/public/src/components/ProgramProductDetailEnroll_test.js
@@ -33,7 +33,7 @@ describe("ProgramProductDetailEnroll", () => {
     programs = [makeProgramWithReqTree()]
     programEnrollments = [makeProgramEnrollment()]
 
-    renderPage = helper.configureMountRenderer(
+    renderPage = helper.configureHOCRenderer(
       ProgramProductDetailEnroll,
       InnerProgramProductDetailEnroll,
       {

diff --git a/frontend/public/src/containers/App_test.js b/frontend/public/src/containers/App_test.js
@@ -19,7 +19,7 @@ describe("Top-level App", () => {
       notificationsApi,
       "removeStoredUserMessage"
     )
-    renderPage = helper.configureMountRenderer(
+    renderPage = helper.configureHOCRenderer(
       App,
       InnerApp,
       {},

diff --git a/frontend/public/src/containers/HeaderApp_test.js b/frontend/public/src/containers/HeaderApp_test.js
@@ -18,7 +18,7 @@ describe("Top-level HeaderApp", () => {
       notificationsApi,
       "removeStoredUserMessage"
     )
-    renderPage = helper.configureMountRenderer(HeaderApp, InnerHeaderApp, {}, {})
+    renderPage = helper.configureHOCRenderer(HeaderApp, InnerHeaderApp, {}, {})
   })
 
   afterEach(() => {

diff --git a/frontend/public/src/containers/pages/CatalogPage_test.js b/frontend/public/src/containers/pages/CatalogPage_test.js
@@ -151,7 +151,7 @@ describe("CatalogPage", function() {
     helper = new IntegrationTestHelper()
     window.IntersectionObserver = mockIntersectionObserver
 
-    renderPage = helper.configureMountRenderer(CatalogPage, InnerCatalogPage)
+    renderPage = helper.configureHOCRenderer(CatalogPage, InnerCatalogPage)
 
     SETTINGS.features = {
       "mitxonline-new-product-page": true

diff --git a/frontend/public/src/containers/pages/DashboardPage_test.js b/frontend/public/src/containers/pages/DashboardPage_test.js
@@ -17,7 +17,7 @@ describe("DashboardPage", () => {
     userEnrollments = [makeCourseRunEnrollment(), makeCourseRunEnrollment()]
     currentUser = makeUser()
 
-    renderPage = helper.configureMountRenderer(
+    renderPage = helper.configureHOCRenderer(
       DashboardPage,
       InnerDashboardPage,
       {

diff --git a/frontend/public/src/containers/pages/checkout/OrderReceiptPage_test.js b/frontend/public/src/containers/pages/checkout/OrderReceiptPage_test.js
@@ -13,7 +13,7 @@ describe("OrderReceiptPage", () => {
   beforeEach(() => {
     helper = new IntegrationTestHelper()
 
-    renderPage = helper.configureMountRenderer(
+    renderPage = helper.configureHOCRenderer(
       OrderReceiptPage,
       InnerOrderReceiptPage,
       {

diff --git a/frontend/public/src/containers/pages/login/LoginEmailPage_test.js b/frontend/public/src/containers/pages/login/LoginEmailPage_test.js
@@ -24,7 +24,7 @@ describe("LoginEmailPage", () => {
     setSubmittingStub = helper.sandbox.stub()
     setErrorsStub = helper.sandbox.stub()
 
-    renderPage = helper.configureMountRenderer(
+    renderPage = helper.configureHOCRenderer(
       LoginEmailPage,
       InnerLoginEmailPage,
       {},

diff --git a/frontend/public/src/containers/pages/login/LoginForgotPasswordConfirmPage_test.js b/frontend/public/src/containers/pages/login/LoginForgotPasswordConfirmPage_test.js
@@ -21,7 +21,7 @@ describe("LoginForgotPasswordConfirmPage", () => {
 
     setSubmittingStub = helper.sandbox.stub()
 
-    renderPage = helper.configureMountRenderer(
+    renderPage = helper.configureHOCRenderer(
       LoginForgotPasswordConfirmPage,
       InnerLoginForgotPasswordConfirmPage,
       {},

diff --git a/frontend/public/src/containers/pages/login/LoginForgotPasswordPage_test.js b/frontend/public/src/containers/pages/login/LoginForgotPasswordPage_test.js
@@ -20,7 +20,7 @@ describe("LoginForgotPasswordPage", () => {
 
     setSubmittingStub = helper.sandbox.stub()
 
-    renderPage = helper.configureMountRenderer(
+    renderPage = helper.configureHOCRenderer(
       LoginForgotPasswordPage,
       InnerLoginForgotPasswordPage,
       {},

diff --git a/frontend/public/src/containers/pages/login/LoginPasswordPage_test.js b/frontend/public/src/containers/pages/login/LoginPasswordPage_test.js
@@ -27,7 +27,7 @@ describe("LoginPasswordPage", () => {
       state: STATE_LOGIN_PASSWORD
     })
 
-    renderPage = helper.configureMountRenderer(
+    renderPage = helper.configureHOCRenderer(
       LoginPasswordPage,
       InnerLoginPasswordPage,
       {

diff --git a/frontend/public/src/containers/pages/profile/EditProfilePage_test.js b/frontend/public/src/containers/pages/profile/EditProfilePage_test.js
@@ -16,7 +16,7 @@ describe("EditProfilePage", () => {
   beforeEach(() => {
     helper = new IntegrationTestHelper()
 
-    renderPage = helper.configureMountRenderer(
+    renderPage = helper.configureHOCRenderer(
       EditProfilePage,
       InnerEditProfilePage,
       {

diff --git a/frontend/public/src/containers/pages/register/RegisterConfirmPage_test.js b/frontend/public/src/containers/pages/register/RegisterConfirmPage_test.js
@@ -17,7 +17,7 @@ describe("RegisterConfirmPage", () => {
 
   beforeEach(() => {
     helper = new IntegrationTestHelper()
-    renderPage = helper.configureMountRenderer(
+    renderPage = helper.configureHOCRenderer(
       RegisterConfirmPage,
       InnerRegisterConfirmPage,
       {},

diff --git a/frontend/public/src/containers/pages/register/RegisterConfirmSentPage_test.js b/frontend/public/src/containers/pages/register/RegisterConfirmSentPage_test.js
@@ -20,7 +20,7 @@ describe("RegisterConfirmSentPage", () => {
 
     helper = new IntegrationTestHelper()
 
-    renderPage = helper.configureMountRenderer(
+    renderPage = helper.configureHOCRenderer(
       RegisterConfirmSentPage,
       InnerRegisterConfirmSentPage,
       {},

diff --git a/frontend/public/src/containers/pages/register/RegisterDeniedPage_test.js b/frontend/public/src/containers/pages/register/RegisterDeniedPage_test.js
@@ -19,7 +19,7 @@ describe("RegisterDeniedPage", () => {
 
     helper = new IntegrationTestHelper()
 
-    renderPage = helper.configureMountRenderer(
+    renderPage = helper.configureHOCRenderer(
       RegisterDeniedPage,
       InnerRegisterDeniedPage,
       {},

diff --git a/frontend/public/src/containers/pages/register/RegisterDetailsPage_test.js b/frontend/public/src/containers/pages/register/RegisterDetailsPage_test.js
@@ -42,7 +42,7 @@ describe("RegisterDetailsPage", () => {
     setSubmittingStub = helper.sandbox.stub()
     setErrorsStub = helper.sandbox.stub()
 
-    renderPage = helper.configureMountRenderer(
+    renderPage = helper.configureHOCRenderer(
       RegisterDetailsPage,
       InnerRegisterDetailsPage,
       {},

diff --git a/frontend/public/src/containers/pages/register/RegisterEmailPage_test.js b/frontend/public/src/containers/pages/register/RegisterEmailPage_test.js
@@ -29,7 +29,7 @@ describe("RegisterEmailPage", () => {
     setSubmittingStub = helper.sandbox.stub()
     setErrorsStub = helper.sandbox.stub()
 
-    renderPage = helper.configureMountRenderer(
+    renderPage = helper.configureHOCRenderer(
       RegisterEmailPage,
       InnerRegisterEmailPage,
       {},

diff --git a/frontend/public/src/containers/pages/settings/AccountSettingsPage_test.js b/frontend/public/src/containers/pages/settings/AccountSettingsPage_test.js
@@ -24,7 +24,7 @@ describe("AccountSettingsPage", () => {
 
     setSubmittingStub = helper.sandbox.stub()
 
-    renderPage = helper.configureMountRenderer(
+    renderPage = helper.configureHOCRenderer(
       AccountSettingsPage,
       InnerAccountSettingsPage,
       {},

diff --git a/frontend/public/src/containers/pages/settings/EmailConfirmPage_test.js b/frontend/public/src/containers/pages/settings/EmailConfirmPage_test.js
@@ -11,7 +11,7 @@ describe("EmailConfirmPage", () => {
 
   beforeEach(() => {
     helper = new IntegrationTestHelper()
-    renderPage = helper.configureMountRenderer(
+    renderPage = helper.configureHOCRenderer(
       EmailConfirmPage,
       InnerEmailConfirmPage,
       {},

diff --git a/frontend/public/src/util/integration_test_helper.js b/frontend/public/src/util/integration_test_helper.js
@@ -8,7 +8,7 @@ import configureStoreMain from "../store/configureStore"
 
 import type { Sandbox } from "../flow/sinonTypes"
 import * as networkInterfaceFuncs from "../store/network_interface"
-import {Provider} from "react-redux"
+import {Provider, ReactReduxContext} from "react-redux"
 import {Route, Router} from "react-router"
 
 export default class IntegrationTestHelper {
@@ -45,6 +45,9 @@ export default class IntegrationTestHelper {
           const resText = (response && response.text) || undefined
           const resHeaders = (response && response.header) || undefined
 
+          // console.log(`Responding to request ${method} ${url} with`)
+          // console.log(resBody)
+
           callback(err, resStatus, resBody, resText, resHeaders)
         },
         abort: () => {
@@ -56,6 +59,12 @@ export default class IntegrationTestHelper {
   cleanup() {
     this.actions = []
     this.sandbox.restore()
+
+    if (this.wrapper) {
+      this.wrapper.unmount()
+      delete this.wrapper
+      this.wrapper = null
+    }
   }
 
   configureShallowRenderer(
@@ -98,6 +107,79 @@ export default class IntegrationTestHelper {
     }
   }
 
+  configureHOCRenderer(
+    WrappedComponent: Class<React.Component<*, *>>,
+    InnerComponent: Class<React.Component<*, *>>,
+    defaultState: Object,
+    defaultProps = {}
+  ) {
+    const history = this.browserHistory
+    return async (extraState = {}, extraProps = {}) => {
+      const initialState = R.mergeDeepRight(defaultState, extraState)
+      const store = configureStoreMain(initialState)
+
+      const useContextFake = this.sandbox.stub(React, "useContext")
+      useContextFake.callsFake(context => {
+        if (context === ReactReduxContext) return { store }
+        const msg = [
+          "useContext called in enzyme shallow render with un-mocked return",
+          "value. See See https://github.com/enzymejs/enzyme/issues/2176#issuecomment-532361526",
+          "for more."
+        ].join(" ")
+        throw new Error(msg)
+      })
+
+      const wrapper = await shallow(
+        <WrappedComponent
+          store={store}
+          dispatch={store.dispatch}
+          history={history}
+          {...defaultProps}
+          {...extraProps}
+        />,
+        {
+          context: {
+            // TODO: should be removed in the near future after upgrading enzyme
+            store
+          },
+        }
+      )
+
+
+      // just a little convenience method
+      store.getLastAction = function() {
+        const actions = this.getActions()
+        return actions[actions.length - 1]
+      }
+
+      // dive through layers of HOCs until we reach the desired inner component
+      let inner = wrapper
+      while (!inner.is(InnerComponent)) {
+        // determine the type before we dive
+        const cls = inner.type()
+        if (InnerComponent === cls.WrappedComponent) {
+          break
+        }
+
+        // shallow render this component
+        inner = await inner.dive()
+
+        // if it defines WrappedComponent, find() that so we skip over any intermediaries
+        if (
+          cls &&
+          cls.hasOwnProperty("WrappedComponent") && // eslint-disable-line no-prototype-builtins
+          inner.find(cls.WrappedComponent).length
+        ) {
+          inner = inner.find(cls.WrappedComponent)
+        }
+      }
+      // one more time to shallow render the InnerComponent
+      inner = await inner.dive()
+
+      return { wrapper, inner, store }
+    }
+  }
+
   configureMountRenderer(
     WrappedComponent: Class<React.Component<*, *>>,
     InnerComponent: Class<React.Component<*, *>>,
@@ -113,12 +195,18 @@ export default class IntegrationTestHelper {
       const store = configureStoreMain(initialState)
 
       console.log(InnerComponent)
-      const ComponentWithProps = () => (
-        <WrappedComponent
-          {...defaultProps}
-          {...extraProps}
-        />
-      )
+      const ComponentWithProps = () => {
+        console.log("state")
+        console.log(store.getState())
+        return (
+          <WrappedComponent
+            history={history}
+            store={store}
+            {...defaultProps}
+            {...extraProps}
+          />
+        )
+      }
 
       console.log(ComponentWithProps)