diff --git a/apps/frontend/src/app/components/AccountsPage.tsx b/apps/frontend/src/app/components/AccountsPage.tsx new file mode 100644 index 0000000..d6c2187 --- /dev/null +++ b/apps/frontend/src/app/components/AccountsPage.tsx @@ -0,0 +1,55 @@ +'use client'; + +import React from 'react'; +import StaffCard from './StaffCard'; + +interface User { + user_id: number; + name: string; + email: string; + is_admin: boolean; + created_at?: string; +} + +const mockUsers: User[] = [ + { user_id: 1, name: 'Mehana Nagarur', email: 'nagarur.m@northeastern.edu', is_admin: true }, + { user_id: 2, name: 'Alex Rivera', email: 'rivera.a@northeastern.edu', is_admin: true }, + { user_id: 3, name: 'Jordan Lee', email: 'lee.j@northeastern.edu', is_admin: true }, + { user_id: 4, name: 'Priya Sharma', email: 'sharma.p@northeastern.edu', is_admin: true }, + { user_id: 5, name: 'Chris Nguyen', email: 'nguyen.c@northeastern.edu', is_admin: true }, + { user_id: 6, name: 'Taylor Brooks', email: 'brooks.t@northeastern.edu', is_admin: false }, + { user_id: 7, name: 'Sam Patel', email: 'patel.s@northeastern.edu', is_admin: false }, + { user_id: 8, name: 'Morgan Clarke', email: 'clarke.m@northeastern.edu', is_admin: false }, + { user_id: 9, name: 'Jamie Wu', email: 'wu.j@northeastern.edu', is_admin: false }, + { user_id: 10, name: 'Riley Thompson', email: 'thompson.r@northeastern.edu',is_admin: false }, + { user_id: 11, name: 'Avery Johnson', email: 'johnson.a@northeastern.edu', is_admin: false }, + { user_id: 12, name: 'Casey Martinez', email: 'martinez.c@northeastern.edu',is_admin: false }, + { user_id: 13, name: 'Drew Hassan', email: 'hassan.d@northeastern.edu', is_admin: false }, + { user_id: 14, name: 'Quinn Okafor', email: 'okafor.q@northeastern.edu', is_admin: false }, + { user_id: 15, name: 'Blake Fernandez', email: 'fernandez.b@northeastern.edu',is_admin: false }, +]; + +export const facilitationTeam = mockUsers.filter(u => u.is_admin); +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 => ( + + ))} +
+
+ ); +} \ No newline at end of file diff --git a/apps/frontend/src/app/components/StaffCard.tsx b/apps/frontend/src/app/components/StaffCard.tsx index 11057a2..b69a41d 100644 --- a/apps/frontend/src/app/components/StaffCard.tsx +++ b/apps/frontend/src/app/components/StaffCard.tsx @@ -2,33 +2,33 @@ import React from 'react'; import Image from 'next/image'; import { useState } from 'react'; +import { PiUserCircleThin } from "react-icons/pi"; interface StaffCardProps { image?: string; name: string; - title: string; } export default function StaffCard({ image, - name, - title + name }: StaffCardProps) { const [imgError, setImgError] = useState(false); return ( -
- {(image && !imgError) ? ( - Staff setImgError(true)}/> - ) : ( -
- )} -
-

{name}

-

{title}

+
+
+ {(image && !imgError) ? ( + Staff setImgError(true)}/> + ) : ( +
+ +
+ )}
+

{name}

) } diff --git a/apps/frontend/test/components/AccountsPage.test.tsx b/apps/frontend/test/components/AccountsPage.test.tsx new file mode 100644 index 0000000..f006a6b --- /dev/null +++ b/apps/frontend/test/components/AccountsPage.test.tsx @@ -0,0 +1,35 @@ +import { render, screen } from '../utils'; +import AccountsPage, { facilitationTeam, teamMembers } from '@/app/components/AccountsPage'; + +describe('AccountsPage', () => { + it('renders the headings', () => { + render(); + expect(screen.getByText('Accounts')).toBeInTheDocument(); + expect(screen.getByText('Core BRANCH Facilitation Team')).toBeInTheDocument(); + expect(screen.getByText('BRANCH Team Members')).toBeInTheDocument(); + }); + + it('renders the correct staff cards in the facilitation section', () => { + render(); + const section = screen.getByText('Core BRANCH Facilitation Team').closest('div'); + const cards = section?.querySelectorAll('[data-testid="staff-card"]'); + + if (facilitationTeam.length === 0) { + expect(cards?.length).toBe(0); + } else { + expect(cards?.length).toBeGreaterThan(0); + } + }); + + it('renders the correct staff cards in the team members section', () => { + render(); + const section = screen.getByText('BRANCH Team Members').closest('div'); + const cards = section?.querySelectorAll('[data-testid="staff-card"]'); + + if (teamMembers.length === 0) { + expect(cards?.length).toBe(0); + } else { + expect(cards?.length).toBeGreaterThan(0); + } + }); +}); \ No newline at end of file diff --git a/apps/frontend/test/components/StaffCard.test.tsx b/apps/frontend/test/components/StaffCard.test.tsx index 6909a95..1999ffe 100644 --- a/apps/frontend/test/components/StaffCard.test.tsx +++ b/apps/frontend/test/components/StaffCard.test.tsx @@ -3,37 +3,31 @@ import StaffCard from '@/app/components/StaffCard'; describe ('StaffCard', () => { it('renders the placeholder image when no image given', () => { - render(); - expect(document.querySelector('.bg-accent-dark-green')).toBeInTheDocument(); + render(); + expect(document.querySelector('[data-testid="staff-placeholder"]')).toBeInTheDocument(); }); it('renders the placeholder image when image given image has error', () => { - render(); + render(); const img = document.querySelector('img'); fireEvent.error(img!); - expect(document.querySelector('.bg-accent-dark-green')).toBeInTheDocument(); + 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 title', () => { - render(); - expect(screen.getByText('title')).toBeInTheDocument(); - }); - - it('long name and title are wrapped', () => { - render(); + it('long name is wrapped', () => { + render(); const name = screen.getByText('superduper longname'); - const title = screen.getByText('superduper longtitle'); - expect(name).toHaveClass('break-words'); - expect(title).toHaveClass('break-words'); }); + expect(name).toHaveClass('break-words'); + }); }) \ No newline at end of file