Product Page Instructor Section (#2964)

* instructor display first pass

* add bleed options to carouselv2

* fix scroll initial enabled/disabled detection

* spacing tweaks

* instructor section styling pass 2

* remove builtin outer margin

* fix heading

* minor fixes

* make consumer responsible for track padding

Author: ChristopherChudzicki

frontends/main/next.config.js

@@ -6,6 +6,7 @@ validateEnv()
 const NEXT_PUBLIC_OPTIMIZE_IMAGES = Boolean(
   (process.env.NEXT_PUBLIC_OPTIMIZE_IMAGES ?? "true") === "true",
 )
+const IS_LOCAL_DEV = process.env.NODE_ENV === "development"
 
 const processFeatureFlags = () => {
   const featureFlagPrefix =
@@ -107,6 +108,7 @@ const nextConfig = {
 
   images: {
     unoptimized: !NEXT_PUBLIC_OPTIMIZE_IMAGES,
+    dangerouslyAllowLocalIP: IS_LOCAL_DEV,
     remotePatterns: [
       {
         hostname: "**",

frontends/main/src/app-pages/HomePage/VideoShortsSection.tsx

@@ -28,6 +28,10 @@ const Header = styled.div(({ theme }) => ({
 }))
 
 const StyledCarouselV2 = styled(CarouselV2)(({ theme }) => ({
+  margin: "24px 0",
+  ".MitCarousel-track": {
+    paddingBottom: "4px",
+  },
   [theme.breakpoints.down("sm")]: {
     padding: "0 16px",
   },

frontends/main/src/app-pages/ProductPages/CoursePage.test.tsx

@@ -90,6 +90,7 @@ describe("CoursePage", () => {
   test("Page has expected headings", async () => {
     const course = makeCourse()
     const page = makePage({ course_details: course })
+    invariant(page.faculty.length > 0)
     setupApis({ course, page })
     renderWithProviders(<CoursePage readableId={course.readable_id} />)
 
@@ -102,6 +103,7 @@ describe("CoursePage", () => {
         { level: 2, name: "How you'll learn" },
         { level: 2, name: "Prerequisites" },
         { level: 2, name: "Meet your instructors" },
+        { level: 3, name: page.faculty[0].instructor_name },
         { level: 2, name: "Who can take this Course?" },
       ])
     })
@@ -162,7 +164,7 @@ describe("CoursePage", () => {
     expectRawContent(section, page.what_you_learn)
   })
 
-  // Dialog tested in InstructorsSection.test.tsx
+  // Interaction and active content are tested in InstructorsSection.test.tsx
   test("Instructors section has expected content", async () => {
     const course = makeCourse()
     const page = makePage({ course_details: course })
@@ -173,8 +175,10 @@ describe("CoursePage", () => {
     const section = await screen.findByRole("region", {
       name: "Meet your instructors",
     })
-    const items = within(section).getAllByRole("listitem")
-    expect(items.length).toBe(page.faculty.length)
+    const buttons = page.faculty.map((faculty) =>
+      within(section).getByRole("button", { name: faculty.instructor_name }),
+    )
+    expect(buttons.length).toBe(page.faculty.length)
   })
 
   test("Prerequisites section has expected content", async () => {

frontends/main/src/app-pages/ProductPages/InstructorsSection.test.tsx

@@ -1,13 +1,7 @@
 import React from "react"
 import { factories } from "api/mitxonline-test-utils"
 
-import {
-  renderWithProviders,
-  waitFor,
-  screen,
-  within,
-  user,
-} from "@/test-utils"
+import { renderWithProviders, screen, within, user } from "@/test-utils"
 
 import { getByImageSrc } from "ol-test-utilities"
 
@@ -30,18 +24,22 @@ test("Renders each instructor", async () => {
     name: "Meet your instructors",
   })
 
-  const items = within(section).getAllByRole("listitem")
-
   expect(instructors.length).toBe(3)
-  instructors.forEach((instructor, index) => {
-    const item = items[index]
-    within(item).getByRole("button", { name: instructor.instructor_name })
-    within(item).getByText(instructor.instructor_title)
-    getByImageSrc(item, instructor.feature_image_src)
+  instructors.forEach((instructor) => {
+    const button = within(section).getByRole("button", {
+      name: instructor.instructor_name,
+    })
+    getByImageSrc(button, instructor.feature_image_src)
+  })
+
+  const defaultInstructor = instructors[0]
+  within(section).getByRole("heading", {
+    name: defaultInstructor.instructor_name,
   })
+  expectRawContent(section, defaultInstructor.instructor_bio_long)
 })
 
-test("Opens and closes instructor dialog", async () => {
+test("Changes active instructor content on portrait click", async () => {
   const instructors = Array.from({ length: 3 }, () => makeFaculty())
   renderWithProviders(<InstructorsSection instructors={instructors} />)
 
@@ -51,18 +49,13 @@ test("Opens and closes instructor dialog", async () => {
   })
   await user.click(button)
 
-  const dialog = await screen.findByRole("dialog", {
-    name: `${instructor.instructor_name}`,
+  const section = await screen.findByRole("region", {
+    name: "Meet your instructors",
   })
-  within(dialog).getByRole("heading", {
-    level: 2,
+  within(section).getByRole("heading", {
     name: instructor.instructor_name,
   })
-  expectRawContent(dialog, instructor.instructor_bio_long)
+  expectRawContent(section, instructor.instructor_bio_long)
 
-  const closeButton = within(dialog).getByRole("button", { name: "Close" })
-  await user.click(closeButton)
-  await waitFor(() => {
-    expect(dialog).not.toBeInTheDocument()
-  })
+  expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
 })