Skip to content

Commit

Permalink
edit
Browse files Browse the repository at this point in the history
  • Loading branch information
FeimeiChen committed Apr 14, 2024
1 parent 36c8b3b commit c7b0902
Show file tree
Hide file tree
Showing 10 changed files with 131 additions and 68 deletions.
15 changes: 6 additions & 9 deletions ui/src/app/(index)/_components/AfterLogin.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,9 @@ const AfterLogin = ({
const isAdmin = currentUser.roles.includes(Role.ADMIN);
const isOwner = currentUser.roles.includes(Role.OWNER);
const getHighestRole = () => {
if (isAdmin) {
return 'Admin';
} else if (isOwner) {
return 'Owner';
} else {
return 'Member';
}
if (isAdmin) return 'Admin';
else if (isOwner) return 'Owner';
else return 'Member';
}

return (
Expand All @@ -47,8 +43,9 @@ const AfterLogin = ({
</div>
</div>
<div className="sm:col-span-9 md:col-span-10 text-center md:text-left">
<h1 className="whitespace-nowrap text-[1.75rem]" data-testid = "welcome-message">Welcome, <span
className="text-text-color">{currentUser.firstName}</span>!</h1>
<h1 className="whitespace-nowrap text-[1.75rem]"
data-testid = "welcome-message">Welcome, <span
className="text-text-color">{currentUser.firstName}</span>!</h1>
<h1 className="whitespace-nowrap text-[1.75rem]" data-testid = "role">Role: <span
className="text-text-color">{getHighestRole()}</span></h1>
</div>
Expand Down
17 changes: 5 additions & 12 deletions ui/src/app/(index)/_components/BeforeLogin.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
import UHGroupingsInfo from '@/components/UHGroupingsInfo';

Expand All @@ -9,21 +8,15 @@ const BeforeLogin = () => {
<UHGroupingsInfo variant="home"/>
<div className="row">
<div className="text-center">
<LearnMoreButton/>
<a href="https://uhawaii.atlassian.net/wiki/spaces/UHIAM/pages/13403213/UH+Groupings">
<Button size="lg" variant="default">
Learn More <ArrowRight className="ml-1"/>
</Button>
</a>
</div>
</div>
</main>
);
};

const LearnMoreButton = () => {
return (
<Link href="https://uhawaii.atlassian.net/wiki/spaces/UHIAM/pages/13403213/UH+Groupings">
<Button size="lg" variant="default">
Learn More <ArrowRight className="ml-1"/>
</Button>
</Link>
);
};

export default BeforeLogin;
16 changes: 11 additions & 5 deletions ui/src/app/(index)/page.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Image from 'next/image';
import BeforeLogin from '@/app/(index)/_components/BeforeLogin';
import AfterLogin from '@/app/(index)/_components/AfterLogin';
import { getCurrentUser } from '@/access/AuthenticationService';
import {getCurrentUser} from '@/access/AuthenticationService';
import Role from '@/access/Role';
import LoginButton from '@/app/(index)/_components/LoginButton';
import {getAnnouncements, getNumberOfGroupings, getNumberOfMemberships} from '@/services/GroupingsApiService';
Expand All @@ -15,14 +15,20 @@ const Home = async () => {
getAnnouncements()
]);

const activeAnnouncements = announcements?.announcements
?.filter((announcement) => announcement.state === 'Active')
?.map((announcement) => announcement.message) || [];
const activeAnnouncements = () => {
if (announcements && announcements.announcements) {
return announcements.announcements
.filter((announcement) => announcement.state === 'Active')
.map((announcement) => announcement.message)
} else {
return []
}
}

return (
<main>
<div className="container mt-5 mb-5">
{activeAnnouncements.map((announcement: string, index: number) => (
{activeAnnouncements().map((announcement: string, index: number) => (
<Announcement announcement={announcement} key={index}/>
))}
<div className="flex flex-row py-8 px-0.5 justify-between">
Expand Down
3 changes: 2 additions & 1 deletion ui/src/components/UHGroupingsInfo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ const UHGroupingsInfo = ({
<div className="container">
<div className="grid">
<h1 className={`text-center text-[2.5rem] font-medium ${color}`}>What is a UH Grouping?</h1>
<p className="text-center text-[1.25rem] font-light">A <em>grouping</em> is a collection of members
<p className="text-center text-[1.25rem] font-light"
data-testid ="description">A <em>grouping</em> is a collection of members
(e.g., all full-time
Hilo faculty).</p>
</div>
Expand Down
1 change: 0 additions & 1 deletion ui/src/components/ui/alert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ const alertVariants = cva(
variant: {
default: 'bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50',
destructive:
// eslint-disable-next-line @stylistic/max-len
'border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900',
},
},
Expand Down
3 changes: 2 additions & 1 deletion ui/tests/app/(index)/_components/AfterLogin.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,8 @@ describe('AfterLogin', () => {

const Groupings = (isOwner:boolean) => {
if(isOwner) {
expect(screen.getByRole('img', {name: 'wrench-solid'})).toHaveAttribute('src', 'uhgroupings/wrench-solid.svg')
expect(screen.getByRole('img', {name: 'wrench-solid'}))
.toHaveAttribute('src', 'uhgroupings/wrench-solid.svg')
expect(screen.getByText(numberOfGroupings)).toBeInTheDocument()
expect(screen.getByRole('heading', {name: 'Groupings'})).toBeInTheDocument()
expect(screen.getByText('Review members, manage Include and Exclude lists, ' +
Expand Down
33 changes: 19 additions & 14 deletions ui/tests/app/(index)/_components/BeforeLogin.test.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,28 @@
import {render, screen} from '@testing-library/react';
import BeforeLogin from '@/app/(index)/_components/BeforeLogin';
describe('BeforeLogin Component', () =>{
test('renders UHGroupingsInfo component', ()=> {
test('renders UHGroupingsInfo and a button with correct text and link', ()=> {
render(<BeforeLogin />);
const uhGroupingsInfo = screen.getByText('What is a UH Grouping?');
expect(uhGroupingsInfo).toBeInTheDocument();
})
const size = 'text-[1.2rem]'
const linkUrl = 'https://uhawaii.atlassian.net/wiki/spaces/UHIAM/pages/13403213/UH+Groupings'
expect(screen.getByRole('heading', {name:'What is a UH Grouping?'}))
.toHaveClass('text-text-color');
expect(screen.getByTestId('description')).toBeInTheDocument()

test('renders LearnMoreButton Component', ()=>{
render(<BeforeLogin />);
const LearnMoreButton = screen.getByText('Learn More');
expect(LearnMoreButton).toBeInTheDocument();
})
expect(screen.getByAltText('Cogs icon')).toHaveAttribute('src', '/uhgroupings/cogs.svg')
expect(screen.getByText('Create groupings, manage grouping memberships, control members\' ' +
'self-service options, designate sync destinations, and more.')).toHaveClass(size)

expect(screen.getByAltText('Email icon')).toHaveAttribute('src', '/uhgroupings/id-email.svg')
expect(screen.getByText('Synchronize groupings email LISTSERV lists,' +
' attributes for access control via CAS and LDAP, etc..')).toHaveClass(size)

expect(screen.getByAltText('Watch icon')).toHaveAttribute('src', '/uhgroupings/watch.svg')
expect(screen.getByText('Leverage group data from official sources,' +
' which can substantially reduce the manual overhead of membership management.')).toHaveClass(size)

test('LearningMoreButton redirects to the correct link', ()=>{
render(<BeforeLogin />)
const linkElement = screen.getByRole('link');
expect((linkElement)).toHaveAttribute('href',
'https://uhawaii.atlassian.net/wiki/spaces/UHIAM/pages/13403213/UH+Groupings')
expect(screen.getByRole('link')).toHaveAttribute('href', linkUrl)
expect(screen.getByRole('button', {name:'Learn More'})).toBeInTheDocument()
})
})

53 changes: 53 additions & 0 deletions ui/tests/app/(index)/_components/LoginButton.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { render, screen, fireEvent } from '@testing-library/react';
import { redirect } from 'next/navigation';
import User, { AnonymousUser } from '@/access/User';
import Role from '@/access/Role';
import LoginButton from "@/app/(index)/_components/LoginButton";

const casUrl = process.env.NEXT_PUBLIC_CAS_URL as string;
const baseUrl = process.env.NEXT_PUBLIC_BASE_URL as string;
const testUser: User = JSON.parse(process.env.TEST_USER_A as string);

describe('LoginButton Component', () => {

describe('User is not logged in', () => {

it('should render a Login button', () => {
render(<LoginButton currentUser={AnonymousUser}/>);

expect(screen.getByRole('button', { name: 'Login Here' })).toBeInTheDocument;
});

it('should visit the CAS login url on click', () => {
render(<LoginButton currentUser={AnonymousUser} />);

const casLoginUrl = `${casUrl}/login?service=${encodeURIComponent(`${baseUrl}/api/cas/login`)}`;
fireEvent.click(screen.getByRole('button', { name: 'Login Here' }));
expect(redirect).toHaveBeenCalledWith(casLoginUrl);
});

});

describe('User is logged in', () => {

beforeAll(() => {
testUser.roles.push(Role.UH);
});

it('should render a Logout button with the uid of the logged-in user', () => {
render(<LoginButton currentUser={testUser} />);

expect(screen.getByRole('button', { name: 'Logout' })).toBeInTheDocument;
});

it('should visit the CAS logout url on click', () => {
render(<LoginButton currentUser={testUser} />);

const casLogoutUrl = `${casUrl}/logout?service=${encodeURIComponent(`${baseUrl}/api/cas/logout`)}`;
fireEvent.click(screen.getByRole('button', { name: 'Logout' }));
expect(redirect).toHaveBeenCalledWith(casLogoutUrl);
});

});

});
13 changes: 5 additions & 8 deletions ui/tests/app/(index)/_components/UserInfoItem.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,11 @@ const renderUserInfoItem = ({
};

const assertCommonUserInfo = ({alt, src, title, description, link, text}: UserInfoItemProps) => {
const imageElement = screen.getByRole('img');
expect(imageElement).toHaveAttribute('alt', alt);
expect(imageElement).toHaveAttribute('src', src);
expect(screen.getByAltText(alt)).toHaveAttribute('src', src);
expect(screen.getByRole('heading', {name: title})).toBeInTheDocument();
expect(screen.getByText(description)).toBeInTheDocument();
const linkElement = screen.getByRole('link');
expect(linkElement).toHaveAttribute('href', link);
const buttonElement = screen.getByRole('button', {name: text});
expect(buttonElement).toBeInTheDocument();
expect(screen.getByRole('link')).toHaveAttribute('href', link);
expect(screen.getByRole('button', {name: text})).toBeInTheDocument();
};

describe('UserInfoItem Component', () => {
Expand All @@ -64,7 +60,8 @@ describe('UserInfoItem Component', () => {
number: 0,
show: false,
title: 'Administration',
description: 'Manage the list of Administrators for this service. Search for and manage any grouping on behalf of the owner.',
description: 'Manage the list of Administrators for this service. ' +
'Search for and manage any grouping on behalf of the owner.',
link: '/admin',
text: 'Admin'
};
Expand Down
45 changes: 28 additions & 17 deletions ui/tests/components/UHGroupingsInfo.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,46 @@ import {render,screen} from '@testing-library/react';
import UHGroupingsInfo from '@/components/UHGroupingsInfo';

describe('UHGroupings Component', ()=>{

const cogs= () => {
const cogs= (size: 'text-[1.2rem]'|'text-base') => {
const description = 'Create groupings, manage grouping memberships, control members\' ' +
'self-service options, designate sync destinations, and more.'
expect(screen.getByAltText('Cogs icon')).toHaveAttribute('src', '/uhgroupings/cogs.svg')
expect(screen.getByText('Create groupings, manage grouping memberships,' +
' control members\' self-service options, designate sync destinations, and more.')).toBeInTheDocument()
expect(screen.getByText(description)).toHaveClass(size)

}

const email = ()=> {
const email = (size: 'text-[1.2rem]'|'text-base')=> {
const description = 'Synchronize groupings email LISTSERV lists,' +
' attributes for access control via CAS and LDAP, etc..'
expect(screen.getByAltText('Email icon')).toHaveAttribute('src', '/uhgroupings/id-email.svg')
expect(screen.getByText('Synchronize groupings email LISTSERV lists,' +
' attributes for access control via CAS and LDAP, etc.')).toBeInTheDocument()
expect(screen.getByText(description)).toHaveClass(size)
}

const watch = () =>{
const watch = (size: 'text-[1.2rem]'|'text-base') =>{
const description = 'Leverage group data from official sources,' +
' which can substantially reduce the manual overhead of membership management.'
expect(screen.getByAltText('Watch icon')).toHaveAttribute('src', '/uhgroupings/watch.svg')
expect(screen.getByText('Leverage group data from official sources,' +
' which can substantially reduce the manual overhead of membership management.')).toBeInTheDocument()
expect(screen.getByText(description)).toHaveClass(size)
}

test('renders with variant prop', ()=> {
render(<UHGroupingsInfo variant='home'/>)

expect(screen.getByRole('heading', {name:'What is a UH Grouping?'})).toHaveClass('text-text-color');
expect(screen.getByText('A grouping is a collection of members ' +
'(e.g., all full-time Hilo faculty).')).toBeInTheDocument()
cogs()
email()
watch()
expect(screen.getByRole('heading', {name:'What is a UH Grouping?'}))
.toHaveClass('text-text-color');
expect(screen.getByTestId('description')).toBeInTheDocument()
cogs('text-[1.2rem]')
email('text-[1.2rem]')
watch('text-[1.2rem]')

})

test('renders without variant prop', ()=>{
render(<UHGroupingsInfo/>)
expect(screen.getByRole('heading', {name:'What is a UH Grouping?'}))
.toHaveClass('text-uh-black');
expect(screen.getByTestId('description')).toBeInTheDocument()
cogs('text-base')
email('text-base')
watch('text-base')
})
})

0 comments on commit c7b0902

Please sign in to comment.