From 1abc7fd66618d4083ce1d95fae2b2495e4df93f7 Mon Sep 17 00:00:00 2001 From: sergiorodriguezgarcia <113514397+sergiorodriguezgarcia@users.noreply.github.com> Date: Fri, 12 Apr 2024 17:42:32 +0200 Subject: [PATCH 01/10] feat: Centralizing the texrt --- webapp/src/components/statistics/UserStatistics.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/webapp/src/components/statistics/UserStatistics.jsx b/webapp/src/components/statistics/UserStatistics.jsx index f1b36b86..b707534e 100644 --- a/webapp/src/components/statistics/UserStatistics.jsx +++ b/webapp/src/components/statistics/UserStatistics.jsx @@ -15,7 +15,7 @@ export default function UserStatistics() { const getData = async () => { try { const request = await new AuthManager().getAxiosInstance() - .get(process.env.REACT_APP_API_ENDPOINT + "/statistics/personal"); + .get("http://localhost:8080" + "/statistics/personal"); if (request.status === HttpStatusCode.Ok) { setUserData({ "raw": [ @@ -67,7 +67,7 @@ export default function UserStatistics() { {t("statistics.rightAnswers")} - + {t("statistics.texts.personalRight", {right: userData.raw[0].value})} @@ -75,7 +75,7 @@ export default function UserStatistics() { {t("statistics.wrongAnswers")} - + {t("statistics.texts.personalWrong", {wrong: userData.raw[1].value}) } @@ -83,7 +83,7 @@ export default function UserStatistics() { {t("statistics.percentage")} - + {t("statistics.texts.personalRate", {rate: userData.rate})} From a5b1992c282efc89a7a85ba58792d133bba54c83 Mon Sep 17 00:00:00 2001 From: sergiorodriguezgarcia <113514397+sergiorodriguezgarcia@users.noreply.github.com> Date: Fri, 12 Apr 2024 17:43:21 +0200 Subject: [PATCH 02/10] feat: Adding the correct api endpoint --- webapp/src/components/statistics/UserStatistics.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/src/components/statistics/UserStatistics.jsx b/webapp/src/components/statistics/UserStatistics.jsx index b707534e..b8e76328 100644 --- a/webapp/src/components/statistics/UserStatistics.jsx +++ b/webapp/src/components/statistics/UserStatistics.jsx @@ -15,7 +15,7 @@ export default function UserStatistics() { const getData = async () => { try { const request = await new AuthManager().getAxiosInstance() - .get("http://localhost:8080" + "/statistics/personal"); + .get(process.env.REACT_APP_API_ENDPOINT + "/statistics/personal"); if (request.status === HttpStatusCode.Ok) { setUserData({ "raw": [ From 648fbb0a67aea515206a65ea639b8dc10a57280a Mon Sep 17 00:00:00 2001 From: sergiorodriguezgarcia <113514397+sergiorodriguezgarcia@users.noreply.github.com> Date: Fri, 12 Apr 2024 18:25:09 +0200 Subject: [PATCH 03/10] feat: Changing appearence of the statistics --- .../components/statistics/UserStatistics.jsx | 6 ++--- webapp/src/pages/Statistics.jsx | 22 +++++++++---------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/webapp/src/components/statistics/UserStatistics.jsx b/webapp/src/components/statistics/UserStatistics.jsx index b8e76328..e2534144 100644 --- a/webapp/src/components/statistics/UserStatistics.jsx +++ b/webapp/src/components/statistics/UserStatistics.jsx @@ -64,7 +64,7 @@ export default function UserStatistics() { {t("common.statistics.personal")} - + {t("statistics.rightAnswers")} @@ -72,7 +72,7 @@ export default function UserStatistics() { - + {t("statistics.wrongAnswers")} @@ -80,7 +80,7 @@ export default function UserStatistics() { - + {t("statistics.percentage")} diff --git a/webapp/src/pages/Statistics.jsx b/webapp/src/pages/Statistics.jsx index c59f32bc..523167b2 100644 --- a/webapp/src/pages/Statistics.jsx +++ b/webapp/src/pages/Statistics.jsx @@ -47,8 +47,8 @@ export default function Statistics() { const formatTopTen = () => { return topTen.map((element, counter) => { - return - {counter + 1} + return + {counter + 1} {element.user.username} {element.right} {element.wrong} @@ -82,7 +82,7 @@ export default function Statistics() { {t("common.statistics.title")} } minH="50vh" - p="1rem" backgroundColor="whiteAlpha.900" shadow="2xl" + p="1rem" backgroundColor="whiteAlpha.900" shadow="1.25em" boxShadow="md" rounded="1rem" alignItems={"center"} data-testid={"leaderboard-component"}> {retrievedData ? @@ -92,15 +92,15 @@ export default function Statistics() { { topTen.length === 0 ? {t("statistics.empty")} : - +
- - - - - - - + + + + + + + From 2587850d48881e5033d487e39d8b0de9504d97e4 Mon Sep 17 00:00:00 2001 From: sergiorodriguezgarcia <113514397+sergiorodriguezgarcia@users.noreply.github.com> Date: Sun, 14 Apr 2024 13:04:36 +0200 Subject: [PATCH 04/10] feat: Fixing the chart and aligning the items with it --- .../components/statistics/UserStatistics.jsx | 120 +++++++++--------- webapp/src/pages/Statistics.jsx | 1 - 2 files changed, 62 insertions(+), 59 deletions(-) diff --git a/webapp/src/components/statistics/UserStatistics.jsx b/webapp/src/components/statistics/UserStatistics.jsx index e2534144..1a80463a 100644 --- a/webapp/src/components/statistics/UserStatistics.jsx +++ b/webapp/src/components/statistics/UserStatistics.jsx @@ -2,33 +2,32 @@ import { Box, Flex, Heading, Stack, Text, CircularProgress } from "@chakra-ui/re import { HttpStatusCode } from "axios"; import ErrorMessageAlert from "components/ErrorMessageAlert"; import AuthManager from "components/auth/AuthManager"; -import React, {useEffect, useState} from "react"; +import React, { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { Cell, Pie, PieChart } from "recharts"; export default function UserStatistics() { - const {t} = useTranslation(); + const { t } = useTranslation(); const [userData, setUserData] = useState(null); const [retrievedData, setRetrievedData] = useState(false); const [errorMessage, setErrorMessage] = useState(null); const getData = async () => { try { - const request = await new AuthManager().getAxiosInstance() - .get(process.env.REACT_APP_API_ENDPOINT + "/statistics/personal"); + const request = await new AuthManager().getAxiosInstance().get(process.env.REACT_APP_API_ENDPOINT + "/statistics/personal"); if (request.status === HttpStatusCode.Ok) { setUserData({ - "raw": [ + raw: [ { - "name": t("statistics.texts.personalRight"), - "value": request.data.right + name: t("statistics.texts.personalRight"), + value: 60, }, { - "name": t("statistics.texts.personalWrong"), - "value": request.data.wrong - } + name: t("statistics.texts.personalWrong"), + value: 40, + }, ], - "rate": request.data.correct_rate + rate: 60 }); setRetrievedData(true); } else { @@ -38,67 +37,72 @@ export default function UserStatistics() { let errorType; switch (error.response ? error.response.status : null) { case 400: - errorType = { type: t("error.validation.type"), message: t("error.validation.message")}; + errorType = { type: t("error.validation.type"), message: t("error.validation.message") }; break; case 404: - errorType = { type: t("error.notFound.type"), message: t("error.notFound.message")}; + errorType = { type: t("error.notFound.type"), message: t("error.notFound.message") }; break; default: - errorType = { type: t("error.unknown.type"), message: t("error.unknown.message")}; + errorType = { type: t("error.unknown.type"), message: t("error.unknown.message") }; break; } setErrorMessage(errorType); } - } + }; useEffect(() => { - if(!retrievedData){ + if (!retrievedData) { getData(); } }); - return - { - retrievedData ? - <> - - - {t("common.statistics.personal")} - - - {t("statistics.rightAnswers")} - - - {t("statistics.texts.personalRight", {right: userData.raw[0].value})} - - - - + + return ( + + {retrievedData ? ( + + + + {t("common.statistics.personal")} + + + + + + {t("statistics.rightAnswers")} + + + {t("statistics.texts.personalRight", { right: userData.raw[0].value })} + + + + {t("statistics.wrongAnswers")} - - - {t("statistics.texts.personalWrong", {wrong: userData.raw[1].value}) } - - - - - {t("statistics.percentage")} - - - {t("statistics.texts.personalRate", {rate: userData.rate})} - - - - - - + + + {t("statistics.texts.personalWrong", { wrong: userData.raw[1].value })} + + + + + {t("statistics.percentage")} + + + {t("statistics.texts.personalRate", { rate: userData.rate })} + + + + + + - - - - : - } + + + + + ) : ( + + )} -} \ No newline at end of file + ); +} diff --git a/webapp/src/pages/Statistics.jsx b/webapp/src/pages/Statistics.jsx index 523167b2..0fcb86cd 100644 --- a/webapp/src/pages/Statistics.jsx +++ b/webapp/src/pages/Statistics.jsx @@ -18,7 +18,6 @@ export default function Statistics() { const [errorMessage, setErrorMessage] = useState(null); const getData = async () => { - console.log('lmao') try { const request = await new AuthManager().getAxiosInstance() .get(process.env.REACT_APP_API_ENDPOINT + "/statistics/top"); From 4d411c658b520e7ebb33f4fa2256bd75d581e72a Mon Sep 17 00:00:00 2001 From: sergiorodriguezgarcia <113514397+sergiorodriguezgarcia@users.noreply.github.com> Date: Mon, 15 Apr 2024 16:08:38 +0200 Subject: [PATCH 05/10] feat: Changing the harcoded rates --- webapp/src/components/statistics/UserStatistics.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/webapp/src/components/statistics/UserStatistics.jsx b/webapp/src/components/statistics/UserStatistics.jsx index 1a80463a..9f90eac7 100644 --- a/webapp/src/components/statistics/UserStatistics.jsx +++ b/webapp/src/components/statistics/UserStatistics.jsx @@ -20,14 +20,14 @@ export default function UserStatistics() { raw: [ { name: t("statistics.texts.personalRight"), - value: 60, + value: request.data.right, }, { name: t("statistics.texts.personalWrong"), - value: 40, + value: request.data.wrong, }, ], - rate: 60 + rate: request.data.correct_rate }); setRetrievedData(true); } else { From 683cd1e744a5352ac8321110656f06a12a9b9fd1 Mon Sep 17 00:00:00 2001 From: sergiorodriguezgarcia <113514397+sergiorodriguezgarcia@users.noreply.github.com> Date: Mon, 15 Apr 2024 16:48:10 +0200 Subject: [PATCH 06/10] feat: Adding new version for the rules page --- webapp/public/locales/en/translation.json | 9 +++++---- webapp/public/locales/es/translation.json | 9 +++++---- webapp/src/pages/Rules.jsx | 6 ++++-- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/webapp/public/locales/en/translation.json b/webapp/public/locales/en/translation.json index b61195dc..d6cdce40 100644 --- a/webapp/public/locales/en/translation.json +++ b/webapp/public/locales/en/translation.json @@ -53,10 +53,11 @@ } }, "rules": { - "description1": "The WIQ game consists of quick games of 9 rounds. In each round there is one question and two possible answers. The key to earning points lies in choosing the correct answer.", - "description2": "There is only one correct answer.", - "description3": "You have to select a question before time runs out.", - "description4": "To start playing you have to click on the Play button." + "description1": "Welcome to the exciting world of KiWiQ! In this challenging game, your goal is to embark on a journey full of knowledge and fun.", + "description2": "Each question is a door to a universe of possibilities, with four options before you. But be careful, only one of those options is the golden key that will unlock the treasure of the correct answer.", + "description3": "With just 30 seconds for each question, you'll feel the adrenaline rushing through your veins as you fight against the clock to find the perfect answer. Take on the standard challenge with 9 questions waiting for you in each match, or venture into the custom terrain, where you can choose your own route. Do you feel brave? Or do you prefer strategy?", + "description4": "At the end of the road, your score will be your badge of honor. Can you achieve maximum glory and become the KiWiQ champion? Only time will tell!", + "description5": "Let the game begin!" }, "statistics": { diff --git a/webapp/public/locales/es/translation.json b/webapp/public/locales/es/translation.json index a67bc786..3b5b5b90 100644 --- a/webapp/public/locales/es/translation.json +++ b/webapp/public/locales/es/translation.json @@ -53,10 +53,11 @@ } }, "rules": { - "description1": "El juego de WIQ consiste en juegos rápidos de 9 rondas. En cada ronda hay una pregunta y dos posibles respuestas. La clave para ganar puntos está en elegir la respuesta correcta.", - "description2": "Solo hay una respuesta correcta.", - "description3": "Debes seleccionar una pregunta antes de que se acabe el tiempo.", - "description4": "Para comenzar a jugar, debes hacer clic en el botón Jugar." + "description1": "¡Bienvenidos al emocionante mundo de KiWiQ! En este desafiante juego, tu objetivo es embarcarte en un viaje lleno de conocimiento y diversión.", + "description2": "Cada pregunta es una puerta hacia un universo de posibilidades, con cuatro opciones ante ti. Pero cuidado, solo una de esas opciones es la clave dorada que desbloqueará el tesoro de la respuesta correcta.", + "description3": "Con solo 30 segundos para cada pregunta, sentirás la adrenalina corriendo por tus venas mientras luchas contra el reloj para encontrar la respuesta perfecta. Enfrenta el desafío estándar con 9 preguntas esperándote en cada partida, o aventúrate en el terreno personalizado, donde puedes elegir tu propia ruta. ¿Te sientes valiente? ¿O prefieres la estrategia?", + "description4": "Al final del camino, tu puntuación será tu insignia de honor. ¿Podrás alcanzar la gloria máxima y convertirte en el campeón de KiWiQ? ¡Solo el tiempo lo dirá!", + "description5": "¡Que comience el juego!" }, "statistics": { "position": "Posición", diff --git a/webapp/src/pages/Rules.jsx b/webapp/src/pages/Rules.jsx index 7b528024..c8c33b60 100644 --- a/webapp/src/pages/Rules.jsx +++ b/webapp/src/pages/Rules.jsx @@ -23,8 +23,8 @@ export default function Rules() { setIsMenuOpen(false)} changeLanguage={changeLanguage} isDashboard={false}/> {t("common.rules")} - - + + {t("rules.description1")}

{t("rules.description2")} @@ -32,6 +32,8 @@ export default function Rules() { {t("rules.description3")}

{t("rules.description4")} +

+ {t("rules.description5")} From cdfa9c9c92dafd674a91ad2e660d143d8ed6a582 Mon Sep 17 00:00:00 2001 From: sergiorodriguezgarcia <113514397+sergiorodriguezgarcia@users.noreply.github.com> Date: Mon, 15 Apr 2024 17:12:52 +0200 Subject: [PATCH 07/10] fix: Adding tests to the Statistics page --- webapp/src/tests/Statistics.test.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/webapp/src/tests/Statistics.test.js b/webapp/src/tests/Statistics.test.js index a0402cdd..5f0e5134 100644 --- a/webapp/src/tests/Statistics.test.js +++ b/webapp/src/tests/Statistics.test.js @@ -105,6 +105,30 @@ describe("Statistics", () => { }); }); + test("renders initial loading state", () => { + render(); + expect(screen.getByTestId("leaderboard-spinner")).toBeVisible(); + }); + + test("displays error message when data retrieval fails", async () => { + const errorMessage = "error.unknown.typeerror.unknown.message"; + const mockAxios = new MockAdapter(authManager.getAxiosInstance()); + mockAxios.onGet().reply(HttpStatusCode.InternalServerError); + render(); + await waitFor(() => { + expect(screen.getByTestId("error-message")).toHaveTextContent(errorMessage); + }); + }); + + test("displays empty state when no data is returned", async () => { + const mockAxios = new MockAdapter(authManager.getAxiosInstance()); + mockAxios.onGet().reply(HttpStatusCode.Ok, []); + render(); + await waitFor(() => { + expect(screen.getByText("statistics.empty")).toBeVisible(); + }); + }); + describe("the petition fails", () => { each([HttpStatusCode.BadRequest, HttpStatusCode.NotFound, From e064e003dc02e5d9201cc7341676285d1b5f9f78 Mon Sep 17 00:00:00 2001 From: sergiorodriguezgarcia <113514397+sergiorodriguezgarcia@users.noreply.github.com> Date: Mon, 15 Apr 2024 17:35:15 +0200 Subject: [PATCH 08/10] feat: Adding more tests to the LateralMenu --- webapp/src/tests/LateralMenu.test.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/webapp/src/tests/LateralMenu.test.js b/webapp/src/tests/LateralMenu.test.js index b5524ac1..27a9876a 100644 --- a/webapp/src/tests/LateralMenu.test.js +++ b/webapp/src/tests/LateralMenu.test.js @@ -1,10 +1,11 @@ import React from 'react'; -import { render, screen, waitFor } from '@testing-library/react'; +import { render, screen, waitFor, fireEvent } from '@testing-library/react'; import { MemoryRouter } from 'react-router'; import { ChakraProvider } from '@chakra-ui/react'; import theme from '../styles/theme'; import AuthManager from '../components/auth/AuthManager'; import LateralMenu from '../components/LateralMenu'; +import userEvent from '@testing-library/user-event'; jest.mock('react-i18next', () => ({ useTranslation: () => { @@ -121,4 +122,13 @@ describe('LateralMenu component', () => { const aboutButton = screen.getByLabelText('About'); expect(aboutButton).toBeInTheDocument(); }); + it('changes language on select change', async () => { + const changeLanguageMock = jest.fn(); + render( {}} changeLanguage={changeLanguageMock} isDashboard={false} />); + + userEvent.selectOptions(screen.getByTestId('language-select'), 'en'); + await waitFor(() => { + expect(changeLanguageMock).toHaveBeenCalledWith('en'); + }); + }); }); From 36156bd662001da517a0dd3fa75ef0b887e4210f Mon Sep 17 00:00:00 2001 From: sergiorodriguezgarcia <113514397+sergiorodriguezgarcia@users.noreply.github.com> Date: Mon, 15 Apr 2024 17:46:29 +0200 Subject: [PATCH 09/10] feat: Adding more tests to the LateralMenu page --- webapp/src/tests/LateralMenu.test.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/webapp/src/tests/LateralMenu.test.js b/webapp/src/tests/LateralMenu.test.js index 27a9876a..519ccdaa 100644 --- a/webapp/src/tests/LateralMenu.test.js +++ b/webapp/src/tests/LateralMenu.test.js @@ -117,6 +117,14 @@ describe('LateralMenu component', () => { expect(logoutButton).toBeNull(); }); + it('renders logout button when isLoggedIn is true', async () => { + authManager.setLoggedIn(true); + const { getByText } = render(); + await waitFor(() => { + expect(getByText('common.logout')).toBeInTheDocument(); + }); + }); + it('renders about button', () => { render(); const aboutButton = screen.getByLabelText('About'); @@ -130,5 +138,5 @@ describe('LateralMenu component', () => { await waitFor(() => { expect(changeLanguageMock).toHaveBeenCalledWith('en'); }); - }); + }); }); From 9325a326090ba75e91fa6ca82df317eb84ff8f1e Mon Sep 17 00:00:00 2001 From: sergiorodriguezgarcia <113514397+sergiorodriguezgarcia@users.noreply.github.com> Date: Mon, 15 Apr 2024 17:59:12 +0200 Subject: [PATCH 10/10] feat: Adding more tests to the LateralMenu --- webapp/src/tests/LateralMenu.test.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/webapp/src/tests/LateralMenu.test.js b/webapp/src/tests/LateralMenu.test.js index 519ccdaa..fd5781e0 100644 --- a/webapp/src/tests/LateralMenu.test.js +++ b/webapp/src/tests/LateralMenu.test.js @@ -139,4 +139,15 @@ describe('LateralMenu component', () => { expect(changeLanguageMock).toHaveBeenCalledWith('en'); }); }); + it('renders API button when isLoggedIn is true', async () => { + authManager.setLoggedIn(true); + const { getByText } = render(); + await waitFor(() => { + expect(getByText('API')).toBeInTheDocument(); + }); + fireEvent.click(screen.getByTestId('API')); + await waitFor(() => { + expect(screen.getByText('KIWIQ')).toBeInTheDocument(); + }); + }); });
{t("statistics.position")}{t("statistics.username")}{t("statistics.rightAnswers")}{t("statistics.wrongAnswers")}{t("statistics.totalAnswers")}{t("statistics.percentage")}
{t("statistics.position")}{t("statistics.username")}{t("statistics.rightAnswers")}{t("statistics.wrongAnswers")}{t("statistics.totalAnswers")}{t("statistics.percentage")}