Merge pull request #83 from Arquisoft/sonia

Añadidos test del Game.js e intento de reducir el Coverage de Login.js

webapp/src/components/Game.js

@@ -1,4 +1,3 @@
-import React, { useState } from 'react';
 import { Box} from "@chakra-ui/react";
 import { QuestionArea } from './QuestionArea';
 
@@ -8,7 +7,7 @@ function Game() {
       <Box minH="100vh" minW="100vw" 
       bgGradient="linear(to-t, #08313A, #107869)"
       display="flex" justifyContent="center" alignItems="center">
-        <QuestionArea/>
+        <QuestionArea data-testid="question-area"/>
       </Box>
     </>
   );

webapp/src/components/Game.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import Game from './Game';
+import { ChakraProvider } from '@chakra-ui/react';
+
+
+describe('Game component', () => {
+  it('should render correctly', () => {
+    render(
+        <ChakraProvider>
+          <Game />
+        </ChakraProvider>
+      );
+
+    // Verificar que el componente QuestionArea se renderice dentro de Game
+    waitFor(() => {
+        const questionAreaElement = screen.getByTestId('question-area');
+        expect(questionAreaElement).toBeInTheDocument();
+    });
+  });
+});

webapp/src/components/Login.js

@@ -3,6 +3,8 @@ import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
 
+import PropTypes from 'prop-types'; // Importa PropTypes
+
 const Login = ({ startGame }) => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
@@ -11,10 +13,6 @@ const Login = ({ startGame }) => {
   const [createdAt, setCreatedAt] = useState('');
   const [openSnackbar, setOpenSnackbar] = useState(false);
 
-  //para mostrar el juego o no
-  const [showQuestionArea, setShowQuestionArea] = useState(false);
-
-
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
   const loginUser = async () => {
@@ -92,4 +90,9 @@ const Login = ({ startGame }) => {
     );
 };
 
+// Agrega la validación de props
+Login.propTypes = {
+  startGame: PropTypes.func.isRequired,
+};
+
 export default Login;

webapp/src/components/Login.test.js

@@ -11,8 +11,12 @@ describe('Login component', () => {
     mockAxios.reset();
   });
 
+
   it('should log in successfully', async () => {
-    render(<Login />);
+    // es required
+    const startGameMock = jest.fn();
+
+    render(<Login startGame={startGameMock} />);
 
     const usernameInput = screen.getByLabelText(/Username/i);
     const passwordInput = screen.getByLabelText(/Password/i);
@@ -33,8 +37,12 @@ describe('Login component', () => {
     expect(screen.getByText(/Your account was created on 1\/1\/2024/i)).toBeInTheDocument();
   });
 
+
   it('should handle error when logging in', async () => {
-    render(<Login />);
+    // es required
+    const startGameMock = jest.fn();
+
+    render(<Login startGame={startGameMock} />);
 
     const usernameInput = screen.getByLabelText(/Username/i);
     const passwordInput = screen.getByLabelText(/Password/i);
@@ -59,4 +67,37 @@ describe('Login component', () => {
     expect(screen.queryByText(/Hello testUser!/i)).toBeNull();
     expect(screen.queryByText(/Your account was created on/i)).toBeNull();
   });
+
+
+  //prueba del boton de empezar el juego
+  it('should start the game when button is clicked', async () => {
+  // Mock startGame function
+  const startGameMock = jest.fn();
+
+  render(<Login startGame={startGameMock} />);
+
+  const usernameInput = screen.getByLabelText(/Username/i);
+  const passwordInput = screen.getByLabelText(/Password/i);
+  const loginButton = screen.getByRole('button', { name: /Login/i });
+
+  // Mock the axios.post request to simulate a successful response
+  mockAxios.onPost('http://localhost:8000/login').reply(200, { createdAt: '2024-01-01T12:34:56Z' });
+
+  // Simulate user input
+  await act(async () => {
+      fireEvent.change(usernameInput, { target: { value: 'testUser' } });
+      fireEvent.change(passwordInput, { target: { value: 'testPassword' } });
+      fireEvent.click(loginButton);
+    });
+
+  // Wait for any asynchronous actions to complete
+  await waitFor(() => {});
+
+  // Simulate clicking the button to start the game
+  const startGameButton = screen.getByRole('button', { name: /Empieza el juego/i });
+  fireEvent.click(startGameButton);
+
+  // Check if startGame function was called
+  expect(startGameMock).toHaveBeenCalledTimes(1);
+  });
 });