[JN-568] Alphabetize studies (#568)

ui-admin/src/HomePage.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import HomePage from './HomePage'
+import { makeMockPortal, makeMockPortalStudy } from './test-utils/mocking-utils'
+import { useNavContext } from './navbar/NavContextProvider'
+import { setupRouterTest } from './test-utils/router-testing-utils'
+
+jest.mock('./navbar/NavContextProvider')
+
+describe('HomePage', () => {
+  it('renders the study list in alphabetical order', () => {
+    const portalList = [
+      makeMockPortal('Z Portal', [
+        makeMockPortalStudy('Z Study', 'studyZ'),
+        makeMockPortalStudy('A Study', 'studyA'),
+        makeMockPortalStudy('M Study 1', 'studyM1')
+      ]),
+      makeMockPortal('A Portal', [
+        makeMockPortalStudy('M Study 2', 'studyM2')
+      ])
+    ]
+
+    const mockContextValue = {
+      breadCrumbs: [],
+      setBreadCrumbs: jest.fn(),
+      portalList,
+      setPortalList: jest.fn()
+    }
+
+    ;(useNavContext as jest.Mock).mockReturnValue(mockContextValue)
+
+    const { RoutedComponent } = setupRouterTest(<HomePage/>)
+    render(RoutedComponent)
+
+    expect(screen.getByText('My Studies')).toBeInTheDocument()
+
+    const studies = screen.queryAllByText(/Study/)
+
+    expect(studies[0]).toHaveTextContent('M Study 2') // the study from "A Portal"
+    expect(studies[1]).toHaveTextContent('A Study') // the remaining three studies from "Z Portal"
+    expect(studies[2]).toHaveTextContent('M Study 1')
+    expect(studies[3]).toHaveTextContent('Z Study')
+  })
+})

ui-admin/src/HomePage.tsx

@@ -13,8 +13,8 @@ function HomePage() {
     <div className="ms-5 mt-4">
       <h2 className="h4">My Studies</h2>
       <ul className="list-group list-group-flush fs-5">
-        { portalList.flatMap(portal =>
-          portal.portalStudies.map(portalStudy => {
+        { portalList.sort((a, b) => a.name.localeCompare(b.name)).flatMap(portal =>
+          portal.portalStudies.sort((a, b) => a.study.name.localeCompare(b.study.name)).map(portalStudy => {
             const study = portalStudy.study
             return <li key={`${portal.shortcode}-${study.shortcode}`}
               className="list-group-item my-1 border border-secondary-subtle rounded ">

ui-admin/src/test-utils/mocking-utils.tsx

@@ -8,6 +8,7 @@ import {
   NotificationConfig,
   ParticipantNote,
   Portal,
+  PortalStudy,
   StudyEnvironmentConsent
 } from 'api/api'
 import { Survey } from '@juniper/ui-core/build/types/forms'
@@ -67,6 +68,26 @@ export const mockSurvey: () => Survey = () => ({
   createdAt: 0
 })
 
+/** returns a mock portal study */
+export const makeMockPortalStudy = (name: string, shortcode: string): PortalStudy => {
+  return {
+    study: {
+      name,
+      shortcode,
+      studyEnvironments: []
+    }
+  }
+}
+
+/** returns a mock portal with the specified studies */
+export const makeMockPortal = (name: string, portalStudies: PortalStudy[]) => {
+  return {
+    ...mockPortal(),
+    name,
+    portalStudies
+  }
+}
+
 /** returns a list of survey versions */
 export const mockSurveyVersionsList: () => Survey[] = () => ([
   {