From cbf6b7f7f6c68c572a18c598af75dc661a0c22f6 Mon Sep 17 00:00:00 2001
From: uo287841 <uo287841@uniovi.es>
Date: Sun, 21 Apr 2024 12:14:44 +0200
Subject: [PATCH] Line 28: changed {isAuthenticated() ? <button class ->  
 {isAuthenticated() ? <button className, because when doing the test it
 remarked that error

---
 webapp/src/components/Navbar.jsx          |  2 +-
 webapp/src/components/Navbar.test.js      | 46 ++++++++++++++++++
 webapp/src/components/UserProfile.test.js | 59 +++++++++++++++++++++++
 3 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 webapp/src/components/Navbar.test.js
 create mode 100644 webapp/src/components/UserProfile.test.js

diff --git a/webapp/src/components/Navbar.jsx b/webapp/src/components/Navbar.jsx
index 809073d..1f4f45e 100644
--- a/webapp/src/components/Navbar.jsx
+++ b/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>}
diff --git a/webapp/src/components/Navbar.test.js b/webapp/src/components/Navbar.test.js
new file mode 100644
index 0000000..0c00b9b
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/webapp/src/components/UserProfile.test.js b/webapp/src/components/UserProfile.test.js
new file mode 100644
index 0000000..4215e00
--- /dev/null
+++ b/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: 'test@example.com',
+        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: test@example.com')).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();
+        });
+      });
+    });
\ No newline at end of file