From a8ba435d413f6566a65e5af0e9e1ba8f68312e85 Mon Sep 17 00:00:00 2001
From: AlvaroGlezC <uo251891@uniovi.es>
Date: Sat, 27 Apr 2024 14:45:54 +0200
Subject: [PATCH] =?UTF-8?q?#29=20Se=20a=C3=B1aden=20tests=20unitarios=20a?=
 =?UTF-8?q?=20los=20componentes=20y=20pantallas,=20tambien=20se=20a=C3=B1a?=
 =?UTF-8?q?de=20el=20covarage=20de=20estos=20componentes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 syg-frontend/package.json                     | 16 +++-
 syg-frontend/src/App.test.tsx                 |  9 --
 syg-frontend/src/App.tsx                      |  2 +-
 .../src/components/aside/Aside.test.tsx       | 89 +++++++++++++++++++
 syg-frontend/src/components/aside/Aside.tsx   | 20 ++---
 .../src/components/card/UserInfoCard.test.tsx | 46 ++++++++++
 .../src/components/card/UserInfoCard.tsx      | 11 +--
 .../src/components/header/Header.test.tsx     | 71 +++++++++++++++
 syg-frontend/src/components/header/Header.tsx | 15 ++--
 .../components/timers/QuestionTimer.test.tsx  | 59 ++++++++++++
 .../src/components/timers/QuestionTimer.tsx   |  6 +-
 syg-frontend/src/modules/content/Content.tsx  |  4 +-
 .../src/modules/historic/Historic.tsx         | 12 +--
 .../src/modules/historic/Historics.test.tsx   | 64 +++++++++++++
 .../src/modules/ranking/Ranking.test.tsx      | 39 ++++++++
 syg-frontend/src/modules/ranking/Ranking.tsx  |  4 +-
 syg-frontend/src/setupTests.ts                |  6 +-
 syg-frontend/src/translation/i18n.js          |  2 +-
 18 files changed, 421 insertions(+), 54 deletions(-)
 delete mode 100644 syg-frontend/src/App.test.tsx
 create mode 100644 syg-frontend/src/components/aside/Aside.test.tsx
 create mode 100644 syg-frontend/src/components/card/UserInfoCard.test.tsx
 create mode 100644 syg-frontend/src/components/header/Header.test.tsx
 create mode 100644 syg-frontend/src/components/timers/QuestionTimer.test.tsx
 create mode 100644 syg-frontend/src/modules/historic/Historics.test.tsx
 create mode 100644 syg-frontend/src/modules/ranking/Ranking.test.tsx

diff --git a/syg-frontend/package.json b/syg-frontend/package.json
index 507c5a3..eee7a72 100644
--- a/syg-frontend/package.json
+++ b/syg-frontend/package.json
@@ -33,7 +33,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "coverage": "npm test -- --coverage --watchAll"
   },
   "eslintConfig": {
     "extends": [
@@ -52,5 +53,16 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "jest": {
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/src/App.tsx",
+      "/src/modules/content/Content.tsx",
+      "/src/index.tsx",
+      "/src/reportWebVitals.ts",
+      "/src/secure/",
+      "/src/backend/dataSource.ts"
+    ]
   }
-}
+}
\ No newline at end of file
diff --git a/syg-frontend/src/App.test.tsx b/syg-frontend/src/App.test.tsx
deleted file mode 100644
index 2a68616..0000000
--- a/syg-frontend/src/App.test.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
diff --git a/syg-frontend/src/App.tsx b/syg-frontend/src/App.tsx
index 6ac53ae..74c44e6 100644
--- a/syg-frontend/src/App.tsx
+++ b/syg-frontend/src/App.tsx
@@ -4,7 +4,7 @@ import './App.scss';
 function App() {
   
   return (
-    <Content/>
+    <Content data-testid='app-content'/>
   );
 }
 
