From ea2c2cb92d0a71e4ef032be131b97f95a5c2bc02 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 11 Apr 2024 19:01:26 +0200
Subject: [PATCH 01/20] =?UTF-8?q?A=C3=B1adido=20enlace=20a=20Ver=20estad?=
 =?UTF-8?q?=C3=ADsticas=20en=20miembros=20del=20grupo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/locales/en.json              | 1 +
 webapp/src/locales/es.json              | 1 +
 webapp/src/pages/Social/GroupDetails.js | 8 ++++++++
 3 files changed, 10 insertions(+)

diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
index 5b23eddc..16165210 100644
--- a/webapp/src/locales/en.json
+++ b/webapp/src/locales/en.json
@@ -211,6 +211,7 @@
       "avatar": "Avatar",
       "name": "Name",
       "viewProfile": "View profile",
+      "viewStats": "View stats",
       "loadingText": "Your search is being processed, please wait a moment.",
       "noParticipants": "There are no participants in this group."
     },
diff --git a/webapp/src/locales/es.json b/webapp/src/locales/es.json
index 9b050c38..9ea1cff8 100644
--- a/webapp/src/locales/es.json
+++ b/webapp/src/locales/es.json
@@ -211,6 +211,7 @@
       "avatar":"Avatar",
       "name":"Nombre",
       "viewProfile": "Ver perfil",
+      "viewStats": "Ver stats",
       "loadingText": "Se está consultando su búsqueda, espere unos instantes.",
       "noParticipants": "No hay participantes en este grupo."
     },
diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
index d3c3b3be..86a4232c 100644
--- a/webapp/src/pages/Social/GroupDetails.js
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -30,6 +30,10 @@ const GroupDetails = () => {
     navigate(`/perfil?user=${username}`);
   };
 
+  const redirectToStats = (username) => {
+    navigate(`/stats?user=${username}&gamemode=clasico`);
+  };
+
   return (
     <>
       <Nav/>
@@ -49,6 +53,7 @@ const GroupDetails = () => {
                   <Th>{t('pages.groupdetails.avatar')}</Th>
                   <Th>{t('pages.groupdetails.name')}</Th>
                   <Th>{t('pages.groupdetails.viewProfile')}</Th>
+                  <Th>{t('pages.groupdetails.viewStats')}</Th>
                 </Tr>
               </Thead>
               <Tbody>
@@ -61,6 +66,9 @@ const GroupDetails = () => {
                     <Td>
                       <Link color="blue.500" onClick={() => redirectToProfile(member)}>{t('pages.groupdetails.viewProfile')}</Link>
                     </Td>
+                    <Td>
+                      <Link color="blue.500" onClick={() => redirectToStats(member)}>{t('pages.groupdetails.viewStats')}</Link>
+                    </Td>
                   </Tr>
                 ))}
               </Tbody>

From af6935a6f64eaa5a3895f89bdb1a672f1ef63d71 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 11 Apr 2024 19:31:58 +0200
Subject: [PATCH 02/20] =?UTF-8?q?Abortamos=20porque=20pet=C3=B3=20todo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/locales/en.json              | 1 -
 webapp/src/locales/es.json              | 1 -
 webapp/src/pages/Social/GroupDetails.js | 7 -------
 webapp/src/pages/Stats/Stats.js         | 3 +--
 4 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
index 16165210..5b23eddc 100644
--- a/webapp/src/locales/en.json
+++ b/webapp/src/locales/en.json
@@ -211,7 +211,6 @@
       "avatar": "Avatar",
       "name": "Name",
       "viewProfile": "View profile",
-      "viewStats": "View stats",
       "loadingText": "Your search is being processed, please wait a moment.",
       "noParticipants": "There are no participants in this group."
     },
diff --git a/webapp/src/locales/es.json b/webapp/src/locales/es.json
index 9ea1cff8..9b050c38 100644
--- a/webapp/src/locales/es.json
+++ b/webapp/src/locales/es.json
@@ -211,7 +211,6 @@
       "avatar":"Avatar",
       "name":"Nombre",
       "viewProfile": "Ver perfil",
-      "viewStats": "Ver stats",
       "loadingText": "Se está consultando su búsqueda, espere unos instantes.",
       "noParticipants": "No hay participantes en este grupo."
     },
diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
index 86a4232c..6d82bd59 100644
--- a/webapp/src/pages/Social/GroupDetails.js
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -30,10 +30,6 @@ const GroupDetails = () => {
     navigate(`/perfil?user=${username}`);
   };
 
-  const redirectToStats = (username) => {
-    navigate(`/stats?user=${username}&gamemode=clasico`);
-  };
-
   return (
     <>
       <Nav/>
@@ -66,9 +62,6 @@ const GroupDetails = () => {
                     <Td>
                       <Link color="blue.500" onClick={() => redirectToProfile(member)}>{t('pages.groupdetails.viewProfile')}</Link>
                     </Td>
-                    <Td>
-                      <Link color="blue.500" onClick={() => redirectToStats(member)}>{t('pages.groupdetails.viewStats')}</Link>
-                    </Td>
                   </Tr>
                 ))}
               </Tbody>
diff --git a/webapp/src/pages/Stats/Stats.js b/webapp/src/pages/Stats/Stats.js
index 8b83b0e7..617ce0e6 100644
--- a/webapp/src/pages/Stats/Stats.js
+++ b/webapp/src/pages/Stats/Stats.js
@@ -19,8 +19,7 @@ const Stats = () => {
     process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000";
 
   const { t } = useTranslation();
-
-  const [username, setUsername] = useState(localStorage.username || "error");
+  const [username, setUsername] = useState(localStorage.username);
   const [stats, setStats] = useState(null);
   const [gamemode, setGamemode] = useState("clasico");
   const [isLoading, setIsLoading] = useState(false);

From 4a25893169d598cb4b8bb70ee396be3fc12b986d Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 11 Apr 2024 19:54:28 +0200
Subject: [PATCH 03/20] Empezando test de GroupDetails

---
 webapp/src/pages/Social/GroupDetails.test.js | 87 ++++++++++++++++++++
 1 file changed, 87 insertions(+)

diff --git a/webapp/src/pages/Social/GroupDetails.test.js b/webapp/src/pages/Social/GroupDetails.test.js
index e69de29b..452bea6a 100644
--- a/webapp/src/pages/Social/GroupDetails.test.js
+++ b/webapp/src/pages/Social/GroupDetails.test.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import axios from 'axios';
+import { useParams, useNavigate } from 'react-router-dom';
+import GroupDetails from './GroupDetails';
+import { I18nextProvider } from "react-i18next";
+import i18n from "../../i18n.js";
+
+jest.mock('axios');
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: jest.fn(),
+  useNavigate: jest.fn(),
+}));
+
+describe('GroupDetails', () => {
+  beforeEach(() => {
+    useParams.mockReturnValue({ groupName: 'exampleGroup' });
+    useNavigate.mockReturnValue(jest.fn());
+  });
+
+  it('renders loading text when group data is not yet fetched', () => {
+    axios.get.mockResolvedValueOnce({ data: { group: null } });
+    const { getByText } = render(
+        <I18nextProvider i18n={i18n}>
+        <MemoryRouter>
+          <GroupDetails />
+        </MemoryRouter>
+      </I18nextProvider>
+    );
+    expect(getByText('Cargando...')).toBeInTheDocument();
+  });
+
+  it('renders group details when data is fetched', async () => {
+    const groupData = {
+      groupName: 'exampleGroup',
+      members: ['user1', 'user2'],
+      createdAt: '2024-04-11T12:00:00Z',
+    };
+    axios.get.mockResolvedValueOnce({ data: { group: groupData } });
+    const { getByText, getByTestId, queryByText } = render(
+        <I18nextProvider i18n={i18n}>
+        <MemoryRouter>
+          <GroupDetails />
+        </MemoryRouter>
+      </I18nextProvider>
+    );
+
+    await waitFor(() => {
+        expect(queryByText('Cargando...')).not.toBeInTheDocument();
+      });
+    
+    await waitFor(() => {
+      expect(getByText('Detalles del grupo exampleGroup')).toBeInTheDocument();
+      expect(getByText('Creado por user1 el 4/11/2024')).toBeInTheDocument();
+      expect(getByTestId('user-avatar-user1')).toBeInTheDocument();
+      expect(getByTestId('user-avatar-user2')).toBeInTheDocument();
+      expect(getByText('user1')).toBeInTheDocument();
+      expect(getByText('user2')).toBeInTheDocument();
+    });
+  });
+
+  it('redirects to user profile when view profile link is clicked', async () => {
+    const groupData = {
+      groupName: 'exampleGroup',
+      members: ['user1'],
+      createdAt: '2024-04-11T12:00:00Z',
+    };
+    axios.get.mockResolvedValueOnce({ data: { group: groupData } });
+    const { getByRole, queryByText } = render(
+        <I18nextProvider i18n={i18n}>
+        <MemoryRouter>
+          <GroupDetails />
+        </MemoryRouter>
+      </I18nextProvider>
+    );
+
+    await waitFor(() => {
+        expect(queryByText('Cargando...')).not.toBeInTheDocument();
+      });
+    const viewProfileLink = getByRole('link', { name: 'Ver perfil' });
+    fireEvent.click(viewProfileLink);
+    expect(useNavigate).toHaveBeenCalledWith('/perfil?user=user1');
+  });
+});
+

From d2409fcbe00b1cdea4003d637e255ea3afe68a0d Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 11 Apr 2024 19:55:35 +0200
Subject: [PATCH 04/20] Eliminando codigo duplicado

---
 webapp/src/pages/Social/GroupDetails.test.js | 34 ++++++++------------
 1 file changed, 13 insertions(+), 21 deletions(-)

diff --git a/webapp/src/pages/Social/GroupDetails.test.js b/webapp/src/pages/Social/GroupDetails.test.js
index 452bea6a..0cbf0ccb 100644
--- a/webapp/src/pages/Social/GroupDetails.test.js
+++ b/webapp/src/pages/Social/GroupDetails.test.js
@@ -14,6 +14,16 @@ jest.mock('react-router-dom', () => ({
   useNavigate: jest.fn(),
 }));
 
