From 7e60332dbb683cad00593fbfafa8ec58014eb4a6 Mon Sep 17 00:00:00 2001 From: mehanana Date: Mon, 8 Jun 2026 23:01:35 -0400 Subject: [PATCH 1/3] updated the staff card component and fixed the tests to match --- .../frontend/src/app/components/StaffCard.tsx | 43 ++++++++++++++----- .../test/components/StaffCard.test.tsx | 35 +++++++++++---- 2 files changed, 58 insertions(+), 20 deletions(-) diff --git a/apps/frontend/src/app/components/StaffCard.tsx b/apps/frontend/src/app/components/StaffCard.tsx index b69a41d6..17cac58e 100644 --- a/apps/frontend/src/app/components/StaffCard.tsx +++ b/apps/frontend/src/app/components/StaffCard.tsx @@ -3,32 +3,53 @@ import React from 'react'; import Image from 'next/image'; import { useState } from 'react'; import { PiUserCircleThin } from "react-icons/pi"; +import { MdOutlineMail } from "react-icons/md"; interface StaffCardProps { image?: string; name: string; + title?: string; + email: string; } export default function StaffCard({ image, - name + name, + title, + email }: StaffCardProps) { const [imgError, setImgError] = useState(false); return ( -
-
- {(image && !imgError) ? ( - Staff setImgError(true)}/> - ) : ( -
- -
- )} +
+
+ {(image && !imgError) ? ( + Staff setImgError(true)}/> + ) : ( +
+ +
+ )} +
+ +
+

+ {name}{title ? `, ${title}` : ''} +

+ -

{name}

+
) } diff --git a/apps/frontend/test/components/StaffCard.test.tsx b/apps/frontend/test/components/StaffCard.test.tsx index 1999ffe5..fb1f723f 100644 --- a/apps/frontend/test/components/StaffCard.test.tsx +++ b/apps/frontend/test/components/StaffCard.test.tsx @@ -1,33 +1,50 @@ import { render, screen, fireEvent } from '../utils'; import StaffCard from '@/app/components/StaffCard'; -describe ('StaffCard', () => { +describe('StaffCard', () => { it('renders the placeholder image when no image given', () => { - render(); + render(); expect(document.querySelector('[data-testid="staff-placeholder"]')).toBeInTheDocument(); }); - it('renders the placeholder image when image given image has error', () => { - render(); + it('renders the placeholder image when given image has error', () => { + render(); const img = document.querySelector('img'); fireEvent.error(img!); expect(document.querySelector('[data-testid="staff-placeholder"]')).toBeInTheDocument(); }); it('renders the given image', () => { - render(); + render(); const img = document.querySelector('img'); expect(img).toHaveAttribute('src', expect.stringContaining('test.jpg')); }); it('renders the name', () => { - render(); + render(); + expect(screen.getByText('name')).toBeInTheDocument(); + }); + + it('renders the name with title appended', () => { + render(); + expect(screen.getByText('Allen F. Shaughnessy, PharmD')).toBeInTheDocument(); + }); + + it('renders the name without title when title not given', () => { + render(); expect(screen.getByText('name')).toBeInTheDocument(); }); it('long name is wrapped', () => { - render(); + render(); const name = screen.getByText('superduper longname'); - expect(name).toHaveClass('break-words'); + expect(name).toHaveClass('break-words'); + }); + + it('renders the email with a mailto compose link', () => { + render(); + const link = screen.getByText('test@gmail.com'); + expect(link).toBeInTheDocument(); + expect(link).toHaveAttribute('href', expect.stringContaining(encodeURIComponent('test@gmail.com'))); }); -}) \ No newline at end of file +}); \ No newline at end of file From 1a781a3c6d0c06ffba671d3b8051dfc99556da2c Mon Sep 17 00:00:00 2001 From: mehanana Date: Sun, 14 Jun 2026 17:41:39 -0400 Subject: [PATCH 2/3] fixed staff card usages in projects/id and acocunts page; also restructured accountspage into its own page folder instead of keeping it in the components folder --- .../app/{components/AccountsPage.tsx => accounts/page.tsx} | 6 +++--- apps/frontend/src/app/projects/[id]/page.tsx | 2 +- apps/frontend/test/components/AccountsPage.test.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) rename apps/frontend/src/app/{components/AccountsPage.tsx => accounts/page.tsx} (96%) diff --git a/apps/frontend/src/app/components/AccountsPage.tsx b/apps/frontend/src/app/accounts/page.tsx similarity index 96% rename from apps/frontend/src/app/components/AccountsPage.tsx rename to apps/frontend/src/app/accounts/page.tsx index d6c21871..929f92fd 100644 --- a/apps/frontend/src/app/components/AccountsPage.tsx +++ b/apps/frontend/src/app/accounts/page.tsx @@ -1,7 +1,7 @@ 'use client'; import React from 'react'; -import StaffCard from './StaffCard'; +import StaffCard from '../components/StaffCard'; interface User { user_id: number; @@ -41,13 +41,13 @@ export default function AccountsPage() {

Core BRANCH Facilitation Team

{facilitationTeam.map(user => ( - + ))}

BRANCH Team Members

{teamMembers.map(user => ( - + ))}
diff --git a/apps/frontend/src/app/projects/[id]/page.tsx b/apps/frontend/src/app/projects/[id]/page.tsx index 99f73b04..6d37af05 100644 --- a/apps/frontend/src/app/projects/[id]/page.tsx +++ b/apps/frontend/src/app/projects/[id]/page.tsx @@ -176,7 +176,7 @@ export default function ProjectPage() { ) : (
{members.slice(0, PREVIEW_STAFF).map((member) => ( - + ))}
)} diff --git a/apps/frontend/test/components/AccountsPage.test.tsx b/apps/frontend/test/components/AccountsPage.test.tsx index f006a6bf..1f9e6c90 100644 --- a/apps/frontend/test/components/AccountsPage.test.tsx +++ b/apps/frontend/test/components/AccountsPage.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../utils'; -import AccountsPage, { facilitationTeam, teamMembers } from '@/app/components/AccountsPage'; +import AccountsPage, { facilitationTeam, teamMembers } from '@/app/accounts/page'; describe('AccountsPage', () => { it('renders the headings', () => { From 59f390af1304c64ca54b62f63db8170e01cfc396 Mon Sep 17 00:00:00 2001 From: mehanana Date: Sun, 14 Jun 2026 18:08:26 -0400 Subject: [PATCH 3/3] fixed accounts page frontend to fit the new staffcard design --- apps/frontend/src/app/accounts/page.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/frontend/src/app/accounts/page.tsx b/apps/frontend/src/app/accounts/page.tsx index 929f92fd..16e6ab87 100644 --- a/apps/frontend/src/app/accounts/page.tsx +++ b/apps/frontend/src/app/accounts/page.tsx @@ -36,16 +36,16 @@ export const teamMembers = mockUsers.filter(u => !u.is_admin); export default function AccountsPage() { return ( -
+

Accounts

Core BRANCH Facilitation Team

-
+
{facilitationTeam.map(user => ( ))}

BRANCH Team Members

-
+
{teamMembers.map(user => ( ))}