i18n fix and e2e test

webapp/e2e/features/close-session.feature

@@ -0,0 +1,6 @@
+Feature: Closing a session
+
+Scenario: The user is going to close the session
+  Given An unregistered user
+  When I fill the data in the form, press submit and press Logout button
+  Then A title message should be shown in the screen

webapp/e2e/features/i18n.feature

@@ -0,0 +1,6 @@
+Feature: i18n test
+
+Scenario: The user is going to try different languages
+  Given An unregistered user
+  When I fill the data in the form, press submit and press langugae button
+  Then A Classic Game message should be shown in different languages

webapp/e2e/features/infinite-mode.feature

@@ -0,0 +1,6 @@
+Feature: Play Infinite Mode
+
+Scenario: The user is going to play infinite mode
+  Given An unregistered user
+  When I fill the data in the form, press submit, press Infinte Mode button and end game
+  Then A Game Over message should be shown in the screen

webapp/e2e/steps/close-session-steps.js

@@ -0,0 +1,58 @@
+const puppeteer = require('puppeteer');
+const { defineFeature, loadFeature }=require('jest-cucumber');
+const setDefaultOptions = require('expect-puppeteer').setDefaultOptions
+const feature = loadFeature('./features/close-session.feature');
+
+let page;
+let browser;
+
+defineFeature(feature, test => {
+
+  beforeAll(async () => {
+    browser = process.env.GITHUB_ACTIONS
+      ? await puppeteer.launch()
+      : await puppeteer.launch({ headless: false, slowMo: 100 });
+    page = await browser.newPage();
+    //Way of setting up the timeout
+    setDefaultOptions({ timeout: 10000 })
+
+    await page
+      .goto("http://localhost:3000", {
+        waitUntil: "networkidle0",
+      })
+      .catch(() => {});
+  });
+
+  test('The user is going to close the session', ({given,when,then}) => {
+
+    let username;
+    let password;
+
+    given('An unregistered user', async () => {
+      username = "pablo2"
+      password = "pabloasw"
+      await expect(page).toClick("button", { text: "Don't have an account? Register here." });
+    });
+
+    when('I fill the data in the form, press submit and press Logout button', async () => {
+      await expect(page).toFill('input[name="username"]', username);
+      await expect(page).toFill('input[name="password"]', password);
+      await expect(page).toFill('input[name="confirmPassword"]', password);
+
+      await expect(page).toClick('button.btn', { text: '' });
+
+      await expect(page).toClick('button.perfilButton', { text: '' });
+
+      await expect(page).toClick('li', { text: 'Logout' });
+    });
+
+    then('A title message should be shown in the screen', async () => {
+        await expect(page).toMatchElement("h1.titleLoginRegister", { text: "" });
+    });
+  })
+
+  afterAll(async ()=>{
+    browser.close()
+  })
+
+});

webapp/e2e/steps/i18n-steps.js

@@ -0,0 +1,71 @@
+const puppeteer = require('puppeteer');
+const { defineFeature, loadFeature }=require('jest-cucumber');
+const setDefaultOptions = require('expect-puppeteer').setDefaultOptions
+const feature = loadFeature('./features/i18n.feature');
+
+let page;
+let browser;
+
+defineFeature(feature, test => {
+
+  beforeAll(async () => {
+    browser = process.env.GITHUB_ACTIONS
+      ? await puppeteer.launch()
+      : await puppeteer.launch({ headless: false, slowMo: 10 });
+    page = await browser.newPage();
+    //Way of setting up the timeout
+    setDefaultOptions({ timeout: 10000 })
+
+    await page
+      .goto("http://localhost:3000", {
+        waitUntil: "networkidle0",
+      })
+      .catch(() => {});
+  });
+
+  test('The user is going to try different languages', ({given,when,then}) => {
+
+    let username;
+    let password;
+
+    given('An unregistered user', async () => {
+      username = "pablo3"
+      password = "pabloasw"
+      await expect(page).toClick("button", { text: "Don't have an account? Register here." });
+    });
+
+    when('I fill the data in the form, press submit and press langugae button', async () => {
+      await expect(page).toFill('input[name="username"]', username);
+      await expect(page).toFill('input[name="password"]', password);
+      await expect(page).toFill('input[name="confirmPassword"]', password);
+
+      await expect(page).toClick('button.btn', { text: '' });
+
+      await expect(page).toMatchElement("span", { text: "Classic Game" });
+
+      await expect(page).toClick('button.menuLeft', { text: '' });
+
+      await expect(page).toClick('div.languageButton', { text: '' });
+
+      await expect(page).toClick('li', { text: 'Spanish' });
+    });
+
+    then('A Classic Game message should be shown in different languages', async () => {
+
+        await expect(page).toMatchElement("span", { text: "Juego Clásico" });
+
+        await expect(page).toClick('div.languageButton', { text: '' });
+        await expect(page).toClick('li', { text: 'Italiano' });
+        await expect(page).toMatchElement("span", { text: "Gioco Classico" });
+
+        await expect(page).toClick('div.languageButton', { text: '' });
+        await expect(page).toClick('li', { text: 'Francese' });
+        await expect(page).toMatchElement("span", { text: "Jeu classique" });
+    });
+  })
+
+  afterAll(async ()=>{
+    browser.close()
+  })
+
+});