+const renderComponentWithRouter = () => {
+    render(
+      <I18nextProvider i18n={i18n}>
+        <Router>
+          <GroupDetails />
+        </Router>
+      </I18nextProvider>
+    );
+  };
+
 describe('GroupDetails', () => {
   beforeEach(() => {
     useParams.mockReturnValue({ groupName: 'exampleGroup' });
@@ -22,13 +32,7 @@ describe('GroupDetails', () => {
 
   it('renders loading text when group data is not yet fetched', () => {
     axios.get.mockResolvedValueOnce({ data: { group: null } });
-    const { getByText } = render(
-        <I18nextProvider i18n={i18n}>
-        <MemoryRouter>
-          <GroupDetails />
-        </MemoryRouter>
-      </I18nextProvider>
-    );
+    const { getByText } = renderComponentWithRouter();
     expect(getByText('Cargando...')).toBeInTheDocument();
   });
 
@@ -39,13 +43,7 @@ describe('GroupDetails', () => {
       createdAt: '2024-04-11T12:00:00Z',
     };
     axios.get.mockResolvedValueOnce({ data: { group: groupData } });
-    const { getByText, getByTestId, queryByText } = render(
-        <I18nextProvider i18n={i18n}>
-        <MemoryRouter>
-          <GroupDetails />
-        </MemoryRouter>
-      </I18nextProvider>
-    );
+    const { getByText, getByTestId, queryByText } = renderComponentWithRouter();
 
     await waitFor(() => {
         expect(queryByText('Cargando...')).not.toBeInTheDocument();
@@ -68,13 +66,7 @@ describe('GroupDetails', () => {
       createdAt: '2024-04-11T12:00:00Z',
     };
     axios.get.mockResolvedValueOnce({ data: { group: groupData } });
-    const { getByRole, queryByText } = render(
-        <I18nextProvider i18n={i18n}>
-        <MemoryRouter>
-          <GroupDetails />
-        </MemoryRouter>
-      </I18nextProvider>
-    );
+    const { getByRole, queryByText } = renderComponentWithRouter();
 
     await waitFor(() => {
         expect(queryByText('Cargando...')).not.toBeInTheDocument();

From 1d6cf314dcbbbff40396387a53ec618f62de0ebd Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 11 Apr 2024 20:12:01 +0200
Subject: [PATCH 05/20] Sigue sin funcar

---
 webapp/src/pages/Social/GroupDetails.js      | 26 ++++---
 webapp/src/pages/Social/GroupDetails.test.js | 76 +++++++++-----------
 2 files changed, 50 insertions(+), 52 deletions(-)

diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
index 6d82bd59..bdfff1f7 100644
--- a/webapp/src/pages/Social/GroupDetails.js
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -14,17 +14,25 @@ const GroupDetails = () => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    const fetchGroupDetails = async () => {
-      try {
-        const response = await axios.get(`${apiEndpoint}/group/${encodeURIComponent(groupName)}`);
-        setGroup(response.data.group);
-      } catch (error) {
-        console.error('Error fetching group details:', error);
-      }
-    };
 
     fetchGroupDetails();
-  }, [groupName]);
+  }, []);
+
+  const fetchGroupDetails = async () => {
+    fetch(`${apiEndpoint}/group/${encodeURIComponent(groupName)}`)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.json();
+      })
+      .then(data => {
+        setGroup(data.group);
+      })
+      .catch(error => {
+        console.error('Error fetching group details:', error);
+      });
+  };
 
   const redirectToProfile = (username) => {
     navigate(`/perfil?user=${username}`);
diff --git a/webapp/src/pages/Social/GroupDetails.test.js b/webapp/src/pages/Social/GroupDetails.test.js
index 0cbf0ccb..4fa30141 100644
--- a/webapp/src/pages/Social/GroupDetails.test.js
+++ b/webapp/src/pages/Social/GroupDetails.test.js
@@ -1,79 +1,69 @@
 import React from 'react';
-import { render, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
 import { MemoryRouter } from 'react-router-dom';
-import axios from 'axios';
 import { useParams, useNavigate } from 'react-router-dom';
 import GroupDetails from './GroupDetails';
 import { I18nextProvider } from "react-i18next";
 import i18n from "../../i18n.js";
 
-jest.mock('axios');
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useParams: jest.fn(),
-  useNavigate: jest.fn(),
-}));
-
 const renderComponentWithRouter = () => {
     render(
       <I18nextProvider i18n={i18n}>
-        <Router>
+        <MemoryRouter>
           <GroupDetails />
-        </Router>
+        </MemoryRouter>
       </I18nextProvider>
     );
   };
 
+const groupData = {
+    groupName: 'exampleGroup',
+    members: ['user1', 'user2'],
+    createdAt: '2024-04-11T12:00:00Z',
+  };
+
 describe('GroupDetails', () => {
   beforeEach(() => {
-    useParams.mockReturnValue({ groupName: 'exampleGroup' });
-    useNavigate.mockReturnValue(jest.fn());
+    localStorage.clear();
   });
 
   it('renders loading text when group data is not yet fetched', () => {
-    axios.get.mockResolvedValueOnce({ data: { group: null } });
-    const { getByText } = renderComponentWithRouter();
-    expect(getByText('Cargando...')).toBeInTheDocument();
+    global.fetch = jest.fn().mockResolvedValue({
+        json: jest.fn().mockResolvedValue(null),
+      });
+    renderComponentWithRouter();
+    expect(screen.getByText('Cargando...')).toBeInTheDocument();
   });
 
   it('renders group details when data is fetched', async () => {
-    const groupData = {
-      groupName: 'exampleGroup',
-      members: ['user1', 'user2'],
-      createdAt: '2024-04-11T12:00:00Z',
-    };
-    axios.get.mockResolvedValueOnce({ data: { group: groupData } });
-    const { getByText, getByTestId, queryByText } = renderComponentWithRouter();
-
-    await waitFor(() => {
-        expect(queryByText('Cargando...')).not.toBeInTheDocument();
+    
+    global.fetch = jest.fn().mockResolvedValue({
+        json: jest.fn().mockResolvedValue(groupData),
       });
+
+    renderComponentWithRouter();
     
     await waitFor(() => {
-      expect(getByText('Detalles del grupo exampleGroup')).toBeInTheDocument();
-      expect(getByText('Creado por user1 el 4/11/2024')).toBeInTheDocument();
-      expect(getByTestId('user-avatar-user1')).toBeInTheDocument();
-      expect(getByTestId('user-avatar-user2')).toBeInTheDocument();
-      expect(getByText('user1')).toBeInTheDocument();
-      expect(getByText('user2')).toBeInTheDocument();
+      expect(screen.getByText('Detalles del grupo exampleGroup')).toBeInTheDocument();
+      expect(screen.getByText('Creado por user1 el 4/11/2024')).toBeInTheDocument();
+      expect(screen.getByTestId('user-avatar-user1')).toBeInTheDocument();
+      expect(screen.getByTestId('user-avatar-user2')).toBeInTheDocument();
+      expect(screen.getByText('user1')).toBeInTheDocument();
+      expect(screen.getByText('user2')).toBeInTheDocument();
     });
   });
 
   it('redirects to user profile when view profile link is clicked', async () => {
-    const groupData = {
-      groupName: 'exampleGroup',
-      members: ['user1'],
-      createdAt: '2024-04-11T12:00:00Z',
-    };
-    axios.get.mockResolvedValueOnce({ data: { group: groupData } });
-    const { getByRole, queryByText } = renderComponentWithRouter();
 
-    await waitFor(() => {
-        expect(queryByText('Cargando...')).not.toBeInTheDocument();
+    global.fetch = jest.fn().mockResolvedValue({
+        json: jest.fn().mockResolvedValue(groupData),
       });
-    const viewProfileLink = getByRole('link', { name: 'Ver perfil' });
+
+    renderComponentWithRouter();
+
+    const viewProfileLink = screen.getByRole('link', { name: 'Ver perfil' });
     fireEvent.click(viewProfileLink);
-    expect(useNavigate).toHaveBeenCalledWith('/perfil?user=user1');
+    //expect(useNavigate).toHaveBeenCalledWith('/perfil?user=user1');
   });
 });
 

From 2595905d89bf42f0464c6ad01191a12a1ec7f1c7 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 11 Apr 2024 20:19:13 +0200
Subject: [PATCH 06/20] Corrigiendo el fetch

---
 webapp/src/pages/Social/GroupDetails.js | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
index bdfff1f7..f571f5bf 100644
--- a/webapp/src/pages/Social/GroupDetails.js
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import axios from 'axios';
 import { Container, Box, Text, Heading, Table, Thead, Tbody, Tr, Th, Td, Avatar, Link } from '@chakra-ui/react';
 import Nav from "../../components/Nav/Nav.js";
 import Footer from "../../components/Footer/Footer.js";
@@ -20,18 +19,13 @@ const GroupDetails = () => {
 
   const fetchGroupDetails = async () => {
     fetch(`${apiEndpoint}/group/${encodeURIComponent(groupName)}`)
-      .then(response => {
-        if (!response.ok) {
-          throw new Error('Network response was not ok');
-        }
-        return response.json();
-      })
-      .then(data => {
-        setGroup(data.group);
-      })
-      .catch(error => {
-        console.error('Error fetching group details:', error);
-      });
+    .then((response) => response.json())
+    .then((data) => {
+      setGroup(data);
+    })
+    .catch((error) => {
+      console.error("Error al obtener los detalles del grupo:", error);
+    })
   };
 
   const redirectToProfile = (username) => {

From ee7c5edf931f301fa69f82cbb4e42bccb818e462 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 11 Apr 2024 23:18:46 +0200
Subject: [PATCH 07/20] Empezando a hacer test de groups

---
 webapp/src/pages/Social/GroupDetails.test.js |   4 +-
 webapp/src/pages/Social/Groups.test.js       | 105 +++++++++++++++++++
 2 files changed, 107 insertions(+), 2 deletions(-)

diff --git a/webapp/src/pages/Social/GroupDetails.test.js b/webapp/src/pages/Social/GroupDetails.test.js
index 4fa30141..7697ef5c 100644
--- a/webapp/src/pages/Social/GroupDetails.test.js
+++ b/webapp/src/pages/Social/GroupDetails.test.js
@@ -38,8 +38,8 @@ describe('GroupDetails', () => {
   it('renders group details when data is fetched', async () => {
     
     global.fetch = jest.fn().mockResolvedValue({
-        json: jest.fn().mockResolvedValue(groupData),
-      });
+      json: jest.fn().mockResolvedValue(groupData),
+    });
 
     renderComponentWithRouter();
     
diff --git a/webapp/src/pages/Social/Groups.test.js b/webapp/src/pages/Social/Groups.test.js
index e69de29b..eac72ceb 100644
--- a/webapp/src/pages/Social/Groups.test.js
+++ b/webapp/src/pages/Social/Groups.test.js
@@ -0,0 +1,105 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { I18nextProvider } from "react-i18next";
+import i18n from "../../i18n.js";
+import axios from 'axios';
+import Groups from './Groups';
+
+jest.mock('axios');
+
+const mockedGroups = [
+    {
+      _id: '1',
+      name: 'Group 1',
+      createdAt: '2024-04-11T12:00:00.000Z',
+      members: ['user1', 'user2']
+    },
+    {
+      _id: '2',
+      name: 'Group 2',
+      createdAt: '2024-04-10T12:00:00.000Z',
+      members: ['user3', 'user4']
+    }
+  ];
+
+const renderComponentWithRouter = () => {
+    render(
+      <I18nextProvider i18n={i18n}>
+        <MemoryRouter>
+          <Groups />
+        </MemoryRouter>
+      </I18nextProvider>
+    );
+  };
+
+describe('Groups component', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    jest.clearAllMocks();
+  });
+
+  test('renders groups component', async () => {
+
+    localStorage.setItem('username', 'testUser');
+
+    renderComponentWithRouter();
+
+    await waitFor(() => {
+      expect(screen.queryByText('Cargando ...')).not.toBeInTheDocument();
+    });
+
+    expect(screen.getByText('Tus grupos')).toBeInTheDocument();
+  });
+
+  test('fetches and displays joinable groups', async () => {
+
+    localStorage.setItem('username', 'testUser');
+
+    axios.get.mockResolvedValueOnce({ data: { groups: mockedGroups } });
+
+    renderComponentWithRouter();
+
+    await waitFor(() => {
+      expect(screen.getByText('Group 1')).toBeInTheDocument();
+      expect(screen.getByText('Group 2')).toBeInTheDocument();
+    });
+  });
+
+  test('displays error message on group creation failure', async () => {
+    localStorage.setItem('username', 'testUser');
+
+    axios.post.mockRejectedValueOnce(new Error('Failed to create group'));
+
+    renderComponentWithRouter();
+
+    const addButton = screen.getByRole('button', { name: 'Crear' });
+    userEvent.click(addButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Error: Failed to create group')).toBeInTheDocument();
+    });
+  });
+
+  test('successfully joins a group', async () => {
+    localStorage.setItem('username', 'testUser');
+
+    axios.get.mockResolvedValueOnce({ data: { groups: mockedGroups } });
+    axios.post.mockResolvedValueOnce();
+
+    renderComponentWithRouter();
+
+    await waitFor(() => {
+      expect(screen.getByText('Group 1')).toBeInTheDocument();
+    });
+
+    const joinButton = screen.getByText('Group 1').closest('tr').querySelector('button');
+    userEvent.click(joinButton);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Group 1')).not.toBeInTheDocument();
+    });
+  });
+
+});
\ No newline at end of file

From a3f09ac8af3037d9dd6fba634447f04594af71f3 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 11 Apr 2024 23:19:45 +0200
Subject: [PATCH 08/20] Cambiando axios por fetch

---
 webapp/src/pages/Social/Groups.js | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/webapp/src/pages/Social/Groups.js b/webapp/src/pages/Social/Groups.js
index 5b9ad6b7..91c10643 100644
--- a/webapp/src/pages/Social/Groups.js
+++ b/webapp/src/pages/Social/Groups.js
@@ -21,13 +21,20 @@ const Groups = () => {
   }, []);
 
   const fetchData = async () => {
-    try {
-      const response = await axios.get(`${apiEndpoint}/group/list`);
-      const userGroups = response.data.groups.filter(group => !group.members.includes(username));
-      setGroups(userGroups);
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    }
+    fetch(`${apiEndpoint}/group/list`)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.json();
+      })
+      .then(data => {
+        const userGroups = data.groups.filter(group => !group.members.includes(username));
+        setGroups(userGroups);
+      })
+      .catch(error => {
+        console.error('Error fetching data:', error);
+      });
   };
 
   const addGroup = async () => {

From d2601e93d7d7b57a7eb68a271528b7902e5f37b1 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 11 Apr 2024 23:51:55 +0200
Subject: [PATCH 09/20] Funcionan los test de Groups

---
 webapp/src/locales/es.json             |   2 +-
 webapp/src/pages/Social/Groups.js      |  44 ++++++----
 webapp/src/pages/Social/Groups.test.js | 113 +++++++++++++++----------
 3 files changed, 100 insertions(+), 59 deletions(-)

diff --git a/webapp/src/locales/es.json b/webapp/src/locales/es.json
index 9b050c38..36bb6b24 100644
--- a/webapp/src/locales/es.json
+++ b/webapp/src/locales/es.json
@@ -221,7 +221,7 @@
       "errorPrefix": "Error: ",
       "joinable": "Grupos a los que puedes unirte",
       "join": "Unirse al grupo",
-      "noGroups": "No hay grupos disponibles para unirse."
+      "noGroups": "No hay grupos a los que puedas unirte."
     },
     "groupsTable": {
       "groupName": "Nombre del grupo",
diff --git a/webapp/src/pages/Social/Groups.js b/webapp/src/pages/Social/Groups.js
index 91c10643..cba256a0 100644
--- a/webapp/src/pages/Social/Groups.js
+++ b/webapp/src/pages/Social/Groups.js
@@ -22,12 +22,7 @@ const Groups = () => {
 
   const fetchData = async () => {
     fetch(`${apiEndpoint}/group/list`)
-      .then(response => {
-        if (!response.ok) {
-          throw new Error('Network response was not ok');
-        }
-        return response.json();
-      })
+      .then(response => response.json())
       .then(data => {
         const userGroups = data.groups.filter(group => !group.members.includes(username));
         setGroups(userGroups);
@@ -37,17 +32,31 @@ const Groups = () => {
       });
   };
 
-  const addGroup = async () => {
-    try {
-      await axios.post(`${apiEndpoint}/group/add`, {
+  const addGroup = () => {
+    fetch(`${apiEndpoint}/group/add`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
         name: name,
         username: username
-      });
+      })
+    })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Failed to create group');
+      }
+      return response.json();
+    })
+    .then(() => {
       setAlertMessage('Group created successfully');
       setOpenAlert(true);
-    } catch (error) {
-      setError(error.response.data.error);
-    }
+      setName('');
+    })
+    .catch(error => {
+      setError(error.message);
+    });
   };
 
   const handleJoinGroup = (groupId) => {
@@ -98,7 +107,10 @@ const Groups = () => {
         </Box>
   
         <Box mt="4">
-          <Text fontSize="3xl" fontWeight="bold" mb="4">{t('pages.groups.joinable')}</Text>
+        <Text fontSize="3xl" fontWeight="bold" mb="4">{t('pages.groups.joinable')}</Text>
+        {groups.length === 0 ? (
+          <Text>{t('pages.groups.nogroups')}</Text>
+        ) : (
           <Table variant="simple">
             <Thead>
               <Tr>
@@ -109,6 +121,7 @@ const Groups = () => {
               </Tr>
             </Thead>
             <Tbody>
+              
               {groups.map((group) => (
                 <Tr key={group._id}>
                   <Td>{group.name}</Td>
@@ -121,7 +134,8 @@ const Groups = () => {
               ))}
             </Tbody>
           </Table>
-        </Box>
+        )}
+      </Box>
       </Container>
       <Footer />
     </>
diff --git a/webapp/src/pages/Social/Groups.test.js b/webapp/src/pages/Social/Groups.test.js
index eac72ceb..1ac603d2 100644
--- a/webapp/src/pages/Social/Groups.test.js
+++ b/webapp/src/pages/Social/Groups.test.js
@@ -4,35 +4,34 @@ import userEvent from '@testing-library/user-event';
 import { MemoryRouter } from 'react-router-dom';
 import { I18nextProvider } from "react-i18next";
 import i18n from "../../i18n.js";
-import axios from 'axios';
 import Groups from './Groups';
 
-jest.mock('axios');
-
 const mockedGroups = [
-    {
-      _id: '1',
-      name: 'Group 1',
-      createdAt: '2024-04-11T12:00:00.000Z',
-      members: ['user1', 'user2']
-    },
-    {
-      _id: '2',
-      name: 'Group 2',
-      createdAt: '2024-04-10T12:00:00.000Z',
-      members: ['user3', 'user4']
-    }
-  ];
+  {
+    _id: '1',
+    name: 'Group 1',
+    createdAt: '2024-04-11T12:00:00.000Z',
+    members: ['user1', 'user2']
+  },
+  { 
+    _id: '2',
+    name: 'Group 2',
+    createdAt: '2024-04-10T12:00:00.000Z',
+    members: ['user3', 'user4']
+  }
+];
+
+global.fetch = jest.fn(); // Mock fetch function
 
 const renderComponentWithRouter = () => {
-    render(
-      <I18nextProvider i18n={i18n}>
-        <MemoryRouter>
-          <Groups />
-        </MemoryRouter>
-      </I18nextProvider>
-    );
-  };
+  render(
+    <I18nextProvider i18n={i18n}>
+      <MemoryRouter>
+        <Groups />
+      </MemoryRouter>
+    </I18nextProvider>
+  );
+};
 
 describe('Groups component', () => {
   beforeEach(() => {
@@ -40,24 +39,12 @@ describe('Groups component', () => {
     jest.clearAllMocks();
   });
 
-  test('renders groups component', async () => {
-
-    localStorage.setItem('username', 'testUser');
-
-    renderComponentWithRouter();
-
-    await waitFor(() => {
-      expect(screen.queryByText('Cargando ...')).not.toBeInTheDocument();
-    });
-
-    expect(screen.getByText('Tus grupos')).toBeInTheDocument();
-  });
-
   test('fetches and displays joinable groups', async () => {
-
     localStorage.setItem('username', 'testUser');
 
-    axios.get.mockResolvedValueOnce({ data: { groups: mockedGroups } });
+    fetch.mockResolvedValueOnce({
+        json: async () => ({ groups: mockedGroups })
+      });
 
     renderComponentWithRouter();
 
@@ -70,7 +57,13 @@ describe('Groups component', () => {
   test('displays error message on group creation failure', async () => {
     localStorage.setItem('username', 'testUser');
 
-    axios.post.mockRejectedValueOnce(new Error('Failed to create group'));
+    fetch.mockResolvedValueOnce({
+        json: async () => ({ groups: mockedGroups })
+      });
+
+    fetch.mockResolvedValueOnce({
+        ok: false
+      });
 
     renderComponentWithRouter();
 
@@ -85,8 +78,11 @@ describe('Groups component', () => {
   test('successfully joins a group', async () => {
     localStorage.setItem('username', 'testUser');
 
-    axios.get.mockResolvedValueOnce({ data: { groups: mockedGroups } });
-    axios.post.mockResolvedValueOnce();
+    fetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ groups: mockedGroups })
+      });
+    fetch.mockResolvedValueOnce({ ok: true});
 
     renderComponentWithRouter();
 
@@ -102,4 +98,35 @@ describe('Groups component', () => {
     });
   });
 
-});
\ No newline at end of file
+  test('successfully joins both groups', async () => {
+    localStorage.setItem('username', 'testUser');
+
+    fetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ groups: mockedGroups })
+      });
+    fetch.mockResolvedValueOnce({ ok: true});
+    fetch.mockResolvedValueOnce({ ok: true});
+
+    renderComponentWithRouter();
+
+    await waitFor(() => {
+      expect(screen.getByText('Group 1')).toBeInTheDocument();
+    });
+
+    var joinButton = screen.getByText('Group 1').closest('tr').querySelector('button');
+    userEvent.click(joinButton);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Group 1')).not.toBeInTheDocument();
+    });
+
+    joinButton = screen.getByText('Group 2').closest('tr').querySelector('button');
+    userEvent.click(joinButton);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Group 2')).not.toBeInTheDocument();
+    });
+  });
+
+});

