diff --git a/client/src/route/auth/AccountTabs.tsx b/client/src/route/auth/AccountTabs.tsx index 753604027..92ce44cec 100644 --- a/client/src/route/auth/AccountTabs.tsx +++ b/client/src/route/auth/AccountTabs.tsx @@ -1,22 +1,55 @@ import * as React from 'react'; import TabComponent from 'components/tab/TabComponent'; +import { useAuth } from 'react-oidc-context'; import { TabData } from 'components/tab/subcomponents/TabRender'; -const accountTab: TabData[] = [ - { - label: 'Profile', - body: <>Profile - potentially visible to other users., - }, - { - label: 'Settings', - body: <>Account settings - private to a user., - }, -]; +function renderProfileTab() { + const {user}=useAuth(); + const name = user?.profile.preferred_username; + const pfp = user?.profile.picture; + const profileUrl = user?.profile.profile; + const groupsLength = ((user?.profile.groups_direct as string[] | undefined)?.length ?? 0); -const scope: TabData[][] = []; + return ( +
+

Profile

+ +

+ The username is {name}. See more details on the user on SSO OAuth Provider. +

+ {groupsLength === 1 &&

{name} belongs to {groupsLength} group.

} + {groupsLength > 1 &&

{name} belongs to {groupsLength} groups.

} +
+ ); +} + +function renderSettingsTab() { + const profileUrl=useAuth().user?.profile.profile; + return ( +
+

Settings

+

Edit the profile on SSO OAuth Provider.

+
+ ); +} function AccountTabs() { + + const accountTab: TabData[] = [ + { + label: 'Profile', + body: renderProfileTab(), + }, + { + label: 'Settings', + body: renderSettingsTab(), + }, + ]; + + const scope: TabData[][] = []; + return ; } export default AccountTabs; + diff --git a/client/test/unitTests/Routes/AccountTabs.test.tsx b/client/test/unitTests/Routes/AccountTabs.test.tsx new file mode 100644 index 000000000..3922247d7 --- /dev/null +++ b/client/test/unitTests/Routes/AccountTabs.test.tsx @@ -0,0 +1,72 @@ +import * as React from 'react'; +import { render, screen } from '@testing-library/react'; +import AccountTabs from 'route/auth/AccountTabs'; +import { useAuth } from 'react-oidc-context'; + +jest.mock('react-oidc-context'); + +describe('AccountTabs', () => { + const mockprofile={ + preferred_username: "user1", + picture: "pfp.jpg", + profile: "test.com", + groups_direct:["group1", "group2"] + }; + + const mockuser={profile: mockprofile}; + + test('renders AccountTabs with correct profile information', () => { + (useAuth as jest.Mock).mockReturnValue({ + user: mockuser, + }); + + render( + + ); + + const profilePicture = screen.getByTestId('profile-picture'); + expect(profilePicture).toBeInTheDocument(); + expect(profilePicture).toHaveAttribute('src', 'pfp.jpg'); + + const username = screen.getByText('user1'); + expect(username).toBeInTheDocument(); + + const profileLink = screen.getByRole('link', { name: /SSO OAuth Provider/i }); + expect(profileLink).toBeInTheDocument(); + expect(profileLink).toHaveAttribute('href', 'test.com'); + + const groupInfo = screen.getByText('user1 belongs to 2 groups.'); + expect(groupInfo).toBeInTheDocument(); + + jest.clearAllMocks(); + }); + + test('renders AccountTabs with correct profile information when user is not part of a group', () => { + mockuser.profile.groups_direct=[]; + (useAuth as jest.Mock).mockReturnValue({ + user: mockuser, + }); + + render( + + ); + + const profilePicture = screen.getByTestId('profile-picture'); + expect(profilePicture).toBeInTheDocument(); + expect(profilePicture).toHaveAttribute('src', 'pfp.jpg'); + + const username = screen.getByText('user1'); + expect(username).toBeInTheDocument(); + + const profileLink = screen.getByRole('link', { name: /SSO OAuth Provider/i }); + expect(profileLink).toBeInTheDocument(); + expect(profileLink).toHaveAttribute('href', 'test.com'); + + + const groupInfo = screen.queryByText(/user1 belongs to \d+ groups?/i); + expect(groupInfo).not.toBeInTheDocument(); + + jest.clearAllMocks(); + }); + +}); \ No newline at end of file