reorganize program collection cards so queries are more efficient and add a test

Author: gumaerc

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

@@ -14,6 +14,7 @@ const currentUser = {
 }
 
 const enrollment = {
+  enrollmentsList: () => `${API_BASE_URL}/api/v1/enrollments/`,
   courseEnrollment: (id?: number) =>
     `${API_BASE_URL}/api/v1/enrollments/${id ? `${id}/` : ""}`,
 }
@@ -26,6 +27,7 @@ const b2b = {
 const programs = {
   programsList: (opts?: ProgramsApiProgramsListV2Request) =>
     `${API_BASE_URL}/api/v2/programs/${queryify(opts)}`,
+  programDetail: (id: number) => `${API_BASE_URL}/api/v2/programs/${id}/`,
 }
 
 const programCollections = {

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts

@@ -135,6 +135,14 @@ const setupProgramsAndCourses = () => {
   setMockResponse.get(urls.programCollections.programCollectionsList(), {
     results: [programCollection],
   })
+  setMockResponse.get(
+    urls.programs.programsList({ id: programA.id, org_id: orgX.id }),
+    { results: [programA] },
+  )
+  setMockResponse.get(
+    urls.programs.programsList({ id: programB.id, org_id: orgX.id }),
+    { results: [programB] },
+  )
   setMockResponse.get(
     urls.courses.coursesList({ id: programA.courses, org_id: orgX.id }),
     {

frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx

@@ -92,4 +92,30 @@ describe("OrganizationContent", () => {
       }
     })
   })
+
+  test("Renders program collections", async () => {
+    const { orgX, programA, programB, programCollection, coursesA, coursesB } =
+      setupProgramsAndCourses()
+    setMockResponse.get(urls.enrollment.enrollmentsList(), [])
+    programCollection.programs = [programA.id, programB.id]
+    setMockResponse.get(urls.programCollections.programCollectionsList(), {
+      results: [programCollection],
+    })
+
+    renderWithProviders(<OrganizationContent orgSlug={orgX.slug} />)
+
+    const collectionHeader = await screen.findByRole("heading", {
+      name: programCollection.title,
+    })
+    expect(collectionHeader).toBeInTheDocument()
+    const collectionItems = await screen.findAllByTestId(
+      "org-program-collection-root",
+    )
+    expect(collectionItems.length).toBe(1)
+    const collection = within(collectionItems[0])
+    expect(collection.getByText(programCollection.title)).toBeInTheDocument()
+    // Check that the first course from each program is displayed
+    expect(collection.getAllByText(coursesA[0].title).length).toBeGreaterThan(0)
+    expect(collection.getAllByText(coursesB[0].title).length).toBeGreaterThan(0)
+  })
 })

frontends/main/src/app-pages/DashboardPage/OrganizationContent.tsx

@@ -108,7 +108,7 @@ const OrgProgramCollectionDisplay: React.FC<{
       </ProgramHeader>
       <PlainList itemSpacing={0}>
         {collection.programIds.map((programId) => (
-          <ProgramCard
+          <ProgramCollectionItem
             key={programId}
             programId={programId}
             enrollments={enrollments}
@@ -165,28 +165,46 @@ const OrgProgramDisplay: React.FC<{
   )
 }
 
-const ProgramCard: React.FC<{
+const ProgramCollectionItem: React.FC<{
   programId: number
   enrollments?: CourseRunEnrollment[]
   orgId: number
 }> = ({ programId, enrollments, orgId }) => {
   const program = useQuery(
     programsQueries.programsList({ id: programId, org_id: orgId }),
   )
+  if (program.isLoading || !program.data?.results.length) {
+    return (
+      <Skeleton width="100%" height="65px" style={{ marginBottom: "16px" }} />
+    )
+  }
+  const transformedProgram = transform.mitxonlineProgram(
+    program.data?.results[0],
+  )
+  return (
+    <ProgramCard
+      program={transformedProgram}
+      enrollments={enrollments}
+      orgId={orgId}
+    />
+  )
+}
+
+const ProgramCard: React.FC<{
+  program: DashboardProgram
+  enrollments?: CourseRunEnrollment[]
+  orgId?: number
+}> = ({ program, enrollments, orgId }) => {
   const courses = useQuery(
     coursesQueries.coursesList({
-      id: program.data?.results[0]?.courses,
+      id: program.courseIds,
       org_id: orgId,
     }),
   )
   const skeleton = (
     <Skeleton width="100%" height="65px" style={{ marginBottom: "16px" }} />
   )
-  if (program.isLoading || !program.data?.results.length) return skeleton
   if (courses.isLoading) return skeleton
-  const transformedProgram = transform.mitxonlineProgram(
-    program.data?.results[0] ?? {},
-  )
   const transformedCourses = transform.mitxonlineCourses({
     courses: courses.data?.results ?? [],
     enrollments: enrollments ?? [],
@@ -197,7 +215,7 @@ const ProgramCard: React.FC<{
   return (
     <DashboardCard
       Component="li"
-      key={transformedProgram.key}
+      key={program.key}
       dashboardResource={course}
       courseNoun={"Course"}
       offerUpgrade={false}