Internationalization of WebApp Elements

webapp/package.json

@@ -12,13 +12,15 @@
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "axios": "^1.6.5",
-    "cross-env": "^7.0.3",
     "babel": "^6.23.0",
+    "cross-env": "^7.0.3",
     "express": "^4.19.2",
+    "i18next": "^23.11.0",
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",
     "react-countdown-circle-timer": "^3.2.1",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.0",
     "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",
     "sequelize": "^6.37.2",

webapp/src/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import AddUser from './pages/AddUser';
+import Register from './pages/Register';
 import Instructions from './pages/Instructions';
 import Login from './pages/Login';
 import NavBar from './components/NavBar';
@@ -48,7 +48,7 @@ function App() {
           <Routes>
             <Route path="/" element={<Home />}/>
             <Route path="/login" element={<Login />}/>
-            <Route path="/register" element={<AddUser />}/>
+            <Route path="/register" element={<Register />}/>
             <Route path="/instructions" element={<Instructions />}/>
             <Route path="/homepage" element={<Homepage />}/>
             <Route path="/game" element={<Game />}/>

webapp/src/__tests__/App.test.js

@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import App from '../App';
 import { SessionContext } from '../SessionContext';
+import '../localize/i18n';
 
 describe('App component', () => {
   it('renders home page by default', () => {

webapp/src/__tests__/components/Footer.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import Footer from '../../components/Footer.js';
+import '../../localize/i18n.js';
 
 describe('Footer component', () => {
   beforeEach(() => {

webapp/src/__tests__/components/NavBar.test.js

@@ -3,6 +3,7 @@ import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import { BrowserRouter  } from 'react-router-dom';
 import NavBar from '../../components/NavBar';
 import { SessionContext } from '../../SessionContext';
+import '../../localize/i18n';
 
 describe('NavBar component', () => {
   it('should render logo when not logged', async () => {
@@ -106,4 +107,35 @@ describe('NavBar component', () => {
     fireEvent.click(logoutButton);
     expect(window.location.pathname).toBe('/');
   });
+
+  it('should render language options and change as expected', async () => {
+    render(
+      <SessionContext.Provider value={{ isLoggedIn: true }}>
+        <BrowserRouter>
+          <NavBar />
+        </BrowserRouter>
+      </SessionContext.Provider>
+    );
+
+    // Checks select menu is in the nav
+    const selectLang = screen.getByText("English");
+    await expect(selectLang).toBeInTheDocument();
+
+    // Click on it and check both options are there
+    // mouse down para elementos que no son botón: https://stackoverflow.com/questions/55184037/react-testing-library-on-change-for-material-ui-select-component
+    // "uhh, es buena esa"
+    fireEvent.mouseDown(selectLang);
+    const selectLangEn = screen.getAllByText("English")[1];
+    await expect(selectLangEn).toBeInTheDocument();
+    const selectLangEs = screen.getByText("Spanish");
+    await expect(selectLang).toBeInTheDocument();
+
+    // Click on spanish element
+    fireEvent.click(selectLangEs);
+
+    // Check lang has changed for the menu and the navigation
+    const playOptionEs = screen.getAllByText("Jugar");
+    await expect(playOptionEs[0]).toBeInTheDocument();
+    await expect(playOptionEs[1]).toBeInTheDocument();
+  });
 });

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

@@ -5,6 +5,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import Game from '../../pages/Game';
+import '../../localize/i18n';
 
 const mockAxios = new MockAdapter(axios);
 
@@ -50,7 +51,6 @@ describe('Game component', () => {
     expect(screen.findByText('London'));
 
     expect(screen.getByRole('button', { name: /Pause/i }));
-    expect(screen.getByText(/Game time:/i)).toBeInTheDocument();
 
   });
 

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

@@ -4,6 +4,7 @@ import { BrowserRouter as Router, useParams } from 'react-router-dom';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import GroupDetails from '../../pages/GroupDetails';
+import '../../localize/i18n';
 
 const mockAxios = new MockAdapter(axios);
 

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

@@ -5,6 +5,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import Groups from '../../pages/Groups';
+import '../../localize/i18n';
 
 const mockAxios = new MockAdapter(axios);
 

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

@@ -4,6 +4,7 @@ import Home from '../../pages/Home';
 import { BrowserRouter  } from 'react-router-dom';
 import { SessionContext } from '../../SessionContext';
 import userEvent from '@testing-library/user-event';
+import '../../localize/i18n';
 
 describe('NavBar component', () => {
 

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

@@ -5,6 +5,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import Login from '../../pages/Login';
+import '../../localize/i18n';
 
 const mockAxios = new MockAdapter(axios);
 
@@ -26,7 +27,7 @@ describe('Login component', () => {
 
     expect(screen.getByLabelText('Username')).toBeInTheDocument();
     expect(screen.getByLabelText('Password')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Log In' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Log in' })).toBeInTheDocument();
     expect(screen.getByRole('link', { name: 'Don\'t have an account? Register here.' })).toBeInTheDocument();
   });
 
@@ -42,7 +43,7 @@ describe('Login component', () => {
     fireEvent.change(screen.getByLabelText('Username'), { target: { value: 'testuser' } });
     fireEvent.change(screen.getByLabelText('Password'), { target: { value: 'testpassword' } });
 
-    fireEvent.click(screen.getByRole('button', { name: 'Log In' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Log in' }));
 
     await waitFor(() => {
       expect(mockAxios.history.post.length).toBe(1); // Ensure one POST request is made
@@ -63,7 +64,7 @@ describe('Login component', () => {
     fireEvent.change(screen.getByLabelText('Username'), { target: { value: '    ' } });
     fireEvent.change(screen.getByLabelText('Password'), { target: { value: 'testpassword' } });
 
-    fireEvent.click(screen.getByRole('button', { name: 'Log In' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Log in' }));
 
     await waitFor(() => {
       expect(screen.getByText('Error: The username cannot contain only spaces')).toBeInTheDocument();

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

@@ -4,6 +4,7 @@ import { SessionContext } from '../../SessionContext';
 import { BrowserRouter, useLocation } from 'react-router-dom'; 
 import MultiplayerGame from '../../pages/MultiplayerGame';
 import io from 'socket.io-client';
+import '../../localize/i18n';
 
 jest.mock('react-router-dom', () => ({
     ...jest.requireActual('react-router-dom'),

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

@@ -4,6 +4,7 @@ import MultiplayerRoom from '../../pages/MultiplayerRoom';
 import io from 'socket.io-client';
 import { SessionContext } from '../../SessionContext';
 import { BrowserRouter as Router } from 'react-router-dom';
+import '../../localize/i18n';
 
 //mock some socket behaviour
 jest.mock('socket.io-client', () => {

webapp/src/__tests__/pages/AddUser.test.js → webapp/src/__tests__/pages/Register.test.js

@@ -4,11 +4,12 @@ import { SessionContext } from '../../SessionContext';
 import { BrowserRouter as Router } from 'react-router-dom';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import AddUser from '../../pages/AddUser';
+import Register from '../../pages/Register';
+import '../../localize/i18n';
 
 const mockAxios = new MockAdapter(axios);
 
-describe('AddUser component', () => {
+describe('Register component', () => {
   beforeEach(() => {
     mockAxios.reset();
     // Mock the axios.post request to simulate a successful response
@@ -20,7 +21,7 @@ describe('AddUser component', () => {
     render(
       <SessionContext.Provider value={{}}>
         <Router>
-          <AddUser />
+          <Register />
         </Router>
       </SessionContext.Provider>
     );
@@ -29,15 +30,15 @@ describe('AddUser component', () => {
     expect(screen.getByLabelText('Password')).toBeInTheDocument();
     expect(screen.getByLabelText('Name')).toBeInTheDocument();
     expect(screen.getByLabelText('Surname')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Sign Up' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Sign up' })).toBeInTheDocument();
     expect(screen.getByRole('link', { name: 'Already have an account? Login here.' })).toBeInTheDocument();
   });
 
   it('should sign up a user', async () => {
     render(
       <SessionContext.Provider value={{ createSession: jest.fn() }}>
         <Router>
-          <AddUser />
+          <Register />
         </Router>
       </SessionContext.Provider>
     );
@@ -47,7 +48,7 @@ describe('AddUser component', () => {
     fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'John' } });
     fireEvent.change(screen.getByLabelText('Surname'), { target: { value: 'Doe' } });
 
-    fireEvent.click(screen.getByRole('button', { name: 'Sign Up' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Sign up' }));
 
     await waitFor(() => {
       expect(mockAxios.history.post.length).toBe(2); // Ensure two POST requests are made
@@ -60,12 +61,12 @@ describe('AddUser component', () => {
     render(
       <SessionContext.Provider value={{}}>
         <Router>
-          <AddUser />
+          <Register />
         </Router>
       </SessionContext.Provider>
     );
 
-    fireEvent.click(screen.getByRole('button', { name: 'Sign Up' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Sign up' }));
 
     await waitFor(() => {
       expect(screen.getByText('Error: Username already exists')).toBeInTheDocument();

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

@@ -6,6 +6,7 @@ import { SessionContext } from '../../SessionContext';
 import { BrowserRouter as Router } from 'react-router-dom';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
+import '../../localize/i18n';
 
 const mockAxios = new MockAdapter(axios);
 

webapp/src/components/Footer.js

@@ -1,18 +1,25 @@
 import * as React from 'react';
 import { AppBar, Toolbar, Typography, Link } from '@mui/material';
+import { useTranslation } from 'react-i18next';
 
 const Footer = () => {
+    const { t } = useTranslation();
+
     return (
       <AppBar component="footer" position="static" sx={{ backgroundColor: "primary", color: "white", bottom: 0, left: 0, width: '100%', zIndex: 1000}}>
         <Toolbar>
           <Typography sx={{ margin: 'auto' }}>
-            <Link href='https://app.swaggerhub.com/apis-docs/UO288347_1/questions-api/1.0.0' target="_blank" color="inherit">QUESTIONS API DOC</Link>
+            <Link href='https://app.swaggerhub.com/apis-docs/UO288347_1/questions-api/1.0.0' target="_blank" color="inherit">
+              {t("Footer.api_questions")}
+            </Link>
           </Typography>
           <Typography sx={{ margin: 'auto' }}>
             <Link href="https://github.com/Arquisoft/wiq_es04a" target="_blank" rel="noopener" color="inherit">© WIQ-ES04A</Link>
           </Typography>
           <Typography sx={{ margin: 'auto' }}>
-            <Link href='https://app.swaggerhub.com/apis-docs/UO289689_1/users-api/1.0.0' target="_blank" color="inherit">USERS API DOC</Link>
+            <Link href='https://app.swaggerhub.com/apis-docs/UO289689_1/users-api/1.0.0' target="_blank" color="inherit">
+              {t("Footer.api_users")}
+            </Link>
           </Typography>
         </Toolbar>
       </AppBar>