Merge pull request #241 from Arquisoft/test-run-daniel-6

Ranking added and its tests

webapp/babel.config.json

@@ -0,0 +1,9 @@
+{
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ],
+    "plugins": [
+      "@babel/plugin-proposal-private-property-in-object"
+    ]
+  }

webapp/package.json

@@ -3,27 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.3",
     "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
-    "@tsparticles/engine": "^3.3.0",
-    "@tsparticles/react": "^3.0.0",
     "axios": "^1.6.5",
+    "babel": "^6.23.0",
     "express": "^4.19.2",
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",
     "react-countdown-circle-timer": "^3.2.1",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.3",
+    "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",
-    "react-tsparticles": "^2.12.2",
     "sequelize": "^6.37.2",
     "socket.io-client": "^4.7.5",
     "sqlite3": "^5.1.7",
-    "tsparticles": "^3.3.0",
     "web-vitals": "^3.5.1"
   },
   "scripts": {
@@ -57,11 +56,10 @@
     "@testing-library/react": "^14.2.2",
     "axios-mock-adapter": "^1.22.0",
     "expect-puppeteer": "^9.0.2",
-    "jest": "^29.7.0",
+    "jest": "^29.3.1",
     "jest-cucumber": "^3.0.1",
     "jest-environment-node": "^29.7.0",
     "mongodb-memory-server": "^9.1.4",
-    "mysql2-promise": "^0.1.4",
     "puppeteer": "^21.7.0",
     "serve": "^14.2.1",
     "start-server-and-test": "^2.0.3"

webapp/src/App.js

@@ -10,6 +10,7 @@ import Game from './pages/Game';
 import Groups from './pages/Groups';
 import GroupDetails from './pages/GroupDetails';
 import Statistics from './pages/Statistics';
+import Ranking from './pages/Ranking'
 import MultiplayerRoom from './pages/MultiplayerRoom';
 import MultiplayerGame from './pages/MultiplayerGame';
 import {Route, Routes} from 'react-router-dom';
@@ -56,6 +57,7 @@ function App() {
             <Route path="/group/menu" element={<Groups />}/>
             <Route path="/group/:groupName" element={<GroupDetails />} />
             <Route path="/statistics" element={<Statistics />}/>
+            <Route path="/ranking" element={<Ranking/>}/>
           </Routes>
         <Footer/>
       </ThemeProvider>

webapp/src/__tests__/pages/Home.test.js

@@ -37,3 +37,4 @@ describe('NavBar component', () => {
         expect(window.location.pathname).toBe('/');
     });
 });
+

webapp/src/__tests__/pages/Homepage.test.js

@@ -37,4 +37,33 @@ describe('Homepage component', () => {
     await expect(game4).toBeInTheDocument();
 
   });
+
+  it('should change game selection page', async () => {
+
+    render(
+      <Homepage />
+    );
+
+    fireEvent.click(screen.getByText('2'));
+
+    await waitFor(() => {
+      expect(screen.queryByText('ONLINE MODE')).toBeInTheDocument();
+    });
+  });
+
+
+  it('should select a game mode', async () => {
+
+    render(
+      <Homepage />
+    );
+
+    fireEvent.click(screen.getByText('WISE MEN STACK'));
+
+    await waitFor(() => {
+      expect(screen.getByAltText('WISE MEN STACK')).toBeInTheDocument();
+    });
+
+
+  });
 });

webapp/src/__tests__/pages/Ranking.test.js

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import axios from 'axios';
+import Ranking from '../../pages/Ranking.js';
+
+jest.mock('axios');
+
+it('fetches ranking from an API and displays them', async () => {
+  const ranking = [
+    { username: 'User1', totalScore: 100 },
+    { username: 'User2', totalScore: 90 },
+    // Add more users if needed
+  ];
+
+  axios.get.mockResolvedValueOnce({ data: { rank: ranking } });
+
+  render(<Ranking />);
+
+  const listItemElements = await screen.findAllByRole('listitem');
+
+  expect(listItemElements).toHaveLength(ranking.length);
+
+  listItemElements.forEach((listItemElement, index) => {
+    expect(listItemElement).toHaveTextContent(`${ranking[index].username.toUpperCase()}: ${ranking[index].totalScore}`);
+  });
+});
+
+

webapp/src/components/NavBar.js

@@ -13,7 +13,8 @@ const pages = [
   { path: '/homepage', text: 'Play' },
   { path: '/statistics', text: 'Statistics' },
   { path: '/instructions', text: 'Instructions' },
-  { path: '/group/menu', text: 'Groups' }
+  { path: '/group/menu', text: 'Groups' },
+  { path: '/ranking', text: 'Ranking' }
   // Add an object for each new page
 ];
 

webapp/src/pages/Homepage.js

@@ -126,9 +126,9 @@ const Homepage = () => {
                     <img
                         style={styles.img}
                         src={info[index].foto}
-                        alt="Foto del juego"
+                        alt={data[index].nombre}
                     />
-
+                    
                 </Box>
             );
         }

webapp/src/pages/Ranking.js

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import {Container, Typography } from '@mui/material';
+
+const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+const Ranking = () => {
+
+    const [ranking, setRanking] = useState([]);
+
+    useEffect(() => {
+        const fetchRanking = async () => {
+            axios.get(`${apiEndpoint}/user/ranking`)
+            .then((response) => {
+              const resp = response.data;
+              setRanking(resp.rank);
+            })
+            .catch((error) => {
+              console.error(error);
+            });
+        };
+
+        fetchRanking();
+    }, []);
+
+    return (
+        <Container sx={{ 
+            display: "flex", 
+            flexDirection: "column", 
+            justifyContent: "center", 
+            alignItems: "center", 
+            flexGrow: 1, 
+            gap: "2em", 
+            padding:"6vh"
+        }}>
+            <Typography variant="h3" align="center" fontWeight="bold">RANKING</Typography>
+
+            <ol>
+                <strong>
+                {ranking.slice(0,10).map((user, index) => ( // Show only the top 10 users
+                    <li key={index}>
+                        {user.username.toUpperCase()}: {user.totalScore}
+                    </li>
+                ))}
+                </strong>
+            </ol>
+        </Container>
+    );
+};
+
+export default Ranking;