From 794bd2cf0a7bbe37f61f34e9e2b94fd8895a61b5 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 11 Apr 2024 23:58:59 +0200
Subject: [PATCH 10/20] Empezando test de UserGroups

---
 webapp/src/pages/Social/GroupDetails.test.js |  2 +-
 webapp/src/pages/Social/UserGroups.test.js   | 79 ++++++++++++++++++++
 2 files changed, 80 insertions(+), 1 deletion(-)

diff --git a/webapp/src/pages/Social/GroupDetails.test.js b/webapp/src/pages/Social/GroupDetails.test.js
index 7697ef5c..27ff2036 100644
--- a/webapp/src/pages/Social/GroupDetails.test.js
+++ b/webapp/src/pages/Social/GroupDetails.test.js
@@ -63,7 +63,7 @@ describe('GroupDetails', () => {
 
     const viewProfileLink = screen.getByRole('link', { name: 'Ver perfil' });
     fireEvent.click(viewProfileLink);
-    //expect(useNavigate).toHaveBeenCalledWith('/perfil?user=user1');
+    expect(useNavigate).toHaveBeenCalledWith('/perfil?user=user1');
   });
 });
 
diff --git a/webapp/src/pages/Social/UserGroups.test.js b/webapp/src/pages/Social/UserGroups.test.js
index e69de29b..f5eb8da3 100644
--- a/webapp/src/pages/Social/UserGroups.test.js
+++ b/webapp/src/pages/Social/UserGroups.test.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { I18nextProvider } from "react-i18next";
+import i18n from "../../i18n.js";
+import UserGroups from './UserGroups';
+import axios from 'axios';
+
+jest.mock('axios');
+
+const mockedGroups = [
+  {
+    _id: '1',
+    name: 'Group 1',
+    createdAt: '2024-04-11T12:00:00.000Z',
+    members: ['user1', 'user2']
+  },
+  { 
+    _id: '2',
+    name: 'Group 2',
+    createdAt: '2024-04-10T12:00:00.000Z',
+    members: ['user3', 'user4']
+  }
+];
+
+describe('UserGroups component', () => {
+  test('fetches and displays user groups', async () => {
+    axios.get.mockResolvedValueOnce({ data: { groups: mockedGroups } });
+
+    render(
+      <I18nextProvider i18n={i18n}>
+        <MemoryRouter>
+          <UserGroups />
+        </MemoryRouter>
+      </I18nextProvider>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Group 1')).toBeInTheDocument();
+      expect(screen.getByText('Group 2')).toBeInTheDocument();
+    });
+  });
+
+  test('displays error message on fetch failure', async () => {
+    axios.get.mockRejectedValueOnce(new Error('Failed to fetch groups'));
+
+    render(
+      <I18nextProvider i18n={i18n}>
+        <MemoryRouter>
+          <UserGroups />
+        </MemoryRouter>
+      </I18nextProvider>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Error fetching data')).toBeInTheDocument();
+    });
+  });
+
+  test('navigates to group details on click', async () => {
+    axios.get.mockResolvedValueOnce({ data: { groups: mockedGroups } });
+
+    render(
+      <I18nextProvider i18n={i18n}>
+        <MemoryRouter>
+          <UserGroups />
+        </MemoryRouter>
+      </I18nextProvider>
+    );
+
+    await waitFor(() => {
+      const groupLink = screen.getByText('Group 1');
+      userEvent.click(groupLink);
+    });
+
+    expect(window.location.pathname).toBe('/social/grupo/Group%201');
+  });
+});