diff --git a/syg-frontend/src/components/aside/Aside.test.tsx b/syg-frontend/src/components/aside/Aside.test.tsx
new file mode 100644
index 0000000..04e6a29
--- /dev/null
+++ b/syg-frontend/src/components/aside/Aside.test.tsx
@@ -0,0 +1,89 @@
+import { screen, render, fireEvent, act } from "@testing-library/react"
+import Aside from "./Aside"
+import i18n from '../../translation/i18n';
+import { MemoryRouter } from "react-router-dom";
+
+describe('Header', () => {
+    beforeAll(() => {
+        i18n.changeLanguage('Spain'); 
+    });
+
+    test('Aside renders correctly', () => {
+        render(<Aside elements={[]} username={"Alvaro"} />)
+        
+        const element = screen.getByTestId('syg-aside-container')
+        expect(element).toBeInTheDocument();
+    })
+
+    test('Header components renders correctly', () => {
+        render(<Aside elements={[]} username={"Alvaro"} />)
+        
+        const asideNavigationMenu = screen.getByTestId('syg-aside-navigation-menu')
+        expect(asideNavigationMenu).toBeInTheDocument();
+
+        const asideMenu = screen.getByTestId('syg-aside-login-menu')
+        expect(asideMenu).toBeInTheDocument();
+
+        const asideUsernameContent = screen.getByTestId('syg-aside-username')
+        expect(asideUsernameContent).toBeInTheDocument();
+
+        const asideUsernameInitial = screen.getByTestId('syg-aside-username-initial')
+        expect(asideUsernameInitial).toBeInTheDocument();
+
+        const asideUsername = screen.getByTestId('syg-aside-username-complete')
+        expect(asideUsername).toBeInTheDocument();
+
+        const asideLogout = screen.getByTestId('syg-aside-logout')
+        expect(asideLogout).toBeInTheDocument();
+
+        const asideLogoutText = screen.getByTestId('syg-aside-logout-text')
+        expect(asideLogoutText).toBeInTheDocument();
+    })
+
+    test('Aside login user info text', () => {
+        render(<Aside elements={[]} username={"Alvaro"} />)
+        
+        const asideUsernameInitial = screen.getByTestId('syg-aside-username-initial')
+        expect(asideUsernameInitial).toHaveTextContent("A");
+
+        const asideUsername = screen.getByTestId('syg-aside-username-complete')
+        expect(asideUsername).toHaveTextContent("Alvaro");
+    })
+
+    test('Aside logout user info text', () => {
+        render(<Aside elements={[]} username={"Alvaro"} />)
+        
+        const asideLogoutText = screen.getByTestId('syg-aside-logout-text')
+        expect(asideLogoutText).toHaveTextContent("LOGOUT");
+    })
+
+    test('Aside change component option', () => {
+        const onClickAsideElementMockOption1 = jest.fn();
+        const onClickAsideElementMockOption2 = jest.fn();
+
+        render(<Aside elements={[
+            {
+                text:"Juego",
+                icon: <></>,
+                onClickAsideElement: onClickAsideElementMockOption1
+            },
+            {
+                text:"Historico",
+                icon: <></>,
+                onClickAsideElement: onClickAsideElementMockOption2
+            }
+        ]} username={"Alvaro"} />)
+
+        const buttonOption2 = screen.getByText('HISTORICO');
+
+        fireEvent.click(buttonOption2);
+      
+        expect(onClickAsideElementMockOption2).toHaveBeenCalledTimes(1);
+
+        const buttonOption1 = screen.getByText('JUEGO');
+
+        fireEvent.click(buttonOption1);
+
+        expect(onClickAsideElementMockOption2).toHaveBeenCalledTimes(1);
+    })
+})
\ No newline at end of file
diff --git a/syg-frontend/src/components/aside/Aside.tsx b/syg-frontend/src/components/aside/Aside.tsx
index a462a0f..a00ec23 100644
--- a/syg-frontend/src/components/aside/Aside.tsx
+++ b/syg-frontend/src/components/aside/Aside.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
-import { Button } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
 import { logout } from '../../secure/keycloak';
 import LogoutIcon from '@mui/icons-material/Logout';
-import './Aside.scss';
 import { useTranslation } from 'react-i18next';
