Skip to content

Commit 91e0df0

Browse files
[FIX] Figma User Portal: Organization Left Drawer Violates The Figma Style Guide (#3430)
* UI fix UserSidebarOrg * fix * Update src/components/ProfileDropdown/ProfileDropdown.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update src/components/ProfileDropdown/ProfileDropdown.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update src/components/ProfileCard/ProfileCard.spec.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update src/components/SignOut/SignOut.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update src/components/ProfileCard/ProfileCard.spec.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix * fix * fix lint * type fix * Update src/style/app.module.css Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update docs/docs/auto-docs/components/SignOut/SignOut/functions/default.md Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * lint fix * Update src/components/ProfileCard/ProfileCard.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix * fix * Update docs/docs/auto-docs/components/SignOut/SignOut/functions/default.md Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix * Update src/components/ProfileCard/ProfileCard.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix * Update src/components/SignOut/SignOut.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update src/components/ProfileCard/ProfileCard.spec.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix * fix --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
1 parent 0bfabd1 commit 91e0df0

File tree

12 files changed

+1107
-382
lines changed

12 files changed

+1107
-382
lines changed
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
[Admin Docs](/)
2+
3+
***
4+
5+
# Function: default()
6+
7+
> **default**(): `Element`
8+
9+
Defined in: [src/components/ProfileCard/ProfileCard.tsx:21](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/ProfileCard/ProfileCard.tsx#L21)
10+
11+
Renders a profile card for the user.
12+
13+
This component displays the user's profile picture or an avatar, their name (truncated if necessary),
14+
and their role (SuperAdmin, Admin, or User). It provides options to view the profile.
15+
16+
- If a user image is available, it displays that; otherwise, it shows an avatar.
17+
- The displayed name is truncated if it exceeds a specified length.
18+
19+
## Returns
20+
21+
`Element`
22+
23+
JSX.Element - The profile card .
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
[Admin Docs](/)
2+
3+
***
4+
5+
# Function: default()
6+
7+
> **default**(): `Element`
8+
9+
Defined in: [src/components/SignOut/SignOut.tsx:20](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/SignOut/SignOut.tsx#L20)
10+
11+
Renders a sign-out button.
12+
13+
This component helps to log out.
14+
The logout function revokes the refresh token and clears local storage before redirecting to the home page.
15+
16+
## Returns
17+
18+
`Element`
19+
20+
JSX.Element - The sign-out button.

docs/docs/auto-docs/components/UserPortal/UserSidebarOrg/UserSidebarOrg/functions/default.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
> **default**(`__namedParameters`): `Element`
88
9-
Defined in: [src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx:39](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx#L39)
9+
Defined in: [src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx:42](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx#L42)
1010

1111
Sidebar component for user navigation within an organization.
1212

docs/docs/auto-docs/components/UserPortal/UserSidebarOrg/UserSidebarOrg/interfaces/InterfaceUserSidebarOrgProps.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,36 @@
44

55
# Interface: InterfaceUserSidebarOrgProps
66

7-
Defined in: [src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx:17](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx#L17)
7+
Defined in: [src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx:19](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx#L19)
88

99
## Properties
1010

1111
### hideDrawer
1212

1313
> **hideDrawer**: `boolean`
1414
15-
Defined in: [src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx:20](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx#L20)
15+
Defined in: [src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx:22](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx#L22)
1616

1717
***
1818

1919
### orgId
2020

2121
> **orgId**: `string`
2222
23-
Defined in: [src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx:18](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx#L18)
23+
Defined in: [src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx:20](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx#L20)
2424

2525
***
2626

2727
### setHideDrawer
2828

2929
> **setHideDrawer**: `Dispatch`\<`SetStateAction`\<`boolean`\>\>
3030
31-
Defined in: [src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx:21](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx#L21)
31+
Defined in: [src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx:23](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx#L23)
3232

3333
***
3434

3535
### targets
3636

3737
> **targets**: [`TargetsType`](../../../../../state/reducers/routesReducer/type-aliases/TargetsType.md)[]
3838
39-
Defined in: [src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx:19](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx#L19)
39+
Defined in: [src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx:21](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx#L21)
Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
import React, { act } from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import userEvent from '@testing-library/user-event';
4+
import { BrowserRouter, Route, Routes } from 'react-router-dom';
5+
import ProfileCard from './ProfileCard';
6+
import { MockedProvider } from '@apollo/react-testing';
7+
import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
8+
import useLocalStorage from 'utils/useLocalstorage';
9+
import { I18nextProvider } from 'react-i18next';
10+
import i18nForTest from 'utils/i18nForTest';
11+
import { GET_COMMUNITY_SESSION_TIMEOUT_DATA } from 'GraphQl/Queries/Queries';
12+
import { vi } from 'vitest';
13+
14+
const { setItem } = useLocalStorage();
15+
16+
const mockNavigate = vi.fn();
17+
18+
// Mock useNavigate hook
19+
vi.mock('react-router-dom', async () => {
20+
const actual = await vi.importActual('react-router-dom');
21+
return {
22+
...actual,
23+
useNavigate: () => mockNavigate,
24+
};
25+
});
26+
27+
const MOCKS = [
28+
{
29+
request: {
30+
query: REVOKE_REFRESH_TOKEN,
31+
},
32+
result: {
33+
data: {
34+
revokeRefreshTokenForUser: true,
35+
},
36+
},
37+
},
38+
{
39+
request: {
40+
query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
41+
},
42+
result: {
43+
data: {
44+
getCommunityData: {
45+
timeout: 30,
46+
},
47+
},
48+
},
49+
delay: 1000,
50+
},
51+
];
52+
53+
vi.mock('react-toastify', () => ({
54+
toast: {
55+
success: vi.fn(),
56+
warn: vi.fn(),
57+
error: vi.fn(),
58+
},
59+
clear: vi.fn(),
60+
}));
61+
62+
beforeEach(() => {
63+
setItem('FirstName', 'John');
64+
setItem('LastName', 'Doe');
65+
setItem(
66+
'UserImage',
67+
'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe',
68+
);
69+
setItem('SuperAdmin', false);
70+
setItem('AdminFor', []);
71+
setItem('id', '123');
72+
});
73+
74+
afterEach(() => {
75+
vi.clearAllMocks();
76+
localStorage.clear();
77+
});
78+
79+
describe('ProfileDropdown Component', () => {
80+
test('renders with user information', () => {
81+
render(
82+
<MockedProvider mocks={MOCKS} addTypename={false}>
83+
<BrowserRouter>
84+
<I18nextProvider i18n={i18nForTest}>
85+
<ProfileCard />
86+
</I18nextProvider>
87+
</BrowserRouter>
88+
</MockedProvider>,
89+
);
90+
91+
expect(screen.getByTestId('display-name')).toBeInTheDocument();
92+
expect(screen.getByText('John Doe')).toBeInTheDocument();
93+
expect(screen.getByText('User')).toBeInTheDocument();
94+
expect(screen.getByTestId('display-type')).toBeInTheDocument();
95+
expect(screen.getByAltText('profile picture')).toBeInTheDocument();
96+
});
97+
98+
test('renders Super admin', () => {
99+
setItem('SuperAdmin', true);
100+
render(
101+
<MockedProvider mocks={MOCKS} addTypename={false}>
102+
<BrowserRouter>
103+
<ProfileCard />
104+
</BrowserRouter>
105+
</MockedProvider>,
106+
);
107+
expect(screen.getByText('SuperAdmin')).toBeInTheDocument();
108+
});
109+
test('renders Admin', () => {
110+
setItem('AdminFor', ['123']);
111+
render(
112+
<MockedProvider mocks={MOCKS} addTypename={false}>
113+
<BrowserRouter>
114+
<ProfileCard />
115+
</BrowserRouter>
116+
</MockedProvider>,
117+
);
118+
expect(screen.getByText('Admin')).toBeInTheDocument();
119+
});
120+
});
121+
122+
describe('Member screen routing testing', () => {
123+
test('member screen', async () => {
124+
setItem('SuperAdmin', false);
125+
setItem('AdminFor', []);
126+
127+
render(
128+
<MockedProvider mocks={MOCKS} addTypename={false}>
129+
<BrowserRouter>
130+
<I18nextProvider i18n={i18nForTest}>
131+
<ProfileCard />
132+
</I18nextProvider>
133+
</BrowserRouter>
134+
</MockedProvider>,
135+
);
136+
137+
await act(async () => {
138+
userEvent.click(screen.getByTestId('profileBtn'));
139+
});
140+
141+
expect(mockNavigate).toHaveBeenCalledWith('/user/settings');
142+
});
143+
144+
test('navigates to /user/settings for a user', async () => {
145+
setItem('SuperAdmin', false);
146+
setItem('AdminFor', []);
147+
148+
render(
149+
<MockedProvider mocks={MOCKS} addTypename={false}>
150+
<BrowserRouter>
151+
<I18nextProvider i18n={i18nForTest}>
152+
<ProfileCard />
153+
</I18nextProvider>
154+
</BrowserRouter>
155+
</MockedProvider>,
156+
);
157+
158+
await act(async () => {
159+
userEvent.click(screen.getByTestId('profileBtn'));
160+
});
161+
162+
expect(mockNavigate).toHaveBeenCalledWith('/user/settings');
163+
});
164+
165+
test('navigates to /member/:orgId for non-user roles when orgId is not present', async () => {
166+
window.history.pushState({}, 'Test page', '/orglist');
167+
setItem('SuperAdmin', true); // Set as admin
168+
setItem('id', '123');
169+
170+
render(
171+
<MockedProvider mocks={MOCKS} addTypename={false}>
172+
<BrowserRouter>
173+
<I18nextProvider i18n={i18nForTest}>
174+
<Routes>
175+
<Route path="/orglist" element={<ProfileCard />} />
176+
</Routes>
177+
</I18nextProvider>
178+
</BrowserRouter>
179+
</MockedProvider>,
180+
);
181+
182+
await act(async () => {
183+
userEvent.click(screen.getByTestId('profileBtn'));
184+
});
185+
186+
expect(mockNavigate).toHaveBeenCalledWith('/member/');
187+
});
188+
189+
test('navigates to /member/:userID for non-user roles', async () => {
190+
window.history.pushState({}, 'Test page', '/321');
191+
setItem('SuperAdmin', true); // Set as admin
192+
setItem('id', '123');
193+
194+
render(
195+
<MockedProvider mocks={MOCKS} addTypename={false}>
196+
<BrowserRouter>
197+
<I18nextProvider i18n={i18nForTest}>
198+
<Routes>
199+
<Route path="/:orgId" element={<ProfileCard />} />
200+
</Routes>
201+
</I18nextProvider>
202+
</BrowserRouter>
203+
</MockedProvider>,
204+
);
205+
206+
await act(async () => {
207+
userEvent.click(screen.getByTestId('profileBtn'));
208+
});
209+
210+
expect(mockNavigate).toHaveBeenCalledWith('/member/321');
211+
});
212+
});

0 commit comments

Comments
 (0)