diff --git a/webapp/src/components/Game.js b/webapp/src/components/Game.js
index 676fa06b..f6b3aa11 100644
--- a/webapp/src/components/Game.js
+++ b/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() {
-
+
>
);
diff --git a/webapp/src/components/Game.test.js b/webapp/src/components/Game.test.js
new file mode 100644
index 00000000..2d8aae05
--- /dev/null
+++ b/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(
+
+
+
+ );
+
+ // Verificar que el componente QuestionArea se renderice dentro de Game
+ waitFor(() => {
+ const questionAreaElement = screen.getByTestId('question-area');
+ expect(questionAreaElement).toBeInTheDocument();
+ });
+ });
+});
\ No newline at end of file
diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login.js
index 3e29764a..eaf0fafa 100644
--- a/webapp/src/components/Login.js
+++ b/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;
diff --git a/webapp/src/components/Login.test.js b/webapp/src/components/Login.test.js
index af102dcf..51f75ffe 100644
--- a/webapp/src/components/Login.test.js
+++ b/webapp/src/components/Login.test.js
@@ -11,8 +11,12 @@ describe('Login component', () => {
mockAxios.reset();
});
+
it('should log in successfully', async () => {
- render();
+ // es required
+ const startGameMock = jest.fn();
+
+ render();
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();
+ // es required
+ const startGameMock = jest.fn();
+
+ render();
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();
+
+ 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);
+ });
});