+import './Aside.scss';
 
 interface AsideProps {
   elements: {
@@ -27,8 +25,8 @@ const Aside: React.FC<AsideProps> = (props: AsideProps) => {
   }
 
   return (
-    <div id='syg-aside-container'>
-      <div id='syg-aside-navigation-menu'>
+    <div id='syg-aside-container' data-testid='syg-aside-container'>
+      <div id='syg-aside-navigation-menu' data-testid='syg-aside-navigation-menu'>
         {props.elements.map((element) => (
           <div className='syg-aside-navigation-menu-element' onClick={()=>handleOnClickAsideElement(element.onClickAsideElement)}>
           {element.icon}
@@ -38,14 +36,14 @@ const Aside: React.FC<AsideProps> = (props: AsideProps) => {
           </div>
         ))}
       </div>
-      <div id='syg-aside-login-menu'>
-        <div id='syg-aside-username'>
-          <div id='syg-aside-username-initial'>{props.username.substring(0, 1).toUpperCase()}</div>
-          <span id='syg-aside-username-complete'>{props.username}</span>
+      <div id='syg-aside-login-menu' data-testid='syg-aside-login-menu'>
+        <div id='syg-aside-username' data-testid='syg-aside-username'>
+          <div id='syg-aside-username-initial' data-testid='syg-aside-username-initial'>{props.username.substring(0, 1).toUpperCase()}</div>
+          <span id='syg-aside-username-complete' data-testid='syg-aside-username-complete'>{props.username}</span>
         </div>
-        <div id='syg-aside-logout' onClick={handleOnClickLogoutElement}>
+        <div id='syg-aside-logout' onClick={handleOnClickLogoutElement} data-testid='syg-aside-logout'>
           <LogoutIcon/>
-          <div className='aside-element'>{t('aside.logout')}</div>
+          <div id='syg-aside-logout-text' className='aside-element' data-testid='syg-aside-logout-text'>{t('aside.logout')}</div>
         </div>
       </div>
     </div>
diff --git a/syg-frontend/src/components/card/UserInfoCard.test.tsx b/syg-frontend/src/components/card/UserInfoCard.test.tsx
new file mode 100644
index 0000000..c8d3c6d
--- /dev/null
+++ b/syg-frontend/src/components/card/UserInfoCard.test.tsx
@@ -0,0 +1,46 @@
+import { screen, render, fireEvent } from "@testing-library/react"
+import UserInfoCard from "./UserInfoCard";
+import i18n from '../../translation/i18n';
+
+describe('UserInfoCard', () => {
+    beforeAll(() => {
+        i18n.changeLanguage('Spain'); 
+    });
+
+    test('UserInfoCard renders correctly', () => {
+        render(<UserInfoCard title={"TotalGames"} info={"4"}/>)
+        
+        const element = screen.getByTestId('syg-historic-card-container')
+        expect(element).toBeInTheDocument();
+    })
+
+    test('UserInfoCard components renders correctly', () => {
+        render(<UserInfoCard title={"TotalGames"} info={"4"}/>)
+        
+        const historicHeaderCard = screen.getByTestId('syg-historic-card-header')
+        expect(historicHeaderCard).toBeInTheDocument();
+
+        const historicCardHeaderContent = screen.getByTestId('syg-historic-card-header-content')
+        expect(historicCardHeaderContent).toBeInTheDocument();
+
+        const historicCardHeaderTitle = screen.getByTestId('syg-historic-card-header-title')
+        expect(historicCardHeaderTitle).toBeInTheDocument();
+
+        const historicCardContent = screen.getByTestId('syg-historic-card-content')
+        expect(historicCardContent).toBeInTheDocument();
+
+        const historicCardContentInfo = screen.getByTestId('syg-historic-card-content-info')
+        expect(historicCardContentInfo).toBeInTheDocument();
+    })
+
+    test('UserInfoCard header and content text', () => {
+        render(<UserInfoCard title={"Juegos totales"} info={"4"}/>)
+        
+        const historicHeader = screen.getByTestId('syg-historic-card-header-title')
+        expect(historicHeader).toHaveTextContent("Juegos totales");
+
+        const historicCardContent = screen.getByTestId('syg-historic-card-content-info')
+        expect(historicCardContent).toHaveTextContent("4");
+
+    })
+})
\ No newline at end of file
diff --git a/syg-frontend/src/components/card/UserInfoCard.tsx b/syg-frontend/src/components/card/UserInfoCard.tsx
index 6821ca6..c5ff548 100644
--- a/syg-frontend/src/components/card/UserInfoCard.tsx
+++ b/syg-frontend/src/components/card/UserInfoCard.tsx
@@ -11,18 +11,19 @@ interface UserInfoCardProps {
 
 const UserInfoCard: React.FC<UserInfoCardProps> = (props: UserInfoCardProps) => {
     return (
-        <Card id='syg-historic-card-container'>
+        <Card id='syg-historic-card-container' data-testid='syg-historic-card-container'>
             <CardHeader 
                 id='syg-historic-card-header'
+                data-testid='syg-historic-card-header'
                 title ={
-                    <div id='syg-historic-card-header-content' >
+                    <div id='syg-historic-card-header-content' data-testid='syg-historic-card-header-content'>
                         {props.iconItem}
-                        <span>{props.title}</span>
+                        <span data-testid='syg-historic-card-header-title'>{props.title}</span>
                     </div>
                 }
             />
-            <CardContent id='syg-historic-card-content'>
-                <span>{props.info}</span>
+            <CardContent id='syg-historic-card-content' data-testid='syg-historic-card-content'>
+                <span data-testid='syg-historic-card-content-info'>{props.info}</span>
             </CardContent>
         </Card>
     );
diff --git a/syg-frontend/src/components/header/Header.test.tsx b/syg-frontend/src/components/header/Header.test.tsx
new file mode 100644
index 0000000..83db93f
--- /dev/null
+++ b/syg-frontend/src/components/header/Header.test.tsx
@@ -0,0 +1,71 @@
+import { screen, render, fireEvent } from "@testing-library/react"
+import Header from "./Header"
+import i18n from '../../translation/i18n';
+
+describe('Header', () => {
+    beforeAll(() => {
+        i18n.changeLanguage('Spain'); 
+    });
+
+    test('Header renders correctly', () => {
+        render(<Header info={"game"}/>)
+        
+        const element = screen.getByTestId('syg-header-container')
+        expect(element).toBeInTheDocument();
+    })
+
+    test('Header components renders correctly', () => {
+        render(<Header info={"historics"}/>)
+        
+        const headerContainer = screen.getByTestId('syg-header-logo-container')
+        expect(headerContainer).toBeInTheDocument();
+
+        const headerLogo = screen.getByTestId('syg-header-logo')
+        expect(headerLogo).toBeInTheDocument();
+
+        const headerLogoLetters = screen.getByTestId('syg-header-logo-letters')
+        expect(headerLogoLetters).toBeInTheDocument();
+
+        const laguageSwitch = screen.getByTestId('syg-header-language-switch')
+        expect(laguageSwitch).toBeInTheDocument();
+
+        const subHeaderText = screen.getByTestId('syg-header-info')
+        expect(subHeaderText).toBeInTheDocument();
+    })
+
+    test('Header active language', () => {
+        render(<Header info={"game"}/>)
+        
+        const languageActive = screen.getByTestId('syg-header-language-switch-element-active')
+        expect(languageActive).toHaveTextContent('Español');
+    })
+
+    test('Header subtitle text', () => {
+        render(<Header info={"ranking"}/>)
+        
+        const subHeader = screen.getByTestId('syg-header-info')
+        expect(subHeader).toHaveTextContent('Ranking');
+    })
+
+    test('Header subtitle text in another language', () => {
+        i18n.changeLanguage('English'); 
+
+        render(<Header info={"game"}/>)
+        
+        const subHeader = screen.getByTestId('syg-header-info')
+        expect(subHeader).toHaveTextContent('Game');
+    })
+
+    test('Header button chagne language', () => {
+        i18n.changeLanguage('Spain'); 
+
+        render(<Header info={"game"}/>)
+        
+        const button = screen.getByText('Ingles'); // Encuentra el botón que cambia el idioma
+
+        fireEvent.click(button);
+ 
+        const languageActive = screen.getByText('English');
+        expect(languageActive).toBeInTheDocument();
+    })
+})
\ No newline at end of file
diff --git a/syg-frontend/src/components/header/Header.tsx b/syg-frontend/src/components/header/Header.tsx
index 556a468..ecaf097 100644
--- a/syg-frontend/src/components/header/Header.tsx
+++ b/syg-frontend/src/components/header/Header.tsx
@@ -18,15 +18,16 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
   const { t, i18n } = useTranslation();
 
   return (
-    <div id='syg-header-container'>
-      <div id='syg-header-logo-container'>
-        <div id='syg-header-logo'>
+    <div id='syg-header-container' data-testid='syg-header-container'>
+      <div id='syg-header-logo-container' data-testid='syg-header-logo-container'>
+        <div id='syg-header-logo' data-testid='syg-header-logo'>
           <img src="/images/syg_logo.png" alt="Logo de syg_alvaro" />
         </div>
-        <div id='syg-header-logo-letters'>
-          <div id='syg-header-language-switch'>
+        <div id='syg-header-logo-letters' data-testid='syg-header-logo-letters'>
+          <div id='syg-header-language-switch' data-testid='syg-header-language-switch'>
             {Object.keys(lngs).map((lng) => (
-              <Button className={`syg-header-language-switch-element ${i18n.resolvedLanguage === lng ? 'active': ''}`} key={lng} onClick={() => i18n.changeLanguage(lng)}>
+              <Button className={`syg-header-language-switch-element ${i18n.resolvedLanguage === lng ? 'active': ''}`} key={lng} onClick={() => i18n.changeLanguage(lng)} 
+                data-testid={`syg-header-language-switch-element-${i18n.resolvedLanguage === lng ? 'active': ''}`}>
                 {t(`header.language.${lng}`)}
               </Button>
             ))}
@@ -34,7 +35,7 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
           <img src="/images/syg_logo_letters.png" alt="Letrero de syg_alvaro" />
         </div>
       </div>
-      <div id='syg-header-info'>
+      <div id='syg-header-info' data-testid='syg-header-info'>
       {t(`header.subtitle.${props.info}`)}
       </div>
     </div>
diff --git a/syg-frontend/src/components/timers/QuestionTimer.test.tsx b/syg-frontend/src/components/timers/QuestionTimer.test.tsx
new file mode 100644
index 0000000..e0d7973
--- /dev/null
+++ b/syg-frontend/src/components/timers/QuestionTimer.test.tsx
@@ -0,0 +1,59 @@
+import { screen, render, fireEvent, act } from "@testing-library/react"
+import Header from "./QuestionTimer"
+import i18n from '../../translation/i18n';
+import QuestionTimer from "./QuestionTimer";
+
+describe('QuestionTimer', () => {
+    
+    beforeAll(() => {
+        i18n.changeLanguage('Spain'); 
+        jest.useFakeTimers(); // Configura Jest para usar temporizadores falsos
+      });
+      
+      afterAll(() => {
+        jest.useRealTimers(); // Devuelve a temporizadores reales después de todas las pruebas
+      });
+
+    test('QuestionTimer renders correctly', () => {
+        render(<QuestionTimer seconds={60} onTimeout={function (): void {
+            throw new Error("Function not implemented.");
+        } }/>)
+        
+        const element = screen.getByTestId('syg-interval-question-progress')
+        expect(element).toBeInTheDocument();
+    })
+
+    test('QuestionTimer components renders correctly', () => {
+        render(<QuestionTimer seconds={60} onTimeout={function (): void {
+            throw new Error("Function not implemented.");
+        } }/>)
+        
+        const questionTimerlinearProgress = screen.getByTestId('syg-interval-question-linear-progress')
+        expect(questionTimerlinearProgress).toBeInTheDocument();
+
+        const questionTimertext = screen.getByTestId('syg-interval-question-text')
+        expect(questionTimertext).toBeInTheDocument();
+    })
+
+    test('QuestionTimer time at init render', () => {
+        render(<QuestionTimer seconds={60} onTimeout={function (): void {
+            throw new Error("Function not implemented.");
+        } }/>)
+
+        const questionTimertext = screen.getByTestId('syg-interval-question-text')
+        expect(questionTimertext).toHaveTextContent('60');
+    })
+
+    test('QuestionTimer init function been called', () => {
+        const onTimeoutMock = jest.fn();
+
+        render(<QuestionTimer seconds={1} onTimeout={onTimeoutMock}/>)
+
+        // Simula el paso del tiempo de un segundo para que la inicialización sea 0 y llamar a la función
+        act(() => {
+            jest.advanceTimersByTime(1000);
+        });
+      
+        expect(onTimeoutMock).toHaveBeenCalledTimes(1);
+    })
+})
\ No newline at end of file
diff --git a/syg-frontend/src/components/timers/QuestionTimer.tsx b/syg-frontend/src/components/timers/QuestionTimer.tsx
index 0c83a53..920185c 100644
--- a/syg-frontend/src/components/timers/QuestionTimer.tsx
+++ b/syg-frontend/src/components/timers/QuestionTimer.tsx
@@ -30,9 +30,9 @@ const QuestionTimer: React.FC<QuestionTimerProps> = (props: QuestionTimerProps)
   }, [timeLeft])
 
   return (
-    <div id='syg-interval-question-progress'>
-      <LinearProgress determinate={true} variant="outlined" value={progress}  color="primary" thickness={32} >
-        <Typography>
+    <div id='syg-interval-question-progress' data-testid='syg-interval-question-progress'>
+      <LinearProgress determinate={true} variant="outlined" value={progress}  color="primary" thickness={32} data-testid='syg-interval-question-linear-progress'>
+        <Typography data-testid='syg-interval-question-text'>
           {timeLeft}
         </Typography>
       </LinearProgress>
diff --git a/syg-frontend/src/modules/content/Content.tsx b/syg-frontend/src/modules/content/Content.tsx
index 39dfae5..bf8bbd7 100644
--- a/syg-frontend/src/modules/content/Content.tsx
+++ b/syg-frontend/src/modules/content/Content.tsx
@@ -36,7 +36,7 @@ function Content() {
   
     return (
         userActive ? (
-        <div id='syg-container' className="content">
+        <div id='syg-container' className="content" data-testid='syg-container'>
           <Aside
             elements={[
               { text: 'Juego', icon: <GamesIcon/>, onClickAsideElement: handleGameClick },
@@ -45,7 +45,7 @@ function Content() {
             ]}
             username={userActive?.name}
           />
-          <div id='syg-content-container'>
+          <div id='syg-content-container' data-testid='syg-content-container'>
             <Routes>
               <Route path="/" element={<Game/>} />
               <Route path="/game" element={<Game />} />
diff --git a/syg-frontend/src/modules/historic/Historic.tsx b/syg-frontend/src/modules/historic/Historic.tsx
index 1ca9c7e..e49a7c0 100644
--- a/syg-frontend/src/modules/historic/Historic.tsx
+++ b/syg-frontend/src/modules/historic/Historic.tsx
@@ -23,12 +23,12 @@ const Historic: React.FC = () => {
     }, [])
 
     return (
-        <div id='syg-historic-container'>
+        <div id='syg-historic-container' data-testid='syg-historic-container'>
             <Header info='historics' />
-            <div id='syg-historic-content'>
-                <span id='syg-historic-user-name'> {t('historics.title')}: <i>{userActive?.name}</i></span>
-                <div id='syg-historic-user-info'>
-                    <div id='primary-info'>
+            <div id='syg-historic-content' data-testid='syg-historic-content'>
+                <span id='syg-historic-user-name' data-testid='syg-historic-user-name'> {t('historics.title')}: <i data-testid='syg-historic-user-active-name'>{userActive?.name}</i></span>
+                <div id='syg-historic-user-info' data-testid='syg-historic-user-info'>
+                    <div id='primary-info' data-testid='syg-header-primary-info'>
                         <UserInfoCard
                             title={t('historics.totalGames')}
                             info={userActive !== null ? userActive.totalGames : 0}
@@ -47,7 +47,7 @@ const Historic: React.FC = () => {
                             iconItem={<ClearIcon color='error'/>}
                         />
                     </div>
-                    <div id='secondary-info'>
+                    <div id='secondary-info' data-testid='syg-header-secondary-info'>
                         <UserInfoCard
                             title={t('historics.totalQuestions')}
                             info={userActive !== null ? userActive.totalQuestionAnswered : 0}
diff --git a/syg-frontend/src/modules/historic/Historics.test.tsx b/syg-frontend/src/modules/historic/Historics.test.tsx
new file mode 100644
index 0000000..8da7e68
--- /dev/null
+++ b/syg-frontend/src/modules/historic/Historics.test.tsx
@@ -0,0 +1,64 @@
+import { screen, render, fireEvent } from "@testing-library/react"
+import Historic from "./Historic"
+import i18n from '../../translation/i18n';
+import { getUser } from '../../backend/dataSource';
+
+
+describe('Historic', () => {
+    beforeAll(() => {
+        i18n.changeLanguage('Spain'); 
+        jest.mock('../../backend/dataSource', () => ({
+            getUser: jest.fn().mockImplementation(() => {
+                    return Promise.resolve({
+                        id: '123',
+                        name: 'Alvaro',
+                        totalGames: 1,
+                        correctAnswers: 8,
+                        inCorrectAnswers: 24,
+                        totalQuestionAnswered: 15,
+                        lastCategoryPlayed: 'Deportes',
+                    });
+            })
+        }));
+    });
+
+    test('Historic renders correctly', () => {
+        render(<Historic/>)
+        
+        const element = screen.getByTestId('syg-historic-container')
+        expect(element).toBeInTheDocument();
+    })
+
+    test('Historic components renders correctly', () => {
+        render(<Historic/>)
+        
+        const historicContent = screen.getByTestId('syg-historic-content')
+        expect(historicContent).toBeInTheDocument();
+
+        const historicUserName = screen.getByTestId('syg-historic-user-name')
+        expect(historicUserName).toBeInTheDocument();
+
+        const historicUserInfo = screen.getByTestId('syg-historic-user-info')
+        expect(historicUserInfo).toBeInTheDocument();
+
+        const historicPrimaryInfo = screen.getByTestId('syg-header-primary-info')
+        expect(historicPrimaryInfo).toBeInTheDocument();
+
+        const historicSecondaryInfo = screen.getByTestId('syg-header-secondary-info')
+        expect(historicSecondaryInfo).toBeInTheDocument();
+    })
+
+    test('Historic user name active', () => {
+        render(<Historic/>)
+        
+        const userNameHistoric = screen.getByTestId('syg-historic-user-name')
+        expect(userNameHistoric).toHaveTextContent("Datos de juego de:");
+    })
+
+    test('Historic get user active', () => {       
+        render(<Historic/>)
+
+        const userNameHistoric = screen.getByTestId('syg-historic-user-active-name')
+        expect(userNameHistoric).toHaveTextContent("");
+    })
+})
\ No newline at end of file
diff --git a/syg-frontend/src/modules/ranking/Ranking.test.tsx b/syg-frontend/src/modules/ranking/Ranking.test.tsx
new file mode 100644
index 0000000..628b23a
--- /dev/null
+++ b/syg-frontend/src/modules/ranking/Ranking.test.tsx
@@ -0,0 +1,39 @@
+import { screen, render, fireEvent, waitFor } from "@testing-library/react"
+import Ranking from "./Ranking"
+import i18n from '../../translation/i18n';
+import { MemoryRouter } from "react-router-dom";
+
+describe('Ranking', () => {
+    beforeAll(() => {
+        i18n.changeLanguage('Spain'); 
+    });
+
+    test('Ranking renders correctly', () => {
+        render(<Ranking/>)
+        
+        const element = screen.getByTestId('syg-ranking-container')
+        expect(element).toBeInTheDocument();
+    })
+
+    test('Ranking components renders correctly', () => {
+        render(<Ranking/>)
+        
+        const headerContainer = screen.getByTestId('syg-ranking-content')
+        expect(headerContainer).toBeInTheDocument();
+    })
+
+    test('checks DataGrid pagination and sorting', async () => {
+        render(
+          <MemoryRouter>
+            <Ranking />
+          </MemoryRouter>
+        );
+    
+        // Esperar a que se complete la carga
+        await waitFor(() => {
+          expect(screen.getByTestId('syg-ranking-container')).toBeInTheDocument();
+        });
+    
+        const dataGrid = screen.getByRole('grid'); // Localizar el DataGrid
+      });
+})
\ No newline at end of file
diff --git a/syg-frontend/src/modules/ranking/Ranking.tsx b/syg-frontend/src/modules/ranking/Ranking.tsx
index 9390cda..181412e 100644
--- a/syg-frontend/src/modules/ranking/Ranking.tsx
+++ b/syg-frontend/src/modules/ranking/Ranking.tsx
@@ -48,9 +48,9 @@ const Ranking: React.FC = () => {
     }
 
     return (
-        <div id='syg-ranking-container'>
+        <div id='syg-ranking-container' data-testid='syg-ranking-container'>
             <Header info='ranking' />
-            <div id='syg-ranking-content'>
+            <div id='syg-ranking-content' data-testid='syg-ranking-content'>
                 <DataGrid
                     className='syg-ranking-table'
                     rows={getRows()}
diff --git a/syg-frontend/src/setupTests.ts b/syg-frontend/src/setupTests.ts
index 8f2609b..331666c 100644
--- a/syg-frontend/src/setupTests.ts
+++ b/syg-frontend/src/setupTests.ts
@@ -1,5 +1 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';
\ No newline at end of file
diff --git a/syg-frontend/src/translation/i18n.js b/syg-frontend/src/translation/i18n.js
index f98682d..bf77577 100644
--- a/syg-frontend/src/translation/i18n.js
+++ b/syg-frontend/src/translation/i18n.js
@@ -8,7 +8,7 @@ i18n
   .init({
     resources: translation,
     lng: 'Spain',
-    fallbackLng: 'Spain',
+    fallbackLng: 'es',
     interpolation: {
       escapeValue: false,
     },