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); + }); });