Adding more tests, fixing a few things, making the design a little bit less terrible

Author: jkachel

frontends/api/src/mitxonline/test-utils/urls.ts

@@ -46,8 +46,14 @@ const organization = {
     `${API_BASE_URL}/api/v0/b2b/organizations/${organizationSlug}/`,
 }
 
+const b2bAttach = {
+  b2bAttachView: (code: string) =>
+    `${API_BASE_URL}/api/v0/b2b/attach/${code}/`,
+}
+
 export {
   b2b,
+  b2bAttach,
   currentUser,
   enrollment,
   programs,

frontends/main/src/app-pages/B2BAttachPage/B2BAttachPage.test.tsx

@@ -0,0 +1,40 @@
+import React from "react"
+import { renderWithProviders, setMockResponse } from "@/test-utils"
+import { urls } from "api/test-utils"
+import { urls as b2bUrls } from "api/mitxonline-test-utils"
+import * as commonUrls from "@/common/urls"
+import { Permission } from "api/hooks/user"
+import B2BAttachPage from "./B2BAttachPage"
+
+const oldWindowLocation = window.location
+
+beforeAll(() => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  delete (window as any).location
+
+  window.location = Object.defineProperties({} as Location, {
+    ...Object.getOwnPropertyDescriptors(oldWindowLocation),
+    assign: {
+      configurable: true,
+      value: jest.fn(),
+    },
+  })
+})
+
+afterAll(() => {
+  window.location = oldWindowLocation
+})
+
+describe("B2BAttachPage", () => {
+  test("Renders when logged in", async () => {
+    setMockResponse.get(urls.userMe.get(), {
+      [Permission.Authenticated]: true,
+    })
+
+    setMockResponse.post(b2bUrls.b2bAttach.b2bAttachView("test-code"), [])
+
+    renderWithProviders(<B2BAttachPage code="test-code" />, {
+      url: commonUrls.B2B_ATTACH_VIEW,
+    })
+  })
+})

frontends/main/src/app-pages/B2BAttachPage/B2BAttachPage.tsx

@@ -1,24 +1,22 @@
 "use client"
 import React from "react"
-import { Breadcrumbs, Container, Typography } from "ol-components"
+import { styled, Breadcrumbs, Container, Typography } from "ol-components"
 import * as urls from "@/common/urls"
 import { useB2BAttachMutation } from "api/mitxonline-hooks/organizations"
 
 type B2BAttachPageProps = {
   code: string;
 };
 
-const B2BAttachPage: React.FC<B2BAttachPageProps> = ({ code }) => {
-  // This is an interstitial. The user sits here until we validate the code,
-  // then we toss them to the dashboard.
+const InterstitialMessage = styled(Typography)(({ theme }) => ({
+  ...theme.typography.body1,
+  textAlign: "center",
+}))
 
+const B2BAttachPage: React.FC<B2BAttachPageProps> = ({ code }) => {
   const { mutate: attach, isSuccess } = useB2BAttachMutation(code)
 
-  React.useEffect(() => {
-    // Trigger the attach mutation when the component mounts
-    console.log("attempting to attach code", code)
-    attach(code)
-  }, [attach, code])
+  React.useEffect(() => attach(code), [attach, code])
 
   if (isSuccess) {
     //window.history.replaceState(null, "", urls.DASHBOARD_HOME);
@@ -32,13 +30,9 @@ const B2BAttachPage: React.FC<B2BAttachPageProps> = ({ code }) => {
         current="Use Enrollment Code"
       />
 
-      <Typography component="h1" variant="h3">
-        Please Wait
-      </Typography>
-
-      <Typography>
-        {isSuccess ? <>Your enrollment code {code} has been validated.</> : <>Please wait while we validate your enrollment code {code}</>}
-      </Typography>
+      <InterstitialMessage>
+        Validating code "{code}"... 
+      </InterstitialMessage>
     </Container>
   )
 }

frontends/main/src/app-pages/B2BAttachPage/CartPage.test.tsx

@@ -2,7 +2,8 @@ import React from "react"
 import { Metadata } from "next"
 import { standardizeMetadata } from "@/common/metadata"
 import invariant from "tiny-invariant"
-
+import { Permission } from "api/hooks/user"
+import RestrictedRoute from "@/components/RestrictedRoute/RestrictedRoute"
 import type { PageParams } from "@/app/types"
 import B2BAttachPage from "@/app-pages/B2BAttachPage/B2BAttachPage"
 
@@ -15,7 +16,11 @@ const Page: React.FC<PageParams<object, { code: string }>> = async ({
 }) => {
   const resolved = await params
   invariant(resolved?.code, "code is required")
-  return <B2BAttachPage code={resolved?.code} />
+  return (
+    <RestrictedRoute requires={Permission.Authenticated}>
+      <B2BAttachPage code={resolved?.code} />
+    </RestrictedRoute>
+  )
 }
 
 export default Page