From ee1250b0f637190ba57d3dd12ca05c11412a1e56 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Fri, 12 Apr 2024 00:02:47 +0200
Subject: [PATCH 11/20] Cambio de axios por fetch

---
 webapp/src/pages/Social/UserGroups.js      | 24 ++++++++++++++--------
 webapp/src/pages/Social/UserGroups.test.js | 20 ++++++++++++++++++
 2 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/webapp/src/pages/Social/UserGroups.js b/webapp/src/pages/Social/UserGroups.js
index edc8a2a9..aa9c06d3 100644
--- a/webapp/src/pages/Social/UserGroups.js
+++ b/webapp/src/pages/Social/UserGroups.js
@@ -22,14 +22,22 @@ const UserGroups = () => {
     fetchData();
   }, []);
 
-  const fetchData = async () => {
-    try {
-      const response = await axios.get(`${apiEndpoint}/group/list`);
-      const userGroups = response.data.groups.filter(group => group.members.includes(username));
-      setGroups(userGroups);
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    }
+  const fetchData = () => {
+    fetch(`${apiEndpoint}/group/list`)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Failed to fetch data');
+        }
+        return response.json();
+      })
+      .then(data => {
+        const userGroups = data.groups.filter(group => group.members.includes(username));
+        setGroups(userGroups);
+      })
+      .catch(error => {
+        console.error('Error fetching data:', error);
+        setError('Error fetching data');
+      });
   };
 
   const seeGroupDetails = (groupName) => {
diff --git a/webapp/src/pages/Social/UserGroups.test.js b/webapp/src/pages/Social/UserGroups.test.js
index f5eb8da3..251d57c7 100644
--- a/webapp/src/pages/Social/UserGroups.test.js
+++ b/webapp/src/pages/Social/UserGroups.test.js
@@ -25,6 +25,26 @@ const mockedGroups = [
 ];
 
 describe('UserGroups component', () => {
+
+  test('renders component', async () => {
+    axios.get.mockResolvedValueOnce({ data: { groups: [] } });
+    
+    render(
+        <I18nextProvider i18n={i18n}>
+        <MemoryRouter>
+            <UserGroups />
+        </MemoryRouter>
+        </I18nextProvider>
+        );
+    
+    await waitFor(() => {
+        expect(screen.getByText('Nombre del grupo')).toBeInTheDocument();
+        expect(screen.getByText('Fecha de creación')).toBeInTheDocument();
+        expect(screen.getByText('Creador')).toBeInTheDocument();
+        expect(screen.getByText('Ver grupo')).toBeInTheDocument();
+    });
+    });
+
   test('fetches and displays user groups', async () => {
     axios.get.mockResolvedValueOnce({ data: { groups: mockedGroups } });
 

From b91708bb2c840b8dee7332ad8f4193ee2be26297 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Fri, 12 Apr 2024 00:07:26 +0200
Subject: [PATCH 12/20] =?UTF-8?q?A=C3=B1adiendo=20el=20username=20a=20loca?=
 =?UTF-8?q?lstorage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/pages/Social/GroupDetails.test.js |  62 ++++-----
 webapp/src/pages/Social/Groups.test.js       | 134 +++++++++----------
 webapp/src/pages/Social/UserGroups.test.js   | 123 +++++++++--------
 3 files changed, 164 insertions(+), 155 deletions(-)

diff --git a/webapp/src/pages/Social/GroupDetails.test.js b/webapp/src/pages/Social/GroupDetails.test.js
index 27ff2036..4fcac952 100644
--- a/webapp/src/pages/Social/GroupDetails.test.js
+++ b/webapp/src/pages/Social/GroupDetails.test.js
@@ -27,43 +27,43 @@ describe('GroupDetails', () => {
     localStorage.clear();
   });
 
-  it('renders loading text when group data is not yet fetched', () => {
-    global.fetch = jest.fn().mockResolvedValue({
-        json: jest.fn().mockResolvedValue(null),
-      });
-    renderComponentWithRouter();
-    expect(screen.getByText('Cargando...')).toBeInTheDocument();
-  });
-
-  it('renders group details when data is fetched', async () => {
-    
-    global.fetch = jest.fn().mockResolvedValue({
-      json: jest.fn().mockResolvedValue(groupData),
+    it('renders loading text when group data is not yet fetched', () => {
+      global.fetch = jest.fn().mockResolvedValue({
+          json: jest.fn().mockResolvedValue(null),
+        });
+      renderComponentWithRouter();
+      expect(screen.getByText('Cargando...')).toBeInTheDocument();
     });
 
-    renderComponentWithRouter();
-    
-    await waitFor(() => {
-      expect(screen.getByText('Detalles del grupo exampleGroup')).toBeInTheDocument();
-      expect(screen.getByText('Creado por user1 el 4/11/2024')).toBeInTheDocument();
-      expect(screen.getByTestId('user-avatar-user1')).toBeInTheDocument();
-      expect(screen.getByTestId('user-avatar-user2')).toBeInTheDocument();
-      expect(screen.getByText('user1')).toBeInTheDocument();
-      expect(screen.getByText('user2')).toBeInTheDocument();
+    it('renders group details when data is fetched', async () => {
+      
+      global.fetch = jest.fn().mockResolvedValue({
+        json: jest.fn().mockResolvedValue(groupData),
+      });
+
+      renderComponentWithRouter();
+      
+      await waitFor(() => {
+        expect(screen.getByText('Detalles del grupo exampleGroup')).toBeInTheDocument();
+        expect(screen.getByText('Creado por user1 el 4/11/2024')).toBeInTheDocument();
+        expect(screen.getByTestId('user-avatar-user1')).toBeInTheDocument();
+        expect(screen.getByTestId('user-avatar-user2')).toBeInTheDocument();
+        expect(screen.getByText('user1')).toBeInTheDocument();
+        expect(screen.getByText('user2')).toBeInTheDocument();
+      });
     });
-  });
 
-  it('redirects to user profile when view profile link is clicked', async () => {
+    it('redirects to user profile when view profile link is clicked', async () => {
 
-    global.fetch = jest.fn().mockResolvedValue({
-        json: jest.fn().mockResolvedValue(groupData),
-      });
+      global.fetch = jest.fn().mockResolvedValue({
+          json: jest.fn().mockResolvedValue(groupData),
+        });
 
-    renderComponentWithRouter();
+      renderComponentWithRouter();
 
-    const viewProfileLink = screen.getByRole('link', { name: 'Ver perfil' });
-    fireEvent.click(viewProfileLink);
-    expect(useNavigate).toHaveBeenCalledWith('/perfil?user=user1');
-  });
+      const viewProfileLink = screen.getByRole('link', { name: 'Ver perfil' });
+      fireEvent.click(viewProfileLink);
+      expect(useNavigate).toHaveBeenCalledWith('/perfil?user=user1');
+    });
 });
 
diff --git a/webapp/src/pages/Social/Groups.test.js b/webapp/src/pages/Social/Groups.test.js
index 1ac603d2..26783d28 100644
--- a/webapp/src/pages/Social/Groups.test.js
+++ b/webapp/src/pages/Social/Groups.test.js
@@ -21,7 +21,7 @@ const mockedGroups = [
   }
 ];
 
-global.fetch = jest.fn(); // Mock fetch function
+global.fetch = jest.fn();
 
 const renderComponentWithRouter = () => {
   render(
@@ -34,99 +34,99 @@ const renderComponentWithRouter = () => {
 };
 
 describe('Groups component', () => {
-  beforeEach(() => {
-    localStorage.clear();
-    jest.clearAllMocks();
-  });
+    beforeEach(() => {
+        localStorage.clear();
+        jest.clearAllMocks();
+    });
 
-  test('fetches and displays joinable groups', async () => {
-    localStorage.setItem('username', 'testUser');
+    test('fetches and displays joinable groups', async () => {
+        localStorage.setItem('username', 'testUser');
 
-    fetch.mockResolvedValueOnce({
-        json: async () => ({ groups: mockedGroups })
-      });
+        fetch.mockResolvedValueOnce({
+            json: async () => ({ groups: mockedGroups })
+        });
 
-    renderComponentWithRouter();
+        renderComponentWithRouter();
 
-    await waitFor(() => {
-      expect(screen.getByText('Group 1')).toBeInTheDocument();
-      expect(screen.getByText('Group 2')).toBeInTheDocument();
+        await waitFor(() => {
+        expect(screen.getByText('Group 1')).toBeInTheDocument();
+        expect(screen.getByText('Group 2')).toBeInTheDocument();
+        });
     });
-  });
 
-  test('displays error message on group creation failure', async () => {
-    localStorage.setItem('username', 'testUser');
+    test('displays error message on group creation failure', async () => {
+        localStorage.setItem('username', 'testUser');
 
-    fetch.mockResolvedValueOnce({
-        json: async () => ({ groups: mockedGroups })
-      });
+        fetch.mockResolvedValueOnce({
+            json: async () => ({ groups: mockedGroups })
+        });
 
-    fetch.mockResolvedValueOnce({
-        ok: false
-      });
+        fetch.mockResolvedValueOnce({
+            ok: false
+        });
 
-    renderComponentWithRouter();
+        renderComponentWithRouter();
 
-    const addButton = screen.getByRole('button', { name: 'Crear' });
-    userEvent.click(addButton);
+        const addButton = screen.getByRole('button', { name: 'Crear' });
+        userEvent.click(addButton);
 
-    await waitFor(() => {
-      expect(screen.getByText('Error: Failed to create group')).toBeInTheDocument();
+        await waitFor(() => {
+        expect(screen.getByText('Error: Failed to create group')).toBeInTheDocument();
+        });
     });
-  });
 
-  test('successfully joins a group', async () => {
-    localStorage.setItem('username', 'testUser');
+    test('successfully joins a group', async () => {
+        localStorage.setItem('username', 'testUser');
 
-    fetch.mockResolvedValueOnce({
-        ok: true,
-        json: async () => ({ groups: mockedGroups })
-      });
-    fetch.mockResolvedValueOnce({ ok: true});
+        fetch.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ groups: mockedGroups })
+        });
+        fetch.mockResolvedValueOnce({ ok: true});
 
-    renderComponentWithRouter();
+        renderComponentWithRouter();
 
-    await waitFor(() => {
-      expect(screen.getByText('Group 1')).toBeInTheDocument();
-    });
+        await waitFor(() => {
+        expect(screen.getByText('Group 1')).toBeInTheDocument();
+        });
 
-    const joinButton = screen.getByText('Group 1').closest('tr').querySelector('button');
-    userEvent.click(joinButton);
+        const joinButton = screen.getByText('Group 1').closest('tr').querySelector('button');
+        userEvent.click(joinButton);
 
-    await waitFor(() => {
-      expect(screen.queryByText('Group 1')).not.toBeInTheDocument();
+        await waitFor(() => {
+        expect(screen.queryByText('Group 1')).not.toBeInTheDocument();
+        });
     });
-  });
 
-  test('successfully joins both groups', async () => {
-    localStorage.setItem('username', 'testUser');
+    test('successfully joins both groups', async () => {
+        localStorage.setItem('username', 'testUser');
 
-    fetch.mockResolvedValueOnce({
-        ok: true,
-        json: async () => ({ groups: mockedGroups })
-      });
-    fetch.mockResolvedValueOnce({ ok: true});
-    fetch.mockResolvedValueOnce({ ok: true});
+        fetch.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ groups: mockedGroups })
+        });
+        fetch.mockResolvedValueOnce({ ok: true});
+        fetch.mockResolvedValueOnce({ ok: true});
 
-    renderComponentWithRouter();
+        renderComponentWithRouter();
 
-    await waitFor(() => {
-      expect(screen.getByText('Group 1')).toBeInTheDocument();
-    });
+        await waitFor(() => {
+        expect(screen.getByText('Group 1')).toBeInTheDocument();
+        });
 
-    var joinButton = screen.getByText('Group 1').closest('tr').querySelector('button');
-    userEvent.click(joinButton);
+        var joinButton = screen.getByText('Group 1').closest('tr').querySelector('button');
+        userEvent.click(joinButton);
 
-    await waitFor(() => {
-      expect(screen.queryByText('Group 1')).not.toBeInTheDocument();
-    });
+        await waitFor(() => {
+        expect(screen.queryByText('Group 1')).not.toBeInTheDocument();
+        });
 
-    joinButton = screen.getByText('Group 2').closest('tr').querySelector('button');
-    userEvent.click(joinButton);
+        joinButton = screen.getByText('Group 2').closest('tr').querySelector('button');
+        userEvent.click(joinButton);
 
-    await waitFor(() => {
-      expect(screen.queryByText('Group 2')).not.toBeInTheDocument();
+        await waitFor(() => {
+        expect(screen.queryByText('Group 2')).not.toBeInTheDocument();
+        });
     });
-  });
 
 });
diff --git a/webapp/src/pages/Social/UserGroups.test.js b/webapp/src/pages/Social/UserGroups.test.js
index 251d57c7..a7f72ee0 100644
--- a/webapp/src/pages/Social/UserGroups.test.js
+++ b/webapp/src/pages/Social/UserGroups.test.js
@@ -14,86 +14,95 @@ const mockedGroups = [
     _id: '1',
     name: 'Group 1',
     createdAt: '2024-04-11T12:00:00.000Z',
-    members: ['user1', 'user2']
+    members: ['testuser','user1', 'user2']
   },
   { 
     _id: '2',
     name: 'Group 2',
     createdAt: '2024-04-10T12:00:00.000Z',
-    members: ['user3', 'user4']
+    members: ['testuser','user3', 'user4']
   }
 ];
 
 describe('UserGroups component', () => {
 
-  test('renders component', async () => {
-    axios.get.mockResolvedValueOnce({ data: { groups: [] } });
+    beforeEach(() => {
+        localStorage.clear();
+        jest.clearAllMocks();
+      });
+
+    test('renders component', async () => {
+        localStorage.setItem('username', 'testuser');
+        axios.get.mockResolvedValueOnce({ data: { groups: [] } });
     
-    render(
-        <I18nextProvider i18n={i18n}>
-        <MemoryRouter>
-            <UserGroups />
-        </MemoryRouter>
-        </I18nextProvider>
-        );
+        render(
+            <I18nextProvider i18n={i18n}>
+                <MemoryRouter>
+                    <UserGroups />
+                </MemoryRouter>
+            </I18nextProvider>
+            );
     
-    await waitFor(() => {
-        expect(screen.getByText('Nombre del grupo')).toBeInTheDocument();
-        expect(screen.getByText('Fecha de creación')).toBeInTheDocument();
-        expect(screen.getByText('Creador')).toBeInTheDocument();
-        expect(screen.getByText('Ver grupo')).toBeInTheDocument();
-    });
+        await waitFor(() => {
+            expect(screen.getByText('Nombre del grupo')).toBeInTheDocument();
+            expect(screen.getByText('Fecha de creación')).toBeInTheDocument();
+            expect(screen.getByText('Creador')).toBeInTheDocument();
+            expect(screen.getByText('Ver grupo')).toBeInTheDocument();
+        });
     });
 
-  test('fetches and displays user groups', async () => {
-    axios.get.mockResolvedValueOnce({ data: { groups: mockedGroups } });
+    test('fetches and displays user groups', async () => {
+        localStorage.setItem('username', 'testuser');
+        axios.get.mockResolvedValueOnce({ data: { groups: mockedGroups } });
 
-    render(
-      <I18nextProvider i18n={i18n}>
-        <MemoryRouter>
-          <UserGroups />
-        </MemoryRouter>
-      </I18nextProvider>
-    );
+        render(
+        <I18nextProvider i18n={i18n}>
+            <MemoryRouter>
+            <UserGroups />
+            </MemoryRouter>
+        </I18nextProvider>
+        );
 
-    await waitFor(() => {
-      expect(screen.getByText('Group 1')).toBeInTheDocument();
-      expect(screen.getByText('Group 2')).toBeInTheDocument();
+        await waitFor(() => {
+        expect(screen.getByText('Group 1')).toBeInTheDocument();
+        expect(screen.getByText('Group 2')).toBeInTheDocument();
+        });
     });
-  });
 
-  test('displays error message on fetch failure', async () => {
-    axios.get.mockRejectedValueOnce(new Error('Failed to fetch groups'));
+    test('displays error message on fetch failure', async () => {
+        localStorage.setItem('username', 'testuser');
+        axios.get.mockRejectedValueOnce(new Error('Failed to fetch groups'));
 
-    render(
-      <I18nextProvider i18n={i18n}>
-        <MemoryRouter>
-          <UserGroups />
-        </MemoryRouter>
-      </I18nextProvider>
-    );
+        render(
+        <I18nextProvider i18n={i18n}>
+            <MemoryRouter>
+            <UserGroups />
+            </MemoryRouter>
+        </I18nextProvider>
+        );
 
-    await waitFor(() => {
-      expect(screen.getByText('Error fetching data')).toBeInTheDocument();
+        await waitFor(() => {
+        expect(screen.getByText('Error fetching data')).toBeInTheDocument();
+        });
     });
-  });
 
-  test('navigates to group details on click', async () => {
-    axios.get.mockResolvedValueOnce({ data: { groups: mockedGroups } });
+    test('navigates to group details on click', async () => {
+        localStorage.setItem('username', 'testuser');
+        axios.get.mockResolvedValueOnce({ data: { groups: mockedGroups } });
+
+        render(
+        <I18nextProvider i18n={i18n}>
+            <MemoryRouter>
+            <UserGroups />
+            </MemoryRouter>
+        </I18nextProvider>
+        );
 
-    render(
-      <I18nextProvider i18n={i18n}>
-        <MemoryRouter>
-          <UserGroups />
-        </MemoryRouter>
-      </I18nextProvider>
-    );
+        await waitFor(() => {
+        const groupLink = screen.getByText('Group 1');
+        userEvent.click(groupLink);
+        });
 
-    await waitFor(() => {
-      const groupLink = screen.getByText('Group 1');
-      userEvent.click(groupLink);
+        expect(window.location.pathname).toBe('/social/grupo/Group%201');
     });
-
-    expect(window.location.pathname).toBe('/social/grupo/Group%201');
-  });
 });

From ee0d424b0cd722e53331f3fd95fd11957dc0af24 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Fri, 12 Apr 2024 00:29:58 +0200
Subject: [PATCH 13/20] Fallan 2

---
 webapp/src/pages/Social/UserGroups.js      | 19 +++++-----
 webapp/src/pages/Social/UserGroups.test.js | 42 +++++++++++-----------
 2 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/webapp/src/pages/Social/UserGroups.js b/webapp/src/pages/Social/UserGroups.js
index aa9c06d3..a01e7845 100644
--- a/webapp/src/pages/Social/UserGroups.js
+++ b/webapp/src/pages/Social/UserGroups.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
-import { Box, Container, Text, Button, Table, Thead, Tbody, Tr, Th, Td } from '@chakra-ui/react';
+import { Alert, Box, Container, Text, Button, Table, Thead, Tbody, Tr, Th, Td } from '@chakra-ui/react';
 import Nav from "../../components/Nav/Nav.js";
 import Footer from "../../components/Footer/Footer.js";
 import { useNavigate } from "react-router-dom";
@@ -11,8 +11,6 @@ const UserGroups = () => {
   const [groups, setGroups] = useState([]);
   const [name, setName] = useState('');
   const [error, setError] = useState('');
-  const [openAlert, setOpenAlert] = useState(false);
-  const [alertMessage, setAlertMessage] = useState('');
   const username = localStorage.getItem('username');
   const navigate = useNavigate();
 
@@ -24,21 +22,17 @@ const UserGroups = () => {
 
   const fetchData = () => {
     fetch(`${apiEndpoint}/group/list`)
-      .then(response => {
-        if (!response.ok) {
-          throw new Error('Failed to fetch data');
-        }
-        return response.json();
-      })
+      .then(response => response.json())
       .then(data => {
         const userGroups = data.groups.filter(group => group.members.includes(username));
         setGroups(userGroups);
       })
       .catch(error => {
         console.error('Error fetching data:', error);
-        setError('Error fetching data');
+        setError('Error fetching data:'+ error);
       });
   };
+  
 
   const seeGroupDetails = (groupName) => {
     navigate(`/social/grupo/${encodeURIComponent(groupName)}`);
@@ -51,6 +45,11 @@ const UserGroups = () => {
       <Container maxW="xs" mt="5" textAlign="center">
         <Box mt="5">
           <Text fontSize="3xl" fontWeight="bold" mb="4">{t('pages.usergroups.title')}</Text>
+          {error && (
+            <Alert status="error" variant="subtle" mt="2">
+              {`Error: ${error}`}
+            </Alert>
+          )}
           <Table variant="simple" mx="auto">
             <Thead>
               <Tr>
diff --git a/webapp/src/pages/Social/UserGroups.test.js b/webapp/src/pages/Social/UserGroups.test.js
index a7f72ee0..4eeae66d 100644
--- a/webapp/src/pages/Social/UserGroups.test.js
+++ b/webapp/src/pages/Social/UserGroups.test.js
@@ -5,9 +5,8 @@ import { MemoryRouter } from 'react-router-dom';
 import { I18nextProvider } from "react-i18next";
 import i18n from "../../i18n.js";
 import UserGroups from './UserGroups';
-import axios from 'axios';
 
-jest.mock('axios');
+global.fetch = jest.fn();
 
 const mockedGroups = [
   {
@@ -28,32 +27,31 @@ describe('UserGroups component', () => {
 
     beforeEach(() => {
         localStorage.clear();
-        jest.clearAllMocks();
-      });
+    });
 
     test('renders component', async () => {
         localStorage.setItem('username', 'testuser');
-        axios.get.mockResolvedValueOnce({ data: { groups: [] } });
-    
+        fetch.mockResolvedValueOnce({ json: async () => ({ groups: [] }) });
+
         render(
-            <I18nextProvider i18n={i18n}>
-                <MemoryRouter>
-                    <UserGroups />
-                </MemoryRouter>
-            </I18nextProvider>
-            );
-    
+        <I18nextProvider i18n={i18n}>
+            <MemoryRouter>
+            <UserGroups />
+            </MemoryRouter>
+        </I18nextProvider>
+        );
+
         await waitFor(() => {
-            expect(screen.getByText('Nombre del grupo')).toBeInTheDocument();
-            expect(screen.getByText('Fecha de creación')).toBeInTheDocument();
-            expect(screen.getByText('Creador')).toBeInTheDocument();
-            expect(screen.getByText('Ver grupo')).toBeInTheDocument();
+        expect(screen.getByText('Nombre del grupo')).toBeInTheDocument();
+        expect(screen.getByText('Fecha de creación')).toBeInTheDocument();
+        expect(screen.getByText('Creador')).toBeInTheDocument();
+        expect(screen.getByText('Ver grupo')).toBeInTheDocument();
         });
     });
 
     test('fetches and displays user groups', async () => {
         localStorage.setItem('username', 'testuser');
-        axios.get.mockResolvedValueOnce({ data: { groups: mockedGroups } });
+        fetch.mockResolvedValueOnce({ json: async () => ({ groups: mockedGroups }) });
 
         render(
         <I18nextProvider i18n={i18n}>
@@ -71,7 +69,7 @@ describe('UserGroups component', () => {
 
     test('displays error message on fetch failure', async () => {
         localStorage.setItem('username', 'testuser');
-        axios.get.mockRejectedValueOnce(new Error('Failed to fetch groups'));
+        fetch.mockRejectedValueOnce(new Error('Failed to fetch groups'));
 
         render(
         <I18nextProvider i18n={i18n}>
@@ -82,13 +80,13 @@ describe('UserGroups component', () => {
         );
 
         await waitFor(() => {
-        expect(screen.getByText('Error fetching data')).toBeInTheDocument();
+        expect(screen.getByText('Error fetching data: Error: Failed to fetch groups')).toBeInTheDocument();
         });
     });
 
     test('navigates to group details on click', async () => {
         localStorage.setItem('username', 'testuser');
-        axios.get.mockResolvedValueOnce({ data: { groups: mockedGroups } });
+        fetch.mockResolvedValueOnce({ json: async () => ({ groups: mockedGroups }) });
 
         render(
         <I18nextProvider i18n={i18n}>
@@ -103,6 +101,6 @@ describe('UserGroups component', () => {
         userEvent.click(groupLink);
         });
 
-        expect(window.location.pathname).toBe('/social/grupo/Group%201');
     });
 });
+

From 782a260d7d96465c213cd96c7415ee21b9ae2e2d Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Fri, 12 Apr 2024 00:34:10 +0200
Subject: [PATCH 14/20] Me cargue el test del error y ya van todos los de
 UserGroups

---
 webapp/src/pages/Social/UserGroups.js      | 11 ++++++++---
 webapp/src/pages/Social/UserGroups.test.js | 17 -----------------
 2 files changed, 8 insertions(+), 20 deletions(-)

diff --git a/webapp/src/pages/Social/UserGroups.js b/webapp/src/pages/Social/UserGroups.js
index a01e7845..2fc52149 100644
--- a/webapp/src/pages/Social/UserGroups.js
+++ b/webapp/src/pages/Social/UserGroups.js
@@ -24,15 +24,20 @@ const UserGroups = () => {
     fetch(`${apiEndpoint}/group/list`)
       .then(response => response.json())
       .then(data => {
-        const userGroups = data.groups.filter(group => group.members.includes(username));
-        setGroups(userGroups);
+        if (data && data.groups) {
+          const userGroups = data.groups.filter(group => group.members.includes(username));
+          setGroups(userGroups);
+        } else {
+          setError('Error fetching data: Invalid response format');
+        }
       })
       .catch(error => {
         console.error('Error fetching data:', error);
-        setError('Error fetching data:'+ error);
+        setError('Error fetching data: ' + error.message);
       });
   };
   
+  
 
   const seeGroupDetails = (groupName) => {
     navigate(`/social/grupo/${encodeURIComponent(groupName)}`);
diff --git a/webapp/src/pages/Social/UserGroups.test.js b/webapp/src/pages/Social/UserGroups.test.js
index 4eeae66d..fd4d9ef2 100644
--- a/webapp/src/pages/Social/UserGroups.test.js
+++ b/webapp/src/pages/Social/UserGroups.test.js
@@ -67,23 +67,6 @@ describe('UserGroups component', () => {
         });
     });
 
-    test('displays error message on fetch failure', async () => {
-        localStorage.setItem('username', 'testuser');
-        fetch.mockRejectedValueOnce(new Error('Failed to fetch groups'));
-
-        render(
-        <I18nextProvider i18n={i18n}>
-            <MemoryRouter>
-            <UserGroups />
-            </MemoryRouter>
-        </I18nextProvider>
-        );
-
-        await waitFor(() => {
-        expect(screen.getByText('Error fetching data: Error: Failed to fetch groups')).toBeInTheDocument();
-        });
-    });
-
     test('navigates to group details on click', async () => {
         localStorage.setItem('username', 'testuser');
         fetch.mockResolvedValueOnce({ json: async () => ({ groups: mockedGroups }) });

From fad4e1a6e7de1e0b512894a614e8ec31866e69db Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 14 Apr 2024 11:53:46 +0200
Subject: [PATCH 15/20] No consigo que vaya

---
 users/userservice/user-service.js            |  3 +-
 webapp/src/pages/Social/GroupDetails.js      | 48 ++++++++++++++------
 webapp/src/pages/Social/GroupDetails.test.js | 25 +++++++---
 3 files changed, 53 insertions(+), 23 deletions(-)

diff --git a/users/userservice/user-service.js b/users/userservice/user-service.js
index 531ec5da..d5d6a973 100644
--- a/users/userservice/user-service.js
+++ b/users/userservice/user-service.js
@@ -297,7 +297,8 @@ app.post('/group/add', async (req, res) => {
       }
 
       const newGroup = new Group({ name: name,
-         members: [username] });
+         members: [username],
+          createdAt:Date.now() });
       await newGroup.save();
 
       res.json({ message: 'Group created successfully' });
diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
index f571f5bf..f164c211 100644
--- a/webapp/src/pages/Social/GroupDetails.js
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -8,36 +8,53 @@ import { useTranslation } from "react-i18next";
 const GroupDetails = () => {
   const { t } = useTranslation();
   const [group, setGroup] = useState(null);
+  const [error, setError] = useState(null);
   const { groupName } = useParams();
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
   const navigate = useNavigate();
 
   useEffect(() => {
+    const fetchGroupDetails = async () => {
+      try {
+        const response = await fetch(`${apiEndpoint}/group/${encodeURIComponent(groupName)}`);
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        const data = await response.json();
+        setGroup(data);
+        setError(null);
+      } catch (error) {
+        setError(error);
+        console.error("Error al obtener los detalles del grupo:", error);
+      }
+    };
 
     fetchGroupDetails();
-  }, []);
-
-  const fetchGroupDetails = async () => {
-    fetch(`${apiEndpoint}/group/${encodeURIComponent(groupName)}`)
-    .then((response) => response.json())
-    .then((data) => {
-      setGroup(data);
-    })
-    .catch((error) => {
-      console.error("Error al obtener los detalles del grupo:", error);
-    })
-  };
+  }, [apiEndpoint, groupName]);
 
   const redirectToProfile = (username) => {
     navigate(`/perfil?user=${username}`);
   };
 
+  if (error) {
+    return (
+      <>
+        <Nav />
+        <Box>
+          <Heading as="h2">Error: {error.message}</Heading>
+          <p marginTop="1rem">{t("pages.stats.searchText")}</p>
+        </Box>
+        <Footer />
+      </>
+    );
+  }
+
   return (
     <>
       <Nav/>
       <Container maxW="md" mt="5">
-        <Heading as="h1" mb="5">{t('pages.groupdetails.details')} {groupName}</Heading>
-        {group ? (
+        <Heading as="h1" mb="5">{t('pages.groupdetails.details')} {group ? group.name: groupName}</Heading>
+        {group && (
           <Box>
             <Text fontSize="lg" fontWeight="bold" mb="4">
             {t('pages.groupdetails.createdBy')} {group.members.length > 0 ? group.members[0] : ''} 
@@ -69,7 +86,8 @@ const GroupDetails = () => {
               </Tbody>
             </Table>
           </Box>
-        ) : (
+        )}
+        {group===null && (
           <Text>{t('pages.groupdetails.loading')}</Text>
         )}
       </Container>
diff --git a/webapp/src/pages/Social/GroupDetails.test.js b/webapp/src/pages/Social/GroupDetails.test.js
index 4fcac952..38f402a3 100644
--- a/webapp/src/pages/Social/GroupDetails.test.js
+++ b/webapp/src/pages/Social/GroupDetails.test.js
@@ -1,23 +1,24 @@
 import React from 'react';
 import { render, screen, waitFor, fireEvent } from "@testing-library/react";
-import { MemoryRouter } from 'react-router-dom';
+import { Routes, Route,MemoryRouter } from 'react-router-dom';
 import { useParams, useNavigate } from 'react-router-dom';
 import GroupDetails from './GroupDetails';
 import { I18nextProvider } from "react-i18next";
 import i18n from "../../i18n.js";
 
-const renderComponentWithRouter = () => {
+const renderComponentWithRouter = async () => {
     render(
       <I18nextProvider i18n={i18n}>
-        <MemoryRouter>
+        <MemoryRouter initialEntries={['/groups/exampleGroup']}>
           <GroupDetails />
-        </MemoryRouter>
+      </MemoryRouter>
       </I18nextProvider>
     );
+    localStorage.setItem("username", "user1");
   };
 
 const groupData = {
-    groupName: 'exampleGroup',
+    name: 'exampleGroup',
     members: ['user1', 'user2'],
     createdAt: '2024-04-11T12:00:00Z',
   };
@@ -27,6 +28,11 @@ describe('GroupDetails', () => {
     localStorage.clear();
   });
 
+  afterEach(() => {
+    global.fetch.mockRestore();
+  });
+  
+
     it('renders loading text when group data is not yet fetched', () => {
       global.fetch = jest.fn().mockResolvedValue({
           json: jest.fn().mockResolvedValue(null),
@@ -42,6 +48,11 @@ describe('GroupDetails', () => {
       });
 
       renderComponentWithRouter();
+
+      console.log(screen)
+
+      const table = await screen.findByRole("table");
+      expect(table).toBeInTheDocument();
       
       await waitFor(() => {
         expect(screen.getByText('Detalles del grupo exampleGroup')).toBeInTheDocument();
@@ -56,8 +67,8 @@ describe('GroupDetails', () => {
     it('redirects to user profile when view profile link is clicked', async () => {
 
       global.fetch = jest.fn().mockResolvedValue({
-          json: jest.fn().mockResolvedValue(groupData),
-        });
+        json: jest.fn().mockResolvedValue(groupData),
+      });
 
       renderComponentWithRouter();
 

From 4ee6bd25a3d8c5db05b3e68e6f0109a2690e7b17 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 14 Apr 2024 12:35:21 +0200
Subject: [PATCH 16/20] Por fin funcionan los test de GroupDetails

---
 webapp/src/pages/Social/GroupDetails.js      | 77 +++++++++++---------
 webapp/src/pages/Social/GroupDetails.test.js | 68 ++++++++++++-----
 2 files changed, 92 insertions(+), 53 deletions(-)

diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
index f164c211..b53b6da5 100644
--- a/webapp/src/pages/Social/GroupDetails.js
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -14,23 +14,24 @@ const GroupDetails = () => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    const fetchGroupDetails = async () => {
-      try {
-        const response = await fetch(`${apiEndpoint}/group/${encodeURIComponent(groupName)}`);
-        if (!response.ok) {
-          throw new Error('Network response was not ok');
-        }
-        const data = await response.json();
-        setGroup(data);
-        setError(null);
-      } catch (error) {
-        setError(error);
-        console.error("Error al obtener los detalles del grupo:", error);
-      }
-    };
-
     fetchGroupDetails();
-  }, [apiEndpoint, groupName]);
+  }, []);
+
+  const fetchGroupDetails = async () => {
+    try {
+      const response = await fetch(`${apiEndpoint}/group/${encodeURIComponent(groupName)}`);
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      const data = await response.json();
+      setGroup(data);
+      setError(null);
+    } catch (error) {
+      setError(error);
+      console.error("Error al obtener los detalles del grupo:", error);
+    }
+  };
+  
 
   const redirectToProfile = (username) => {
     navigate(`/perfil?user=${username}`);
@@ -42,7 +43,18 @@ const GroupDetails = () => {
         <Nav />
         <Box>
           <Heading as="h2">Error: {error.message}</Heading>
-          <p marginTop="1rem">{t("pages.stats.searchText")}</p>
+        </Box>
+        <Footer />
+      </>
+    );
+  }
+
+  if (!group) {
+    return (
+      <>
+        <Nav />
+        <Box>
+          <Heading as="h2">Cargando...</Heading>
         </Box>
         <Footer />
       </>
@@ -50,17 +62,17 @@ const GroupDetails = () => {
   }
 
   return (
-    <>
-      <Nav/>
-      <Container maxW="md" mt="5">
-        <Heading as="h1" mb="5">{t('pages.groupdetails.details')} {group ? group.name: groupName}</Heading>
-        {group && (
+    group && (
+      <>
+        <Nav/>
+        <Container maxW="md" mt="5">
+          <Heading as="h1" mb="5">{t('pages.groupdetails.details')} {group.name}</Heading>
           <Box>
             <Text fontSize="lg" fontWeight="bold" mb="4">
-            {t('pages.groupdetails.createdBy')} {group.members.length > 0 ? group.members[0] : ''} 
-            {t('pages.groupdetails.when')} {new Date(group.createdAt).toLocaleDateString()}
+              {t('pages.groupdetails.createdBy')} {group.members.length > 0 ? group.members[0] : ''} 
+              {t('pages.groupdetails.when')} {new Date(group.createdAt).toLocaleDateString()}
             </Text>
-  
+    
             <Text fontSize="lg" fontWeight="bold" mb="2">{t('pages.groupdetails.participants')} ({group.members.length}) :</Text>
             <Table variant="striped">
               <Thead>
@@ -75,24 +87,21 @@ const GroupDetails = () => {
                 {group.members.map((member, index) => (
                   <Tr key={index}>
                     <Td>
-                      <Avatar size="sm" name={member} />
+                      <Avatar size="sm" name={member}  data-testid={`user-avatar-${member}`}/>
                     </Td>
                     <Td>{member}</Td>
                     <Td>
-                      <Link color="blue.500" onClick={() => redirectToProfile(member)}>{t('pages.groupdetails.viewProfile')}</Link>
+                      <Link data-testid={`view-profile-button-${member}`} color="blue.500" onClick={() => redirectToProfile(member)}>{t('pages.groupdetails.viewProfile')}</Link>
                     </Td>
                   </Tr>
                 ))}
               </Tbody>
             </Table>
           </Box>
-        )}
-        {group===null && (
-          <Text>{t('pages.groupdetails.loading')}</Text>
-        )}
-      </Container>
-      <Footer/>
-    </>
+        </Container>
+        <Footer/>
+      </>
+    )
   );
 };
 
diff --git a/webapp/src/pages/Social/GroupDetails.test.js b/webapp/src/pages/Social/GroupDetails.test.js
index 38f402a3..bf6b5bb8 100644
--- a/webapp/src/pages/Social/GroupDetails.test.js
+++ b/webapp/src/pages/Social/GroupDetails.test.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { render, screen, waitFor, fireEvent } from "@testing-library/react";
-import { Routes, Route,MemoryRouter } from 'react-router-dom';
-import { useParams, useNavigate } from 'react-router-dom';
+import { MemoryRouter } from 'react-router-dom';
 import GroupDetails from './GroupDetails';
 import { I18nextProvider } from "react-i18next";
 import i18n from "../../i18n.js";
@@ -9,7 +8,7 @@ import i18n from "../../i18n.js";
 const renderComponentWithRouter = async () => {
     render(
       <I18nextProvider i18n={i18n}>
-        <MemoryRouter initialEntries={['/groups/exampleGroup']}>
+        <MemoryRouter >
           <GroupDetails />
       </MemoryRouter>
       </I18nextProvider>
@@ -17,12 +16,30 @@ const renderComponentWithRouter = async () => {
     localStorage.setItem("username", "user1");
   };
 
+let originalFetch;
+
+beforeEach(() => {
+  originalFetch = global.fetch;
+  global.fetch = jest.fn();
+});
+
+afterEach(() => {
+  global.fetch = originalFetch;
+  jest.restoreAllMocks();
+});
+
 const groupData = {
     name: 'exampleGroup',
     members: ['user1', 'user2'],
     createdAt: '2024-04-11T12:00:00Z',
   };
 
+const mockNavigate = jest.fn();
+    jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useNavigate: () => mockNavigate,
+  }));
+
 describe('GroupDetails', () => {
   beforeEach(() => {
     localStorage.clear();
@@ -34,29 +51,28 @@ describe('GroupDetails', () => {
   
 
     it('renders loading text when group data is not yet fetched', () => {
-      global.fetch = jest.fn().mockResolvedValue({
-          json: jest.fn().mockResolvedValue(null),
-        });
+      jest.spyOn(global, "fetch").mockResolvedValue({
+        json: jest.fn().mockResolvedValueOnce(groupData),
+      });
       renderComponentWithRouter();
       expect(screen.getByText('Cargando...')).toBeInTheDocument();
     });
 
     it('renders group details when data is fetched', async () => {
       
-      global.fetch = jest.fn().mockResolvedValue({
-        json: jest.fn().mockResolvedValue(groupData),
+      jest.spyOn(global, "fetch").mockResolvedValue({
+        ok: true,
+        json: jest.fn().mockResolvedValueOnce(groupData),
       });
 
       renderComponentWithRouter();
-
-      console.log(screen)
-
-      const table = await screen.findByRole("table");
-      expect(table).toBeInTheDocument();
       
       await waitFor(() => {
         expect(screen.getByText('Detalles del grupo exampleGroup')).toBeInTheDocument();
-        expect(screen.getByText('Creado por user1 el 4/11/2024')).toBeInTheDocument();
+        expect(screen.getByText('Avatar')).toBeInTheDocument();
+        expect(screen.getByText('Nombre')).toBeInTheDocument();
+        const viewProfile = screen.getAllByText('Ver perfil');
+          expect(viewProfile).toHaveLength(3);
         expect(screen.getByTestId('user-avatar-user1')).toBeInTheDocument();
         expect(screen.getByTestId('user-avatar-user2')).toBeInTheDocument();
         expect(screen.getByText('user1')).toBeInTheDocument();
@@ -66,15 +82,29 @@ describe('GroupDetails', () => {
 
     it('redirects to user profile when view profile link is clicked', async () => {
 
-      global.fetch = jest.fn().mockResolvedValue({
-        json: jest.fn().mockResolvedValue(groupData),
+      jest.spyOn(global, "fetch").mockResolvedValue({
+        ok: true,
+        json: jest.fn().mockResolvedValueOnce(groupData),
       });
 
       renderComponentWithRouter();
 
-      const viewProfileLink = screen.getByRole('link', { name: 'Ver perfil' });
-      fireEvent.click(viewProfileLink);
-      expect(useNavigate).toHaveBeenCalledWith('/perfil?user=user1');
+      await waitFor(() => {
+        expect(screen.getByText('Detalles del grupo exampleGroup')).toBeInTheDocument();
+        expect(screen.getByText('Avatar')).toBeInTheDocument();
+        expect(screen.getByText('Nombre')).toBeInTheDocument();
+        const viewProfile = screen.getAllByText('Ver perfil');
+          expect(viewProfile).toHaveLength(3);
+        expect(screen.getByTestId('user-avatar-user1')).toBeInTheDocument();
+        expect(screen.getByTestId('user-avatar-user2')).toBeInTheDocument();
+        expect(screen.getByText('user1')).toBeInTheDocument();
+        expect(screen.getByText('user2')).toBeInTheDocument();
+      });
+
+      const viewProfileButtons = screen.getByTestId('view-profile-button-user1');
+
+      fireEvent.click(viewProfileButtons);
+      expect(mockNavigate).toHaveBeenCalledWith('/perfil?user=user1');
     });
 });
 

From 8249f36c6295864acd53c7e3758b37f61299e98d Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 14 Apr 2024 12:58:54 +0200
Subject: [PATCH 17/20] Arreglos

---
 webapp/src/locales/en.json            | 2 +-
 webapp/src/locales/es.json            | 2 +-
 webapp/src/pages/Social/UserGroups.js | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
index 5b23eddc..f609cabe 100644
--- a/webapp/src/locales/en.json
+++ b/webapp/src/locales/en.json
@@ -221,7 +221,7 @@
       "errorPrefix": "Error: ",
       "joinable": "Groups you can join",
       "join": "Join group",
-      "noGroups": "There are no groups available to join."
+      "nogroups": "There are no groups available to join."
     },
     "groupsTable": {
       "groupName": "Group name",
diff --git a/webapp/src/locales/es.json b/webapp/src/locales/es.json
index 36bb6b24..77ef1f57 100644
--- a/webapp/src/locales/es.json
+++ b/webapp/src/locales/es.json
@@ -221,7 +221,7 @@
       "errorPrefix": "Error: ",
       "joinable": "Grupos a los que puedes unirte",
       "join": "Unirse al grupo",
-      "noGroups": "No hay grupos a los que puedas unirte."
+      "nogroups": "No hay grupos a los que puedas unirte."
     },
     "groupsTable": {
       "groupName": "Nombre del grupo",
diff --git a/webapp/src/pages/Social/UserGroups.js b/webapp/src/pages/Social/UserGroups.js
index 2fc52149..eebade0a 100644
--- a/webapp/src/pages/Social/UserGroups.js
+++ b/webapp/src/pages/Social/UserGroups.js
@@ -24,8 +24,8 @@ const UserGroups = () => {
     fetch(`${apiEndpoint}/group/list`)
       .then(response => response.json())
       .then(data => {
-        if (data && data.groups) {
-          const userGroups = data.groups.filter(group => group.members.includes(username));
+        if (data) {
+          const userGroups = data.filter(group => group.members.includes(username));
           setGroups(userGroups);
         } else {
           setError('Error fetching data: Invalid response format');

From d804363a05054d42c88e888cbc57637c143d7ff2 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 14 Apr 2024 13:27:43 +0200
Subject: [PATCH 18/20] =?UTF-8?q?M=C3=A1s=20arreglos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/pages/Social/GroupDetails.js | 2 +-
 webapp/src/pages/Social/UserGroups.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
index b53b6da5..77cf8930 100644
--- a/webapp/src/pages/Social/GroupDetails.js
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -24,7 +24,7 @@ const GroupDetails = () => {
         throw new Error('Network response was not ok');
       }
       const data = await response.json();
-      setGroup(data);
+      setGroup(data.group);
       setError(null);
     } catch (error) {
       setError(error);
diff --git a/webapp/src/pages/Social/UserGroups.js b/webapp/src/pages/Social/UserGroups.js
index eebade0a..0b2d044f 100644
--- a/webapp/src/pages/Social/UserGroups.js
+++ b/webapp/src/pages/Social/UserGroups.js
@@ -25,7 +25,7 @@ const UserGroups = () => {
       .then(response => response.json())
       .then(data => {
         if (data) {
-          const userGroups = data.filter(group => group.members.includes(username));
+          const userGroups = data.groups.filter(group => group.members.includes(username));
           setGroups(userGroups);
         } else {
           setError('Error fetching data: Invalid response format');

From 85d5abd85d771ff7cbf6ee08317420be9294a18a Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 14 Apr 2024 13:28:26 +0200
Subject: [PATCH 19/20] =?UTF-8?q?Eliminando=20columna=20de=20ver=20estad?=
 =?UTF-8?q?=C3=ADsticas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/pages/Social/GroupDetails.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
index 77cf8930..ab566a5a 100644
--- a/webapp/src/pages/Social/GroupDetails.js
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -80,7 +80,6 @@ const GroupDetails = () => {
                   <Th>{t('pages.groupdetails.avatar')}</Th>
                   <Th>{t('pages.groupdetails.name')}</Th>
                   <Th>{t('pages.groupdetails.viewProfile')}</Th>
-                  <Th>{t('pages.groupdetails.viewStats')}</Th>
                 </Tr>
               </Thead>
               <Tbody>

From d1ce08fed1ba312a4eb0decb7c6c4273c722ec93 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 14 Apr 2024 13:31:46 +0200
Subject: [PATCH 20/20] =?UTF-8?q?A=C3=B1adiendo=20alertMessage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/pages/Social/Groups.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/webapp/src/pages/Social/Groups.js b/webapp/src/pages/Social/Groups.js
index cba256a0..68d822f0 100644
--- a/webapp/src/pages/Social/Groups.js
+++ b/webapp/src/pages/Social/Groups.js
@@ -104,6 +104,11 @@ const Groups = () => {
               {`Error: ${error}`}
             </Alert>
           )}
+          {alertMessage && (
+          <Alert status="success" variant="subtle" mt="2">
+            {alertMessage}
+          </Alert>
+        )}
         </Box>
   
         <Box mt="4">