webapp/e2e/steps/infinite-mode-steps.js

@@ -0,0 +1,58 @@
+const puppeteer = require('puppeteer');
+const { defineFeature, loadFeature }=require('jest-cucumber');
+const setDefaultOptions = require('expect-puppeteer').setDefaultOptions
+const feature = loadFeature('./features/infinite-mode.feature');
+
+let page;
+let browser;
+
+defineFeature(feature, test => {
+
+  beforeAll(async () => {
+    browser = process.env.GITHUB_ACTIONS
+      ? await puppeteer.launch()
+      : await puppeteer.launch({ headless: false, slowMo: 10 });
+    page = await browser.newPage();
+    //Way of setting up the timeout
+    setDefaultOptions({ timeout: 10000 })
+
+    await page
+      .goto("http://localhost:3000", {
+        waitUntil: "networkidle0",
+      })
+      .catch(() => {});
+  });
+
+  test('The user is going to play infinite mode', ({given,when,then}) => {
+
+    let username;
+    let password;
+
+    given('An unregistered user', async () => {
+      username = "pablo"
+      password = "pabloasw"
+      await expect(page).toClick("button", { text: "Don't have an account? Register here." });
+    });
+
+    when('I fill the data in the form, press submit, press Infinte Mode button and end game', async () => {
+      await expect(page).toFill('input[name="username"]', username);
+      await expect(page).toFill('input[name="password"]', password);
+      await expect(page).toFill('input[name="confirmPassword"]', password);
+
+      await expect(page).toClick('button.btn', { text: '' });
+
+      await expect(page).toClick('button.btn', { text: 'Infinite Mode' });
+
+      await expect(page).toClick('div.endGameButton', { text: '' });
+    });
+
+    then('A Game Over message should be shown in the screen', async () => {
+        await expect(page).toMatchElement("p", { text: "Game Over" });
+    });
+  })
+
+  afterAll(async ()=>{
+    browser.close()
+  })
+
+});

webapp/e2e/steps/register-form.steps.js

