[NextJS] Fix tests, re-enable on CI

.github/workflows/ci.yml

@@ -98,24 +98,6 @@ jobs:
         with:
           file: ./coverage.xml
 
-  build-nextjs-frontend:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
-
-      - uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4
-        with:
-          node-version: "^20"
-          cache: yarn
-          cache-dependency-path: yarn.lock
-
-      - name: Install dependencies
-        run: yarn install
-
-      - name: Build Next.js frontend
-        run: yarn workspace main build
-
   javascript-tests:
     runs-on: ubuntu-latest
     steps:
@@ -144,8 +126,11 @@ jobs:
       - name: Lints
         run: yarn run lint-check
 
+      - name: Build Next.js frontend
+        run: yarn workspace main build
+        # do this before typecheck. See https://github.com/vercel/next.js/issues/53959#issuecomment-1735563224
+
       - name: Typecheck
-        if: false # To be reinstated. Anything actually used in `main` is typecheck during build
         run: yarn run typecheck
 
       - name: Get number of CPU cores

frontends/api/package.json

@@ -5,7 +5,9 @@
   "sideEffects": false,
   "exports": {
     ".": "./src/generated/v1/api.ts",
+    "./clients": "./src/clients.ts",
     "./v0": "./src/generated/v0/api.ts",
+    "./v1": "./src/generated/v1/api.ts",
     "./hooks/*": "./src/hooks/*/index.ts",
     "./constants": "./src/common/constants.ts",
     "./test-utils/factories": "./src/test-utils/factories/index.ts",

frontends/api/src/test-utils/factories/learningResources.ts

@@ -196,7 +196,7 @@ const learningResourceTopic: Factory<LearningResourceTopic> = (
   const topic: LearningResourceTopic = {
     id: uniqueEnforcerId.enforce(() => faker.number.int()),
     name: uniqueEnforcerWords.enforce(() => faker.lorem.words()),
-    channel_url: `${faker.internet.url()}${faker.system.directoryPath()}`,
+    channel_url: `${faker.internet.url({ appendSlash: false })}${faker.system.directoryPath()}`,
     parent: null,
     ...overrides,
   }

frontends/jest-shared-setup.ts

@@ -10,6 +10,8 @@ expect.extend(matchers)
 // env vars
 process.env.NEXT_PUBLIC_MITOL_API_BASE_URL =
   "http://api.test.learn.odl.local:8063"
+process.env.NEXT_PUBLIC_ORIGIN = "http://test.learn.odl.local:8062"
+process.env.NEXT_PUBLIC_EMBEDLY_KEY = "fake-embedly-key"
 
 // Pulled from the docs - see https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
 

frontends/main/jest.config.ts

@@ -0,0 +1,17 @@
+import path from "path"
+import type { Config } from "@jest/types"
+import baseConfig from "../jest.jsdom.config"
+
+const config: Config.InitialOptions = {
+  ...baseConfig,
+  setupFilesAfterEnv: [
+    ...baseConfig.setupFilesAfterEnv,
+    "./test-utils/setupJest.ts",
+  ],
+  moduleNameMapper: {
+    "^@/(.*)$": path.resolve(__dirname, "src/$1"),
+    ...baseConfig.moduleNameMapper,
+  },
+}
+
+export default config

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

@@ -1,20 +1,10 @@
-import { renderTestApp, screen, waitFor, setMockResponse } from "@/test-utils"
-import { urls } from "api/test-utils"
-import * as commonUrls from "@/common/urls"
-import { Permissions } from "@/common/permissions"
+import React from "react"
+import { screen, renderWithProviders } from "@/test-utils"
+import { AboutPage } from "./AboutPage"
 
 describe("AboutPage", () => {
   test("Renders title", async () => {
-    setMockResponse.get(urls.userMe.get(), {
-      [Permissions.Authenticated]: true,
-    })
-
-    renderTestApp({
-      url: commonUrls.ABOUT,
-    })
-    await waitFor(() => {
-      expect(document.title).toBe("About Us | MIT Learn")
-    })
+    renderWithProviders(<AboutPage />)
     screen.getByRole("heading", {
       name: "About Us",
     })

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

@@ -1,17 +1,17 @@
+import React from "react"
 import { urls, factories, makeRequest } from "api/test-utils"
 import { ChannelTypeEnum, type Channel } from "api/v0"
 import type { LearningResourcesSearchResponse } from "api"
 import {
-  renderTestApp,
   screen,
   setMockResponse,
-  within,
   waitFor,
-  assertPartialMetas,
+  renderWithProviders,
 } from "@/test-utils"
 import ChannelSearch from "./ChannelSearch"
-import { assertHeadings } from "ol-test-utilities"
+import { assertHeadings, getByImageSrc } from "ol-test-utilities"
 import invariant from "tiny-invariant"
+import ChannelPage from "./ChannelPage"
 
 jest.mock("./ChannelSearch", () => {
   const actual = jest.requireActual("./ChannelSearch")
@@ -141,7 +141,9 @@ describe.each(ALL_CHANNEL_TYPES)(
           "platform=ocw&platform=mitxonline&department=8&department=9",
         channel_type: channelType,
       })
-      renderTestApp({ url: `/c/${channel.channel_type}/${channel.name}` })
+      renderWithProviders(<ChannelPage />, {
+        url: `/c/${channel.channel_type}/${channel.name}`,
+      })
       await screen.findAllByText(channel.title)
       const expectedProps = expect.objectContaining({
         constantSearchParams: {
@@ -161,7 +163,9 @@ describe.each(ALL_CHANNEL_TYPES)(
         channel_type: channelType,
       })
       channel.search_filter = undefined
-      renderTestApp({ url: `/c/${channel.channel_type}/${channel.name}` })
+      renderWithProviders(<ChannelPage />, {
+        url: `/c/${channel.channel_type}/${channel.name}`,
+      })
       await screen.findAllByText(channel.title)
 
       expect(mockedChannelSearch).toHaveBeenCalledTimes(0)
@@ -172,7 +176,9 @@ describe.each(ALL_CHANNEL_TYPES)(
         channel_type: channelType,
       })
       channel.search_filter = undefined
-      renderTestApp({ url: `/c/${channel.channel_type}/${channel.name}` })
+      renderWithProviders(<ChannelPage />, {
+        url: `/c/${channel.channel_type}/${channel.name}`,
+      })
       await screen.findAllByText(channel.title)
 
       await waitFor(() => {
@@ -195,7 +201,9 @@ describe.each(ALL_CHANNEL_TYPES)(
           {},
           { isSubscribed },
         )
-        renderTestApp({ url: `/c/${channel.channel_type}/${channel.name}` })
+        renderWithProviders(<ChannelPage />, {
+          url: `/c/${channel.channel_type}/${channel.name}`,
+        })
         const subscribedButton = await screen.findByText("Follow")
         expect(subscribedButton).toBeVisible()
       },
@@ -212,7 +220,9 @@ describe.each(NON_UNIT_CHANNEL_TYPES)(
         channel_type: channelType,
       })
 
-      renderTestApp({ url: `/c/${channel.channel_type}/${channel.name}` })
+      renderWithProviders(<ChannelPage />, {
+        url: `/c/${channel.channel_type}/${channel.name}`,
+      })
       await screen.findAllByText(channel.title)
       const carousels = screen.queryByText("Featured Courses")
       expect(carousels).toBe(null)
@@ -224,13 +234,10 @@ describe.each(NON_UNIT_CHANNEL_TYPES)(
         channel_type: channelType,
       })
 
-      renderTestApp({ url: `/c/${channel.channel_type}/${channel.name}` })
-      const title = await screen.findByRole("heading", { name: channel.title })
-      await waitFor(() => {
-        assertPartialMetas({
-          title: `${channel.title} | ${APP_SETTINGS.SITE_NAME}`,
-        })
+      const { view } = renderWithProviders(<ChannelPage />, {
+        url: `/c/${channel.channel_type}/${channel.name}`,
       })
+      const title = await screen.findByRole("heading", { name: channel.title })
       // Banner background image
       expect(
         someAncestor(title, (el) =>
@@ -240,19 +247,20 @@ describe.each(NON_UNIT_CHANNEL_TYPES)(
         ),
       ).toBe(true)
       // logo
-      const images = screen.getAllByRole<HTMLImageElement>("img")
-      const logos = images.filter((img) =>
-        img.src.includes(channel.configuration.logo),
+      getByImageSrc(
+        view.container,
+        `${window.origin}${channel.configuration.logo}`,
       )
-      expect(logos.length).toBe(1)
     })
 
     test("headings", async () => {
       const { channel } = setupApis({
         search_filter: "topic=Physics",
         channel_type: channelType,
       })
-      renderTestApp({ url: `/c/${channel.channel_type}/${channel.name}` })
+      renderWithProviders(<ChannelPage />, {
+        url: `/c/${channel.channel_type}/${channel.name}`,
+      })
 
       await waitFor(() => {
         assertHeadings([
@@ -272,7 +280,9 @@ describe("Channel Pages, Topic only", () => {
       search_filter: "topic=Physics",
       channel_type: ChannelTypeEnum.Topic,
     })
-    renderTestApp({ url: `/c/${channel.channel_type}/${channel.name}` })
+    renderWithProviders(<ChannelPage />, {
+      url: `/c/${channel.channel_type}/${channel.name}`,
+    })
 
     invariant(subTopics)
     const links = await screen.findAllByRole("link", {
@@ -286,71 +296,27 @@ describe("Channel Pages, Topic only", () => {
 })
 
 describe("Channel Pages, Unit only", () => {
-  it("Sets the expected meta tags", async () => {
-    const { channel } = setupApis({
-      search_filter: "offered_by=ocw",
-      channel_type: "unit",
-    })
-    renderTestApp({ url: `/c/${channel.channel_type}/${channel.name}` })
-    const title = `${channel.title} | ${APP_SETTINGS.SITE_NAME}`
-    const { heading: description } = channel.configuration
-    await waitFor(() => {
-      assertPartialMetas({
-        title,
-        description,
-        og: { title, description },
-      })
-    })
-  })
-
-  it("Sets the expected metadata tags when resource drawer is open", async () => {
-    /**
-     * Check that the meta tags are correct on channel page, even when the
-     * resource drawer is open.
-     */
-    const { channel } = setupApis({
-      search_filter: "offered_by=ocw",
-      channel_type: "unit",
-    })
-    const resource = factories.learningResources.resource()
-    setMockResponse.get(
-      urls.learningResources.details({ id: resource.id }),
-      resource,
-    )
-
-    renderTestApp({
-      url: `/c/${channel.channel_type}/${channel.name}?resource=${resource.id}`,
-    })
-    await screen.findByRole("heading", { name: channel.title, hidden: true })
-    const title = `${resource.title} | ${APP_SETTINGS.SITE_NAME}`
-    const description = resource.description
-    await waitFor(() => {
-      assertPartialMetas({
-        title,
-        description,
-        og: { title, description },
-      })
-    })
-  })
-
   it("Displays the channel title, banner, and avatar", async () => {
     const { channel } = setupApis({
       search_filter: "offered_by=ocw",
       channel_type: "unit",
     })
-    renderTestApp({ url: `/c/${channel.channel_type}/${channel.name}` })
+    renderWithProviders(<ChannelPage />, {
+      url: `/c/${channel.channel_type}/${channel.name}`,
+    })
 
     const title = await screen.findByRole("heading", { name: channel.title })
-    const image = within(title).getByRole<HTMLImageElement>("img")
-    expect(image.src).toContain(channel.configuration.logo)
+    getByImageSrc(title, `${window.origin}${channel.configuration.logo}`)
   })
   it("Displays a featured carousel if the channel type is 'unit'", async () => {
     const { channel } = setupApis({
       search_filter: "offered_by=ocw",
       channel_type: "unit",
     })
 
-    renderTestApp({ url: `/c/${channel.channel_type}/${channel.name}` })
+    renderWithProviders(<ChannelPage />, {
+      url: `/c/${channel.channel_type}/${channel.name}`,
+    })
     await screen.findAllByText(channel.title)
     const carousel = await screen.findByText("Featured Courses")
     expect(carousel).toBeInTheDocument()
@@ -377,7 +343,9 @@ describe("Channel Pages, Unit only", () => {
       search_filter: "offered_by=ocw",
       channel_type: "unit",
     })
-    renderTestApp({ url: `/c/${channel.channel_type}/${channel.name}` })
+    renderWithProviders(<ChannelPage />, {
+      url: `/c/${channel.channel_type}/${channel.name}`,
+    })
 
     await waitFor(() => {
       assertHeadings([