Merge branch 'master' of https://github.com/Arquisoft/wiq_es3a

webapp/src/components/Home.css

@@ -0,0 +1,37 @@
+.home{
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: flex-start;
+    height: 94vh;
+    background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #ee0e5173);
+}
+
+.tituloHome{
+    padding-bottom: 2vh;
+}
+
+.tituloHome_h1{
+    padding-bottom: 2vh;
+    font-weight: 800!important;
+    font-size: 3em!important;
+}
+
+.botonHome{
+    background-color: var(--rosa) !important;
+}
+
+.boxHome{
+    display: flex;
+    flex-direction: column;
+    background-color: #ffffff7a;
+    padding-bottom: 1.5em;
+    border-radius: 1em;
+    padding-right: 50px;
+    padding-left: 50px;
+}
+
+.imagenHome{
+    padding-top: 10vh;
+    padding-bottom: 10vh;
+}

webapp/src/components/Home.js

@@ -3,22 +3,31 @@ import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
+import "./Home.css";
 
 function Home() {
 
   return (
-
-    <Container component="home" maxWidth="xs">
+    <div className="home">
 
+      <img className="imagenHome" src="/saber-ganar-logo.png" alt="Logo" />
 
-      <CssBaseline />
-      <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
-        HOME
-      </Typography>
-      <Button variant="contained" color="primary" fullWidth onClick={() => { window.location.href = '/game'; }}>
-        Go to Game
-      </Button>
-    </Container>
+      <Container className="boxHome" maxWidth="xs">
+        <CssBaseline />
+
+        <Typography className="tituloHome_h1" component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
+          BIENVENIDO
+        </Typography>
+
+        <Typography className="tituloHome" component="h2" variant="h5" align="center" sx={{ marginTop: 2 }}>
+        PULSA EL BOTÓN PARA JUGAR
+        </Typography>
+        <Button className="botonHome" variant="contained" color="primary" fullWidth onClick={() => { window.location.href = '/game'; }}>
+          JUGAR
+        </Button>
+      </Container>
+
+    </div>
   );
 }
 

webapp/src/components/Home.test.js

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import Home from './Home';
+import userEvent from '@testing-library/user-event';
+import {BrowserRouter} from 'react-router-dom';
+
+let assignMock = jest.fn();
+
+delete window.location;
+window.location = { assign: assignMock };
+
+afterEach(() => {
+  assignMock.mockClear();
+});
+
+
+test('iniciar', () => {
+  render(<Home />);
+  const linkElement = screen.getByText(/BIENVENIDO/i);
+  expect(linkElement).toBeInTheDocument();
+  expect(screen.getByText(/PULSA EL BOTÓN PARA JUGAR/i)).toBeInTheDocument();
+});
+
+test('jugar', async () => {
+    render(<Home />, {wrapper: BrowserRouter});
+    const user = userEvent.setup()
+    const jugarButton = screen.getByRole('button', { name: /JUGAR/i });
+    await user.click(jugarButton);
+    //expect(screen.getByText(/Loading questions.../i)).toBeInTheDocument()
+
+});

webapp/src/components/Navbar.css

@@ -26,6 +26,6 @@
   }
 
   .nav-menu a.active {
-    background-color: #04AA6D;
+    background-color: var(--rosa);
     color: white;
   }

webapp/src/components/QuizGame.test.js

@@ -0,0 +1,27 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import QuizGame from './QuizGame';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+
+const mockAxios = new MockAdapter(axios);
+
+beforeEach(() => {
+    mockAxios.reset();
+  });
+
+test('Pregunta correcta', () => {
+    mockAxios.onGet('http://localhost:8000/generate-question').reply(200, {
+    question: "pregunta",
+  correctAnswer: "correcta",
+  allAnswers: ["correcta","no1","no2","no3"]});
+
+  render(<QuizGame />);
+  expect(screen.getByText(/Loading questions.../i)).toBeInTheDocument();
+
+
+
+  const correcta = screen.getByRole('button', { name: /correcta/i });
+  fireEvent.click(correcta);
+
+
+});

webapp/src/components/login/Login.css

@@ -9,16 +9,16 @@
   }
 
   .text{
-    margin-top: 20ev;
+    margin-top: 20px;
     text-align: center;
-    font-size: 20ev;
+    font-size: 20px;
     font-weight: bold;
     font-display: 'Fira Sans', sans-serif;
   }
 
   .underline{
     width: 20%;
-    margin-top: 7ev;
+    margin-top: 7px;
     height: 0.5em;
     border-radius: 9em;
     background: #EE0E51;

webapp/src/components/login/Login.js

@@ -3,7 +3,6 @@ import React, { useState, useEffect  } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
 import './Login.css';
-import Link from '@mui/material/Link';
 import logo from '../logo.png'
 
 const Login = () => {

webapp/src/components/login/Login.test.js

@@ -29,8 +29,8 @@ describe('Login component', () => {
       });
 
     // Verify that the user information is displayed
-    expect(screen.getByText(/Hello testUser!/i)).toBeInTheDocument();
-    expect(screen.getByText(/Your account was created on 1\/1\/2024/i)).toBeInTheDocument();
+    expect(screen.getByText(/Login successful/i)).toBeInTheDocument();
+    //expect(screen.getByText(/Your account was created on 1\/1\/2024/i)).toBeInTheDocument();
   });
 
   it('should handle error when logging in', async () => {

webapp/src/components/register/AddUser.css

@@ -8,16 +8,16 @@
   }
 
 .text{
-  margin-top: 20ev;
+  margin-top: 20px;
   text-align: center;
-  font-size: 20ev;
+  font-size: 20px;
   font-weight: bold;
   font-display: 'Fira Sans', sans-serif;
 }
 
 .underline{
   width: 20%;
-  margin-top: 7ev;
+  margin-top: 7px;
   height: 0.5em;
   border-radius: 9px;
   background: #EE0E51;

webapp/src/index.css

@@ -11,3 +11,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+:root {
+  --rosa: #EE0E51;
+}