Line 28: changed {isAuthenticated() ? <button class -> {isAuthenticat…

…ed() ? <button className, because when doing the test it remarked that error

webapp/src/components/Navbar.jsx

@@ -25,7 +25,7 @@ function Navbar() {
                         {isAuthenticated() && (
                             <li><Link className="md:p-4 py-3 px-0 block font-bold text-gray-600 hover:text-gray-900" to="/userprofile">UserProfile</Link></li>
                         )}
-                        {isAuthenticated() ? <button class="px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-bold rounded-full transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg" onClick={() => Logout()}>
+                        {isAuthenticated() ? <button className="px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-bold rounded-full transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg" onClick={() => Logout()}>
                             Logout
                         </button> 
                          : <li><Link className="md:p-4 py-3 px-0 block font-bold text-sky-500 hover:text-sky-800" to="/login">Sign in</Link></li>}

webapp/src/components/Navbar.test.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import Navbar from './Navbar';
+import useIsAuthenticated from 'react-auth-kit/hooks/useIsAuthenticated';
+import useSignOut from 'react-auth-kit/hooks/useSignOut';
+
+jest.mock('react-auth-kit/hooks/useIsAuthenticated');
+jest.mock('react-auth-kit/hooks/useSignOut');
+
+describe('Navbar', () => {
+
+    beforeEach(() => {        
+        // Reset mock function calls before each test
+        jest.clearAllMocks();
+    });
+
+  it('renders authenticated user links and logout button', () => {
+    useIsAuthenticated.mockReturnValue(() => true);
+    const { getByText } = render(
+      <MemoryRouter>
+        <Navbar />
+      </MemoryRouter>
+    );
+
+    expect(getByText('WIQ')).toBeInTheDocument();
+    expect(getByText('Play')).toBeInTheDocument();
+    expect(getByText('Rankings')).toBeInTheDocument();
+    expect(getByText('UserProfile')).toBeInTheDocument();
+    expect(getByText('Logout')).toBeInTheDocument();
+  });
+
+  it('renders unauthenticated user links and sign-in link', () => {
+    useIsAuthenticated.mockReturnValue(() => false);
+    const { getByText } = render(
+      <MemoryRouter>
+        <Navbar />
+      </MemoryRouter>
+    );
+
+    expect(getByText('WIQ')).toBeInTheDocument();
+    expect(getByText('Play')).toBeInTheDocument();
+    expect(getByText('Rankings')).toBeInTheDocument();
+    expect(getByText('Sign in')).toBeInTheDocument();
+  });
+});

webapp/src/components/UserProfile.test.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, waitFor, fireEvent } from '@testing-library/react';
+import UserProfile from './UserProfile';
+import axios from 'axios';
+import useAuthUser from 'react-auth-kit/hooks/useAuthUser';
+
+jest.mock('axios');
+jest.mock('react-auth-kit/hooks/useAuthUser', () => jest.fn());
+
+describe('UserProfile', () => {
+    beforeEach(() => {
+      useAuthUser.mockReturnValue({
+        username: 'testUser',
+        email: '[email protected]',
+        createdAt: '2024-01-01T00:00:00Z',
+      });
+    });
+
+    it('renders user details', async () => {
+        axios.get.mockResolvedValueOnce({
+          data: {
+            questions: 10,
+            correct: 7,
+            wrong: 3,
+          },
+        });
+
+        const { getByText } = render(<UserProfile />);
+
+        await waitFor(() => {
+          expect(getByText('Username: testUser')).toBeInTheDocument();
+          expect(getByText('Email: [email protected]')).toBeInTheDocument();
+          expect(getByText('Joined: 1/1/2024')).toBeInTheDocument();
+          expect(getByText('Total Answered Questions: 10')).toBeInTheDocument();
+          expect(getByText('Right Answers: 7')).toBeInTheDocument();
+          expect(getByText('Wrong Answers: 3')).toBeInTheDocument();
+        });
+      });
+
+      it('changes category when category button is clicked', async () => {
+        axios.get.mockResolvedValueOnce({
+          data: {
+            questions: 5,
+            correct: 3,
+            wrong: 2,
+          },
+        });
+
+        const { getByText } = render(<UserProfile />);
+
+        fireEvent.click(getByText('Flags'));
+
+        await waitFor(() => {
+          expect(getByText('Total Answered Questions: 5')).toBeInTheDocument();
+          expect(getByText('Right Answers: 3')).toBeInTheDocument();
+          expect(getByText('Wrong Answers: 2')).toBeInTheDocument();
+        });
+      });
+    });