diff --git a/components/AdminNav/AdminNav.test.tsx b/components/AdminNav/AdminNav.test.tsx
index b0f3c7ad..c39a39e2 100644
--- a/components/AdminNav/AdminNav.test.tsx
+++ b/components/AdminNav/AdminNav.test.tsx
@@ -1,10 +1,31 @@
import { AdminNav } from './AdminNav';
+import { AuthContextProvider } from '@/context/AuthContextProvider';
import { render, screen } from '@testing-library/react';
import React from 'react';
+const mockPush = jest.fn();
+const mockUsePathname = jest.fn();
+
+jest.mock('next/navigation', () => ({
+ useRouter() {
+ return {
+ push: mockPush,
+ };
+ },
+ usePathname() {
+ return mockUsePathname();
+ },
+}));
+
describe('AdminNav Component', () => {
beforeEach(() => {
- render();
+ jest.clearAllMocks();
+
+ render(
+
+
+ ,
+ );
});
it('should render the navigation links with correct href attributes', () => {
diff --git a/components/AdminUserSettings/AdminUserSettings.test.tsx b/components/AdminUserSettings/AdminUserSettings.test.tsx
index e2048e49..6cf07921 100644
--- a/components/AdminUserSettings/AdminUserSettings.test.tsx
+++ b/components/AdminUserSettings/AdminUserSettings.test.tsx
@@ -1,12 +1,98 @@
import { AdminUserSettings } from './AdminUserSettings';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import React from 'react';
+const mockPush = jest.fn();
+const mockUsePathname = jest.fn();
+const mockLogoutAccount = jest.fn();
+
+const mockUseAuthContext = {
+ logoutAccount: mockLogoutAccount,
+};
+
+jest.mock('../../context/AuthContextProvider', () => ({
+ useAuthContext() {
+ return {
+ ...mockUseAuthContext,
+ };
+ },
+}));
+
+jest.mock('next/navigation', () => ({
+ useRouter() {
+ return {
+ push: mockPush,
+ };
+ },
+ usePathname() {
+ return mockUsePathname();
+ },
+}));
+
describe('AdminUserSettings Component', () => {
- it('should render the component', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+
render();
+ });
+
+ it('should render the component', async () => {
const adminUserSettings = screen.getByTestId('admin-user-settings');
expect(adminUserSettings).toBeInTheDocument();
});
+
+ it('should show user options when clicked', () => {
+ const adminUserSettings = screen.getByTestId('admin-user-settings');
+
+ fireEvent.click(adminUserSettings);
+
+ waitFor(() => {
+ expect(screen.getByTestId('edit-profile-link')).toBeInTheDocument();
+ expect(screen.getByTestId('sign-out-button')).toBeInTheDocument();
+ });
+ });
+
+ it('should not show user options when closed', () => {
+ const adminUserSettings = screen.getByTestId('admin-user-settings');
+
+ fireEvent.click(adminUserSettings);
+
+ fireEvent.click(adminUserSettings);
+
+ waitFor(() => {
+ expect(screen.getByTestId('edit-profile-link')).not.toBeInTheDocument();
+ expect(screen.getByTestId('sign-out-button')).not.toBeInTheDocument();
+ });
+ });
+
+ it('should direct to /account/settings route when the edit profile button is clicked', () => {
+ const adminUserSettings = screen.getByTestId('admin-user-settings');
+
+ fireEvent.click(adminUserSettings);
+
+ waitFor(() => {
+ const editProfileButton = screen.getByTestId('edit-profile-link');
+ fireEvent.click(editProfileButton);
+ });
+
+ waitFor(() => {
+ expect(mockPush).toHaveBeenCalledWith('/account/settings');
+ });
+ });
+
+ it('should direct to /login route when the sign out button is clicked', () => {
+ const adminUserSettings = screen.getByTestId('admin-user-settings');
+
+ fireEvent.click(adminUserSettings);
+
+ waitFor(() => {
+ const signOutButton = screen.getByTestId('sign-out-button');
+ fireEvent.click(signOutButton);
+ });
+
+ waitFor(() => {
+ expect(mockPush).toHaveBeenCalledWith('/login');
+ });
+ });
});
diff --git a/components/AdminUserSettings/AdminUserSettings.tsx b/components/AdminUserSettings/AdminUserSettings.tsx
index e13e77cb..58bd6302 100644
--- a/components/AdminUserSettings/AdminUserSettings.tsx
+++ b/components/AdminUserSettings/AdminUserSettings.tsx
@@ -1,25 +1,75 @@
// Copyright (c) Gridiron Survivor.
// Licensed under the MIT License.
+'use client';
+import React, { JSX } from 'react';
+import { Button } from '../Button/Button';
+import { useDataStore } from '@/store/dataStore';
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from '../TableDropDownMenu/TableDropDownMenu';
import { LucideChevronsUpDown } from 'lucide-react';
-import React from 'react';
+import { useAuthContext } from '@/context/AuthContextProvider';
+import { useRouter } from 'next/navigation';
+import LinkCustom from '../LinkCustom/LinkCustom';
/**
- * The admin user settings component.
- * @returns The rendered admin user settings.
+ * Renders admin user settings.
+ * @returns {JSX.Element} The rendered admin user settings component.
*/
-export const AdminUserSettings = (): React.JSX.Element => {
+export const AdminUserSettings = (): JSX.Element => {
+ const router = useRouter();
+ const { logoutAccount } = useAuthContext();
+ const { user } = useDataStore((state) => state);
+
+ /**
+ * Handles the logout.
+ * @returns {Promise} The logout promise.
+ */
+ const handleLogout = async (): Promise => {
+ try {
+ await logoutAccount();
+ router.push('/login');
+ } catch (error) {
+ throw error;
+ }
+ };
+
return (
-
+
+
+
+
+
+
+
+ Edit Profile
+
+
+
+
+
+
+
);
};