diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx index c39c17682e..b773a9bca0 100644 --- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx +++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx @@ -7,7 +7,7 @@ import { user, within, } from "@/test-utils" -import { EnrollmentDisplay } from "./EnrollmentDisplay" +import { HomeEnrollmentsDashboard } from "./HomeEnrollmentsDashboard" import { DashboardCard, DashboardType } from "./DashboardCard" import { dashboardCourse, setupEnrollments } from "./test-utils" import * as mitxonline from "api/mitxonline-test-utils" @@ -57,7 +57,7 @@ describe("DashboardDialogs", () => { mitxonline.urls.enrollment.courseEnrollment(enrollment.id), null, ) - renderWithProviders() + renderWithProviders() await screen.findByRole("heading", { name: "My Learning" }) @@ -111,7 +111,7 @@ describe("DashboardDialogs", () => { mitxonline.urls.enrollment.courseEnrollment(enrollment.id), null, ) - renderWithProviders() + renderWithProviders() await screen.findByRole("heading", { name: "My Learning" }) diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx deleted file mode 100644 index ff076ea89d..0000000000 --- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx +++ /dev/null @@ -1,2633 +0,0 @@ -import React from "react" -import { act, waitFor } from "@testing-library/react" -import { - renderWithProviders, - screen, - setMockResponse, - setupLocationMock, - user, - within, -} from "@/test-utils" -import { EnrollmentDisplay } from "./EnrollmentDisplay" -import * as mitxonline from "api/mitxonline-test-utils" -import { mockAxiosInstance } from "api/test-utils" -import { useFeatureFlagEnabled } from "posthog-js/react" -import { setupEnrollments } from "./test-utils" -import { faker } from "@faker-js/faker/locale/en" -import invariant from "tiny-invariant" - -jest.mock("posthog-js/react") -const mockedUseFeatureFlagEnabled = jest - .mocked(useFeatureFlagEnabled) - .mockImplementation(() => false) - -describe("EnrollmentDisplay", () => { - setupLocationMock() - - const setupApis = (includeExpired: boolean = true) => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - const { enrollments, completed, expired, started, notStarted } = - setupEnrollments(includeExpired) - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get( - mitxonline.urls.enrollment.enrollmentsListV3(), - enrollments, - ) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [], - ) - - return { enrollments, completed, expired, started, notStarted } - } - - test("Renders the expected cards", async () => { - const { completed, started, notStarted } = setupApis() - renderWithProviders() - - await screen.findByRole("heading", { name: "My Learning" }) - - const cards = await screen.findAllByTestId("enrollment-card-desktop") - const expectedTitles = [...started, ...notStarted, ...completed].map( - (e) => e.run.title, - ) - - expectedTitles.forEach((title, i) => { - expect(cards[i]).toHaveTextContent(title) - }) - }) - - test("Renders the proper amount of unenroll and email settings buttons in the context menus", async () => { - const { enrollments } = setupApis() - renderWithProviders() - - const cards = await screen.findAllByTestId("enrollment-card-desktop") - expect(cards.length).toBe(enrollments.length) - for (const card of cards) { - const contextMenuButton = - await within(card).findByLabelText("More options") - await user.click(contextMenuButton) - const emailSettingsButton = await screen.findAllByRole("menuitem", { - name: "Email Settings", - }) - const unenrollButton = await screen.findAllByRole("menuitem", { - name: "Unenroll", - }) - expect(emailSettingsButton.length).toBe(1) - expect(unenrollButton.length).toBe(1) - await user.click(contextMenuButton) - } - }) - - test("Clicking show all reveals ended courses", async () => { - const { completed, expired, started, notStarted } = setupApis() - renderWithProviders() - - const showAllButton = await screen.findByText("Show all") - await user.click(showAllButton) - - await screen.findByRole("heading", { name: "My Learning" }) - - const cards = await screen.findAllByTestId("enrollment-card-desktop") - const expectedTitles = [ - ...started, - ...notStarted, - ...completed, - ...expired, - ].map((e) => e.run.title) - - expectedTitles.forEach((title, i) => { - expect(cards[i]).toHaveTextContent(title) - }) - }) - - test("If there are no extra enrollments to display, there should be no show all", async () => { - setupApis(false) - renderWithProviders() - - await screen.findByRole("heading", { name: "My Learning" }) - - expect(screen.queryByText("Show all")).not.toBeInTheDocument() - }) - - test("Renders program cards when program enrollments exist", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const programEnrollment = - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - ...mitxonline.factories.programs.simpleProgram(), - title: "My Test Program", - }, - }) - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [programEnrollment], - ) - setMockResponse.get( - mitxonline.urls.programs.programsList({ - id: [programEnrollment.program.id], - page_size: 1, - }), - { - count: 1, - next: null, - previous: null, - results: [ - mitxonline.factories.programs.program({ - id: programEnrollment.program.id, - title: programEnrollment.program.title, - readable_id: programEnrollment.program.readable_id, - program_type: programEnrollment.program.program_type, - display_mode: programEnrollment.program.display_mode, - }), - ], - }, - ) - - renderWithProviders() - - await screen.findByRole("heading", { name: "My Learning" }) - - // Program title appears twice (desktop + mobile) - const programCards = await screen.findAllByText("My Test Program") - expect(programCards.length).toBeGreaterThan(0) - }) - - test("Renders ProgramAsCourse enrollments with ProgramAsCourseCard on dashboard home", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const reqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const moduleSection = reqTree.addOperator({ - operator: "all_of", - title: "Modules", - }) - moduleSection.addCourse({ course: 11 }) - moduleSection.addCourse({ course: 12 }) - - const programAsCourseProgram = mitxonline.factories.programs.program({ - id: 555, - title: "My Program As Course", - display_mode: "course", - courses: [11, 12], - req_tree: reqTree.serialize(), - }) - - const programAsCourseEnrollment = - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - id: programAsCourseProgram.id, - title: programAsCourseProgram.title, - live: programAsCourseProgram.live, - program_type: programAsCourseProgram.program_type, - readable_id: programAsCourseProgram.readable_id, - display_mode: "course", - }, - }) - - const programAsCourseCourses = { - count: 2, - next: null, - previous: null, - results: [ - mitxonline.factories.courses.course({ - id: 11, - title: "ProgramAsCourse Module One", - courseruns: [mitxonline.factories.courses.courseRun()], - }), - mitxonline.factories.courses.course({ - id: 12, - title: "ProgramAsCourse Module Two", - courseruns: [mitxonline.factories.courses.courseRun()], - }), - ], - } - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [programAsCourseEnrollment], - ) - setMockResponse.get( - mitxonline.urls.programs.programsList({ - id: [programAsCourseProgram.id], - page_size: 1, - }), - { - count: 1, - next: null, - previous: null, - results: [programAsCourseProgram], - }, - ) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: programAsCourseProgram.courses, - page_size: programAsCourseProgram.courses.length, - }), - programAsCourseCourses, - ) - - renderWithProviders() - - await screen.findByRole("heading", { name: "My Learning" }) - expect( - await screen.findByTestId("program-as-course-card"), - ).toBeInTheDocument() - expect( - (await screen.findAllByText("ProgramAsCourse Module One")).length, - ).toBeGreaterThan(0) - expect( - (await screen.findAllByText("ProgramAsCourse Module Two")).length, - ).toBeGreaterThan(0) - }) - - test("Hides top-level course cards already covered by enrolled programs", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const coveredEnrollment = mitxonline.factories.enrollment.courseEnrollment({ - b2b_contract_id: null, - run: { - title: "Covered Course Run", - course: { - id: 101, - title: "Covered Course", - readable_id: "covered-course", - }, - start_date: faker.date.past().toISOString(), - }, - }) - - const uncoveredEnrollment = - mitxonline.factories.enrollment.courseEnrollment({ - b2b_contract_id: null, - run: { - title: "Standalone Course Run", - course: { - id: 202, - title: "Standalone Course", - readable_id: "standalone-course", - }, - start_date: faker.date.past().toISOString(), - }, - }) - - const programEnrollment = - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - ...mitxonline.factories.programs.simpleProgram(), - id: 999, - title: "My Program", - }, - }) - - const enrolledProgram = mitxonline.factories.programs.program({ - id: 999, - title: "My Program", - courses: [coveredEnrollment.run.course.id], - }) - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), [ - coveredEnrollment, - uncoveredEnrollment, - ]) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [programEnrollment], - ) - setMockResponse.get( - mitxonline.urls.programs.programsList({ - id: [enrolledProgram.id], - page_size: 1, - }), - { - count: 1, - next: null, - previous: null, - results: [enrolledProgram], - }, - ) - - renderWithProviders() - - await screen.findByRole("heading", { name: "My Learning" }) - - expect((await screen.findAllByText("My Program")).length).toBeGreaterThan(0) - expect(screen.queryByText("Covered Course")).not.toBeInTheDocument() - expect( - (await screen.findAllByText("Standalone Course Run")).length, - ).toBeGreaterThan(0) - }) - - test("Still shows expired courses when deduping reduces the visible dashboard set", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const coveredEnrollment = mitxonline.factories.enrollment.courseEnrollment({ - b2b_contract_id: null, - run: { - title: "Covered Active Course", - course: { - id: 301, - title: "Covered Active Course", - readable_id: "covered-active-course", - }, - start_date: faker.date.past().toISOString(), - }, - }) - const visibleEnrollment = mitxonline.factories.enrollment.courseEnrollment({ - b2b_contract_id: null, - run: { - title: "Visible Active Course", - course: { - id: 302, - title: "Visible Active Course", - readable_id: "visible-active-course", - }, - start_date: faker.date.past().toISOString(), - }, - }) - const expiredEnrollments = [ - mitxonline.factories.enrollment.courseEnrollment({ - b2b_contract_id: null, - run: { - title: "Expired Course A", - course: { - id: 401, - title: "Expired Course A", - readable_id: "expired-course-a", - }, - start_date: faker.date.past().toISOString(), - end_date: faker.date.past().toISOString(), - }, - }), - mitxonline.factories.enrollment.courseEnrollment({ - b2b_contract_id: null, - run: { - title: "Expired Course B", - course: { - id: 402, - title: "Expired Course B", - readable_id: "expired-course-b", - }, - start_date: faker.date.past().toISOString(), - end_date: faker.date.past().toISOString(), - }, - }), - ] - - const programEnrollment = - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - ...mitxonline.factories.programs.simpleProgram(), - id: 1999, - title: "Active Program", - }, - }) - - const enrolledProgram = mitxonline.factories.programs.program({ - id: 1999, - title: "Active Program", - courses: [coveredEnrollment.run.course.id], - }) - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), [ - coveredEnrollment, - visibleEnrollment, - ...expiredEnrollments, - ]) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [programEnrollment], - ) - setMockResponse.get( - mitxonline.urls.programs.programsList({ - id: [enrolledProgram.id], - page_size: 1, - }), - { - count: 1, - next: null, - previous: null, - results: [enrolledProgram], - }, - ) - - renderWithProviders() - - await screen.findByRole("heading", { name: "My Learning" }) - - expect(screen.queryByText("Covered Active Course")).not.toBeInTheDocument() - expect( - (await screen.findAllByText("Visible Active Course")).length, - ).toBeGreaterThan(0) - expect( - (await screen.findAllByText("Expired Course A")).length, - ).toBeGreaterThan(0) - expect( - (await screen.findAllByText("Expired Course B")).length, - ).toBeGreaterThan(0) - expect(await screen.findByText("Show all")).toBeInTheDocument() - }) - - test("Renders both course and program enrollments together", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const courseEnrollment = mitxonline.factories.enrollment.courseEnrollment({ - b2b_contract_id: null, - }) - const programEnrollment = - mitxonline.factories.enrollment.programEnrollmentV3() - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), [ - courseEnrollment, - ]) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [programEnrollment], - ) - setMockResponse.get( - mitxonline.urls.programs.programsList({ - id: [programEnrollment.program.id], - page_size: 1, - }), - { - count: 1, - next: null, - previous: null, - results: [ - mitxonline.factories.programs.program({ - id: programEnrollment.program.id, - title: programEnrollment.program.title, - readable_id: programEnrollment.program.readable_id, - program_type: programEnrollment.program.program_type, - display_mode: programEnrollment.program.display_mode, - }), - ], - }, - ) - - renderWithProviders() - - await screen.findByRole("heading", { name: "My Learning" }) - - // Course title appears in desktop + mobile cards - expect( - (await screen.findAllByText(courseEnrollment.run.course.title)).length, - ).toBeGreaterThan(0) - // Program title appears in desktop + mobile cards - expect( - (await screen.findAllByText(programEnrollment.program.title)).length, - ).toBeGreaterThan(0) - }) - - test("Shows empty state when no enrollments exist", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [], - ) - - renderWithProviders() - - // Wait a moment for queries to complete - await act(async () => { - await new Promise((resolve) => setTimeout(resolve, 100)) - }) - - // Should not render the "My Learning" section when there are no enrollments - expect( - screen.queryByRole("heading", { name: "My Learning" }), - ).not.toBeInTheDocument() - const cards = screen.queryAllByTestId("enrollment-card-desktop") - expect(cards).toHaveLength(0) - }) - - test("Shows My Learning when only program enrollments exist", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const programEnrollment = - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - ...mitxonline.factories.programs.simpleProgram(), - title: "Solo Program", - }, - }) - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [programEnrollment], - ) - setMockResponse.get( - mitxonline.urls.programs.programsList({ - id: [programEnrollment.program.id], - page_size: 1, - }), - { - count: 1, - next: null, - previous: null, - results: [ - mitxonline.factories.programs.program({ - id: programEnrollment.program.id, - title: programEnrollment.program.title, - readable_id: programEnrollment.program.readable_id, - program_type: programEnrollment.program.program_type, - display_mode: programEnrollment.program.display_mode, - }), - ], - }, - ) - - renderWithProviders() - - await screen.findByRole("heading", { name: "My Learning" }) - expect((await screen.findAllByText("Solo Program")).length).toBeGreaterThan( - 0, - ) - }) - - test("Shows My Learning when only expired enrollments exist", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const expiredEnrollment = mitxonline.factories.enrollment.courseEnrollment({ - b2b_contract_id: null, - run: { - title: "Expired Course", - end_date: faker.date.past().toISOString(), - start_date: faker.date.past().toISOString(), - }, - }) - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), [ - expiredEnrollment, - ]) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [], - ) - - renderWithProviders() - - await screen.findByRole("heading", { name: "My Learning" }) - expect( - (await screen.findAllByText("Expired Course")).length, - ).toBeGreaterThan(0) - }) - - test("Shows expired courses without Show all when total cards <= MIN_VISIBLE", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - // 2 expired courses only — total = 2, under MIN_VISIBLE of 3 → all promoted, no toggle - const expiredEnrollments = [ - mitxonline.factories.enrollment.courseEnrollment({ - b2b_contract_id: null, - run: { - title: "Expired Alpha", - end_date: faker.date.past().toISOString(), - start_date: faker.date.past().toISOString(), - }, - }), - mitxonline.factories.enrollment.courseEnrollment({ - b2b_contract_id: null, - run: { - title: "Expired Beta", - end_date: faker.date.past().toISOString(), - start_date: faker.date.past().toISOString(), - }, - }), - ] - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get( - mitxonline.urls.enrollment.enrollmentsListV3(), - expiredEnrollments, - ) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [], - ) - - renderWithProviders() - - await screen.findByRole("heading", { name: "My Learning" }) - expect( - (await screen.findAllByText("Expired Alpha")).length, - ).toBeGreaterThan(0) - expect((await screen.findAllByText("Expired Beta")).length).toBeGreaterThan( - 0, - ) - expect(screen.queryByText("Show all")).not.toBeInTheDocument() - }) - - test("Hides all expired behind Show all when normally-shown enrollments exist", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - // 1 started + 3 expired → started is present so all expired go behind "Show all" - const startedEnrollment = mitxonline.factories.enrollment.courseEnrollment({ - b2b_contract_id: null, - run: { - title: "Active Course", - start_date: faker.date.past().toISOString(), - end_date: null, - }, - }) - const expiredEnrollments = [ - mitxonline.factories.enrollment.courseEnrollment({ - b2b_contract_id: null, - run: { - title: "A Expired Course", - end_date: faker.date.past().toISOString(), - start_date: faker.date.past().toISOString(), - }, - }), - mitxonline.factories.enrollment.courseEnrollment({ - b2b_contract_id: null, - run: { - title: "B Expired Course", - end_date: faker.date.past().toISOString(), - start_date: faker.date.past().toISOString(), - }, - }), - mitxonline.factories.enrollment.courseEnrollment({ - b2b_contract_id: null, - run: { - title: "C Expired Course", - end_date: faker.date.past().toISOString(), - start_date: faker.date.past().toISOString(), - }, - }), - ] - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), [ - startedEnrollment, - ...expiredEnrollments, - ]) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [], - ) - - renderWithProviders() - - await screen.findByRole("heading", { name: "My Learning" }) - - // "Show all" toggle must exist (all 3 expired are hidden) - await screen.findByText("Show all") - - // Only the active course is visible before expanding - expect( - (await screen.findAllByText("Active Course")).length, - ).toBeGreaterThan(0) - - // After expanding, all expired courses appear - await user.click(screen.getByText("Show all")) - expect( - (await screen.findAllByText("A Expired Course")).length, - ).toBeGreaterThan(0) - expect( - (await screen.findAllByText("B Expired Course")).length, - ).toBeGreaterThan(0) - expect( - (await screen.findAllByText("C Expired Course")).length, - ).toBeGreaterThan(0) - }) - - test("Filters B2B program enrollments from display", async () => { - const b2bSimpleProgram = mitxonline.factories.programs.simpleProgram() - const nonB2BSimpleProgram = mitxonline.factories.programs.simpleProgram() - - const b2bProgramEnrollment = - mitxonline.factories.enrollment.programEnrollmentV3({ - program: b2bSimpleProgram, - }) - const nonB2BProgramEnrollment = - mitxonline.factories.enrollment.programEnrollmentV3({ - program: nonB2BSimpleProgram, - }) - - // Put the contract in the user's b2b_organizations so the code - // (which reads contracts from userMe, not contractsList) can filter it - const contract = mitxonline.factories.contracts.contract({ - programs: [b2bSimpleProgram.id], - }) - const mitxOnlineUser = mitxonline.factories.user.user({ - b2b_organizations: [ - mitxonline.factories.organizations.organization({ - contracts: [contract], - }), - ], - }) - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [b2bProgramEnrollment, nonB2BProgramEnrollment], - ) - // After B2B filtering, only the non-B2B program remains, so programsList - // is called with just that one ID - setMockResponse.get( - mitxonline.urls.programs.programsList({ - id: [nonB2BSimpleProgram.id], - page_size: 1, - }), - { - count: 1, - next: null, - previous: null, - results: [ - mitxonline.factories.programs.program({ ...nonB2BSimpleProgram }), - ], - }, - ) - - renderWithProviders() - - await screen.findByRole("heading", { name: "My Learning" }) - - // Should only show the non-B2B program (appears in desktop + mobile cards) - const personalProgramCards = await screen.findAllByText( - nonB2BSimpleProgram.title, - ) - expect(personalProgramCards.length).toBeGreaterThan(0) - expect(screen.queryByText(b2bSimpleProgram.title)).not.toBeInTheDocument() - }) - - test("Hides child program enrollments that are part of an enrolled parent program", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const childSimpleProgram = mitxonline.factories.programs.simpleProgram({ - display_mode: "course", - }) - const parentSimpleProgram = mitxonline.factories.programs.simpleProgram() - - // Parent program has child program in its req_tree - const reqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const section = reqTree.addOperator({ operator: "all_of" }) - section.addProgram({ program: childSimpleProgram.id }) - - const parentProgramEnrollment = - mitxonline.factories.enrollment.programEnrollmentV3({ - program: parentSimpleProgram, - }) - const childProgramEnrollment = - mitxonline.factories.enrollment.programEnrollmentV3({ - program: childSimpleProgram, - }) - - const parentProgramDetail = mitxonline.factories.programs.program({ - ...parentSimpleProgram, - req_tree: reqTree.serialize(), - }) - const childProgramDetail = mitxonline.factories.programs.program({ - ...childSimpleProgram, - }) - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [parentProgramEnrollment, childProgramEnrollment], - ) - setMockResponse.get( - mitxonline.urls.programs.programsList({ - id: [parentSimpleProgram.id, childSimpleProgram.id], - page_size: 2, - }), - { - count: 2, - next: null, - previous: null, - results: [parentProgramDetail, childProgramDetail], - }, - ) - - renderWithProviders() - - await screen.findByRole("heading", { name: "My Learning" }) - - const parentCards = await screen.findAllByText(parentSimpleProgram.title) - expect(parentCards.length).toBeGreaterThan(0) - expect(screen.queryByText(childSimpleProgram.title)).not.toBeInTheDocument() - }) - - describe("ProgramId Filtering", () => { - test("Filters to single program when programId is provided", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const program = mitxonline.factories.programs.program({ - id: 123, - title: "Target Program", - courses: [1, 2, 3], - }) - const courses = mitxonline.factories.courses.courses({ count: 3 }) - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [ - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - id: program.id, - title: program.title, - live: program.live, - program_type: program.program_type, - readable_id: program.readable_id, - }, - }), - ], - ) - setMockResponse.get(mitxonline.urls.programs.programDetail(123), program) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: program.courses, - page_size: program.courses.length, - }), - courses, - ) - // Also mock the undefined id case (when program data isn't loaded yet) - setMockResponse.get(mitxonline.urls.courses.coursesList({}), { - results: [], - }) - - renderWithProviders() - - await screen.findByText("Target Program") - expect(screen.getByText("Target Program")).toBeInTheDocument() - }) - - test("Displays course requirements when programId is provided", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const reqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const coreCourses = reqTree.addOperator({ - operator: "all_of", - title: "Core Courses", - }) - coreCourses.addCourse({ course: 1 }) - - const program = mitxonline.factories.programs.program({ - id: 456, - courses: [1], // Only course 1 is in the requirements - req_tree: reqTree.serialize(), - }) - const courses = { - count: 1, - next: null, - previous: null, - results: [ - mitxonline.factories.courses.course({ - id: 1, - title: "Required Course 1", - courseruns: [mitxonline.factories.courses.courseRun()], - }), - ], - } - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [ - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - id: program.id, - title: program.title, - live: program.live, - program_type: program.program_type, - readable_id: program.readable_id, - }, - }), - ], - ) - setMockResponse.get(mitxonline.urls.programs.programDetail(456), program) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: program.courses, - page_size: program.courses.length, - }), - courses, - ) - // Also mock the undefined id case (when program data isn't loaded yet) - setMockResponse.get(mitxonline.urls.courses.coursesList({}), { - results: [], - }) - - renderWithProviders() - - // Wait for program data to load - await screen.findByText(/for this program/) - - // Wait for requirement sections to appear - await waitFor( - () => { - const coreCourses = screen.queryByText("Core Courses") - expect(coreCourses).toBeInTheDocument() - }, - { timeout: 2000 }, - ) - }) - - test("Shows required ProgramAsCourse cards even when user is not enrolled in that ProgramAsCourse", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const parentReqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const parentRequirements = parentReqTree.addOperator({ - operator: "all_of", - title: "Requirements", - }) - parentRequirements.addCourse({ course: 1 }) - parentRequirements.addProgram({ program: 900 }) - - const parentProgram = mitxonline.factories.programs.program({ - id: 1234, - title: "Parent Program", - courses: [1], - req_tree: parentReqTree.serialize(), - }) - - const parentCourses = { - count: 1, - next: null, - previous: null, - results: [ - mitxonline.factories.courses.course({ - id: 1, - title: "Core Course", - courseruns: [mitxonline.factories.courses.courseRun()], - }), - ], - } - - const programAsCourseReqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const programAsCourseRequirements = programAsCourseReqTree.addOperator({ - operator: "all_of", - title: "Modules", - }) - programAsCourseRequirements.addCourse({ course: 11 }) - programAsCourseRequirements.addCourse({ course: 12 }) - - const programAsCourseProgram = mitxonline.factories.programs.program({ - id: 900, - title: "Program As Course", - display_mode: "course", - courses: [11, 12], - req_tree: programAsCourseReqTree.serialize(), - }) - - const programAsCourseCourses = { - count: 2, - next: null, - previous: null, - results: [ - mitxonline.factories.courses.course({ - id: 11, - title: "Module A", - courseruns: [mitxonline.factories.courses.courseRun()], - }), - mitxonline.factories.courses.course({ - id: 12, - title: "Module B", - courseruns: [mitxonline.factories.courses.courseRun()], - }), - ], - } - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [ - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - id: parentProgram.id, - title: parentProgram.title, - live: parentProgram.live, - program_type: parentProgram.program_type, - readable_id: parentProgram.readable_id, - }, - }), - ], - ) - setMockResponse.get( - mitxonline.urls.programs.programDetail(parentProgram.id), - parentProgram, - ) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: parentProgram.courses, - page_size: parentProgram.courses.length, - }), - parentCourses, - ) - setMockResponse.get( - mitxonline.urls.programs.programsList({ - id: [900], - page_size: 1, - }), - { - count: 1, - next: null, - previous: null, - results: [programAsCourseProgram], - }, - ) - setMockResponse.get( - mitxonline.urls.programs.programDetail(900), - programAsCourseProgram, - ) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: [11, 12], - page_size: 2, - }), - programAsCourseCourses, - ) - - renderWithProviders() - - await screen.findByText("Requirements") - expect(await screen.findByText("Program As Course")).toBeInTheDocument() - expect((await screen.findAllByText("Module A")).length).toBeGreaterThan(0) - expect((await screen.findAllByText("Module B")).length).toBeGreaterThan(0) - }) - - test("Completion counts include program-as-course items in required totals", async () => { - /** - * A section contains 1 course + 1 program-as-course. - * Neither item is completed, so the counter should show "Completed 0 of 2". - * The total includes program-as-course items. - */ - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const parentReqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const parentRequirements = parentReqTree.addOperator({ - operator: "all_of", - title: "Requirements", - }) - parentRequirements.addCourse({ course: 1 }) - parentRequirements.addProgram({ program: 900 }) - - const parentProgram = mitxonline.factories.programs.program({ - id: 4321, - title: "Parent Program", - courses: [1], - req_tree: parentReqTree.serialize(), - }) - - const parentCourses = { - count: 1, - next: null, - previous: null, - results: [ - mitxonline.factories.courses.course({ - id: 1, - title: "Core Course", - courseruns: [mitxonline.factories.courses.courseRun()], - }), - ], - } - - const programAsCourseReqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const programAsCourseRequirements = programAsCourseReqTree.addOperator({ - operator: "all_of", - title: "Modules", - }) - programAsCourseRequirements.addCourse({ course: 11 }) - - const programAsCourseProgram = mitxonline.factories.programs.program({ - id: 900, - title: "Program As Course", - display_mode: "course", - courses: [11], - req_tree: programAsCourseReqTree.serialize(), - }) - - const programAsCourseCourses = { - count: 1, - next: null, - previous: null, - results: [ - mitxonline.factories.courses.course({ - id: 11, - title: "Module A", - courseruns: [mitxonline.factories.courses.courseRun()], - }), - ], - } - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [ - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - id: parentProgram.id, - title: parentProgram.title, - live: parentProgram.live, - program_type: parentProgram.program_type, - readable_id: parentProgram.readable_id, - }, - }), - ], - ) - setMockResponse.get( - mitxonline.urls.programs.programDetail(parentProgram.id), - parentProgram, - ) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: parentProgram.courses, - page_size: parentProgram.courses.length, - }), - parentCourses, - ) - setMockResponse.get( - mitxonline.urls.programs.programsList({ - id: [900], - page_size: 1, - }), - { - count: 1, - next: null, - previous: null, - results: [programAsCourseProgram], - }, - ) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: [11], - page_size: 1, - }), - programAsCourseCourses, - ) - - renderWithProviders() - - // Section header includes both the course and program-as-course item - await screen.findByText(/Completed 0 of 2/) - // Overall summary uses the same counting behavior - await screen.findByText(/0 of 2 courses/) - }) - - test("Completed program-as-course items count toward completion total", async () => { - /** - * A section contains 1 course (not completed) + 1 program-as-course (completed, - * has certificate). The counter should show "Completed 1 of 2". - */ - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const parentReqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const parentRequirements = parentReqTree.addOperator({ - operator: "all_of", - title: "Requirements", - }) - parentRequirements.addCourse({ course: 1 }) - parentRequirements.addProgram({ program: 900 }) - - const parentProgram = mitxonline.factories.programs.program({ - id: 4321, - title: "Parent Program", - courses: [1], - req_tree: parentReqTree.serialize(), - }) - - const parentCourses = { - count: 1, - next: null, - previous: null, - results: [ - mitxonline.factories.courses.course({ - id: 1, - title: "Core Course", - courseruns: [mitxonline.factories.courses.courseRun()], - }), - ], - } - - const programAsCourseReqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const programAsCourseRequirements = programAsCourseReqTree.addOperator({ - operator: "all_of", - title: "Modules", - }) - programAsCourseRequirements.addCourse({ course: 11 }) - - const programAsCourseProgram = mitxonline.factories.programs.program({ - id: 900, - title: "Program As Course", - display_mode: "course", - courses: [11], - req_tree: programAsCourseReqTree.serialize(), - }) - - const programAsCourseCourses = { - count: 1, - next: null, - previous: null, - results: [ - mitxonline.factories.courses.course({ - id: 11, - title: "Module A", - courseruns: [mitxonline.factories.courses.courseRun()], - }), - ], - } - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [ - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - id: parentProgram.id, - title: parentProgram.title, - live: parentProgram.live, - program_type: parentProgram.program_type, - readable_id: parentProgram.readable_id, - }, - }), - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - id: programAsCourseProgram.id, - title: programAsCourseProgram.title, - live: programAsCourseProgram.live, - program_type: programAsCourseProgram.program_type, - readable_id: programAsCourseProgram.readable_id, - }, - certificate: { - uuid: "test-uuid-900", - link: "/certificate/program/test-uuid-900/", - }, - }), - ], - ) - setMockResponse.get( - mitxonline.urls.programs.programDetail(parentProgram.id), - parentProgram, - ) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: parentProgram.courses, - page_size: parentProgram.courses.length, - }), - parentCourses, - ) - setMockResponse.get( - mitxonline.urls.programs.programsList({ - id: [900], - page_size: 1, - }), - { - count: 1, - next: null, - previous: null, - results: [programAsCourseProgram], - }, - ) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: [11], - page_size: 1, - }), - programAsCourseCourses, - ) - - renderWithProviders() - - // program-as-course has certificate → counts as completed - await screen.findByText(/Completed 1 of 2/) - await screen.findByText(/1 of 2 courses/) - }) - - test("Shows enrollment status for program courses", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const reqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const requirements = reqTree.addOperator({ - operator: "all_of", - title: "Requirements", - }) - requirements.addCourse({ course: 1 }) - - const program = mitxonline.factories.programs.program({ - id: 789, - courses: [1], - req_tree: reqTree.serialize(), - }) - - const courses = { - count: 1, - next: null, - previous: null, - results: [ - mitxonline.factories.courses.course({ - id: 1, - title: "Test Course", - page: { - page_url: "/courses/test-course/", - }, - courseruns: [ - mitxonline.factories.courses.courseRun({ - title: "Test Course", - }), - ], - }), - ], - } - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [ - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - id: program.id, - title: program.title, - live: program.live, - program_type: program.program_type, - readable_id: program.readable_id, - }, - }), - ], - ) - setMockResponse.get(mitxonline.urls.programs.programDetail(789), program) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: program.courses, - page_size: program.courses.length, - }), - courses, - ) - // Also mock the undefined id case - setMockResponse.get(mitxonline.urls.courses.coursesList({}), { - results: [], - }) - - renderWithProviders() - - // Wait for the section header to load - await screen.findByText("Requirements") - - // Wait for the completion count to appear (this means courses have loaded) - await screen.findByText(/Completed 0 of 1/) - - // Wait for loading to complete - check that skeleton is gone - await waitFor( - () => { - const skeletons = screen.queryAllByTestId("skeleton") - expect(skeletons).toHaveLength(0) - }, - { timeout: 3000 }, - ) - - // Now check for the title - there will be 2 (desktop and mobile) - const titles = screen.getAllByText("Test Course") - expect(titles.length).toBeGreaterThanOrEqual(1) - }) - - test("Shows 'Continue' button for enrolled courses and 'Start Course' for unenrolled", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const reqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const requirements = reqTree.addOperator({ - operator: "all_of", - title: "Requirements", - }) - requirements.addCourse({ course: 1 }) - requirements.addCourse({ course: 2 }) - - const program = mitxonline.factories.programs.program({ - id: 777, - courses: [1, 2], - req_tree: reqTree.serialize(), - }) - - const enrolledRun = mitxonline.factories.courses.courseRun({ - id: 100, - title: "Enrolled Course", - start_date: "2024-01-01T00:00:00Z", // Past date - end_date: "2099-12-31T23:59:59Z", // Far future date - courseware_url: faker.internet.url(), - }) - const unenrolledRun = mitxonline.factories.courses.courseRun({ - id: 200, - title: "Unenrolled Course", - }) - - const courses = { - count: 2, - next: null, - previous: null, - results: [ - mitxonline.factories.courses.course({ - id: 1, - title: "Enrolled Course", - courseruns: [enrolledRun], - }), - mitxonline.factories.courses.course({ - id: 2, - title: "Unenrolled Course", - courseruns: [unenrolledRun], - }), - ], - } - - const enrollment = mitxonline.factories.enrollment.courseEnrollment({ - run: { - ...enrolledRun, - course: courses.results[0], - }, - certificate: null, // No certificate - course is not completed - grades: [], // Enrolled but not completed - }) - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), [ - enrollment, - ]) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [ - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - id: program.id, - title: program.title, - live: program.live, - program_type: program.program_type, - readable_id: program.readable_id, - }, - }), - ], - ) - setMockResponse.get(mitxonline.urls.programs.programDetail(777), program) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: program.courses, - page_size: program.courses.length, - }), - courses, - ) - - renderWithProviders() - - await screen.findByText("Requirements") - - // Wait for cards to load - await waitFor( - () => { - const skeletons = screen.queryAllByTestId("skeleton") - expect(skeletons).toHaveLength(0) - }, - { timeout: 3000 }, - ) - - // Find desktop cards (we'll focus on those for this test) - const cards = screen.getAllByTestId("enrollment-card-desktop") - const enrolledCard = cards.find((card) => - within(card).queryByText("Enrolled Course"), - ) - const unenrolledCard = cards.find((card) => - within(card).queryByText("Unenrolled Course"), - ) - - expect(enrolledCard).toBeDefined() - expect(unenrolledCard).toBeDefined() - - // Enrolled course should show "Continue" button and be a link - const continueButton = within(enrolledCard!).getByTestId( - "courseware-button", - ) - expect(continueButton).toHaveTextContent("Continue") - expect(continueButton.tagName).toBe("A") // Should be a link - - // Unenrolled course should show "Start Course" button - const startButton = within(unenrolledCard!).getByTestId( - "courseware-button", - ) - expect(startButton).toHaveTextContent("Start Course") - expect(startButton.tagName).toBe("BUTTON") // Should be a button - }) - - test("Clicking unenrolled course in program opens CourseEnrollmentDialog", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const reqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const requirements = reqTree.addOperator({ - operator: "all_of", - title: "Requirements", - }) - requirements.addCourse({ course: 1 }) - - const program = mitxonline.factories.programs.program({ - id: 666, - courses: [1], - req_tree: reqTree.serialize(), - }) - - const run = mitxonline.factories.courses.courseRun({ - title: "Clickable Course", - b2b_contract: null, // Non-B2B - is_enrollable: true, - enrollment_modes: [ - mitxonline.factories.courses.enrollmentMode({ - requires_payment: false, - }), - mitxonline.factories.courses.enrollmentMode({ - requires_payment: true, - }), - ], - }) - - const courses = { - count: 1, - next: null, - previous: null, - results: [ - mitxonline.factories.courses.course({ - id: 1, - title: "Clickable Course", - courseruns: [run], - }), - ], - } - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) // No enrollments - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [ - mitxonline.factories.enrollment.programEnrollmentV3({ - enrollment_mode: "audit", - program: { - id: program.id, - title: program.title, - live: program.live, - program_type: program.program_type, - readable_id: program.readable_id, - }, - }), - ], - ) - setMockResponse.get(mitxonline.urls.programs.programDetail(666), program) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: program.courses, - page_size: program.courses.length, - }), - courses, - ) - - renderWithProviders() - - await screen.findByText("Requirements") - - // Wait for cards to load - await waitFor( - () => { - const skeletons = screen.queryAllByTestId("skeleton") - expect(skeletons).toHaveLength(0) - }, - { timeout: 3000 }, - ) - - const cards = screen.getAllByTestId("enrollment-card-desktop") - const card = cards.find((c) => within(c).queryByText("Clickable Course")) - invariant(card, "Expected to find a card containing 'Clickable Course'") - - const startButton = within(card).getByTestId("courseware-button") - await user.click(startButton) - - // Should open CourseEnrollmentDialog - await screen.findByRole("dialog", { name: "Clickable Course" }) - }) - - test.each([ - { minNumberOf: "1", expectCompletionCount: true }, - { minNumberOf: "0", expectCompletionCount: false }, - ])( - "Displays correct completion count for sections with min_number_of operator", - async ({ minNumberOf, expectCompletionCount }) => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const reqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const electives = reqTree.addOperator({ - operator: "min_number_of", - operator_value: minNumberOf, - title: "Electives", - }) - electives.addCourse({ course: 1 }) - electives.addCourse({ course: 2 }) - - const program = mitxonline.factories.programs.program({ - id: 999, - courses: [1, 2], - req_tree: reqTree.serialize(), - }) - - const courses = { - count: 2, - next: null, - previous: null, - results: [ - mitxonline.factories.courses.course({ - id: 1, - title: "Elective Course 1", - page: { - page_url: "/courses/elective-1/", - }, - courseruns: [mitxonline.factories.courses.courseRun()], - }), - mitxonline.factories.courses.course({ - id: 2, - title: "Elective Course 2", - page: { - page_url: "/courses/elective-2/", - }, - courseruns: [mitxonline.factories.courses.courseRun()], - }), - ], - } - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [ - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - id: program.id, - title: program.title, - live: program.live, - program_type: program.program_type, - readable_id: program.readable_id, - }, - }), - ], - ) - setMockResponse.get( - mitxonline.urls.programs.programDetail(999), - program, - ) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: program.courses, - page_size: program.courses.length, - }), - courses, - ) - - renderWithProviders() - - await screen.findByText("Electives") - - if (expectCompletionCount) { - const completionCount = screen.getByTestId("section-completion-count") - expect(completionCount).toHaveTextContent("Completed 0 of 1") - expect(screen.getByText(/0 of 1 courses/)).toBeInTheDocument() - } else { - expect( - screen.queryByTestId("section-completion-count"), - ).not.toBeInTheDocument() - } - }, - ) - - test("Overall completion count caps elective completions at min_number_of value", async () => { - /** - * Program has 2 required courses (all_of) and 3 electives (min_number_of=1). - * User completes 1 required course + 2 electives. - * Bug: counts all 3 completions → "3 of 3 courses" (wrong). - * Fix: caps elective contribution at 1 → "2 of 3 courses" (correct). - */ - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const reqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const required = reqTree.addOperator({ - operator: "all_of", - title: "Required Courses", - }) - required.addCourse({ course: 1 }) - required.addCourse({ course: 2 }) - - const electives = reqTree.addOperator({ - operator: "min_number_of", - operator_value: "1", - title: "Electives", - }) - electives.addCourse({ course: 3 }) - electives.addCourse({ course: 4 }) - electives.addCourse({ course: 5 }) - - const program = mitxonline.factories.programs.program({ - id: 5555, - courses: [1, 2, 3, 4, 5], - req_tree: reqTree.serialize(), - }) - - const run1 = mitxonline.factories.courses.courseRun({ id: 101 }) - const run3 = mitxonline.factories.courses.courseRun({ id: 103 }) - const run4 = mitxonline.factories.courses.courseRun({ id: 104 }) - - const courses = { - count: 5, - next: null, - previous: null, - results: [ - mitxonline.factories.courses.course({ - id: 1, - courseruns: [run1], - }), - mitxonline.factories.courses.course({ - id: 2, - courseruns: [mitxonline.factories.courses.courseRun({ id: 102 })], - }), - mitxonline.factories.courses.course({ - id: 3, - courseruns: [run3], - }), - mitxonline.factories.courses.course({ - id: 4, - courseruns: [run4], - }), - mitxonline.factories.courses.course({ - id: 5, - courseruns: [mitxonline.factories.courses.courseRun({ id: 105 })], - }), - ], - } - - // Course 1 (required) completed, courses 3 and 4 (electives) completed - const completedGrade = mitxonline.factories.enrollment.grade({ - passed: true, - }) - const enrollments = [ - mitxonline.factories.enrollment.courseEnrollment({ - run: { ...run1, course: courses.results[0] }, - grades: [completedGrade], - }), - mitxonline.factories.enrollment.courseEnrollment({ - run: { ...run3, course: courses.results[2] }, - grades: [completedGrade], - }), - mitxonline.factories.enrollment.courseEnrollment({ - run: { ...run4, course: courses.results[3] }, - grades: [completedGrade], - }), - ] - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get( - mitxonline.urls.enrollment.enrollmentsListV3(), - enrollments, - ) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [ - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - id: program.id, - title: program.title, - live: program.live, - program_type: program.program_type, - readable_id: program.readable_id, - }, - }), - ], - ) - setMockResponse.get(mitxonline.urls.programs.programDetail(5555), program) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: program.courses, - page_size: program.courses.length, - }), - courses, - ) - - renderWithProviders() - - // 1 required completed + min(2 electives completed, 1 required) = 2 total completed - // total = 2 required + 1 elective min = 3 - await screen.findByText(/2 of 3 courses/) - }) - - test("Section header caps displayed count at operator_value for min_number_of sections", async () => { - /** - * Electives section with min_number_of=1 and 3 completed courses. - * The section header should show "Completed 1 of 1", not "Completed 3 of 1". - */ - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const reqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const electives = reqTree.addOperator({ - operator: "min_number_of", - operator_value: "1", - title: "Electives", - }) - electives.addCourse({ course: 1 }) - electives.addCourse({ course: 2 }) - electives.addCourse({ course: 3 }) - - const program = mitxonline.factories.programs.program({ - id: 6666, - courses: [1, 2, 3], - req_tree: reqTree.serialize(), - }) - - const run1 = mitxonline.factories.courses.courseRun({ id: 201 }) - const run2 = mitxonline.factories.courses.courseRun({ id: 202 }) - const run3 = mitxonline.factories.courses.courseRun({ id: 203 }) - - const courses = { - count: 3, - next: null, - previous: null, - results: [ - mitxonline.factories.courses.course({ - id: 1, - courseruns: [run1], - }), - mitxonline.factories.courses.course({ - id: 2, - courseruns: [run2], - }), - mitxonline.factories.courses.course({ - id: 3, - courseruns: [run3], - }), - ], - } - - // All 3 electives completed - const completedGrade = mitxonline.factories.enrollment.grade({ - passed: true, - }) - const enrollments = [ - mitxonline.factories.enrollment.courseEnrollment({ - run: { ...run1, course: courses.results[0] }, - grades: [completedGrade], - }), - mitxonline.factories.enrollment.courseEnrollment({ - run: { ...run2, course: courses.results[1] }, - grades: [completedGrade], - }), - mitxonline.factories.enrollment.courseEnrollment({ - run: { ...run3, course: courses.results[2] }, - grades: [completedGrade], - }), - ] - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get( - mitxonline.urls.enrollment.enrollmentsListV3(), - enrollments, - ) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [ - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - id: program.id, - title: program.title, - live: program.live, - program_type: program.program_type, - readable_id: program.readable_id, - }, - }), - ], - ) - setMockResponse.get(mitxonline.urls.programs.programDetail(6666), program) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: program.courses, - page_size: program.courses.length, - }), - courses, - ) - - renderWithProviders() - - await screen.findByText("Electives") - - // Section header should show "Completed 1 of 1", capped at operator_value - const sectionCount = screen.getByTestId("section-completion-count") - expect(sectionCount).toHaveTextContent("Completed 1 of 1") - // Overall header should also show 1 of 1 (only electives section) - expect(screen.getByText(/1 of 1 courses/)).toBeInTheDocument() - }) - - test("Returns 404 page when user is not enrolled in the program", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const reqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const requirements = reqTree.addOperator({ - operator: "all_of", - title: "Requirements", - }) - requirements.addCourse({ course: 1 }) - - const program = mitxonline.factories.programs.program({ - id: 888, - courses: [1], - req_tree: reqTree.serialize(), - }) - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - // User is not enrolled in any programs - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [], - ) - setMockResponse.get(mitxonline.urls.programs.programDetail(888), program) - - renderWithProviders() - - // Should show 404 page instead of program content - await screen.findByText( - "Looks like we couldn't find what you were looking for!", - ) - expect(screen.queryByText("Requirements")).not.toBeInTheDocument() - }) - - /** - * Sets up a verified program dashboard scenario with: - * - A parent program with a verified enrollment - * - A direct child course (regular requirement) - * - A child program-as-course with its own module course - * - * Mocks all API responses. Does not render — callers handle rendering - * and assertions. - */ - const setupProgramDashboardVerifiedEnrollmentScenario = () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - // Child course (direct requirement of the parent program) - const childCourseRun = mitxonline.factories.courses.courseRun({ - title: "Verified Child Course", - b2b_contract: null, - is_enrollable: true, - courseware_url: faker.internet.url(), - }) - const childCourse = mitxonline.factories.courses.course({ - title: "Verified Child Course", - courseruns: [childCourseRun], - next_run_id: childCourseRun.id, - }) - - // Module course (child of the program-as-course) - const moduleRun = mitxonline.factories.courses.courseRun({ - title: "Verified Module Course", - b2b_contract: null, - is_enrollable: true, - courseware_url: faker.internet.url(), - }) - const moduleCourse = mitxonline.factories.courses.course({ - title: "Verified Module Course", - courseruns: [moduleRun], - next_run_id: moduleRun.id, - }) - - // Program-as-course (child requirement of the parent program) - const programAsCourseReqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const moduleSection = programAsCourseReqTree.addOperator({ - operator: "all_of", - title: "Modules", - }) - moduleSection.addCourse({ course: moduleCourse.id }) - - const programAsCourse = mitxonline.factories.programs.program({ - display_mode: "course", - courses: [moduleCourse.id], - req_tree: programAsCourseReqTree.serialize(), - }) - - // Parent program with both a course and a program-as-course - const parentReqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const parentRequirements = parentReqTree.addOperator({ - operator: "all_of", - title: "Program Requirements", - }) - parentRequirements.addCourse({ course: childCourse.id }) - parentRequirements.addProgram({ program: programAsCourse.id }) - - const parentProgram = mitxonline.factories.programs.program({ - courses: [childCourse.id], - req_tree: parentReqTree.serialize(), - }) - - const parentProgramEnrollment = - mitxonline.factories.enrollment.programEnrollmentV3({ - enrollment_mode: "verified", - program: { - id: parentProgram.id, - title: parentProgram.title, - live: parentProgram.live, - program_type: parentProgram.program_type, - readable_id: parentProgram.readable_id, - }, - }) - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [parentProgramEnrollment], - ) - setMockResponse.get( - mitxonline.urls.programs.programDetail(parentProgram.id), - parentProgram, - ) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: parentProgram.courses, - page_size: parentProgram.courses.length, - }), - { count: 1, next: null, previous: null, results: [childCourse] }, - ) - setMockResponse.get( - mitxonline.urls.programs.programsList({ - id: [programAsCourse.id], - page_size: 1, - }), - { - count: 1, - next: null, - previous: null, - results: [programAsCourse], - }, - ) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: [moduleCourse.id], - page_size: 1, - }), - { count: 1, next: null, previous: null, results: [moduleCourse] }, - ) - - // Mock verified enrollment endpoints for both course runs - const childCourseEnrollmentEndpoint = - mitxonline.urls.verifiedProgramEnrollments.create( - childCourseRun.courseware_id, - ) - setMockResponse.post(childCourseEnrollmentEndpoint, {}) - - const moduleCourseEnrollmentEndpoint = - mitxonline.urls.verifiedProgramEnrollments.create( - moduleRun.courseware_id, - ) - setMockResponse.post(moduleCourseEnrollmentEndpoint, {}) - - return { - parentProgram, - parentProgramEnrollment, - childCourse, - childCourseRun, - childCourseEnrollmentEndpoint, - programAsCourse, - moduleCourse, - moduleRun, - moduleCourseEnrollmentEndpoint, - } - } - - test("Clicking 'Start Course' on a regular course in a verified program does one-click enrollment", async () => { - const { - parentProgram, - parentProgramEnrollment, - childCourse, - childCourseEnrollmentEndpoint, - } = setupProgramDashboardVerifiedEnrollmentScenario() - - renderWithProviders() - - await screen.findByText("Program Requirements") - await waitFor( - () => { - const skeletons = screen.queryAllByTestId("skeleton") - expect(skeletons).toHaveLength(0) - }, - { timeout: 3000 }, - ) - - const cards = screen.getAllByTestId("enrollment-card-desktop") - const card = cards.find((c) => within(c).queryByText(childCourse.title)) - invariant( - card, - `Expected to find a card containing "${childCourse.title}"`, - ) - - const startButton = within(card).getByTestId("courseware-button") - await user.click(startButton) - - await waitFor(() => { - expect(mockAxiosInstance.request).toHaveBeenCalledWith( - expect.objectContaining({ - method: "POST", - url: childCourseEnrollmentEndpoint, - data: JSON.stringify([parentProgramEnrollment.program.readable_id]), - }), - ) - }) - - expect(screen.queryByRole("dialog")).not.toBeInTheDocument() - }) - - test("Clicking 'Start Course' on a module in a program-as-course sends both parent and grandparent program IDs", async () => { - const { - parentProgram, - parentProgramEnrollment, - programAsCourse, - moduleCourse, - moduleCourseEnrollmentEndpoint, - } = setupProgramDashboardVerifiedEnrollmentScenario() - - renderWithProviders() - - await screen.findByText("Program Requirements") - await waitFor( - () => { - const skeletons = screen.queryAllByTestId("skeleton") - expect(skeletons).toHaveLength(0) - }, - { timeout: 3000 }, - ) - - const cards = screen.getAllByTestId("enrollment-card-desktop") - const card = cards.find((c) => within(c).queryByText(moduleCourse.title)) - invariant( - card, - `Expected to find a card containing "${moduleCourse.title}"`, - ) - - const startButton = within(card).getByTestId("courseware-button") - await user.click(startButton) - - await waitFor(() => { - expect(mockAxiosInstance.request).toHaveBeenCalledWith( - expect.objectContaining({ - method: "POST", - url: moduleCourseEnrollmentEndpoint, - data: JSON.stringify([ - programAsCourse.readable_id, - parentProgramEnrollment.program.readable_id, - ]), - }), - ) - }) - - expect(screen.queryByRole("dialog")).not.toBeInTheDocument() - }) - - test("Displays courses in the order defined by the requirement tree, not API order", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const courses = mitxonline.factories.courses.courses({ count: 3 }) - courses.results = courses.results.map((course) => { - const firstRun = course.courseruns[0] - return { - ...course, - courseruns: firstRun - ? [ - { - ...firstRun, - title: course.title, - is_enrollable: true, - }, - ] - : [], - next_run_id: firstRun?.id ?? null, - language_options: firstRun - ? [ - { - id: firstRun.id, - courseware_id: firstRun.courseware_id, - courseware_url: firstRun.courseware_url ?? "", - language: firstRun.language ?? "en", - title: course.title, - run_tag: firstRun.run_tag, - }, - ] - : [], - } - }) - const [courseA, courseB, courseC] = courses.results - - // Requirement tree defines courses in order: C, A, B - const reqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const core = reqTree.addOperator({ - operator: "all_of", - title: "Core Courses", - }) - core.addCourse({ course: courseC.id }) - core.addCourse({ course: courseA.id }) - core.addCourse({ course: courseB.id }) - - const program = mitxonline.factories.programs.program({ - courses: [courseA.id, courseB.id, courseC.id], - req_tree: reqTree.serialize(), - }) - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [ - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - id: program.id, - title: program.title, - live: program.live, - program_type: program.program_type, - readable_id: program.readable_id, - }, - }), - ], - ) - setMockResponse.get( - mitxonline.urls.programs.programDetail(program.id), - program, - ) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: program.courses, - page_size: program.courses.length, - }), - courses, - ) - - renderWithProviders() - - await screen.findByText("Core Courses") - - // Cards should render in req_tree order (C, A, B), not API order. - const cards = await screen.findAllByTestId("enrollment-card-desktop") - expect(cards.length).toBe(3) - const expectedTitles = [ - courseC.courseruns[0].title, - courseA.courseruns[0].title, - courseB.courseruns[0].title, - ] - - expectedTitles.forEach((title, index) => { - expect(cards[index]).toHaveTextContent(title) - }) - }) - - test("displays certificate button when program enrollment has a certificate", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const certUuid = "test-program-cert-uuid" - const program = mitxonline.factories.programs.program({ - id: 456, - title: "Program With Certificate", - courses: [10, 11], - }) - const programEnrollment = - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - id: program.id, - title: program.title, - live: program.live, - program_type: program.program_type, - readable_id: program.readable_id, - }, - certificate: { - uuid: certUuid, - link: `/certificate/program/${certUuid}/`, - }, - }) - const courses = mitxonline.factories.courses.courses({ count: 2 }) - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [programEnrollment], - ) - setMockResponse.get(mitxonline.urls.programs.programDetail(456), program) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: program.courses, - page_size: program.courses.length, - }), - courses, - ) - - renderWithProviders() - - await screen.findByText("Program With Certificate") - const certButton = screen.getByRole("link", { name: "Certificate" }) - const expectedCertHref = programEnrollment.certificate?.link?.replace( - /\/$/, - "", - ) - expect(certButton).toBeInTheDocument() - expect(certButton).toHaveAttribute("href", expectedCertHref) - expect(certButton).not.toHaveAttribute("target") - }) - - test("does not display certificate button when program enrollment has no certificate", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const program = mitxonline.factories.programs.program({ - id: 457, - title: "Program Without Certificate", - courses: [12, 13], - }) - const programEnrollment = - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - id: program.id, - title: program.title, - live: program.live, - program_type: program.program_type, - readable_id: program.readable_id, - }, - certificate: null, - }) - const courses = mitxonline.factories.courses.courses({ count: 2 }) - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [programEnrollment], - ) - setMockResponse.get(mitxonline.urls.programs.programDetail(457), program) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: program.courses, - page_size: program.courses.length, - }), - courses, - ) - - renderWithProviders() - - await screen.findByText("Program Without Certificate") - const certButton = screen.queryByRole("link", { name: "Certificate" }) - expect(certButton).not.toBeInTheDocument() - }) - - test("program language picker switches card title on B2C program page", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const englishRun = mitxonline.factories.courses.courseRun({ - id: faker.number.int(), - title: "Module in English", - courseware_id: "course-v1:LANG+TEST+EN", - courseware_url: - "https://courses.example.com/learn/course/course-v1:LANG+TEST+EN/home", - is_enrollable: true, - }) - const spanishRun = mitxonline.factories.courses.courseRun({ - id: faker.number.int(), - title: "Modulo en Espanol", - courseware_id: "course-v1:LANG+TEST+ES", - courseware_url: - "https://courses.example.com/learn/course/course-v1:LANG+TEST+ES/home", - is_enrollable: true, - }) - - const localizedCourse = mitxonline.factories.courses.course({ - id: 991, - title: "Base Course Title", - courseruns: [englishRun, spanishRun], - next_run_id: englishRun.id, - language_options: [ - { - id: englishRun.id, - courseware_id: englishRun.courseware_id, - courseware_url: englishRun.courseware_url ?? "", - language: "en", - title: englishRun.title, - run_tag: englishRun.run_tag, - }, - { - id: spanishRun.id, - courseware_id: spanishRun.courseware_id, - courseware_url: spanishRun.courseware_url ?? "", - language: "es", - title: spanishRun.title, - run_tag: spanishRun.run_tag, - }, - ], - }) - - const reqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const core = reqTree.addOperator({ - operator: "all_of", - title: "Core Courses", - }) - core.addCourse({ course: localizedCourse.id }) - - const program = mitxonline.factories.programs.program({ - id: 458, - title: "Program With Languages", - courses: [localizedCourse.id], - req_tree: reqTree.serialize(), - }) - const programEnrollment = - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - id: program.id, - title: program.title, - live: program.live, - program_type: program.program_type, - readable_id: program.readable_id, - }, - certificate: null, - }) - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [programEnrollment], - ) - setMockResponse.get( - mitxonline.urls.programs.programDetail(program.id), - program, - ) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: program.courses, - page_size: program.courses.length, - }), - { - count: 1, - next: null, - previous: null, - results: [localizedCourse], - }, - ) - - renderWithProviders() - - await screen.findByText("Program With Languages") - expect(screen.getByText("Learning Language:")).toBeInTheDocument() - const languageSelect = await screen.findByRole("combobox") - expect(languageSelect).toHaveTextContent("English") - - const card = await screen.findByTestId("enrollment-card-desktop") - expect(card).toHaveTextContent("Module in English") - expect(card).toHaveTextContent("Start Course") - - await user.click(languageSelect) - await user.click(await screen.findByRole("option", { name: "español" })) - - const desktopCard = await screen.findByTestId("enrollment-card-desktop") - await within(desktopCard).findByText("Modulo en Espanol") - - expect(screen.getByText("Learning Language:")).toBeInTheDocument() - expect(screen.getByTestId("enrollment-card-desktop")).toHaveTextContent( - "Start Course", - ) - }) - - test("language picker is hidden when only one language option is present", async () => { - const mitxOnlineUser = mitxonline.factories.user.user() - setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) - - const run = mitxonline.factories.courses.courseRun({ - id: faker.number.int(), - title: "Single Language Module", - is_enrollable: true, - }) - const course = mitxonline.factories.courses.course({ - id: 992, - courseruns: [run], - next_run_id: run.id, - language_options: [ - { - id: run.id, - courseware_id: run.courseware_id, - courseware_url: run.courseware_url ?? "", - language: "en", - title: run.title, - run_tag: run.run_tag, - }, - ], - }) - - const reqTree = - new mitxonline.factories.requirements.RequirementTreeBuilder() - const core = reqTree.addOperator({ - operator: "all_of", - title: "Core Courses", - }) - core.addCourse({ course: course.id }) - - const program = mitxonline.factories.programs.program({ - id: 459, - title: "Single Language Program", - courses: [course.id], - req_tree: reqTree.serialize(), - }) - const programEnrollment = - mitxonline.factories.enrollment.programEnrollmentV3({ - program: { - id: program.id, - title: program.title, - live: program.live, - program_type: program.program_type, - readable_id: program.readable_id, - }, - certificate: null, - }) - - mockedUseFeatureFlagEnabled.mockReturnValue(true) - setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) - setMockResponse.get( - mitxonline.urls.programEnrollments.enrollmentsListV3(), - [programEnrollment], - ) - setMockResponse.get( - mitxonline.urls.programs.programDetail(program.id), - program, - ) - setMockResponse.get( - mitxonline.urls.courses.coursesList({ - id: program.courses, - page_size: program.courses.length, - }), - { count: 1, next: null, previous: null, results: [course] }, - ) - - renderWithProviders() - - await screen.findByText("Single Language Program") - expect(screen.queryByRole("combobox")).not.toBeInTheDocument() - expect(screen.queryByText("Learning Language:")).not.toBeInTheDocument() - }) - }) -}) diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/HomeEnrollmentsDashboard.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/HomeEnrollmentsDashboard.test.tsx new file mode 100644 index 0000000000..d15ee2183e --- /dev/null +++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/HomeEnrollmentsDashboard.test.tsx @@ -0,0 +1,881 @@ +import React from "react" +import { act } from "@testing-library/react" +import { + renderWithProviders, + screen, + setMockResponse, + setupLocationMock, + user, + within, +} from "@/test-utils" +import { HomeEnrollmentsDashboard } from "./HomeEnrollmentsDashboard" +import * as mitxonline from "api/mitxonline-test-utils" +import { useFeatureFlagEnabled } from "posthog-js/react" +import { setupEnrollments } from "./test-utils" +import { faker } from "@faker-js/faker/locale/en" + +jest.mock("posthog-js/react") +const mockedUseFeatureFlagEnabled = jest + .mocked(useFeatureFlagEnabled) + .mockImplementation(() => false) + +describe("HomeEnrollmentsDashboard", () => { + setupLocationMock() + + const setupApis = (includeExpired: boolean = true) => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + const { enrollments, completed, expired, started, notStarted } = + setupEnrollments(includeExpired) + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get( + mitxonline.urls.enrollment.enrollmentsListV3(), + enrollments, + ) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [], + ) + + return { enrollments, completed, expired, started, notStarted } + } + + test("Renders the expected cards", async () => { + const { completed, started, notStarted } = setupApis() + renderWithProviders() + + await screen.findByRole("heading", { name: "My Learning" }) + + const cards = await screen.findAllByTestId("enrollment-card-desktop") + const expectedTitles = [...started, ...notStarted, ...completed].map( + (e) => e.run.title, + ) + + expectedTitles.forEach((title, i) => { + expect(cards[i]).toHaveTextContent(title) + }) + }) + + test("Renders one card per enrollment when a single course has multiple enrollments", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const sharedCourseId = faker.number.int() + const enrollmentA = mitxonline.factories.enrollment.courseEnrollment({ + run: { + title: "Same Course — Run A", + course: { id: sharedCourseId }, + }, + }) + const enrollmentB = mitxonline.factories.enrollment.courseEnrollment({ + run: { + title: "Same Course — Run B", + course: { id: sharedCourseId }, + }, + }) + + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), [ + enrollmentA, + enrollmentB, + ]) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [], + ) + + renderWithProviders() + + await screen.findByRole("heading", { name: "My Learning" }) + const cards = await screen.findAllByTestId("enrollment-card-desktop") + expect(cards).toHaveLength(2) + expect( + cards.find((c) => c.textContent?.includes("Same Course — Run A")), + ).toBeDefined() + expect( + cards.find((c) => c.textContent?.includes("Same Course — Run B")), + ).toBeDefined() + }) + + test("Renders the proper amount of unenroll and email settings buttons in the context menus", async () => { + const { enrollments } = setupApis() + renderWithProviders() + + const cards = await screen.findAllByTestId("enrollment-card-desktop") + expect(cards.length).toBe(enrollments.length) + for (const card of cards) { + const contextMenuButton = + await within(card).findByLabelText("More options") + await user.click(contextMenuButton) + const emailSettingsButton = await screen.findAllByRole("menuitem", { + name: "Email Settings", + }) + const unenrollButton = await screen.findAllByRole("menuitem", { + name: "Unenroll", + }) + expect(emailSettingsButton.length).toBe(1) + expect(unenrollButton.length).toBe(1) + await user.click(contextMenuButton) + } + }) + + test("Clicking show all reveals ended courses", async () => { + const { completed, expired, started, notStarted } = setupApis() + renderWithProviders() + + const showAllButton = await screen.findByText("Show all") + await user.click(showAllButton) + + await screen.findByRole("heading", { name: "My Learning" }) + + const cards = await screen.findAllByTestId("enrollment-card-desktop") + const expectedTitles = [ + ...started, + ...notStarted, + ...completed, + ...expired, + ].map((e) => e.run.title) + + expectedTitles.forEach((title, i) => { + expect(cards[i]).toHaveTextContent(title) + }) + }) + + test("If there are no extra enrollments to display, there should be no show all", async () => { + setupApis(false) + renderWithProviders() + + await screen.findByRole("heading", { name: "My Learning" }) + + expect(screen.queryByText("Show all")).not.toBeInTheDocument() + }) + + test("Renders program cards when program enrollments exist", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const programEnrollment = + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + ...mitxonline.factories.programs.simpleProgram(), + title: "My Test Program", + }, + }) + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [programEnrollment], + ) + setMockResponse.get( + mitxonline.urls.programs.programsList({ + id: [programEnrollment.program.id], + page_size: 1, + }), + { + count: 1, + next: null, + previous: null, + results: [ + mitxonline.factories.programs.program({ + id: programEnrollment.program.id, + title: programEnrollment.program.title, + readable_id: programEnrollment.program.readable_id, + program_type: programEnrollment.program.program_type, + display_mode: programEnrollment.program.display_mode, + }), + ], + }, + ) + + renderWithProviders() + + await screen.findByRole("heading", { name: "My Learning" }) + + // Program title appears twice (desktop + mobile) + const programCards = await screen.findAllByText("My Test Program") + expect(programCards.length).toBeGreaterThan(0) + }) + + test("Renders ProgramAsCourse enrollments with ProgramAsCourseCard on dashboard home", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const reqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const moduleSection = reqTree.addOperator({ + operator: "all_of", + title: "Modules", + }) + moduleSection.addCourse({ course: 11 }) + moduleSection.addCourse({ course: 12 }) + + const programAsCourseProgram = mitxonline.factories.programs.program({ + id: 555, + title: "My Program As Course", + display_mode: "course", + courses: [11, 12], + req_tree: reqTree.serialize(), + }) + + const programAsCourseEnrollment = + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + id: programAsCourseProgram.id, + title: programAsCourseProgram.title, + live: programAsCourseProgram.live, + program_type: programAsCourseProgram.program_type, + readable_id: programAsCourseProgram.readable_id, + display_mode: "course", + }, + }) + + const programAsCourseCourses = { + count: 2, + next: null, + previous: null, + results: [ + mitxonline.factories.courses.course({ + id: 11, + title: "ProgramAsCourse Module One", + courseruns: [mitxonline.factories.courses.courseRun()], + }), + mitxonline.factories.courses.course({ + id: 12, + title: "ProgramAsCourse Module Two", + courseruns: [mitxonline.factories.courses.courseRun()], + }), + ], + } + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [programAsCourseEnrollment], + ) + setMockResponse.get( + mitxonline.urls.programs.programsList({ + id: [programAsCourseProgram.id], + page_size: 1, + }), + { + count: 1, + next: null, + previous: null, + results: [programAsCourseProgram], + }, + ) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: programAsCourseProgram.courses, + page_size: programAsCourseProgram.courses.length, + }), + programAsCourseCourses, + ) + + renderWithProviders() + + await screen.findByRole("heading", { name: "My Learning" }) + expect( + await screen.findByTestId("program-as-course-card"), + ).toBeInTheDocument() + expect( + (await screen.findAllByText("ProgramAsCourse Module One")).length, + ).toBeGreaterThan(0) + expect( + (await screen.findAllByText("ProgramAsCourse Module Two")).length, + ).toBeGreaterThan(0) + }) + + test("Hides top-level course cards already covered by enrolled programs", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const coveredEnrollment = mitxonline.factories.enrollment.courseEnrollment({ + b2b_contract_id: null, + run: { + title: "Covered Course Run", + course: { + id: 101, + title: "Covered Course", + readable_id: "covered-course", + }, + start_date: faker.date.past().toISOString(), + }, + }) + + const uncoveredEnrollment = + mitxonline.factories.enrollment.courseEnrollment({ + b2b_contract_id: null, + run: { + title: "Standalone Course Run", + course: { + id: 202, + title: "Standalone Course", + readable_id: "standalone-course", + }, + start_date: faker.date.past().toISOString(), + }, + }) + + const programEnrollment = + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + ...mitxonline.factories.programs.simpleProgram(), + id: 999, + title: "My Program", + }, + }) + + const enrolledProgram = mitxonline.factories.programs.program({ + id: 999, + title: "My Program", + courses: [coveredEnrollment.run.course.id], + }) + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), [ + coveredEnrollment, + uncoveredEnrollment, + ]) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [programEnrollment], + ) + setMockResponse.get( + mitxonline.urls.programs.programsList({ + id: [enrolledProgram.id], + page_size: 1, + }), + { + count: 1, + next: null, + previous: null, + results: [enrolledProgram], + }, + ) + + renderWithProviders() + + await screen.findByRole("heading", { name: "My Learning" }) + + expect((await screen.findAllByText("My Program")).length).toBeGreaterThan(0) + expect(screen.queryByText("Covered Course")).not.toBeInTheDocument() + expect( + (await screen.findAllByText("Standalone Course Run")).length, + ).toBeGreaterThan(0) + }) + + test("Still shows expired courses when deduping reduces the visible dashboard set", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const coveredEnrollment = mitxonline.factories.enrollment.courseEnrollment({ + b2b_contract_id: null, + run: { + title: "Covered Active Course", + course: { + id: 301, + title: "Covered Active Course", + readable_id: "covered-active-course", + }, + start_date: faker.date.past().toISOString(), + }, + }) + const visibleEnrollment = mitxonline.factories.enrollment.courseEnrollment({ + b2b_contract_id: null, + run: { + title: "Visible Active Course", + course: { + id: 302, + title: "Visible Active Course", + readable_id: "visible-active-course", + }, + start_date: faker.date.past().toISOString(), + }, + }) + const expiredEnrollments = [ + mitxonline.factories.enrollment.courseEnrollment({ + b2b_contract_id: null, + run: { + title: "Expired Course A", + course: { + id: 401, + title: "Expired Course A", + readable_id: "expired-course-a", + }, + start_date: faker.date.past().toISOString(), + end_date: faker.date.past().toISOString(), + }, + }), + mitxonline.factories.enrollment.courseEnrollment({ + b2b_contract_id: null, + run: { + title: "Expired Course B", + course: { + id: 402, + title: "Expired Course B", + readable_id: "expired-course-b", + }, + start_date: faker.date.past().toISOString(), + end_date: faker.date.past().toISOString(), + }, + }), + ] + + const programEnrollment = + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + ...mitxonline.factories.programs.simpleProgram(), + id: 1999, + title: "Active Program", + }, + }) + + const enrolledProgram = mitxonline.factories.programs.program({ + id: 1999, + title: "Active Program", + courses: [coveredEnrollment.run.course.id], + }) + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), [ + coveredEnrollment, + visibleEnrollment, + ...expiredEnrollments, + ]) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [programEnrollment], + ) + setMockResponse.get( + mitxonline.urls.programs.programsList({ + id: [enrolledProgram.id], + page_size: 1, + }), + { + count: 1, + next: null, + previous: null, + results: [enrolledProgram], + }, + ) + + renderWithProviders() + + await screen.findByRole("heading", { name: "My Learning" }) + + expect(screen.queryByText("Covered Active Course")).not.toBeInTheDocument() + expect( + (await screen.findAllByText("Visible Active Course")).length, + ).toBeGreaterThan(0) + expect( + (await screen.findAllByText("Expired Course A")).length, + ).toBeGreaterThan(0) + expect( + (await screen.findAllByText("Expired Course B")).length, + ).toBeGreaterThan(0) + expect(await screen.findByText("Show all")).toBeInTheDocument() + }) + + test("Renders both course and program enrollments together", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const courseEnrollment = mitxonline.factories.enrollment.courseEnrollment({ + b2b_contract_id: null, + }) + const programEnrollment = + mitxonline.factories.enrollment.programEnrollmentV3() + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), [ + courseEnrollment, + ]) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [programEnrollment], + ) + setMockResponse.get( + mitxonline.urls.programs.programsList({ + id: [programEnrollment.program.id], + page_size: 1, + }), + { + count: 1, + next: null, + previous: null, + results: [ + mitxonline.factories.programs.program({ + id: programEnrollment.program.id, + title: programEnrollment.program.title, + readable_id: programEnrollment.program.readable_id, + program_type: programEnrollment.program.program_type, + display_mode: programEnrollment.program.display_mode, + }), + ], + }, + ) + + renderWithProviders() + + await screen.findByRole("heading", { name: "My Learning" }) + + // Course title appears in desktop + mobile cards + expect( + (await screen.findAllByText(courseEnrollment.run.course.title)).length, + ).toBeGreaterThan(0) + // Program title appears in desktop + mobile cards + expect( + (await screen.findAllByText(programEnrollment.program.title)).length, + ).toBeGreaterThan(0) + }) + + test("Shows empty state when no enrollments exist", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [], + ) + + renderWithProviders() + + // Wait a moment for queries to complete + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 100)) + }) + + // Should not render the "My Learning" section when there are no enrollments + expect( + screen.queryByRole("heading", { name: "My Learning" }), + ).not.toBeInTheDocument() + const cards = screen.queryAllByTestId("enrollment-card-desktop") + expect(cards).toHaveLength(0) + }) + + test("Shows My Learning when only program enrollments exist", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const programEnrollment = + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + ...mitxonline.factories.programs.simpleProgram(), + title: "Solo Program", + }, + }) + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [programEnrollment], + ) + setMockResponse.get( + mitxonline.urls.programs.programsList({ + id: [programEnrollment.program.id], + page_size: 1, + }), + { + count: 1, + next: null, + previous: null, + results: [ + mitxonline.factories.programs.program({ + id: programEnrollment.program.id, + title: programEnrollment.program.title, + readable_id: programEnrollment.program.readable_id, + program_type: programEnrollment.program.program_type, + display_mode: programEnrollment.program.display_mode, + }), + ], + }, + ) + + renderWithProviders() + + await screen.findByRole("heading", { name: "My Learning" }) + expect((await screen.findAllByText("Solo Program")).length).toBeGreaterThan( + 0, + ) + }) + + test("Shows My Learning when only expired enrollments exist", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const expiredEnrollment = mitxonline.factories.enrollment.courseEnrollment({ + b2b_contract_id: null, + run: { + title: "Expired Course", + end_date: faker.date.past().toISOString(), + start_date: faker.date.past().toISOString(), + }, + }) + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), [ + expiredEnrollment, + ]) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [], + ) + + renderWithProviders() + + await screen.findByRole("heading", { name: "My Learning" }) + expect( + (await screen.findAllByText("Expired Course")).length, + ).toBeGreaterThan(0) + }) + + test("Shows expired courses without Show all when total cards <= MIN_VISIBLE", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + // 2 expired courses only — total = 2, under MIN_VISIBLE of 3 → all promoted, no toggle + const expiredEnrollments = [ + mitxonline.factories.enrollment.courseEnrollment({ + b2b_contract_id: null, + run: { + title: "Expired Alpha", + end_date: faker.date.past().toISOString(), + start_date: faker.date.past().toISOString(), + }, + }), + mitxonline.factories.enrollment.courseEnrollment({ + b2b_contract_id: null, + run: { + title: "Expired Beta", + end_date: faker.date.past().toISOString(), + start_date: faker.date.past().toISOString(), + }, + }), + ] + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get( + mitxonline.urls.enrollment.enrollmentsListV3(), + expiredEnrollments, + ) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [], + ) + + renderWithProviders() + + await screen.findByRole("heading", { name: "My Learning" }) + expect( + (await screen.findAllByText("Expired Alpha")).length, + ).toBeGreaterThan(0) + expect((await screen.findAllByText("Expired Beta")).length).toBeGreaterThan( + 0, + ) + expect(screen.queryByText("Show all")).not.toBeInTheDocument() + }) + + test("Hides all expired behind Show all when normally-shown enrollments exist", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + // 1 started + 3 expired → started is present so all expired go behind "Show all" + const startedEnrollment = mitxonline.factories.enrollment.courseEnrollment({ + b2b_contract_id: null, + run: { + title: "Active Course", + start_date: faker.date.past().toISOString(), + end_date: null, + }, + }) + const expiredEnrollments = [ + mitxonline.factories.enrollment.courseEnrollment({ + b2b_contract_id: null, + run: { + title: "A Expired Course", + end_date: faker.date.past().toISOString(), + start_date: faker.date.past().toISOString(), + }, + }), + mitxonline.factories.enrollment.courseEnrollment({ + b2b_contract_id: null, + run: { + title: "B Expired Course", + end_date: faker.date.past().toISOString(), + start_date: faker.date.past().toISOString(), + }, + }), + mitxonline.factories.enrollment.courseEnrollment({ + b2b_contract_id: null, + run: { + title: "C Expired Course", + end_date: faker.date.past().toISOString(), + start_date: faker.date.past().toISOString(), + }, + }), + ] + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), [ + startedEnrollment, + ...expiredEnrollments, + ]) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [], + ) + + renderWithProviders() + + await screen.findByRole("heading", { name: "My Learning" }) + + // "Show all" toggle must exist (all 3 expired are hidden) + await screen.findByText("Show all") + + // Only the active course is visible before expanding + expect( + (await screen.findAllByText("Active Course")).length, + ).toBeGreaterThan(0) + + // After expanding, all expired courses appear + await user.click(screen.getByText("Show all")) + expect( + (await screen.findAllByText("A Expired Course")).length, + ).toBeGreaterThan(0) + expect( + (await screen.findAllByText("B Expired Course")).length, + ).toBeGreaterThan(0) + expect( + (await screen.findAllByText("C Expired Course")).length, + ).toBeGreaterThan(0) + }) + + test("Filters B2B program enrollments from display", async () => { + const b2bSimpleProgram = mitxonline.factories.programs.simpleProgram() + const nonB2BSimpleProgram = mitxonline.factories.programs.simpleProgram() + + const b2bProgramEnrollment = + mitxonline.factories.enrollment.programEnrollmentV3({ + program: b2bSimpleProgram, + }) + const nonB2BProgramEnrollment = + mitxonline.factories.enrollment.programEnrollmentV3({ + program: nonB2BSimpleProgram, + }) + + // Put the contract in the user's b2b_organizations so the code + // (which reads contracts from userMe, not contractsList) can filter it + const contract = mitxonline.factories.contracts.contract({ + programs: [b2bSimpleProgram.id], + }) + const mitxOnlineUser = mitxonline.factories.user.user({ + b2b_organizations: [ + mitxonline.factories.organizations.organization({ + contracts: [contract], + }), + ], + }) + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [b2bProgramEnrollment, nonB2BProgramEnrollment], + ) + // After B2B filtering, only the non-B2B program remains, so programsList + // is called with just that one ID + setMockResponse.get( + mitxonline.urls.programs.programsList({ + id: [nonB2BSimpleProgram.id], + page_size: 1, + }), + { + count: 1, + next: null, + previous: null, + results: [ + mitxonline.factories.programs.program({ ...nonB2BSimpleProgram }), + ], + }, + ) + + renderWithProviders() + + await screen.findByRole("heading", { name: "My Learning" }) + + // Should only show the non-B2B program (appears in desktop + mobile cards) + const personalProgramCards = await screen.findAllByText( + nonB2BSimpleProgram.title, + ) + expect(personalProgramCards.length).toBeGreaterThan(0) + expect(screen.queryByText(b2bSimpleProgram.title)).not.toBeInTheDocument() + }) + + test("Hides child program enrollments that are part of an enrolled parent program", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const childSimpleProgram = mitxonline.factories.programs.simpleProgram({ + display_mode: "course", + }) + const parentSimpleProgram = mitxonline.factories.programs.simpleProgram() + + // Parent program has child program in its req_tree + const reqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const section = reqTree.addOperator({ operator: "all_of" }) + section.addProgram({ program: childSimpleProgram.id }) + + const parentProgramEnrollment = + mitxonline.factories.enrollment.programEnrollmentV3({ + program: parentSimpleProgram, + }) + const childProgramEnrollment = + mitxonline.factories.enrollment.programEnrollmentV3({ + program: childSimpleProgram, + }) + + const parentProgramDetail = mitxonline.factories.programs.program({ + ...parentSimpleProgram, + req_tree: reqTree.serialize(), + }) + const childProgramDetail = mitxonline.factories.programs.program({ + ...childSimpleProgram, + }) + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [parentProgramEnrollment, childProgramEnrollment], + ) + setMockResponse.get( + mitxonline.urls.programs.programsList({ + id: [parentSimpleProgram.id, childSimpleProgram.id], + page_size: 2, + }), + { + count: 2, + next: null, + previous: null, + results: [parentProgramDetail, childProgramDetail], + }, + ) + + renderWithProviders() + + await screen.findByRole("heading", { name: "My Learning" }) + + const parentCards = await screen.findAllByText(parentSimpleProgram.title) + expect(parentCards.length).toBeGreaterThan(0) + expect(screen.queryByText(childSimpleProgram.title)).not.toBeInTheDocument() + }) +}) diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/HomeEnrollmentsDashboard.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/HomeEnrollmentsDashboard.tsx new file mode 100644 index 0000000000..dac845f412 --- /dev/null +++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/HomeEnrollmentsDashboard.tsx @@ -0,0 +1,414 @@ +import React from "react" +import { keepPreviousData, useQuery } from "@tanstack/react-query" +import { + Collapse, + Link, + PlainList, + PlainListProps, + Typography, + TypographyProps, + styled, + theme, +} from "ol-components" +import { Alert } from "@mitodl/smoot-design" +import { + CourseRunEnrollmentV3, + CourseWithCourseRunsSerializerV2, + V2ProgramDetail, + V3UserProgramEnrollment, +} from "@mitodl/mitxonline-api-axios/v2" +import { coursesQueries } from "api/mitxonline-hooks/courses" +import { enrollmentQueries } from "api/mitxonline-hooks/enrollment" +import { mitxUserQueries } from "api/mitxonline-hooks/user" +import { programsQueries } from "api/mitxonline-hooks/programs" +import { DASHBOARD_MY_LEARNING_ID } from "@/common/urls" +import { getKey, ResourceType } from "./helpers" +import { + DashboardCard, + DashboardResource, + DashboardType, +} from "./DashboardCard" +import { ProgramAsCourseCard } from "./ProgramAsCourseCard" +import { + bucketAndSortHomeEnrollments, + enrollmentCourseIsInPrograms, + getModuleCourseIdsFromPrograms, + getNonContractProgramEnrollments, + getTopLevelProgramEnrollments, + groupCourseRunEnrollmentsByCourseId, + groupModuleCoursesByProgramId, + isNonContractEnrollment, + isProgramAsCourse, +} from "./model/dashboardViewModel" + +const Wrapper = styled.div(({ theme }) => ({ + marginTop: "32px", + padding: "24px 32px", + backgroundColor: theme.custom.colors.white, + borderBottom: `1px solid ${theme.custom.colors.red}`, + boxShadow: "0px 4px 8px 0px rgba(19, 20, 21, 0.08)", + borderRadius: "8px", + [theme.breakpoints.down("md")]: { + border: `1px solid ${theme.custom.colors.lightGray2}`, + backgroundColor: "rgba(243, 244, 248, 0.60);", // TODO: use theme color + marginTop: "16px", + padding: "0", + }, +})) + +const AlertBanner = styled(Alert)({ + marginBottom: "16px", +}) + +const DashboardCardStyled = styled(DashboardCard)({ + borderRadius: "8px", + boxShadow: "0px 1px 6px 0px rgba(3, 21, 45, 0.05)", +}) + +const Title = styled(Typography)>( + ({ theme }) => ({ + ...theme.typography.h5, + marginBottom: "16px", + [theme.breakpoints.down("md")]: { + padding: "16px", + marginBottom: "0", + }, + }), +) + +const EnrollmentsList = styled(PlainList)>( + ({ theme }) => ({ + [theme.breakpoints.down("md")]: { + borderTop: `1px solid ${theme.custom.colors.lightGray2}`, + ">li+li": { + marginTop: "0", + }, + }, + }), +) + +const HiddenEnrollmentsList = styled(EnrollmentsList)({ + marginTop: "16px", + [theme.breakpoints.down("md")]: { + borderTop: "none", + marginTop: "0", + }, +}) + +const ShowAllContainer = styled.div(({ theme }) => ({ + display: "flex", + justifyContent: "center", + marginTop: "24px", + [theme.breakpoints.down("md")]: { + marginBottom: "24px", + }, +})) + +const SUPPORT_EMAIL = process.env.NEXT_PUBLIC_MITOL_SUPPORT_EMAIL || "" + +const getResourceKey = (resource: DashboardResource): string => { + if (resource.type === DashboardType.ProgramEnrollment) { + return getKey({ + resourceType: ResourceType.Program, + id: resource.data.program.id, + }) + } + if (resource.type === DashboardType.CourseRunEnrollment) { + return getKey({ + resourceType: ResourceType.Course, + id: resource.data.run.course.id, + runId: resource.data.run.id, + }) + } + return getKey({ resourceType: ResourceType.Course, id: resource.data.id }) +} + +type ProgramEnrollmentResource = Extract< + DashboardResource, + { type: typeof DashboardType.ProgramEnrollment } +> + +const isProgramAsCourseEnrollment = ( + resource: DashboardResource, +): resource is ProgramEnrollmentResource => { + if (resource.type !== DashboardType.ProgramEnrollment) return false + return isProgramAsCourse(resource.data.program) +} + +interface EnrollmentExpandCollapseProps { + normallyShown: DashboardResource[] + maybeShown: DashboardResource[] + isLoading?: boolean + enrollmentsByCourseId: Record + courseProgramsById: Map + moduleCoursesByProgramId: Record + onUpgradeError?: (error: string) => void +} + +const MIN_VISIBLE = 3 + +const EnrollmentExpandCollapse: React.FC = ({ + normallyShown, + maybeShown, + isLoading, + enrollmentsByCourseId, + courseProgramsById, + moduleCoursesByProgramId, + onUpgradeError, +}) => { + const [shown, setShown] = React.useState(false) + + const handleToggle = (event: React.MouseEvent) => { + event.preventDefault() + setShown(!shown) + } + + const shownResources = normallyShown.length + ? normallyShown + : maybeShown.slice(0, MIN_VISIBLE) + const hiddenResources = normallyShown.length + ? maybeShown + : maybeShown.slice(MIN_VISIBLE) + + const renderResource = (resource: DashboardResource) => { + if (isProgramAsCourseEnrollment(resource)) { + const courseProgram = courseProgramsById.get(resource.data.program.id) + if (!courseProgram) { + return ( + + ) + } + + return ( + + ) + } + + return ( + + ) + } + + return ( + <> + + {shownResources.map(renderResource)} + + {hiddenResources.length === 0 ? null : ( + <> + + + {hiddenResources.map(renderResource)} + + + + + {shown ? "Show less" : "Show all"} + + + + )} + + ) +} + +type HomeDashboardData = { + started: CourseRunEnrollmentV3[] + notStarted: CourseRunEnrollmentV3[] + completed: CourseRunEnrollmentV3[] + expired: CourseRunEnrollmentV3[] + programEnrollments: V3UserProgramEnrollment[] + enrollmentsByCourseId: Record + courseProgramsById: Map + moduleCoursesByProgramId: Record + isLoading: boolean +} + +/** + * Composes the queries and pure-model helpers that drive the home dashboard. + * Returns bucket data (started / notStarted / completed / expired) plus the + * auxiliary lookups the renderer needs for ProgramAsCourseCard. + * + * Private to this file: the home dashboard is its only consumer, and the + * model-layer helpers it composes are individually unit-tested. + */ +const useHomeDashboardData = (): HomeDashboardData => { + const { data: enrolledCourses, isLoading: courseEnrollmentsLoading } = + useQuery(enrollmentQueries.courseRunEnrollmentsList()) + const { data: contracts, isLoading: contractsLoading } = useQuery({ + ...mitxUserQueries.me(), + select: (user) => user.b2b_organizations.flatMap((org) => org.contracts), + }) + const { data: programEnrollments, isLoading: programEnrollmentsLoading } = + useQuery(enrollmentQueries.programEnrollmentsList()) + + const nonContractProgramEnrollments = + contracts && programEnrollments + ? getNonContractProgramEnrollments(programEnrollments, contracts) + : [] + const enrolledProgramIds = nonContractProgramEnrollments.map( + (enrollment) => enrollment.program.id, + ) + + const { data: enrolledPrograms, isLoading: enrolledProgramsLoading } = + useQuery({ + ...programsQueries.programsList({ + id: enrolledProgramIds, + page_size: enrolledProgramIds.length, + }), + enabled: enrolledProgramIds.length > 0, + placeholderData: keepPreviousData, + }) + + const enrolledProgramsResults = enrolledPrograms?.results ?? [] + const coursePrograms = enrolledProgramsResults.filter(isProgramAsCourse) + const courseProgramModuleIds = getModuleCourseIdsFromPrograms(coursePrograms) + + const { data: courseProgramModuleCourses, isLoading: moduleCoursesLoading } = + useQuery({ + ...coursesQueries.coursesList({ + id: courseProgramModuleIds, + page_size: courseProgramModuleIds.length || undefined, + }), + enabled: courseProgramModuleIds.length > 0, + placeholderData: keepPreviousData, + }) + + const isCovered = enrollmentCourseIsInPrograms(enrolledProgramsResults) + const bucketableEnrollments = (enrolledCourses ?? []) + .filter(isNonContractEnrollment) + .filter((enrollment) => !isCovered(enrollment)) + const buckets = bucketAndSortHomeEnrollments(bucketableEnrollments) + + return { + ...buckets, + programEnrollments: enrolledPrograms + ? getTopLevelProgramEnrollments( + nonContractProgramEnrollments, + enrolledProgramsResults, + ) + : [], + enrollmentsByCourseId: groupCourseRunEnrollmentsByCourseId( + enrolledCourses ?? [], + ), + courseProgramsById: new Map(coursePrograms.map((p) => [p.id, p])), + moduleCoursesByProgramId: groupModuleCoursesByProgramId( + coursePrograms, + courseProgramModuleCourses?.results ?? [], + ), + isLoading: + courseEnrollmentsLoading || + programEnrollmentsLoading || + contractsLoading || + enrolledProgramsLoading || + moduleCoursesLoading, + } +} + +/** + * Renders the "My Learning" section for non-B2B enrollments. + * + * Cards are ordered and grouped as follows: + * 1. Started courses (past start date, not expired, not completed) + * 2. Not-yet-started courses + * 3. Completed courses (any passing grade) + * 4. Program enrollments (excluding those covered by a B2B contract) + * 5. Expired courses (past end date, not completed) — hidden behind "Show all" + * + * Exception: if groups 1–4 are all empty, up to MIN_VISIBLE expired courses + * are shown directly so the section is never blank for an enrolled user. + * The section is hidden entirely only when there are no enrollments at all. + */ +const HomeEnrollmentsDashboard: React.FC = () => { + const [upgradeError, setUpgradeError] = React.useState(null) + const { + started, + notStarted, + completed, + expired, + programEnrollments, + enrollmentsByCourseId, + courseProgramsById, + moduleCoursesByProgramId, + isLoading, + } = useHomeDashboardData() + + const normallyShown: DashboardResource[] = [ + ...started.map((data) => ({ + data, + type: DashboardType.CourseRunEnrollment, + })), + ...notStarted.map((data) => ({ + data, + type: DashboardType.CourseRunEnrollment, + })), + ...completed.map((data) => ({ + data, + type: DashboardType.CourseRunEnrollment, + })), + ...programEnrollments.map((data) => ({ + data, + type: DashboardType.ProgramEnrollment, + })), + ] + const maybeShown: DashboardResource[] = expired.map((data) => ({ + data, + type: DashboardType.CourseRunEnrollment, + })) + const totalCards = normallyShown.length + maybeShown.length + + return totalCards > 0 ? ( + + + My Learning + + {upgradeError && ( + setUpgradeError(null)} + > + {upgradeError}{" "} + + Contact Support + {" "} + for assistance. + + )} + + + ) : null +} + +export { HomeEnrollmentsDashboard } diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.tsx index 9faa966233..eae48b0b1b 100644 --- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.tsx +++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.tsx @@ -37,7 +37,7 @@ import { ActionButton } from "@mitodl/smoot-design" import { RiAwardFill, RiMore2Line } from "@remixicon/react" import NiceModal from "@ebay/nice-modal-react" import { UnenrollProgramDialog } from "./DashboardDialogs" -import { ProgramCertificateButton } from "./EnrollmentDisplay" +import { ProgramCertificateButton } from "./ProgramEnrollmentDisplay" import { useFeatureFlagEnabled } from "posthog-js/react" import { FeatureFlags } from "@/common/feature_flags" import { programPageView } from "@/common/urls" diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramEnrollmentDisplay.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramEnrollmentDisplay.test.tsx new file mode 100644 index 0000000000..70be8f4a89 --- /dev/null +++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramEnrollmentDisplay.test.tsx @@ -0,0 +1,1812 @@ +import React from "react" +import { waitFor } from "@testing-library/react" +import { + renderWithProviders, + screen, + setMockResponse, + setupLocationMock, + user, + within, +} from "@/test-utils" +import { ProgramEnrollmentDisplay } from "./ProgramEnrollmentDisplay" +import * as mitxonline from "api/mitxonline-test-utils" +import { mockAxiosInstance } from "api/test-utils" +import { useFeatureFlagEnabled } from "posthog-js/react" +import { faker } from "@faker-js/faker/locale/en" +import invariant from "tiny-invariant" + +jest.mock("posthog-js/react") +const mockedUseFeatureFlagEnabled = jest + .mocked(useFeatureFlagEnabled) + .mockImplementation(() => false) + +describe("ProgramEnrollmentDisplay", () => { + setupLocationMock() + test("Filters to single program when programId is provided", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const program = mitxonline.factories.programs.program({ + id: 123, + title: "Target Program", + courses: [1, 2, 3], + }) + const courses = mitxonline.factories.courses.courses({ count: 3 }) + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [ + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + id: program.id, + title: program.title, + live: program.live, + program_type: program.program_type, + readable_id: program.readable_id, + }, + }), + ], + ) + setMockResponse.get(mitxonline.urls.programs.programDetail(123), program) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: program.courses, + page_size: program.courses.length, + }), + courses, + ) + // Also mock the undefined id case (when program data isn't loaded yet) + setMockResponse.get(mitxonline.urls.courses.coursesList({}), { + results: [], + }) + + renderWithProviders() + + await screen.findByText("Target Program") + expect(screen.getByText("Target Program")).toBeInTheDocument() + }) + + test("Displays course requirements when programId is provided", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const reqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const coreCourses = reqTree.addOperator({ + operator: "all_of", + title: "Core Courses", + }) + coreCourses.addCourse({ course: 1 }) + + const program = mitxonline.factories.programs.program({ + id: 456, + courses: [1], // Only course 1 is in the requirements + req_tree: reqTree.serialize(), + }) + const courses = { + count: 1, + next: null, + previous: null, + results: [ + mitxonline.factories.courses.course({ + id: 1, + title: "Required Course 1", + courseruns: [mitxonline.factories.courses.courseRun()], + }), + ], + } + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [ + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + id: program.id, + title: program.title, + live: program.live, + program_type: program.program_type, + readable_id: program.readable_id, + }, + }), + ], + ) + setMockResponse.get(mitxonline.urls.programs.programDetail(456), program) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: program.courses, + page_size: program.courses.length, + }), + courses, + ) + // Also mock the undefined id case (when program data isn't loaded yet) + setMockResponse.get(mitxonline.urls.courses.coursesList({}), { + results: [], + }) + + renderWithProviders() + + // Wait for program data to load + await screen.findByText(/for this program/) + + // Wait for requirement sections to appear + await waitFor( + () => { + const coreCourses = screen.queryByText("Core Courses") + expect(coreCourses).toBeInTheDocument() + }, + { timeout: 2000 }, + ) + }) + + test("Shows required ProgramAsCourse cards even when user is not enrolled in that ProgramAsCourse", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const parentReqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const parentRequirements = parentReqTree.addOperator({ + operator: "all_of", + title: "Requirements", + }) + parentRequirements.addCourse({ course: 1 }) + parentRequirements.addProgram({ program: 900 }) + + const parentProgram = mitxonline.factories.programs.program({ + id: 1234, + title: "Parent Program", + courses: [1], + req_tree: parentReqTree.serialize(), + }) + + const parentCourses = { + count: 1, + next: null, + previous: null, + results: [ + mitxonline.factories.courses.course({ + id: 1, + title: "Core Course", + courseruns: [mitxonline.factories.courses.courseRun()], + }), + ], + } + + const programAsCourseReqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const programAsCourseRequirements = programAsCourseReqTree.addOperator({ + operator: "all_of", + title: "Modules", + }) + programAsCourseRequirements.addCourse({ course: 11 }) + programAsCourseRequirements.addCourse({ course: 12 }) + + const programAsCourseProgram = mitxonline.factories.programs.program({ + id: 900, + title: "Program As Course", + display_mode: "course", + courses: [11, 12], + req_tree: programAsCourseReqTree.serialize(), + }) + + const programAsCourseCourses = { + count: 2, + next: null, + previous: null, + results: [ + mitxonline.factories.courses.course({ + id: 11, + title: "Module A", + courseruns: [mitxonline.factories.courses.courseRun()], + }), + mitxonline.factories.courses.course({ + id: 12, + title: "Module B", + courseruns: [mitxonline.factories.courses.courseRun()], + }), + ], + } + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [ + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + id: parentProgram.id, + title: parentProgram.title, + live: parentProgram.live, + program_type: parentProgram.program_type, + readable_id: parentProgram.readable_id, + }, + }), + ], + ) + setMockResponse.get( + mitxonline.urls.programs.programDetail(parentProgram.id), + parentProgram, + ) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: parentProgram.courses, + page_size: parentProgram.courses.length, + }), + parentCourses, + ) + setMockResponse.get( + mitxonline.urls.programs.programsList({ + id: [900], + page_size: 1, + }), + { + count: 1, + next: null, + previous: null, + results: [programAsCourseProgram], + }, + ) + setMockResponse.get( + mitxonline.urls.programs.programDetail(900), + programAsCourseProgram, + ) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: [11, 12], + page_size: 2, + }), + programAsCourseCourses, + ) + + renderWithProviders( + , + ) + + await screen.findByText("Requirements") + expect(await screen.findByText("Program As Course")).toBeInTheDocument() + expect((await screen.findAllByText("Module A")).length).toBeGreaterThan(0) + expect((await screen.findAllByText("Module B")).length).toBeGreaterThan(0) + }) + + test("Completion counts include program-as-course items in required totals", async () => { + /** + * A section contains 1 course + 1 program-as-course. + * Neither item is completed, so the counter should show "Completed 0 of 2". + * The total includes program-as-course items. + */ + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const parentReqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const parentRequirements = parentReqTree.addOperator({ + operator: "all_of", + title: "Requirements", + }) + parentRequirements.addCourse({ course: 1 }) + parentRequirements.addProgram({ program: 900 }) + + const parentProgram = mitxonline.factories.programs.program({ + id: 4321, + title: "Parent Program", + courses: [1], + req_tree: parentReqTree.serialize(), + }) + + const parentCourses = { + count: 1, + next: null, + previous: null, + results: [ + mitxonline.factories.courses.course({ + id: 1, + title: "Core Course", + courseruns: [mitxonline.factories.courses.courseRun()], + }), + ], + } + + const programAsCourseReqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const programAsCourseRequirements = programAsCourseReqTree.addOperator({ + operator: "all_of", + title: "Modules", + }) + programAsCourseRequirements.addCourse({ course: 11 }) + + const programAsCourseProgram = mitxonline.factories.programs.program({ + id: 900, + title: "Program As Course", + display_mode: "course", + courses: [11], + req_tree: programAsCourseReqTree.serialize(), + }) + + const programAsCourseCourses = { + count: 1, + next: null, + previous: null, + results: [ + mitxonline.factories.courses.course({ + id: 11, + title: "Module A", + courseruns: [mitxonline.factories.courses.courseRun()], + }), + ], + } + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [ + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + id: parentProgram.id, + title: parentProgram.title, + live: parentProgram.live, + program_type: parentProgram.program_type, + readable_id: parentProgram.readable_id, + }, + }), + ], + ) + setMockResponse.get( + mitxonline.urls.programs.programDetail(parentProgram.id), + parentProgram, + ) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: parentProgram.courses, + page_size: parentProgram.courses.length, + }), + parentCourses, + ) + setMockResponse.get( + mitxonline.urls.programs.programsList({ + id: [900], + page_size: 1, + }), + { + count: 1, + next: null, + previous: null, + results: [programAsCourseProgram], + }, + ) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: [11], + page_size: 1, + }), + programAsCourseCourses, + ) + + renderWithProviders( + , + ) + + // Section header includes both the course and program-as-course item + await screen.findByText(/Completed 0 of 2/) + // Overall summary uses the same counting behavior + await screen.findByText(/0 of 2 courses/) + }) + + test("Completed program-as-course items count toward completion total", async () => { + /** + * A section contains 1 course (not completed) + 1 program-as-course (completed, + * has certificate). The counter should show "Completed 1 of 2". + */ + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const parentReqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const parentRequirements = parentReqTree.addOperator({ + operator: "all_of", + title: "Requirements", + }) + parentRequirements.addCourse({ course: 1 }) + parentRequirements.addProgram({ program: 900 }) + + const parentProgram = mitxonline.factories.programs.program({ + id: 4321, + title: "Parent Program", + courses: [1], + req_tree: parentReqTree.serialize(), + }) + + const parentCourses = { + count: 1, + next: null, + previous: null, + results: [ + mitxonline.factories.courses.course({ + id: 1, + title: "Core Course", + courseruns: [mitxonline.factories.courses.courseRun()], + }), + ], + } + + const programAsCourseReqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const programAsCourseRequirements = programAsCourseReqTree.addOperator({ + operator: "all_of", + title: "Modules", + }) + programAsCourseRequirements.addCourse({ course: 11 }) + + const programAsCourseProgram = mitxonline.factories.programs.program({ + id: 900, + title: "Program As Course", + display_mode: "course", + courses: [11], + req_tree: programAsCourseReqTree.serialize(), + }) + + const programAsCourseCourses = { + count: 1, + next: null, + previous: null, + results: [ + mitxonline.factories.courses.course({ + id: 11, + title: "Module A", + courseruns: [mitxonline.factories.courses.courseRun()], + }), + ], + } + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [ + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + id: parentProgram.id, + title: parentProgram.title, + live: parentProgram.live, + program_type: parentProgram.program_type, + readable_id: parentProgram.readable_id, + }, + }), + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + id: programAsCourseProgram.id, + title: programAsCourseProgram.title, + live: programAsCourseProgram.live, + program_type: programAsCourseProgram.program_type, + readable_id: programAsCourseProgram.readable_id, + }, + certificate: { + uuid: "test-uuid-900", + link: "/certificate/program/test-uuid-900/", + }, + }), + ], + ) + setMockResponse.get( + mitxonline.urls.programs.programDetail(parentProgram.id), + parentProgram, + ) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: parentProgram.courses, + page_size: parentProgram.courses.length, + }), + parentCourses, + ) + setMockResponse.get( + mitxonline.urls.programs.programsList({ + id: [900], + page_size: 1, + }), + { + count: 1, + next: null, + previous: null, + results: [programAsCourseProgram], + }, + ) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: [11], + page_size: 1, + }), + programAsCourseCourses, + ) + + renderWithProviders( + , + ) + + // program-as-course has certificate → counts as completed + await screen.findByText(/Completed 1 of 2/) + await screen.findByText(/1 of 2 courses/) + }) + + test("Shows enrollment status for program courses", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const reqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const requirements = reqTree.addOperator({ + operator: "all_of", + title: "Requirements", + }) + requirements.addCourse({ course: 1 }) + + const program = mitxonline.factories.programs.program({ + id: 789, + courses: [1], + req_tree: reqTree.serialize(), + }) + + const courses = { + count: 1, + next: null, + previous: null, + results: [ + mitxonline.factories.courses.course({ + id: 1, + title: "Test Course", + page: { + page_url: "/courses/test-course/", + }, + courseruns: [ + mitxonline.factories.courses.courseRun({ + title: "Test Course", + }), + ], + }), + ], + } + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [ + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + id: program.id, + title: program.title, + live: program.live, + program_type: program.program_type, + readable_id: program.readable_id, + }, + }), + ], + ) + setMockResponse.get(mitxonline.urls.programs.programDetail(789), program) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: program.courses, + page_size: program.courses.length, + }), + courses, + ) + // Also mock the undefined id case + setMockResponse.get(mitxonline.urls.courses.coursesList({}), { + results: [], + }) + + renderWithProviders() + + // Wait for the section header to load + await screen.findByText("Requirements") + + // Wait for the completion count to appear (this means courses have loaded) + await screen.findByText(/Completed 0 of 1/) + + // Wait for loading to complete - check that skeleton is gone + await waitFor( + () => { + const skeletons = screen.queryAllByTestId("skeleton") + expect(skeletons).toHaveLength(0) + }, + { timeout: 3000 }, + ) + + // Now check for the title - there will be 2 (desktop and mobile) + const titles = screen.getAllByText("Test Course") + expect(titles.length).toBeGreaterThanOrEqual(1) + }) + + test("Shows 'Continue' button for enrolled courses and 'Start Course' for unenrolled", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const reqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const requirements = reqTree.addOperator({ + operator: "all_of", + title: "Requirements", + }) + requirements.addCourse({ course: 1 }) + requirements.addCourse({ course: 2 }) + + const program = mitxonline.factories.programs.program({ + id: 777, + courses: [1, 2], + req_tree: reqTree.serialize(), + }) + + const enrolledRun = mitxonline.factories.courses.courseRun({ + id: 100, + title: "Enrolled Course", + start_date: "2024-01-01T00:00:00Z", // Past date + end_date: "2099-12-31T23:59:59Z", // Far future date + courseware_url: faker.internet.url(), + }) + const unenrolledRun = mitxonline.factories.courses.courseRun({ + id: 200, + title: "Unenrolled Course", + }) + + const courses = { + count: 2, + next: null, + previous: null, + results: [ + mitxonline.factories.courses.course({ + id: 1, + title: "Enrolled Course", + courseruns: [enrolledRun], + }), + mitxonline.factories.courses.course({ + id: 2, + title: "Unenrolled Course", + courseruns: [unenrolledRun], + }), + ], + } + + const enrollment = mitxonline.factories.enrollment.courseEnrollment({ + run: { + ...enrolledRun, + course: courses.results[0], + }, + certificate: null, // No certificate - course is not completed + grades: [], // Enrolled but not completed + }) + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), [ + enrollment, + ]) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [ + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + id: program.id, + title: program.title, + live: program.live, + program_type: program.program_type, + readable_id: program.readable_id, + }, + }), + ], + ) + setMockResponse.get(mitxonline.urls.programs.programDetail(777), program) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: program.courses, + page_size: program.courses.length, + }), + courses, + ) + + renderWithProviders() + + await screen.findByText("Requirements") + + // Wait for cards to load + await waitFor( + () => { + const skeletons = screen.queryAllByTestId("skeleton") + expect(skeletons).toHaveLength(0) + }, + { timeout: 3000 }, + ) + + // Find desktop cards (we'll focus on those for this test) + const cards = screen.getAllByTestId("enrollment-card-desktop") + const enrolledCard = cards.find((card) => + within(card).queryByText("Enrolled Course"), + ) + const unenrolledCard = cards.find((card) => + within(card).queryByText("Unenrolled Course"), + ) + + expect(enrolledCard).toBeDefined() + expect(unenrolledCard).toBeDefined() + + // Enrolled course should show "Continue" button and be a link + const continueButton = within(enrolledCard!).getByTestId( + "courseware-button", + ) + expect(continueButton).toHaveTextContent("Continue") + expect(continueButton.tagName).toBe("A") // Should be a link + + // Unenrolled course should show "Start Course" button + const startButton = within(unenrolledCard!).getByTestId("courseware-button") + expect(startButton).toHaveTextContent("Start Course") + expect(startButton.tagName).toBe("BUTTON") // Should be a button + }) + + test("Clicking unenrolled course in program opens CourseEnrollmentDialog", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const reqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const requirements = reqTree.addOperator({ + operator: "all_of", + title: "Requirements", + }) + requirements.addCourse({ course: 1 }) + + const program = mitxonline.factories.programs.program({ + id: 666, + courses: [1], + req_tree: reqTree.serialize(), + }) + + const run = mitxonline.factories.courses.courseRun({ + title: "Clickable Course", + b2b_contract: null, // Non-B2B + is_enrollable: true, + enrollment_modes: [ + mitxonline.factories.courses.enrollmentMode({ + requires_payment: false, + }), + mitxonline.factories.courses.enrollmentMode({ + requires_payment: true, + }), + ], + }) + + const courses = { + count: 1, + next: null, + previous: null, + results: [ + mitxonline.factories.courses.course({ + id: 1, + title: "Clickable Course", + courseruns: [run], + }), + ], + } + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) // No enrollments + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [ + mitxonline.factories.enrollment.programEnrollmentV3({ + enrollment_mode: "audit", + program: { + id: program.id, + title: program.title, + live: program.live, + program_type: program.program_type, + readable_id: program.readable_id, + }, + }), + ], + ) + setMockResponse.get(mitxonline.urls.programs.programDetail(666), program) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: program.courses, + page_size: program.courses.length, + }), + courses, + ) + + renderWithProviders() + + await screen.findByText("Requirements") + + // Wait for cards to load + await waitFor( + () => { + const skeletons = screen.queryAllByTestId("skeleton") + expect(skeletons).toHaveLength(0) + }, + { timeout: 3000 }, + ) + + const cards = screen.getAllByTestId("enrollment-card-desktop") + const card = cards.find((c) => within(c).queryByText("Clickable Course")) + invariant(card, "Expected to find a card containing 'Clickable Course'") + + const startButton = within(card).getByTestId("courseware-button") + await user.click(startButton) + + // Should open CourseEnrollmentDialog + await screen.findByRole("dialog", { name: "Clickable Course" }) + }) + + test.each([ + { minNumberOf: "1", expectCompletionCount: true }, + { minNumberOf: "0", expectCompletionCount: false }, + ])( + "Displays correct completion count for sections with min_number_of operator", + async ({ minNumberOf, expectCompletionCount }) => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const reqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const electives = reqTree.addOperator({ + operator: "min_number_of", + operator_value: minNumberOf, + title: "Electives", + }) + electives.addCourse({ course: 1 }) + electives.addCourse({ course: 2 }) + + const program = mitxonline.factories.programs.program({ + id: 999, + courses: [1, 2], + req_tree: reqTree.serialize(), + }) + + const courses = { + count: 2, + next: null, + previous: null, + results: [ + mitxonline.factories.courses.course({ + id: 1, + title: "Elective Course 1", + page: { + page_url: "/courses/elective-1/", + }, + courseruns: [mitxonline.factories.courses.courseRun()], + }), + mitxonline.factories.courses.course({ + id: 2, + title: "Elective Course 2", + page: { + page_url: "/courses/elective-2/", + }, + courseruns: [mitxonline.factories.courses.courseRun()], + }), + ], + } + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [ + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + id: program.id, + title: program.title, + live: program.live, + program_type: program.program_type, + readable_id: program.readable_id, + }, + }), + ], + ) + setMockResponse.get(mitxonline.urls.programs.programDetail(999), program) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: program.courses, + page_size: program.courses.length, + }), + courses, + ) + + renderWithProviders() + + await screen.findByText("Electives") + + if (expectCompletionCount) { + const completionCount = screen.getByTestId("section-completion-count") + expect(completionCount).toHaveTextContent("Completed 0 of 1") + expect(screen.getByText(/0 of 1 courses/)).toBeInTheDocument() + } else { + expect( + screen.queryByTestId("section-completion-count"), + ).not.toBeInTheDocument() + } + }, + ) + + test("Overall completion count caps elective completions at min_number_of value", async () => { + /** + * Program has 2 required courses (all_of) and 3 electives (min_number_of=1). + * User completes 1 required course + 2 electives. + * Bug: counts all 3 completions → "3 of 3 courses" (wrong). + * Fix: caps elective contribution at 1 → "2 of 3 courses" (correct). + */ + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const reqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const required = reqTree.addOperator({ + operator: "all_of", + title: "Required Courses", + }) + required.addCourse({ course: 1 }) + required.addCourse({ course: 2 }) + + const electives = reqTree.addOperator({ + operator: "min_number_of", + operator_value: "1", + title: "Electives", + }) + electives.addCourse({ course: 3 }) + electives.addCourse({ course: 4 }) + electives.addCourse({ course: 5 }) + + const program = mitxonline.factories.programs.program({ + id: 5555, + courses: [1, 2, 3, 4, 5], + req_tree: reqTree.serialize(), + }) + + const run1 = mitxonline.factories.courses.courseRun({ id: 101 }) + const run3 = mitxonline.factories.courses.courseRun({ id: 103 }) + const run4 = mitxonline.factories.courses.courseRun({ id: 104 }) + + const courses = { + count: 5, + next: null, + previous: null, + results: [ + mitxonline.factories.courses.course({ + id: 1, + courseruns: [run1], + }), + mitxonline.factories.courses.course({ + id: 2, + courseruns: [mitxonline.factories.courses.courseRun({ id: 102 })], + }), + mitxonline.factories.courses.course({ + id: 3, + courseruns: [run3], + }), + mitxonline.factories.courses.course({ + id: 4, + courseruns: [run4], + }), + mitxonline.factories.courses.course({ + id: 5, + courseruns: [mitxonline.factories.courses.courseRun({ id: 105 })], + }), + ], + } + + // Course 1 (required) completed, courses 3 and 4 (electives) completed + const completedGrade = mitxonline.factories.enrollment.grade({ + passed: true, + }) + const enrollments = [ + mitxonline.factories.enrollment.courseEnrollment({ + run: { ...run1, course: courses.results[0] }, + grades: [completedGrade], + }), + mitxonline.factories.enrollment.courseEnrollment({ + run: { ...run3, course: courses.results[2] }, + grades: [completedGrade], + }), + mitxonline.factories.enrollment.courseEnrollment({ + run: { ...run4, course: courses.results[3] }, + grades: [completedGrade], + }), + ] + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get( + mitxonline.urls.enrollment.enrollmentsListV3(), + enrollments, + ) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [ + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + id: program.id, + title: program.title, + live: program.live, + program_type: program.program_type, + readable_id: program.readable_id, + }, + }), + ], + ) + setMockResponse.get(mitxonline.urls.programs.programDetail(5555), program) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: program.courses, + page_size: program.courses.length, + }), + courses, + ) + + renderWithProviders() + + // 1 required completed + min(2 electives completed, 1 required) = 2 total completed + // total = 2 required + 1 elective min = 3 + await screen.findByText(/2 of 3 courses/) + }) + + test("Section header caps displayed count at operator_value for min_number_of sections", async () => { + /** + * Electives section with min_number_of=1 and 3 completed courses. + * The section header should show "Completed 1 of 1", not "Completed 3 of 1". + */ + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const reqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const electives = reqTree.addOperator({ + operator: "min_number_of", + operator_value: "1", + title: "Electives", + }) + electives.addCourse({ course: 1 }) + electives.addCourse({ course: 2 }) + electives.addCourse({ course: 3 }) + + const program = mitxonline.factories.programs.program({ + id: 6666, + courses: [1, 2, 3], + req_tree: reqTree.serialize(), + }) + + const run1 = mitxonline.factories.courses.courseRun({ id: 201 }) + const run2 = mitxonline.factories.courses.courseRun({ id: 202 }) + const run3 = mitxonline.factories.courses.courseRun({ id: 203 }) + + const courses = { + count: 3, + next: null, + previous: null, + results: [ + mitxonline.factories.courses.course({ + id: 1, + courseruns: [run1], + }), + mitxonline.factories.courses.course({ + id: 2, + courseruns: [run2], + }), + mitxonline.factories.courses.course({ + id: 3, + courseruns: [run3], + }), + ], + } + + // All 3 electives completed + const completedGrade = mitxonline.factories.enrollment.grade({ + passed: true, + }) + const enrollments = [ + mitxonline.factories.enrollment.courseEnrollment({ + run: { ...run1, course: courses.results[0] }, + grades: [completedGrade], + }), + mitxonline.factories.enrollment.courseEnrollment({ + run: { ...run2, course: courses.results[1] }, + grades: [completedGrade], + }), + mitxonline.factories.enrollment.courseEnrollment({ + run: { ...run3, course: courses.results[2] }, + grades: [completedGrade], + }), + ] + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get( + mitxonline.urls.enrollment.enrollmentsListV3(), + enrollments, + ) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [ + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + id: program.id, + title: program.title, + live: program.live, + program_type: program.program_type, + readable_id: program.readable_id, + }, + }), + ], + ) + setMockResponse.get(mitxonline.urls.programs.programDetail(6666), program) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: program.courses, + page_size: program.courses.length, + }), + courses, + ) + + renderWithProviders() + + await screen.findByText("Electives") + + // Section header should show "Completed 1 of 1", capped at operator_value + const sectionCount = screen.getByTestId("section-completion-count") + expect(sectionCount).toHaveTextContent("Completed 1 of 1") + // Overall header should also show 1 of 1 (only electives section) + expect(screen.getByText(/1 of 1 courses/)).toBeInTheDocument() + }) + + test("Returns 404 page when user is not enrolled in the program", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const reqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const requirements = reqTree.addOperator({ + operator: "all_of", + title: "Requirements", + }) + requirements.addCourse({ course: 1 }) + + const program = mitxonline.factories.programs.program({ + id: 888, + courses: [1], + req_tree: reqTree.serialize(), + }) + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + // User is not enrolled in any programs + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [], + ) + setMockResponse.get(mitxonline.urls.programs.programDetail(888), program) + + renderWithProviders() + + // Should show 404 page instead of program content + await screen.findByText( + "Looks like we couldn't find what you were looking for!", + ) + expect(screen.queryByText("Requirements")).not.toBeInTheDocument() + }) + + /** + * Sets up a verified program dashboard scenario with: + * - A parent program with a verified enrollment + * - A direct child course (regular requirement) + * - A child program-as-course with its own module course + * + * Mocks all API responses. Does not render — callers handle rendering + * and assertions. + */ + const setupProgramDashboardVerifiedEnrollmentScenario = () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + // Child course (direct requirement of the parent program) + const childCourseRun = mitxonline.factories.courses.courseRun({ + title: "Verified Child Course", + b2b_contract: null, + is_enrollable: true, + courseware_url: faker.internet.url(), + }) + const childCourse = mitxonline.factories.courses.course({ + title: "Verified Child Course", + courseruns: [childCourseRun], + next_run_id: childCourseRun.id, + }) + + // Module course (child of the program-as-course) + const moduleRun = mitxonline.factories.courses.courseRun({ + title: "Verified Module Course", + b2b_contract: null, + is_enrollable: true, + courseware_url: faker.internet.url(), + }) + const moduleCourse = mitxonline.factories.courses.course({ + title: "Verified Module Course", + courseruns: [moduleRun], + next_run_id: moduleRun.id, + }) + + // Program-as-course (child requirement of the parent program) + const programAsCourseReqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const moduleSection = programAsCourseReqTree.addOperator({ + operator: "all_of", + title: "Modules", + }) + moduleSection.addCourse({ course: moduleCourse.id }) + + const programAsCourse = mitxonline.factories.programs.program({ + display_mode: "course", + courses: [moduleCourse.id], + req_tree: programAsCourseReqTree.serialize(), + }) + + // Parent program with both a course and a program-as-course + const parentReqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const parentRequirements = parentReqTree.addOperator({ + operator: "all_of", + title: "Program Requirements", + }) + parentRequirements.addCourse({ course: childCourse.id }) + parentRequirements.addProgram({ program: programAsCourse.id }) + + const parentProgram = mitxonline.factories.programs.program({ + courses: [childCourse.id], + req_tree: parentReqTree.serialize(), + }) + + const parentProgramEnrollment = + mitxonline.factories.enrollment.programEnrollmentV3({ + enrollment_mode: "verified", + program: { + id: parentProgram.id, + title: parentProgram.title, + live: parentProgram.live, + program_type: parentProgram.program_type, + readable_id: parentProgram.readable_id, + }, + }) + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [parentProgramEnrollment], + ) + setMockResponse.get( + mitxonline.urls.programs.programDetail(parentProgram.id), + parentProgram, + ) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: parentProgram.courses, + page_size: parentProgram.courses.length, + }), + { count: 1, next: null, previous: null, results: [childCourse] }, + ) + setMockResponse.get( + mitxonline.urls.programs.programsList({ + id: [programAsCourse.id], + page_size: 1, + }), + { + count: 1, + next: null, + previous: null, + results: [programAsCourse], + }, + ) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: [moduleCourse.id], + page_size: 1, + }), + { count: 1, next: null, previous: null, results: [moduleCourse] }, + ) + + // Mock verified enrollment endpoints for both course runs + const childCourseEnrollmentEndpoint = + mitxonline.urls.verifiedProgramEnrollments.create( + childCourseRun.courseware_id, + ) + setMockResponse.post(childCourseEnrollmentEndpoint, {}) + + const moduleCourseEnrollmentEndpoint = + mitxonline.urls.verifiedProgramEnrollments.create(moduleRun.courseware_id) + setMockResponse.post(moduleCourseEnrollmentEndpoint, {}) + + return { + parentProgram, + parentProgramEnrollment, + childCourse, + childCourseRun, + childCourseEnrollmentEndpoint, + programAsCourse, + moduleCourse, + moduleRun, + moduleCourseEnrollmentEndpoint, + } + } + + test("Clicking 'Start Course' on a regular course in a verified program does one-click enrollment", async () => { + const { + parentProgram, + parentProgramEnrollment, + childCourse, + childCourseEnrollmentEndpoint, + } = setupProgramDashboardVerifiedEnrollmentScenario() + + renderWithProviders( + , + ) + + await screen.findByText("Program Requirements") + await waitFor( + () => { + const skeletons = screen.queryAllByTestId("skeleton") + expect(skeletons).toHaveLength(0) + }, + { timeout: 3000 }, + ) + + const cards = screen.getAllByTestId("enrollment-card-desktop") + const card = cards.find((c) => within(c).queryByText(childCourse.title)) + invariant(card, `Expected to find a card containing "${childCourse.title}"`) + + const startButton = within(card).getByTestId("courseware-button") + await user.click(startButton) + + await waitFor(() => { + expect(mockAxiosInstance.request).toHaveBeenCalledWith( + expect.objectContaining({ + method: "POST", + url: childCourseEnrollmentEndpoint, + data: JSON.stringify([parentProgramEnrollment.program.readable_id]), + }), + ) + }) + + expect(screen.queryByRole("dialog")).not.toBeInTheDocument() + }) + + test("Clicking 'Start Course' on a module in a program-as-course sends both parent and grandparent program IDs", async () => { + const { + parentProgram, + parentProgramEnrollment, + programAsCourse, + moduleCourse, + moduleCourseEnrollmentEndpoint, + } = setupProgramDashboardVerifiedEnrollmentScenario() + + renderWithProviders( + , + ) + + await screen.findByText("Program Requirements") + await waitFor( + () => { + const skeletons = screen.queryAllByTestId("skeleton") + expect(skeletons).toHaveLength(0) + }, + { timeout: 3000 }, + ) + + const cards = screen.getAllByTestId("enrollment-card-desktop") + const card = cards.find((c) => within(c).queryByText(moduleCourse.title)) + invariant( + card, + `Expected to find a card containing "${moduleCourse.title}"`, + ) + + const startButton = within(card).getByTestId("courseware-button") + await user.click(startButton) + + await waitFor(() => { + expect(mockAxiosInstance.request).toHaveBeenCalledWith( + expect.objectContaining({ + method: "POST", + url: moduleCourseEnrollmentEndpoint, + data: JSON.stringify([ + programAsCourse.readable_id, + parentProgramEnrollment.program.readable_id, + ]), + }), + ) + }) + + expect(screen.queryByRole("dialog")).not.toBeInTheDocument() + }) + + test("Displays courses in the order defined by the requirement tree, not API order", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const courses = mitxonline.factories.courses.courses({ count: 3 }) + courses.results = courses.results.map((course) => { + const firstRun = course.courseruns[0] + return { + ...course, + courseruns: firstRun + ? [ + { + ...firstRun, + title: course.title, + is_enrollable: true, + }, + ] + : [], + next_run_id: firstRun?.id ?? null, + language_options: firstRun + ? [ + { + id: firstRun.id, + courseware_id: firstRun.courseware_id, + courseware_url: firstRun.courseware_url ?? "", + language: firstRun.language ?? "en", + title: course.title, + run_tag: firstRun.run_tag, + }, + ] + : [], + } + }) + const [courseA, courseB, courseC] = courses.results + + // Requirement tree defines courses in order: C, A, B + const reqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const core = reqTree.addOperator({ + operator: "all_of", + title: "Core Courses", + }) + core.addCourse({ course: courseC.id }) + core.addCourse({ course: courseA.id }) + core.addCourse({ course: courseB.id }) + + const program = mitxonline.factories.programs.program({ + courses: [courseA.id, courseB.id, courseC.id], + req_tree: reqTree.serialize(), + }) + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [ + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + id: program.id, + title: program.title, + live: program.live, + program_type: program.program_type, + readable_id: program.readable_id, + }, + }), + ], + ) + setMockResponse.get( + mitxonline.urls.programs.programDetail(program.id), + program, + ) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: program.courses, + page_size: program.courses.length, + }), + courses, + ) + + renderWithProviders() + + await screen.findByText("Core Courses") + + // Cards should render in req_tree order (C, A, B), not API order. + const cards = await screen.findAllByTestId("enrollment-card-desktop") + expect(cards.length).toBe(3) + const expectedTitles = [ + courseC.courseruns[0].title, + courseA.courseruns[0].title, + courseB.courseruns[0].title, + ] + + expectedTitles.forEach((title, index) => { + expect(cards[index]).toHaveTextContent(title) + }) + }) + + test("displays certificate button when program enrollment has a certificate", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const certUuid = "test-program-cert-uuid" + const program = mitxonline.factories.programs.program({ + id: 456, + title: "Program With Certificate", + courses: [10, 11], + }) + const programEnrollment = + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + id: program.id, + title: program.title, + live: program.live, + program_type: program.program_type, + readable_id: program.readable_id, + }, + certificate: { + uuid: certUuid, + link: `/certificate/program/${certUuid}/`, + }, + }) + const courses = mitxonline.factories.courses.courses({ count: 2 }) + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [programEnrollment], + ) + setMockResponse.get(mitxonline.urls.programs.programDetail(456), program) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: program.courses, + page_size: program.courses.length, + }), + courses, + ) + + renderWithProviders() + + await screen.findByText("Program With Certificate") + const certButton = screen.getByRole("link", { name: "Certificate" }) + const expectedCertHref = programEnrollment.certificate?.link?.replace( + /\/$/, + "", + ) + expect(certButton).toBeInTheDocument() + expect(certButton).toHaveAttribute("href", expectedCertHref) + expect(certButton).not.toHaveAttribute("target") + }) + + test("does not display certificate button when program enrollment has no certificate", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const program = mitxonline.factories.programs.program({ + id: 457, + title: "Program Without Certificate", + courses: [12, 13], + }) + const programEnrollment = + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + id: program.id, + title: program.title, + live: program.live, + program_type: program.program_type, + readable_id: program.readable_id, + }, + certificate: null, + }) + const courses = mitxonline.factories.courses.courses({ count: 2 }) + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [programEnrollment], + ) + setMockResponse.get(mitxonline.urls.programs.programDetail(457), program) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: program.courses, + page_size: program.courses.length, + }), + courses, + ) + + renderWithProviders() + + await screen.findByText("Program Without Certificate") + const certButton = screen.queryByRole("link", { name: "Certificate" }) + expect(certButton).not.toBeInTheDocument() + }) + + test("program language picker switches card title on B2C program page", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const englishRun = mitxonline.factories.courses.courseRun({ + id: faker.number.int(), + title: "Module in English", + courseware_id: "course-v1:LANG+TEST+EN", + courseware_url: + "https://courses.example.com/learn/course/course-v1:LANG+TEST+EN/home", + is_enrollable: true, + }) + const spanishRun = mitxonline.factories.courses.courseRun({ + id: faker.number.int(), + title: "Modulo en Espanol", + courseware_id: "course-v1:LANG+TEST+ES", + courseware_url: + "https://courses.example.com/learn/course/course-v1:LANG+TEST+ES/home", + is_enrollable: true, + }) + + const localizedCourse = mitxonline.factories.courses.course({ + id: 991, + title: "Base Course Title", + courseruns: [englishRun, spanishRun], + next_run_id: englishRun.id, + language_options: [ + { + id: englishRun.id, + courseware_id: englishRun.courseware_id, + courseware_url: englishRun.courseware_url ?? "", + language: "en", + title: englishRun.title, + run_tag: englishRun.run_tag, + }, + { + id: spanishRun.id, + courseware_id: spanishRun.courseware_id, + courseware_url: spanishRun.courseware_url ?? "", + language: "es", + title: spanishRun.title, + run_tag: spanishRun.run_tag, + }, + ], + }) + + const reqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const core = reqTree.addOperator({ + operator: "all_of", + title: "Core Courses", + }) + core.addCourse({ course: localizedCourse.id }) + + const program = mitxonline.factories.programs.program({ + id: 458, + title: "Program With Languages", + courses: [localizedCourse.id], + req_tree: reqTree.serialize(), + }) + const programEnrollment = + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + id: program.id, + title: program.title, + live: program.live, + program_type: program.program_type, + readable_id: program.readable_id, + }, + certificate: null, + }) + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [programEnrollment], + ) + setMockResponse.get( + mitxonline.urls.programs.programDetail(program.id), + program, + ) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: program.courses, + page_size: program.courses.length, + }), + { + count: 1, + next: null, + previous: null, + results: [localizedCourse], + }, + ) + + renderWithProviders() + + await screen.findByText("Program With Languages") + expect(screen.getByText("Learning Language:")).toBeInTheDocument() + const languageSelect = await screen.findByRole("combobox") + expect(languageSelect).toHaveTextContent("English") + + const card = await screen.findByTestId("enrollment-card-desktop") + expect(card).toHaveTextContent("Module in English") + expect(card).toHaveTextContent("Start Course") + + await user.click(languageSelect) + await user.click(await screen.findByRole("option", { name: "español" })) + + const desktopCard = await screen.findByTestId("enrollment-card-desktop") + await within(desktopCard).findByText("Modulo en Espanol") + + expect(screen.getByText("Learning Language:")).toBeInTheDocument() + expect(screen.getByTestId("enrollment-card-desktop")).toHaveTextContent( + "Start Course", + ) + }) + + test("language picker is hidden when only one language option is present", async () => { + const mitxOnlineUser = mitxonline.factories.user.user() + setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser) + + const run = mitxonline.factories.courses.courseRun({ + id: faker.number.int(), + title: "Single Language Module", + is_enrollable: true, + }) + const course = mitxonline.factories.courses.course({ + id: 992, + courseruns: [run], + next_run_id: run.id, + language_options: [ + { + id: run.id, + courseware_id: run.courseware_id, + courseware_url: run.courseware_url ?? "", + language: "en", + title: run.title, + run_tag: run.run_tag, + }, + ], + }) + + const reqTree = + new mitxonline.factories.requirements.RequirementTreeBuilder() + const core = reqTree.addOperator({ + operator: "all_of", + title: "Core Courses", + }) + core.addCourse({ course: course.id }) + + const program = mitxonline.factories.programs.program({ + id: 459, + title: "Single Language Program", + courses: [course.id], + req_tree: reqTree.serialize(), + }) + const programEnrollment = + mitxonline.factories.enrollment.programEnrollmentV3({ + program: { + id: program.id, + title: program.title, + live: program.live, + program_type: program.program_type, + readable_id: program.readable_id, + }, + certificate: null, + }) + + mockedUseFeatureFlagEnabled.mockReturnValue(true) + setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), []) + setMockResponse.get( + mitxonline.urls.programEnrollments.enrollmentsListV3(), + [programEnrollment], + ) + setMockResponse.get( + mitxonline.urls.programs.programDetail(program.id), + program, + ) + setMockResponse.get( + mitxonline.urls.courses.coursesList({ + id: program.courses, + page_size: program.courses.length, + }), + { count: 1, next: null, previous: null, results: [course] }, + ) + + renderWithProviders() + + await screen.findByText("Single Language Program") + expect(screen.queryByRole("combobox")).not.toBeInTheDocument() + expect(screen.queryByText("Learning Language:")).not.toBeInTheDocument() + }) +}) diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramEnrollmentDisplay.tsx similarity index 52% rename from frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx rename to frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramEnrollmentDisplay.tsx index 7f438cc595..ef373f15fb 100644 --- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx +++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramEnrollmentDisplay.tsx @@ -1,117 +1,42 @@ import React, { useEffect } from "react" -import { DASHBOARD_MY_LEARNING_ID } from "@/common/urls" import { enrollmentQueries } from "api/mitxonline-hooks/enrollment" import { - Collapse, - Link, - PlainList, - PlainListProps, SimpleSelectField, Skeleton, Stack, Typography, - TypographyProps, styled, theme, } from "ol-components" -import { Alert, ButtonLink } from "@mitodl/smoot-design" -import { keepPreviousData, useQuery } from "@tanstack/react-query" -import { - EnrollmentStatus, - getEnrollmentStatus, - getRequirementsProgress, - getKey, - ResourceType, -} from "./helpers" -import { - DashboardCard, - DashboardResource, - DashboardType, -} from "./DashboardCard" +import { ButtonLink } from "@mitodl/smoot-design" +import { useQuery } from "@tanstack/react-query" +import { getRequirementsProgress, getKey, ResourceType } from "./helpers" +import { DashboardCard, DashboardType } from "./DashboardCard" import { getDistinctDashboardLanguageOptions, + groupCourseRunEnrollmentsByCourseId, + groupProgramEnrollmentsByProgramId, resolveSlotForLanguage, } from "./model/dashboardViewModel" import { coursesQueries } from "api/mitxonline-hooks/courses" import { programsQueries } from "api/mitxonline-hooks/programs" import { - ContractPage, - CourseRunEnrollmentV3, CourseWithCourseRunsSerializerV2, DisplayModeEnum, V2ProgramDetail, V2ProgramRequirement, V3UserProgramEnrollment, } from "@mitodl/mitxonline-api-axios/v2" -import { mitxUserQueries } from "api/mitxonline-hooks/user" import NotFoundPage from "@/app-pages/ErrorPage/NotFoundPage" import { ProgramAsCourseCard } from "./ProgramAsCourseCard" import { getIdsFromReqTree } from "@/common/mitxonline" import { RiAwardFill } from "@remixicon/react" -const Wrapper = styled.div(({ theme }) => ({ - marginTop: "32px", - padding: "24px 32px", - backgroundColor: theme.custom.colors.white, - borderBottom: `1px solid ${theme.custom.colors.red}`, - boxShadow: "0px 4px 8px 0px rgba(19, 20, 21, 0.08)", - borderRadius: "8px", - [theme.breakpoints.down("md")]: { - border: `1px solid ${theme.custom.colors.lightGray2}`, - backgroundColor: "rgba(243, 244, 248, 0.60);", // TODO: use theme color - marginTop: "16px", - padding: "0", - }, -})) - -const AlertBanner = styled(Alert)({ - marginBottom: "16px", -}) - const DashboardCardStyled = styled(DashboardCard)({ borderRadius: "8px", boxShadow: "0px 1px 6px 0px rgba(3, 21, 45, 0.05)", }) -const Title = styled(Typography)>( - ({ theme }) => ({ - ...theme.typography.h5, - marginBottom: "16px", - [theme.breakpoints.down("md")]: { - padding: "16px", - marginBottom: "0", - }, - }), -) - -const EnrollmentsList = styled(PlainList)>( - ({ theme }) => ({ - [theme.breakpoints.down("md")]: { - borderTop: `1px solid ${theme.custom.colors.lightGray2}`, - ">li+li": { - marginTop: "0", - }, - }, - }), -) - -const HiddenEnrollmentsList = styled(EnrollmentsList)({ - marginTop: "16px", - [theme.breakpoints.down("md")]: { - borderTop: "none", - marginTop: "0", - }, -}) - -const ShowAllContainer = styled.div(({ theme }) => ({ - display: "flex", - justifyContent: "center", - marginTop: "24px", - [theme.breakpoints.down("md")]: { - marginBottom: "24px", - }, -})) - const ProgramLanguageSelect = styled(SimpleSelectField)(({ theme }) => ({ display: "inline-flex", flexDirection: "row", @@ -142,202 +67,6 @@ export const ProgramCertificateButton = styled(ButtonLink)(({ theme }) => ({ width: "120px", })) -const alphabeticalSort = (a: CourseRunEnrollmentV3, b: CourseRunEnrollmentV3) => - a.run.course.title.localeCompare(b.run.course.title) - -const startsSooner = (a: CourseRunEnrollmentV3, b: CourseRunEnrollmentV3) => { - if (!a.run.start_date && !b.run.start_date) return 0 - if (!a.run.start_date) return 1 - if (!b.run.start_date) return -1 - const x = new Date(a.run.start_date) - const y = new Date(b.run.start_date) - return x.getTime() - y.getTime() -} - -const sortEnrollments = (enrollments: CourseRunEnrollmentV3[]) => { - const expired: CourseRunEnrollmentV3[] = [] - const completed: CourseRunEnrollmentV3[] = [] - const started: CourseRunEnrollmentV3[] = [] - const notStarted: CourseRunEnrollmentV3[] = [] - enrollments.forEach((enrollment) => { - if (!enrollment?.b2b_contract_id) { - const enrollmentStatus = getEnrollmentStatus(enrollment) - if (enrollmentStatus === EnrollmentStatus.Completed) { - completed.push(enrollment) - } else if ( - enrollment.run.end_date && - new Date(enrollment.run.end_date) < new Date() - ) { - expired.push(enrollment) - } else if ( - enrollment.run.start_date && - new Date(enrollment.run.start_date) < new Date() - ) { - started.push(enrollment) - } else { - notStarted.push(enrollment) - } - } - }) - - return { - completed: completed.sort(alphabeticalSort), - expired: expired.sort(alphabeticalSort), - started: started.sort(alphabeticalSort), - notStarted: notStarted.sort(startsSooner), - } -} - -const dedupeEnrollments = ( - enrollments: CourseRunEnrollmentV3[], - enrolledPrograms: V2ProgramDetail[], -) => { - return enrollments.filter((enrollment) => { - return !enrolledPrograms.some((program) => - program.courses?.includes(enrollment.run.course.id), - ) - }) -} - -const getResourceKey = (resource: DashboardResource): string => { - if (resource.type === DashboardType.ProgramEnrollment) { - return getKey({ - resourceType: ResourceType.Program, - id: resource.data.program.id, - }) - } - if (resource.type === DashboardType.CourseRunEnrollment) { - return getKey({ - resourceType: ResourceType.Course, - id: resource.data.run.course.id, - runId: resource.data.run.id, - }) - } - return getKey({ resourceType: ResourceType.Course, id: resource.data.id }) -} - -type ProgramEnrollmentResource = Extract< - DashboardResource, - { type: typeof DashboardType.ProgramEnrollment } -> - -const isProgramAsCourseEnrollment = ( - resource: DashboardResource, -): resource is ProgramEnrollmentResource => { - if (resource.type !== DashboardType.ProgramEnrollment) return false - return resource.data.program.display_mode === DisplayModeEnum.Course -} - -type ProgramAsCourseProgramData = { - id: number - readable_id: string - title?: string | null - start_date?: string | null - end_date?: string | null - courses?: number[] - req_tree?: V2ProgramRequirement[] -} - -interface EnrollmentExpandCollapseProps { - normallyShown: DashboardResource[] - maybeShown: DashboardResource[] - isLoading?: boolean - enrollmentsByCourseId: Record - courseProgramsById: Map - moduleCoursesByProgramId: Record - onUpgradeError?: (error: string) => void -} - -const MIN_VISIBLE = 3 - -const EnrollmentExpandCollapse: React.FC = ({ - normallyShown, - maybeShown, - isLoading, - enrollmentsByCourseId, - courseProgramsById, - moduleCoursesByProgramId, - onUpgradeError, -}) => { - const [shown, setShown] = React.useState(false) - - const handleToggle = (event: React.MouseEvent) => { - event.preventDefault() - setShown(!shown) - } - - const shownResources = normallyShown.length - ? normallyShown - : maybeShown.slice(0, MIN_VISIBLE) - const hiddenResources = normallyShown.length - ? maybeShown - : maybeShown.slice(MIN_VISIBLE) - - const renderResource = (resource: DashboardResource) => { - if (isProgramAsCourseEnrollment(resource)) { - const courseProgram = courseProgramsById.get(resource.data.program.id) - if (!courseProgram) { - return ( - - ) - } - - return ( - - ) - } - - return ( - - ) - } - - return ( - <> - - {shownResources.map(renderResource)} - - {hiddenResources.length === 0 ? null : ( - <> - - - {hiddenResources.map(renderResource)} - - - - - {shown ? "Show less" : "Show all"} - - - - )} - - ) -} - interface ResourceItem { id: number type: "course" | "program" @@ -491,24 +220,12 @@ const ProgramEnrollmentDisplay: React.FC = ({ requiredProgramsLoading || requiredProgramCoursesLoading - const enrollmentsByCourseId = (rawEnrollments || []).reduce( - (acc, enrollment) => { - const courseId = enrollment.run.course.id - if (!acc[courseId]) { - acc[courseId] = [] - } - acc[courseId].push(enrollment) - return acc - }, - {} as Record, + const enrollmentsByCourseId = groupCourseRunEnrollmentsByCourseId( + rawEnrollments ?? [], ) - const programEnrollmentsById = (programEnrollments ?? []).reduce( - (acc, enrollment) => { - acc[enrollment.program.id] = enrollment - return acc - }, - {} as Record, + const programEnrollmentsById = groupProgramEnrollmentsByProgramId( + programEnrollments ?? [], ) const allProgramCourses = React.useMemo( @@ -810,220 +527,4 @@ const ProgramEnrollmentDisplay: React.FC = ({ ) } -const getTopLevelProgramEnrollments = ( - programEnrollments: V3UserProgramEnrollment[], - programs: V2ProgramDetail[], -) => { - const childIds = new Set( - programs.flatMap( - (program) => getIdsFromReqTree(program.req_tree).programIds, - ), - ) - return programEnrollments.filter( - (enrollment) => !childIds.has(enrollment.program.id), - ) -} -const getNonContractProgramEnrollments = ( - programEnrollments: V3UserProgramEnrollment[], - contracts: ContractPage[], -) => { - const contractPrograms = new Set( - contracts.flatMap((contract) => contract.programs), - ) - return programEnrollments.filter( - (enrollment) => !contractPrograms.has(enrollment.program.id), - ) -} - -/** - * Renders the "My Learning" section for non-B2B enrollments. - * - * Cards are ordered and grouped as follows: - * 1. Started courses (past start date, not expired, not completed) - * 2. Not-yet-started courses - * 3. Completed courses (any passing grade) - * 4. Program enrollments (excluding those covered by a B2B contract) - * 5. Expired courses (past end date, not completed) — hidden behind "Show all" - * - * Exception: if groups 1–4 are all empty, up to MIN_VISIBLE expired courses - * are shown directly so the section is never blank for an enrolled user. - * The section is hidden entirely only when there are no enrollments at all. - */ -const AllEnrollmentsDisplay: React.FC = () => { - const [upgradeError, setUpgradeError] = React.useState(null) - const { data: enrolledCourses, isLoading: courseEnrollmentsLoading } = - useQuery(enrollmentQueries.courseRunEnrollmentsList()) - - const contracts = useQuery({ - ...mitxUserQueries.me(), // this query has the contracts and should already be loaded - select: (user) => user.b2b_organizations.flatMap((org) => org.contracts), - }) - const { data: programEnrollments, isLoading: programEnrollmentsLoading } = - useQuery(enrollmentQueries.programEnrollmentsList()) - const nonContractProgramEnrollments = - contracts.data && programEnrollments - ? getNonContractProgramEnrollments(programEnrollments, contracts.data) - : [] - const enrolledProgramIds = nonContractProgramEnrollments.map( - (enrollment) => enrollment.program.id, - ) - - const { data: enrolledPrograms, isLoading: enrolledProgramsLoading } = - useQuery({ - ...programsQueries.programsList({ - id: enrolledProgramIds, - page_size: enrolledProgramIds.length, - }), - enabled: enrolledProgramIds.length > 0, - // If the query key changes, show the old data while loading - // example: Deleting a program enrollment - placeholderData: keepPreviousData, - }) - - const filteredProgramEnrollments = enrolledPrograms - ? getTopLevelProgramEnrollments( - nonContractProgramEnrollments, - enrolledPrograms.results, - ) - : [] - - const homeCoursePrograms = enrolledPrograms?.results.filter( - (program) => program.display_mode === DisplayModeEnum.Course, - ) - - const homeCourseProgramModuleIds = [ - ...new Set( - homeCoursePrograms?.flatMap( - (courseProgram) => getIdsFromReqTree(courseProgram.req_tree).courseIds, - ), - ), - ] - - const { - data: homeCourseProgramModuleCourses, - isLoading: homeCourseProgramModuleCoursesLoading, - } = useQuery({ - ...coursesQueries.coursesList({ - id: homeCourseProgramModuleIds, - page_size: homeCourseProgramModuleIds.length || undefined, - }), - enabled: homeCourseProgramModuleIds.length > 0, - placeholderData: keepPreviousData, - }) - - const homeCourseProgramsById = new Map( - (homeCoursePrograms ?? []).map((courseProgram) => [ - courseProgram.id, - courseProgram, - ]), - ) - - const homeModuleCoursesByProgramId = (() => { - const allCourses = homeCourseProgramModuleCourses?.results ?? [] - - return (homeCoursePrograms ?? []).reduce< - Record - >((acc, courseProgram) => { - const courseIds = new Set(courseProgram.courses ?? []) - acc[courseProgram.id] = allCourses.filter((course) => - courseIds.has(course.id), - ) - return acc - }, {}) - })() - - const homeEnrollmentsByCourseId = (enrolledCourses || []).reduce( - (acc, enrollment) => { - const courseId = enrollment.run.course.id - if (!acc[courseId]) { - acc[courseId] = [] - } - acc[courseId].push(enrollment) - return acc - }, - {} as Record, - ) - - const supportEmail = process.env.NEXT_PUBLIC_MITOL_SUPPORT_EMAIL || "" - - const filteredEnrollments = React.useMemo(() => { - if (!enrolledCourses) return [] - return dedupeEnrollments(enrolledCourses, enrolledPrograms?.results ?? []) - }, [enrolledCourses, enrolledPrograms?.results]) - const { completed, expired, started, notStarted } = - sortEnrollments(filteredEnrollments) - - const normallyShown: DashboardResource[] = [ - ...started.map((data) => ({ - data, - type: DashboardType.CourseRunEnrollment, - })), - ...notStarted.map((data) => ({ - data, - type: DashboardType.CourseRunEnrollment, - })), - ...completed.map((data) => ({ - data, - type: DashboardType.CourseRunEnrollment, - })), - ...filteredProgramEnrollments.map((data) => ({ - data, - type: DashboardType.ProgramEnrollment, - })), - ] - const maybeShown: DashboardResource[] = expired.map((data) => ({ - data, - type: DashboardType.CourseRunEnrollment, - })) - const totalCards = normallyShown.length + maybeShown.length - - return totalCards > 0 ? ( - - - My Learning - - {upgradeError && ( - setUpgradeError(null)} - > - {upgradeError}{" "} - - Contact Support - {" "} - for assistance. - - )} - - - ) : null -} - -interface EnrollmentDisplayProps { - programId?: number -} - -const EnrollmentDisplay: React.FC = ({ programId }) => { - if (programId) { - return - } - - return -} - -export { EnrollmentDisplay } +export { ProgramEnrollmentDisplay } diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/dashboardRefactorPlan.md b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/dashboardRefactorPlan.md index d7366bfe29..76749e5220 100644 --- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/dashboardRefactorPlan.md +++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/dashboardRefactorPlan.md @@ -197,10 +197,9 @@ Add focused files under the existing dashboard area. The end state consolidates ```text frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ - hooks/ - useHomeDashboardData.ts - useProgramDashboardData.ts - useContractDashboardData.ts + hooks/ # may not materialize — see Open question after Phase 3 + useProgramDashboardData.ts # location TBD: separate file vs. inlined in component + useContractDashboardData.ts # location TBD: separate file vs. inlined in component model/ dashboardViewModel.ts dashboardAdapters.ts @@ -208,9 +207,9 @@ frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ Responsibilities: -- `hooks/useHomeDashboardData.ts`: owns home queries, home enrollment sorting, home program-as-course data assembly, and loading aggregation. -- `hooks/useProgramDashboardData.ts`: owns program detail query, course/enrollment/program enrollment joins, requirement-section construction, language options, slot assembly, and program-as-course slot context. -- `hooks/useContractDashboardData.ts`: owns contract-scoped courses/programs/collections, contract enrollment filtering, program filtering, collection shaping, language options, slot assembly, and loading aggregation. +- `useHomeDashboardData` (composer): owns home queries, home enrollment sorting, home program-as-course data assembly, and loading aggregation. **As shipped in Phase 3, inlined as a private function inside `HomeEnrollmentsDashboard.tsx` rather than a standalone file** — see Open question after Phase 3. +- `useProgramDashboardData` (composer): owns program detail query, course/enrollment/program enrollment joins, requirement-section construction, language options, slot assembly, and program-as-course slot context. Location decided per Open question. +- `useContractDashboardData` (composer): owns contract-scoped courses/programs/collections, contract enrollment filtering, program filtering, collection shaping, language options, slot assembly, and loading aggregation. Location decided per Open question. - `model/dashboardViewModel.ts`: the **single pure-model home**. Owns the canonical types (`DashboardCourseSlot`, section shapes, home buckets), grouping helpers, slot constructors, requirement-section builders, language-option computation, the composite slot/language resolver introduced in Phase 2, the renamed display-policy helper, and Cases 2 + 3 of `getResolvedRunForSelectedLanguage`. By Phase 7's end, every pure helper that survives the cleanup lives here. - `model/dashboardAdapters.ts`: temporary adapters from the new view model to current `DashboardCard` / `ProgramAsCourseCard` props. Deletion candidate at Phase 7 — its lifespan ends when `CoursewareCard` consumes the slot directly. @@ -218,7 +217,7 @@ Responsibilities: | File | Layer | Knows React? | Knows queries? | Long-term? | | ------------------------------- | -------------------------- | ------------ | -------------- | --------------------------------------- | -| `hooks/useXxxDashboardData.ts` | Composer (data + actions) | Yes | Yes | Yes | +| `useXxxDashboardData` composer | Composer (data + actions) | Yes | Yes | Yes (location: file or inlined; TBD) | | `model/dashboardViewModel.ts` | Pure model — single home | No | No | Yes — load-bearing | | `model/dashboardAdapters.ts` | Pure model (legacy bridge) | No | No | No — deleted in Phase 7 | | `helpers.ts` (existing) | Pure model | No | No | No — absorbed into viewModel by Phase 7 | @@ -293,7 +292,8 @@ This phase also folds in a small, isolated bug fix: enrolled-but-not-enrollable ```bash yarn test frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/languageOptions.test.ts -yarn test frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx +yarn test frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/HomeEnrollmentsDashboard.test.tsx +yarn test frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramEnrollmentDisplay.test.tsx yarn test frontends/main/src/app-pages/DashboardPage/ContractContent.test.tsx ``` @@ -316,11 +316,11 @@ Expected: all tests pass; callsite line-counts in the two render components meas **Purpose:** Make the home dashboard easier to reason about without changing its enrollment-flat behavior. -**Files:** +**Files (as shipped):** -- Create: `frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/hooks/useHomeDashboardData.ts` -- Modify: `frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx` -- Test: `frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx` +- Create: `frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/HomeEnrollmentsDashboard.tsx` (extracted from `EnrollmentDisplay.tsx`; carries the inlined `useHomeDashboardData` composer — see Open question) +- Rename: `EnrollmentDisplay.tsx` → `ProgramEnrollmentDisplay.tsx` (wrapper deleted; consumers in `HomeContent.tsx` / `ProgramContent.tsx` now import the dashboards directly) +- Test: `frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/HomeEnrollmentsDashboard.test.tsx` (new) and `ProgramEnrollmentDisplay.test.tsx` (renamed) - [ ] Move home-only queries out of `AllEnrollmentsDisplay`: - course-run enrollments, @@ -337,7 +337,7 @@ Expected: all tests pass; callsite line-counts in the two render components meas - [ ] Keep one card per enrollment on home. - [ ] Keep existing show/hide/expand behavior. - [ ] Keep existing `onUpgradeError` behavior. -- [ ] Update `AllEnrollmentsDisplay` to consume the hook and render as before. +- [ ] Update the home dashboard component to consume the hook and render as before. - [ ] Add or update tests proving: - multiple enrollments for the same course still render as multiple home cards, - B2B contract enrollments are excluded from home buckets as before, @@ -346,30 +346,42 @@ Expected: all tests pass; callsite line-counts in the two render components meas - [ ] Run: ```bash -yarn test frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx +yarn test frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/HomeEnrollmentsDashboard.test.tsx ``` Expected: all tests pass. -**Phase exit check: thin composer.** Per the Working agreement's success criterion, this phase delivers cleanup only if `useHomeDashboardData.ts` is a _composer_, not a re-home of inline orchestration. Concrete checks at exit: +**Phase exit check: thin composer.** Per the Working agreement's success criterion, this phase delivers cleanup only if `useHomeDashboardData` is a _composer_, not a re-home of inline orchestration. Concrete checks at exit: - Hook body line count: target ~80 lines or less, mostly fetch + compose + return. If significantly larger, the hook is implementing logic that belongs in `model/dashboardViewModel.ts`. -- Inline transforms in the hook body: target zero. Anything that loops, filters, sorts, joins, groups, or branches on data shape is a named helper imported from the model layer with its own unit test. +- The hook composes named helpers; it doesn't re-home orchestration. Glue like `enrollments.filter(existingPredicate)` or `enrollments.sort(existingComparator)` is fine — wrapping it in a named helper would be noise. What's not fine: predicates or comparators _defined_ inline, multi-step pipelines that together encode "what the home dashboard means," or grouping/joining inline. Those are named helpers in `model/dashboardViewModel.ts` with their own unit tests. Litmus: if a reader has to read the inline code to learn a domain rule, the rule belongs in a named helper. - Helper test coverage: every transform helper has an isolated unit test, separate from the hook's integration test. -- Consuming callsite shrinkage: `EnrollmentDisplay.tsx`'s home path measurably drops in size because the orchestration moved. +- Consuming callsite shrinkage: the home path drops in size because the orchestration moved into `HomeEnrollmentsDashboard.tsx`'s composer (and the leftover `ProgramEnrollmentDisplay.tsx` no longer carries home concerns). If any of these fails, the phase has relocated complexity rather than reduced it. Stop and split before declaring done. +## Open question (resolve before Phase 4 starts): hook location and testing + +Phase 3's `useHomeDashboardData` ended up inlined as a private function inside `HomeEnrollmentsDashboard.tsx` rather than living in `hooks/`. The reasoning: the hook is glue (composition of named helpers from the model layer), and a standalone hook file with no isolated tests reads as "why no tests?" Inlining keeps the readability split between data and render without orphaning a file. + +Before Phase 4 begins, settle for `useProgramDashboardData` and `useContractDashboardData`: + +- **Location**: separate `hooks/...` file vs inlined in the component file. A separate file should pair with isolated tests, not be orphaned. +- **Test strategy**: integration via the component test (status quo for Phase 3) vs dedicated `renderHook` tests. Integration is slow to bisect when a hook regresses; `renderHook` duplicates mock setup. Contract orchestration is the largest tangle and may justify isolated tests on complexity grounds alone, even if program does not. +- **Language picker**: candidate for its own `useDashboardLanguagePicker(options)` (selected key + reset-on-options-change effect) reusable across program and contract. Where it lives follows the same location decision. + +What the model layer must hold regardless: `buildRequirementSections`, slot constructors, contract-scoped filters (`programHasContractRuns`, `programsInCollections`, `sortedPrograms`), collection shaping. These are domain logic and need named helpers with unit tests no matter where the hook lives. The "thin composer" exit checks apply to the hook function whether it's a file or inline. + ## Phase 4: Extract `useProgramDashboardData` **Purpose:** Move program-dashboard query orchestration, requirement-tree shaping, language policy, and slot construction out of `ProgramEnrollmentDisplay`. **Files:** -- Create: `frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/hooks/useProgramDashboardData.ts` -- Modify: `frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx` +- Add: `useProgramDashboardData` composer (location TBD — see Open question; default per Phase 3 precedent is inlined in `ProgramEnrollmentDisplay.tsx`) +- Modify: `frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramEnrollmentDisplay.tsx` - Modify: `frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.tsx` only if needed for adapter boundaries -- Test: `frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx` +- Test: `frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramEnrollmentDisplay.test.tsx` - Test: `frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.test.tsx` - [ ] Move program detail query and course queries into the hook. @@ -397,18 +409,18 @@ If any of these fails, the phase has relocated complexity rather than reduced it - [ ] Run: ```bash -yarn test frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx +yarn test frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramEnrollmentDisplay.test.tsx yarn test frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.test.tsx ``` Expected: all tests pass. -**Phase exit check: thin composer.** Per the Working agreement's success criterion, this phase delivers cleanup only if `useProgramDashboardData.ts` is a _composer_, not a re-home of inline orchestration. Concrete checks at exit: +**Phase exit check: thin composer.** Per the Working agreement's success criterion, this phase delivers cleanup only if `useProgramDashboardData` is a _composer_, not a re-home of inline orchestration. Concrete checks at exit: - Hook body line count: target ~80 lines or less, mostly fetch + compose + return. Requirement-section construction, enrollment grouping, language-option computation, and slot construction are named helpers in `model/dashboardViewModel.ts` (or `dashboardLanguagePolicy.ts`), not inline code. -- Inline transforms in the hook body: target zero. Anything that loops, filters, sorts, joins, groups, or branches on data shape is a named helper. +- The hook composes named helpers; it doesn't re-home orchestration. Glue like `enrollments.filter(existingPredicate)` or `enrollments.sort(existingComparator)` is fine — wrapping it in a named helper would be noise. What's not fine: predicates or comparators _defined_ inline, multi-step pipelines that together encode "what the program dashboard means," or grouping/joining inline. Those are named helpers in `model/dashboardViewModel.ts` (or `dashboardLanguagePolicy.ts`). - Helper test coverage: `buildRequirementSections`, slot constructors, and grouping helpers each have isolated unit tests. -- Consuming callsite shrinkage: `EnrollmentDisplay.tsx`'s program path measurably drops in size. +- Consuming callsite shrinkage: `ProgramEnrollmentDisplay.tsx`'s program path measurably drops in size. If any of these fails, the phase has relocated complexity rather than reduced it. Stop and split before declaring done. @@ -455,7 +467,7 @@ Expected: all tests pass. **Phase exit check: thin composer.** Per the Working agreement's success criterion, this phase delivers cleanup only if `useContractDashboardData.ts` is a _composer_, not a re-home of inline orchestration. Concrete checks at exit: - Hook body line count: target ~80 lines or less, mostly fetch + compose + return. Contract-scoped filtering (`programHasContractRuns`, `programsInCollections`, `sortedPrograms`), collection shaping, and slot construction are named helpers in `model/dashboardViewModel.ts`, not inline code. -- Inline transforms in the hook body: target zero. Anything that loops, filters, sorts, joins, groups, or branches on data shape is a named helper. +- The hook composes named helpers; it doesn't re-home orchestration. Glue like `enrollments.filter(existingPredicate)` or `enrollments.sort(existingComparator)` is fine — wrapping it in a named helper would be noise. What's not fine: predicates or comparators _defined_ inline, multi-step pipelines that together encode "what the contract dashboard means," or grouping/joining inline. Those are named helpers in `model/dashboardViewModel.ts`. - Helper test coverage: each contract-scoping helper has an isolated unit test that does not require mounting the full dashboard. - Consuming callsite shrinkage: `ContractContent.tsx` measurably drops in size — this is the most-watched signal because contract orchestration is currently the largest single tangle. - B2B-specific concern: shared helpers between `useProgramDashboardData` and `useContractDashboardData` are explicitly identified. If the same logic is being inlined twice instead of factored once, fix it before declaring done. @@ -464,16 +476,17 @@ If any of these fails, the phase has relocated complexity rather than reduced it ## Phase 6: Shrink render components -**Purpose:** Make `EnrollmentDisplay.tsx` and `ContractContent.tsx` mostly presentational after their data composers exist. +**Purpose:** Make `HomeEnrollmentsDashboard.tsx`, `ProgramEnrollmentDisplay.tsx`, and `ContractContent.tsx` mostly presentational after their data composers exist. **Files:** -- Modify: `frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx` +- Modify: `frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/HomeEnrollmentsDashboard.tsx` +- Modify: `frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramEnrollmentDisplay.tsx` - Modify: `frontends/main/src/app-pages/DashboardPage/ContractContent.tsx` - Modify: `frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.tsx` if module-slot inputs are now available - Test: existing dashboard tests touched above -- [ ] Remove now-duplicated inline query and grouping code from `EnrollmentDisplay.tsx`. +- [ ] Remove now-duplicated inline query and grouping code from `HomeEnrollmentsDashboard.tsx` and `ProgramEnrollmentDisplay.tsx`. - [ ] Remove now-duplicated inline query and grouping code from `ContractContent.tsx`. - [ ] Keep UI state that is truly UI-only in components: - selected language key, @@ -486,7 +499,8 @@ If any of these fails, the phase has relocated complexity rather than reduced it - [ ] Run: ```bash -yarn test frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx +yarn test frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/HomeEnrollmentsDashboard.test.tsx +yarn test frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramEnrollmentDisplay.test.tsx yarn test frontends/main/src/app-pages/DashboardPage/ContractContent.test.tsx yarn test frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.test.tsx ``` @@ -511,7 +525,7 @@ This is a structural unification, not a redesign. Each variant must reproduce to - `contractCourse` — only if contract-specific behavior cannot be expressed via existing variant inputs (`contractId`, `useVerifiedEnrollment`); prefer to fold this into `courseEnrollment` / `unenrolledCourse` rather than add a variant. - [ ] For each variant, write a test that asserts byte-for-byte rendering parity with the corresponding case in today's `DashboardCard.test.tsx` / `ModuleCard.test.tsx`. Port — don't rewrite — these tests against `CoursewareCard`. - [ ] Migrate callsites in this order, with the prior step verified before moving on: - 1. Home dashboard (`AllEnrollmentsDisplay`) — lowest risk; one card per enrollment, V3 data. + 1. Home dashboard (`HomeEnrollmentsDashboard`) — lowest risk; one card per enrollment, V3 data. 2. Program-as-course rows (`ProgramAsCourseCard`) — replaces `ModuleCard` usage; localized to one component. 3. Program dashboard (`ProgramEnrollmentDisplay`) — slot-driven by Phase 4's hook. 4. Contract dashboard (`ContractContent.tsx`) — highest risk; B2B paths. @@ -564,7 +578,8 @@ Do not answer these in this refactor: Run targeted tests after each phase. Before merging the final phase in a PR series, run: ```bash -yarn test frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx +yarn test frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/HomeEnrollmentsDashboard.test.tsx +yarn test frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramEnrollmentDisplay.test.tsx yarn test frontends/main/src/app-pages/DashboardPage/ContractContent.test.tsx yarn test frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.test.tsx yarn test frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/languageOptions.test.ts @@ -624,7 +639,11 @@ Test files (`*.test.tsx`, `*.test.ts`) are omitted for brevity. Each non-test so - DashboardCard.tsx deleted (Phase 7) - ModuleCard.tsx deleted (Phase 7) + CoursewareCard.tsx new (Phase 7) — unified router -~ EnrollmentDisplay.tsx shrinks substantially (Phase 3, 4, 6) ++ HomeEnrollmentsDashboard.tsx new (Phase 3) — extracted from EnrollmentDisplay.tsx; + carries inlined useHomeDashboardData composer +~ ProgramEnrollmentDisplay.tsx renamed from EnrollmentDisplay.tsx (Phase 3); + shrinks substantially (Phase 4, 6); will carry + useProgramDashboardData composer (Phase 4) ~ ProgramAsCourseCard.tsx uses CoursewareCard moduleRow (Phase 7) ~ OrganizationCards.tsx decouples DashboardCardRoot (Phase 7) ~ DashboardDialogs.tsx may shift if dialog wiring moves (Phase 7) @@ -645,15 +664,13 @@ Test files (`*.test.tsx`, `*.test.ts`) are omitted for brevity. Each non-test so absorbed contents of helpers.ts + languageOptions.ts (Phase 7) + dashboardAdapters.ts temp adapter — may be deleted in Phase 7 -+ hooks/ new directory (Phase 3–5) -+ useHomeDashboardData.ts Phase 3 -+ useProgramDashboardData.ts Phase 4 -+ useContractDashboardData.ts Phase 5 + # No hooks/ directory: useHomeDashboardData was inlined in HomeEnrollmentsDashboard.tsx (Phase 3). + # Location of useProgramDashboardData / useContractDashboardData (Phase 4–5) TBD per Open question. ``` **Reading notes:** - The `language/` directory is bracketed by Phase 2's exit decision — it's only created if the existing primitives become internal. Otherwise the composite is added to `languageOptions.ts` and no new file appears. - `model/dashboardAdapters.ts` shows up as new in Phase 1 but is a deletion candidate in Phase 7 — its lifespan depends on whether `CoursewareCard` consumes the slot directly without translation. -- Net file-count effect: roughly +6 to +9 added, –4 deleted; the surviving render-heavy components (`EnrollmentDisplay.tsx`, `ContractContent.tsx`) shrink substantially. +- Net file-count effect: roughly +5 to +8 added, –4 deleted (no `hooks/` directory after Phase 3 chose to inline composers); the surviving render-heavy components (`HomeEnrollmentsDashboard.tsx`, `ProgramEnrollmentDisplay.tsx`, `ContractContent.tsx`) shrink substantially. - The biggest LoC win is the deletion of `DashboardCard.tsx` (~1099 lines) and `ModuleCard.tsx` (~933 lines). New files are smaller and single-purpose. diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/model/dashboardViewModel.test.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/model/dashboardViewModel.test.ts index 561d244e1a..5f6cdbab89 100644 --- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/model/dashboardViewModel.test.ts +++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/model/dashboardViewModel.test.ts @@ -1,8 +1,17 @@ +import { DisplayModeEnum } from "@mitodl/mitxonline-api-axios/v2" import { factories } from "api/mitxonline-test-utils" import { + bucketAndSortHomeEnrollments, + enrollmentCourseIsInPrograms, getDistinctDashboardLanguageOptions, + getModuleCourseIdsFromPrograms, + getNonContractProgramEnrollments, + getTopLevelProgramEnrollments, groupCourseRunEnrollmentsByCourseId, + groupModuleCoursesByProgramId, groupProgramEnrollmentsByProgramId, + isNonContractEnrollment, + isProgramAsCourse, pickDisplayedEnrollmentForLegacyDashboard, resolveSlotForLanguage, } from "./dashboardViewModel" @@ -63,30 +72,25 @@ describe("dashboardViewModel", () => { }) describe("groupCourseRunEnrollmentsByCourseId", () => { - test("groups enrollments by the course that owns their run", () => { - const run1 = factories.courses.courseRun({ id: 11 }) - const run2 = factories.courses.courseRun({ id: 22 }) - const course1 = factories.courses.course({ id: 1, courseruns: [run1] }) - const course2 = factories.courses.course({ id: 2, courseruns: [run2] }) - - const enrollment1 = factories.enrollment.courseEnrollment({ - run: { id: 11 }, + test("groups enrollments by their run's course id", () => { + const enrollmentA1 = factories.enrollment.courseEnrollment({ + run: { course: { id: 1 } }, }) - const enrollment2 = factories.enrollment.courseEnrollment({ - run: { id: 22 }, + const enrollmentA2 = factories.enrollment.courseEnrollment({ + run: { course: { id: 1 } }, }) - const unknownRunEnrollment = factories.enrollment.courseEnrollment({ - run: { id: 999 }, + const enrollmentB = factories.enrollment.courseEnrollment({ + run: { course: { id: 2 } }, }) - const grouped = groupCourseRunEnrollmentsByCourseId( - [course1, course2], - [enrollment1, enrollment2, unknownRunEnrollment], - ) + const grouped = groupCourseRunEnrollmentsByCourseId([ + enrollmentA1, + enrollmentA2, + enrollmentB, + ]) - expect(grouped[1]).toEqual([enrollment1]) - expect(grouped[2]).toEqual([enrollment2]) - expect(grouped[999]).toBeUndefined() + expect(grouped[1]).toEqual([enrollmentA1, enrollmentA2]) + expect(grouped[2]).toEqual([enrollmentB]) }) }) @@ -109,6 +113,314 @@ describe("dashboardViewModel", () => { }) }) + describe("isProgramAsCourse", () => { + test("matches programs whose display_mode is Course", () => { + const courseProgram = factories.programs.program({ + display_mode: DisplayModeEnum.Course, + }) + const regularProgram = factories.programs.program({ display_mode: null }) + expect(isProgramAsCourse(courseProgram)).toBe(true) + expect(isProgramAsCourse(regularProgram)).toBe(false) + }) + }) + + describe("isNonContractEnrollment", () => { + test("matches enrollments with no b2b_contract_id", () => { + const nonContract = factories.enrollment.courseEnrollment({ + b2b_contract_id: null, + }) + const contract = factories.enrollment.courseEnrollment({ + b2b_contract_id: 42, + }) + expect(isNonContractEnrollment(nonContract)).toBe(true) + expect(isNonContractEnrollment(contract)).toBe(false) + }) + }) + + describe("enrollmentCourseIsInPrograms", () => { + test("returns predicate matching enrollments whose course id appears in any program", () => { + const programA = factories.programs.program({ courses: [10, 11] }) + const programB = factories.programs.program({ courses: [20] }) + const inA = factories.enrollment.courseEnrollment({ + run: { course: { id: 10 } }, + }) + const inB = factories.enrollment.courseEnrollment({ + run: { course: { id: 20 } }, + }) + const outside = factories.enrollment.courseEnrollment({ + run: { course: { id: 99 } }, + }) + + const isCovered = enrollmentCourseIsInPrograms([programA, programB]) + expect([inA, inB, outside].filter(isCovered)).toEqual([inA, inB]) + }) + }) + + describe("getNonContractProgramEnrollments", () => { + test("excludes program enrollments whose program is in any contract", () => { + const inContract = factories.enrollment.programEnrollmentV3({ + program: factories.programs.program({ id: 1 }), + }) + const standalone = factories.enrollment.programEnrollmentV3({ + program: factories.programs.program({ id: 2 }), + }) + const contracts = [factories.contracts.contract({ programs: [1] })] + + expect( + getNonContractProgramEnrollments([inContract, standalone], contracts), + ).toEqual([standalone]) + }) + }) + + describe("getTopLevelProgramEnrollments", () => { + test("excludes program enrollments whose program is a child in another program's req_tree", () => { + const childProgram = factories.programs.program({ id: 50 }) + const parentProgram = factories.programs.program({ + id: 51, + req_tree: [ + { + id: 1, + data: { + node_type: "operator", + operator: "all_of", + operator_value: null, + elective_flag: false, + title: null, + course: null, + required_program: null, + }, + children: [ + { + id: 2, + data: { + node_type: "program", + required_program: childProgram.id, + operator: null, + operator_value: null, + elective_flag: false, + title: null, + course: null, + }, + children: [], + }, + ], + }, + ], + }) + const childEnrollment = factories.enrollment.programEnrollmentV3({ + program: childProgram, + }) + const parentEnrollment = factories.enrollment.programEnrollmentV3({ + program: parentProgram, + }) + + expect( + getTopLevelProgramEnrollments( + [childEnrollment, parentEnrollment], + [parentProgram], + ), + ).toEqual([parentEnrollment]) + }) + }) + + describe("getModuleCourseIdsFromPrograms", () => { + test("returns the distinct set of course ids referenced anywhere in the programs' req_trees", () => { + const program = factories.programs.program({ + req_tree: [ + { + id: 1, + data: { + node_type: "operator", + operator: "all_of", + operator_value: null, + elective_flag: false, + title: null, + course: null, + required_program: null, + }, + children: [ + { + id: 2, + data: { + node_type: "course", + course: 100, + operator: null, + operator_value: null, + elective_flag: false, + title: null, + required_program: null, + }, + children: [], + }, + { + id: 3, + data: { + node_type: "course", + course: 200, + operator: null, + operator_value: null, + elective_flag: false, + title: null, + required_program: null, + }, + children: [], + }, + { + id: 4, + data: { + node_type: "course", + course: 100, + operator: null, + operator_value: null, + elective_flag: false, + title: null, + required_program: null, + }, + children: [], + }, + ], + }, + ], + }) + + expect(getModuleCourseIdsFromPrograms([program]).sort()).toEqual([ + 100, 200, + ]) + }) + + test("dedupes course ids across multiple programs", () => { + const makeCourseLeaf = (id: number, courseId: number) => ({ + id, + data: { + node_type: "course" as const, + course: courseId, + operator: null, + operator_value: null, + elective_flag: false, + title: null, + required_program: null, + }, + children: [], + }) + const makeProgram = (programId: number, courseIds: number[]) => + factories.programs.program({ + id: programId, + req_tree: [ + { + id: programId * 10, + data: { + node_type: "operator", + operator: "all_of", + operator_value: null, + elective_flag: false, + title: null, + course: null, + required_program: null, + }, + children: courseIds.map((c) => makeCourseLeaf(c + programId, c)), + }, + ], + }) + + const programA = makeProgram(1, [100, 200]) + const programB = makeProgram(2, [200, 300]) + + expect( + getModuleCourseIdsFromPrograms([programA, programB]).sort(), + ).toEqual([100, 200, 300]) + }) + }) + + describe("groupModuleCoursesByProgramId", () => { + test("indexes courses by the program whose courses[] lists them", () => { + const programA = factories.programs.program({ id: 1, courses: [10, 11] }) + const programB = factories.programs.program({ id: 2, courses: [20] }) + const course10 = factories.courses.course({ id: 10 }) + const course11 = factories.courses.course({ id: 11 }) + const course20 = factories.courses.course({ id: 20 }) + const courseUnreferenced = factories.courses.course({ id: 99 }) + + const grouped = groupModuleCoursesByProgramId( + [programA, programB], + [course10, course11, course20, courseUnreferenced], + ) + + expect(grouped[1]).toEqual([course10, course11]) + expect(grouped[2]).toEqual([course20]) + }) + + test("maps program with empty courses[] to an empty array", () => { + const program = factories.programs.program({ id: 1, courses: [] }) + const course = factories.courses.course({ id: 10 }) + expect(groupModuleCoursesByProgramId([program], [course])).toEqual({ + 1: [], + }) + }) + }) + + describe("bucketAndSortHomeEnrollments", () => { + const past = new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString() + const future = new Date(Date.now() + 1000 * 60 * 60 * 24).toISOString() + + test("buckets enrollments by status and sorts each bucket", () => { + const completedEnrollment = factories.enrollment.courseEnrollment({ + grades: [factories.enrollment.grade({ grade: 0.9, passed: true })], + run: { course: { title: "Zeta" } }, + }) + const expiredEnrollment = factories.enrollment.courseEnrollment({ + run: { start_date: past, end_date: past, course: { title: "Alpha" } }, + }) + const startedAlpha = factories.enrollment.courseEnrollment({ + run: { start_date: past, end_date: future, course: { title: "Alpha" } }, + }) + const startedBeta = factories.enrollment.courseEnrollment({ + run: { start_date: past, end_date: future, course: { title: "Beta" } }, + }) + const notStartedSooner = factories.enrollment.courseEnrollment({ + run: { + start_date: future, + end_date: null, + course: { title: "Late" }, + }, + }) + const notStartedLater = factories.enrollment.courseEnrollment({ + run: { + start_date: new Date( + Date.now() + 1000 * 60 * 60 * 24 * 7, + ).toISOString(), + end_date: null, + course: { title: "Earlier-by-title-but-later-by-date" }, + }, + }) + + const buckets = bucketAndSortHomeEnrollments([ + notStartedLater, + startedBeta, + startedAlpha, + notStartedSooner, + expiredEnrollment, + completedEnrollment, + ]) + + expect(buckets.completed).toEqual([completedEnrollment]) + expect(buckets.expired).toEqual([expiredEnrollment]) + expect(buckets.started).toEqual([startedAlpha, startedBeta]) + expect(buckets.notStarted).toEqual([notStartedSooner, notStartedLater]) + }) + + test("classifies a completed enrollment whose end_date has passed as completed, not expired", () => { + const completedAndExpired = factories.enrollment.courseEnrollment({ + grades: [factories.enrollment.grade({ grade: 0.9, passed: true })], + run: { start_date: past, end_date: past }, + }) + + const buckets = bucketAndSortHomeEnrollments([completedAndExpired]) + + expect(buckets.completed).toEqual([completedAndExpired]) + expect(buckets.expired).toEqual([]) + }) + }) + describe("getDistinctDashboardLanguageOptions", () => { test("includes enrollment language not present in enrollable language options", () => { const englishRun = factories.courses.courseRun({ diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/model/dashboardViewModel.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/model/dashboardViewModel.ts index 942baadbc5..02722357e8 100644 --- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/model/dashboardViewModel.ts +++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/model/dashboardViewModel.ts @@ -8,13 +8,22 @@ */ import type { SimpleSelectOption } from "ol-components" import type { + BaseProgramDisplayMode, + ContractPage, CourseRunEnrollmentV3, CourseRunLanguageOption, CourseRunV2, CourseWithCourseRunsSerializerV2, + V2ProgramDetail, V3UserProgramEnrollment, } from "@mitodl/mitxonline-api-axios/v2" -import { selectBestEnrollment } from "../helpers" +import { DisplayModeEnum } from "@mitodl/mitxonline-api-axios/v2" +import { getIdsFromReqTree } from "@/common/mitxonline" +import { + EnrollmentStatus, + getEnrollmentStatus, + selectBestEnrollment, +} from "../helpers" import { getNativeLanguageName, // below five are used only for resolveSlotForLanguage @@ -91,23 +100,11 @@ const pickDisplayedEnrollmentForLegacyDashboard = ( } const groupCourseRunEnrollmentsByCourseId = ( - courses: CourseWithCourseRunsSerializerV2[], enrollments: CourseRunEnrollmentV3[], ): Record => { - const runIdToCourseId = new Map() - courses.forEach((course) => { - course.courseruns.forEach((run) => { - runIdToCourseId.set(run.id, course.id) - }) - }) - return enrollments.reduce>( (acc, enrollment) => { - const courseId = runIdToCourseId.get(enrollment.run.id) - if (!courseId) { - return acc - } - + const courseId = enrollment.run.course.id acc[courseId] = [...(acc[courseId] ?? []), enrollment] return acc }, @@ -127,6 +124,156 @@ const groupProgramEnrollmentsByProgramId = ( ) } +const isProgramAsCourse = (program: { + display_mode?: BaseProgramDisplayMode | null +}) => program.display_mode === DisplayModeEnum.Course + +const isNonContractEnrollment = (enrollment: CourseRunEnrollmentV3) => + !enrollment.b2b_contract_id + +/** + * Closure-factory predicate: returns a predicate that tests whether an + * enrollment's course id appears in any of the given programs' `courses[]`. + * The Set is built once per factory call and reused across the predicate's + * invocations, so the natural usage is `enrollments.filter(predicate)`. + */ +const enrollmentCourseIsInPrograms = (programs: V2ProgramDetail[]) => { + const coveredCourseIds = new Set(programs.flatMap((p) => p.courses)) + return (enrollment: CourseRunEnrollmentV3) => + coveredCourseIds.has(enrollment.run.course.id) +} + +const getNonContractProgramEnrollments = ( + programEnrollments: V3UserProgramEnrollment[], + contracts: ContractPage[], +) => { + const contractPrograms = new Set( + contracts.flatMap((contract) => contract.programs), + ) + return programEnrollments.filter( + (enrollment) => !contractPrograms.has(enrollment.program.id), + ) +} + +const getTopLevelProgramEnrollments = ( + programEnrollments: V3UserProgramEnrollment[], + programs: V2ProgramDetail[], +) => { + const childIds = new Set( + programs.flatMap( + (program) => getIdsFromReqTree(program.req_tree).programIds, + ), + ) + return programEnrollments.filter( + (enrollment) => !childIds.has(enrollment.program.id), + ) +} + +/** + * Distinct course ids referenced anywhere in the given programs' req_trees. + * Used to drive the home dashboard's program-as-course module course query. + */ +const getModuleCourseIdsFromPrograms = ( + programs: V2ProgramDetail[], +): number[] => { + return [ + ...new Set( + programs.flatMap( + (program) => getIdsFromReqTree(program.req_tree).courseIds, + ), + ), + ] +} + +/** + * For each program, the subset of `courses` whose ids appear in + * `program.courses[]`. Used by both home and program dashboards to wire + * program-as-course module data into the cards that render it. + */ +const groupModuleCoursesByProgramId = ( + programs: V2ProgramDetail[], + courses: CourseWithCourseRunsSerializerV2[], +): Record => { + return programs.reduce>( + (acc, program) => { + const programCourseIds = new Set(program.courses) + acc[program.id] = courses.filter((course) => + programCourseIds.has(course.id), + ) + return acc + }, + {}, + ) +} + +const byTitle = (a: CourseRunEnrollmentV3, b: CourseRunEnrollmentV3) => + a.run.course.title.localeCompare(b.run.course.title) + +const byStartsSooner = (a: CourseRunEnrollmentV3, b: CourseRunEnrollmentV3) => { + if (!a.run.start_date && !b.run.start_date) return 0 + if (!a.run.start_date) return 1 + if (!b.run.start_date) return -1 + return ( + new Date(a.run.start_date).getTime() - new Date(b.run.start_date).getTime() + ) +} + +type HomeEnrollmentBuckets = { + started: CourseRunEnrollmentV3[] + notStarted: CourseRunEnrollmentV3[] + completed: CourseRunEnrollmentV3[] + expired: CourseRunEnrollmentV3[] +} + +/** + * Bucket enrollments into the four home-dashboard sections and sort each + * bucket. Assumes input is already filtered to the enrollments the home + * dashboard renders (e.g. non-contract). + * + * Bucket policy: + * - completed: any passing grade + * - expired: end_date in the past + * - started: start_date in the past, not expired, not completed + * - notStarted: everything else + * + * Sort policy: alphabetical by course title in every bucket except + * notStarted, which is sorted by start_date ascending. + */ +const bucketAndSortHomeEnrollments = ( + enrollments: CourseRunEnrollmentV3[], +): HomeEnrollmentBuckets => { + const now = new Date() + const buckets: HomeEnrollmentBuckets = { + started: [], + notStarted: [], + completed: [], + expired: [], + } + enrollments.forEach((enrollment) => { + if (getEnrollmentStatus(enrollment) === EnrollmentStatus.Completed) { + buckets.completed.push(enrollment) + } else if ( + enrollment.run.end_date && + new Date(enrollment.run.end_date) < now + ) { + buckets.expired.push(enrollment) + } else if ( + enrollment.run.start_date && + new Date(enrollment.run.start_date) < now + ) { + buckets.started.push(enrollment) + } else { + buckets.notStarted.push(enrollment) + } + }) + return { + started: buckets.started.sort(byTitle), + notStarted: buckets.notStarted.sort(byStartsSooner), + completed: buckets.completed.sort(byTitle), + expired: buckets.expired.sort(byTitle), + } +} + /** * The mitxonline API emits language codes in POSIX form (`de_de`, * `pt_br`, `zh_hans`); convert to BCP 47 (`de-de`, `pt-br`, `zh-hans`) @@ -286,4 +433,12 @@ export { groupProgramEnrollmentsByProgramId, resolveSlotForLanguage, getDistinctDashboardLanguageOptions, + isProgramAsCourse, + isNonContractEnrollment, + enrollmentCourseIsInPrograms, + getNonContractProgramEnrollments, + getTopLevelProgramEnrollments, + getModuleCourseIdsFromPrograms, + groupModuleCoursesByProgramId, + bucketAndSortHomeEnrollments, } diff --git a/frontends/main/src/app-pages/DashboardPage/HomeContent.tsx b/frontends/main/src/app-pages/DashboardPage/HomeContent.tsx index f11d02106c..12f322701c 100644 --- a/frontends/main/src/app-pages/DashboardPage/HomeContent.tsx +++ b/frontends/main/src/app-pages/DashboardPage/HomeContent.tsx @@ -13,7 +13,7 @@ import { FREE_COURSES_CAROUSEL, } from "@/common/carousels" import ResourceCarousel from "@/page-components/ResourceCarousel/ResourceCarousel" -import { EnrollmentDisplay } from "./CoursewareDisplay/EnrollmentDisplay" +import { HomeEnrollmentsDashboard } from "./CoursewareDisplay/HomeEnrollmentsDashboard" import { useFeatureFlagEnabled } from "posthog-js/react" import { FeatureFlags } from "@/common/feature_flags" import { useUserMe } from "api/hooks/user" @@ -101,7 +101,7 @@ const HomeContent: React.FC = () => { - {showEnrollments ? : null} + {showEnrollments ? : null} ({ - EnrollmentDisplay: jest.fn(({ programId }) => ( -
- Mocked EnrollmentDisplay with programId: {programId} +jest.mock("./CoursewareDisplay/ProgramEnrollmentDisplay", () => ({ + ProgramEnrollmentDisplay: jest.fn(({ programId }) => ( +
+ Mocked ProgramEnrollmentDisplay with programId: {programId}
)), })) describe("ProgramContent", () => { - test("renders EnrollmentDisplay with programId prop", () => { + test("renders ProgramEnrollmentDisplay with programId prop", () => { const programId = 123 renderWithProviders() - const enrollmentDisplay = screen.getByTestId("enrollment-display") - expect(enrollmentDisplay).toBeInTheDocument() - expect(enrollmentDisplay).toHaveAttribute("data-program-id", "123") + const programEnrollmentDisplay = screen.getByTestId( + "program-enrollment-display", + ) + expect(programEnrollmentDisplay).toBeInTheDocument() + expect(programEnrollmentDisplay).toHaveAttribute("data-program-id", "123") }) - test("passes correct programId to EnrollmentDisplay", () => { + test("passes correct programId to ProgramEnrollmentDisplay", () => { const programId = 456 renderWithProviders() expect( - screen.getByText(`Mocked EnrollmentDisplay with programId: ${programId}`), + screen.getByText( + `Mocked ProgramEnrollmentDisplay with programId: ${programId}`, + ), ).toBeInTheDocument() }) test("handles different programId values", () => { const { view } = renderWithProviders() - expect(screen.getByTestId("enrollment-display")).toHaveAttribute( + expect(screen.getByTestId("program-enrollment-display")).toHaveAttribute( "data-program-id", "1", ) view.rerender() - expect(screen.getByTestId("enrollment-display")).toHaveAttribute( + expect(screen.getByTestId("program-enrollment-display")).toHaveAttribute( "data-program-id", "999", ) diff --git a/frontends/main/src/app-pages/DashboardPage/ProgramContent.tsx b/frontends/main/src/app-pages/DashboardPage/ProgramContent.tsx index 3737564948..5d0388233d 100644 --- a/frontends/main/src/app-pages/DashboardPage/ProgramContent.tsx +++ b/frontends/main/src/app-pages/DashboardPage/ProgramContent.tsx @@ -1,14 +1,14 @@ "use client" import React from "react" -import { EnrollmentDisplay } from "./CoursewareDisplay/EnrollmentDisplay" +import { ProgramEnrollmentDisplay } from "./CoursewareDisplay/ProgramEnrollmentDisplay" interface ProgramContentProps { programId: number } const ProgramContent: React.FC = ({ programId }) => { - return + return } export default ProgramContent