@@ -11,7 +11,7 @@ defineFeature(feature, test => {
   beforeAll(async () => {
     browser = process.env.GITHUB_ACTIONS
       ? await puppeteer.launch()
-      : await puppeteer.launch({ headless: false, slowMo: 100 });
+      : await puppeteer.launch({ headless: false, slowMo: 10 });
     page = await browser.newPage();
     //Way of setting up the timeout
     setDefaultOptions({ timeout: 10000 })
@@ -29,7 +29,7 @@ defineFeature(feature, test => {
     let password;
 
     given('An unregistered user', async () => {
-      username = "pablo"
+      username = "pablo4"
       password = "pabloasw"
       await expect(page).toClick("button", { text: "Don't have an account? Register here." });
     });
@@ -43,7 +43,7 @@ defineFeature(feature, test => {
     });
 
     then('A confirmation message should be shown in the screen', async () => {
-        await expect(page).toMatchElement("div", { text: "User added successfully" });
+        await expect(page).toMatchElement("span", { text: "[ ASW Quiz - WIQ ]" });
     });
   })
 

webapp/src/App.js

@@ -9,11 +9,28 @@ import User from './components/User'
 import { IntlProvider } from 'react-intl';
 import messages_en from './messages/messages_en.json';
 import messages_es from './messages/messages_es.json';
+import messages_it from './messages/messages_it.json';
+import messages_fr from './messages/messages_fr.json';
 
 function App() {
 
   const [locale, setLocale] = useState('en');
-  const messages = locale === 'en' ? messages_en : messages_es;
+  let messages;
+  switch (locale) {
+    case 'en':
+        messages = messages_en;
+        break;
+    case 'es':
+        messages = messages_es;
+        break;
+    case 'it':
+        messages = messages_it;
+        break;
+    case 'fr':
+        messages = messages_fr;
+        break;
+    default: break;
+  }
 
   const [daltonicMode, setDaltonicMode] = useState(false);
 

webapp/src/components/AddUser.js

@@ -153,7 +153,7 @@ const AddUser = ({goTo, changeLanguage, locale, handleToggleView}) => {
         </div> 
       <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message={<FormattedMessage id="userAdd" />} />
       {error && (
-        <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={<FormattedMessage id="passwordNotMatch" />} />
+        <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
       )}
     </Container>
   );

webapp/src/components/LanguageSelect.js

@@ -8,6 +8,8 @@ const LanguageSelect = ({ value, onChange }) => {
       <Select labelId="language-label" id="language-select" value={value} onChange={onChange}>
         <MenuItem value="en"><FormattedMessage id="langen" /></MenuItem>
         <MenuItem value="es"><FormattedMessage id="langes" /></MenuItem>
+        <MenuItem value="it"><FormattedMessage id="langit" /></MenuItem>
+        <MenuItem value="fr"><FormattedMessage id="langfr" /></MenuItem>
       </Select>
     </FormControl>
   );

webapp/src/components/Login.js

@@ -122,7 +122,7 @@ const Login = ({ goTo, changeLanguage, locale, handleToggleView }) => {
         </div> 
           <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message={<FormattedMessage id="loginSuccessfull" />} />
           {error && (
-            <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={<FormattedMessage id="invalidCredentials" />} />
+            <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
           )}
         </div>
     </Container>

webapp/src/components/Nav.jsx

@@ -85,7 +85,7 @@ function Nav({ goTo, changeLanguage, locale, isInGame, changeDaltonicMode }) {
           </a>
 
           <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
-            <IconButton
+            <IconButton className='menuLeft'
               size="large"
               aria-label="account of current user"
               aria-controls="menu-appbar"
@@ -95,7 +95,7 @@ function Nav({ goTo, changeLanguage, locale, isInGame, changeDaltonicMode }) {
             >
               <MenuIcon />
             </IconButton>
-            <Menu
+            <Menu 
               id="menu-appbar"
               anchorEl={anchorElNav}
               anchorOrigin={{
@@ -134,9 +134,11 @@ function Nav({ goTo, changeLanguage, locale, isInGame, changeDaltonicMode }) {
               <FormControl className={isInGame? 'language disable':'language' } fullWidth margin="normal" 
                 sx={{ display:'block', marginTop:'0.2em', zIndex:'9999' }}>
                 <Select labelId="language-label" id="language-select" value={langEnd}
-                    onChange={(e) => {setLangEnd(e.target.value)}}>
+                    onChange={(e) => {setLangEnd(e.target.value)}} className='languageButton' >
                   <MenuItem value="en"><FormattedMessage id="langen" /></MenuItem>
                   <MenuItem value="es"><FormattedMessage id="langes" /></MenuItem>
+                  <MenuItem value="it"><FormattedMessage id="langit" /></MenuItem>
+                  <MenuItem value="fr"><FormattedMessage id="langfr" /></MenuItem>
 
                 </Select>
               </FormControl>
@@ -187,6 +189,8 @@ function Nav({ goTo, changeLanguage, locale, isInGame, changeDaltonicMode }) {
                     onChange={(e) => {setLangEnd(e.target.value)}}>
                   <MenuItem value="en"><FormattedMessage id="langen" /></MenuItem>
                   <MenuItem value="es"><FormattedMessage id="langes" /></MenuItem>
+                  <MenuItem value="it"><FormattedMessage id="langit" /></MenuItem>
+                  <MenuItem value="fr"><FormattedMessage id="langfr" /></MenuItem>
 
                 </Select>
               </FormControl>
@@ -195,7 +199,7 @@ function Nav({ goTo, changeLanguage, locale, isInGame, changeDaltonicMode }) {
           <Box sx={{ flexGrow: 0, flexDirection: 'row', display:'flex', alignItems: 'center', fontWeight: 'bold', zIndex:'9999'}}>
             <Typography component="a" sx={{ marginRight: 2, fontFamily: 'Roboto Slab', color:'#FFF', marginLeft:'1em'}} >{username}</Typography>
             <Tooltip title="Open settings">
-              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0, border: '2px solid #FFF' }}>
+              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0, border: '2px solid #FFF' }} className='perfilButton' >
                 <Avatar alt="Remy Sharp" src={profileImgSrc}/>
               </IconButton>
             </Tooltip>

webapp/src/components/Question.jsx

@@ -270,7 +270,8 @@ const Question = ({ goTo, setGameFinished, settings, restart, locale, daltonicMo
                 </ListItemButton>
                 : ""}
                 { settings.gMode === "infinite" ?
-                    <ListItemButton onClick={ () => handelInfiniteGameFinish( numberCorrect, numberIncorrect, segundosInfinite, goTo, setGameFinished) }
+                    <ListItemButton className='endGameButton'
+                        onClick={ () => handelInfiniteGameFinish( numberCorrect, numberIncorrect, segundosInfinite, goTo, setGameFinished) }
                         sx={{ color: '#f35858', justifyContent: 'center', marginTop: 2 }}>
                         <FormattedMessage id="endGame" />
                     </ListItemButton>

webapp/src/messages/messages_en.json

@@ -18,6 +18,8 @@
     "menu": "Menu",
     "langen": "English",
     "langes": "Spanish",
+    "langit": "Italian",
+    "langfr": "French",
     "daltonic": "Color blind Mode",
     "logout": "Logout",
     "btm": "Back to menu",

webapp/src/messages/messages_es.json

@@ -18,6 +18,8 @@
   "menu": "Menú",
   "langen": "Inglés",
   "langes": "Español",
+  "langit": "Italiano",
+  "langfr": "Francés",
   "daltonic": "Modo daltónico",
   "logout": "Cerrar sesión",
   "btm": "Volver al menú",