Merge branch 'webapp_interface' of https://github.com/Arquisoft/wiq_es6c

into webapp_interface
Arquisoft · Apr 26, 2024 · 69e4881 · 69e4881
2 parents 66241d4 + f6bd222
commit 69e4881
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 57 deletions.
diff --git a/webapp/src/components/FirstGame.js b/webapp/src/components/FirstGame.js
@@ -7,7 +7,6 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import Button from './Button';
 import { Footer } from './footer/Footer';
 import { Nav } from './nav/Nav';
-import {shuffleArray} from './Util'
 
 var currentQuestionIndex = 0;
 
@@ -52,23 +51,6 @@ const Quiz = () => {
   const esperar = (ms) => {
     return new Promise(resolve => setTimeout(resolve, ms));
   };
-
-  const getQuestions = async () => {
-    try {
-      const response = await axios.get(`${apiEndpoint}/gameUnlimitedQuestions`, { id });
-      for (var i = 0; i < response.data.length; i++) {
-        var possibleAnswers = [response.data[i].respuesta_correcta, response.data[i].respuestas_incorrectas[0], response.data[i].respuestas_incorrectas[1], response.data[i].respuestas_incorrectas[2]]
-        possibleAnswers = shuffleArray(possibleAnswers)
-        allQuestions.push({
-          question: response.data[i].pregunta,
-          options: possibleAnswers,
-          correctAnswer: response.data[i].respuesta_correcta
-        })
-      }      
-    } catch (error) {
-      console.error(error);
-    }
-  };
 
   function changeButtons(param) {
     console.log("Entramos aqui")
@@ -217,15 +199,10 @@ const Quiz = () => {
             width: '100%',
             padding: 3}}>
 
-            {/*<LinearProgress color="secondary" variant={loading? "indeterminate" : "determinate"} value={remTime} />*/}
             <LinearProgress id='progress'color="secondary" variant={"determinate"} value={remTime} />
 
         </Box>
 
-
-        {/* {isCorrect !== null && (
-          <p>{isCorrect ? '¡Respuesta correcta!' : 'Respuesta incorrecta.'}</p>
-        )} */}
       </Container>
       <Footer />
     </>

diff --git a/webapp/src/components/Menu.js b/webapp/src/components/Menu.js
@@ -6,10 +6,8 @@ import { useNavigate } from 'react-router-dom'; // Importa useHistory
 import Button from './Button'
 import { Footer } from './footer/Footer';
 import { Nav } from './nav/Nav';
-import {shuffleArray} from './Util'
 import axios from 'axios';
 
-
 //var isApiCalledRef = false;//ASK - is this necessary?
 const apiEndpoint = process.env.REACT_APP_API_ENDPOINT|| 'http://localhost:8000';
 
@@ -29,7 +27,6 @@ const Menu = () => {
       try {
         topics = await axios.get(`${apiEndpoint}/topics`)
         topics = topics.data
-        console.log("Topics", topics)
       } catch(error) {
         console.error(error)
       }
@@ -41,10 +38,6 @@ const Menu = () => {
       navigation("/gameConfiguration", {state: {topics}})
     }
 
-
-
-
-
     return (
       <>
         <Nav />

diff --git a/webapp/src/components/Menu.test.js b/webapp/src/components/Menu.test.js
@@ -5,6 +5,7 @@ import {MemoryRouter} from 'react-router-dom';
 import Menu from './Menu';
 
 const mockAxios = new MockAdapter(axios);
+jest.mock('axios');
 
 describe("Menu component", () => {
 

diff --git a/webapp/src/components/game/GameConfiguration.js b/webapp/src/components/game/GameConfiguration.js
@@ -12,20 +12,16 @@ const apiEndpoint = process.env.REACT_APP_API_ENDPOINT|| 'http://localhost:8000'
 
 let gameId;
 let questions = []
-const previousBackgroundColor = '#1a1a1a'
 
 const GameConfiguration = () => {
 
   const navigation = useNavigate();
-    let tematicas
-    let state = useLocation().state
+    let tematicas = [];
+    let state = useLocation().state;
     if( state !== null)
       tematicas = state.topics;
-    else
-      tematicas = []
     console.log(tematicas)
 
-
     // Almacen de temáticas 
     const [tematicasSeleccionadas, setTematicasSeleccionadas] = useState([]);
     // Almacen para el número de preguntas
@@ -35,7 +31,6 @@ const GameConfiguration = () => {
 
     const [numRes, setNumRes] = useState(2);
 
-
     const handleTematicaChange = (event) => {
         const tematicaSeleccionada = event.target.value;
 
@@ -70,24 +65,16 @@ const GameConfiguration = () => {
         }
     }
 
-    // const handleChange = (event) => {
-    //     setNumeroErrores(event.target.value);
-    // };
-
   const initiateGame = async () => {
-    console.log(tematicasSeleccionadas)
-    console.log(numPreguntas)
     await generateGameId();  
-    await getQuestions()
-    console.log(questions)  
+    await getQuestions();
     //isApiCalledRef = true//ASK - is this necessary?
     navigation("/firstGame", {state: {questions, gameId}})
   }
 
   const generateGameId = async () => {
     try {
       const response = await axios.get(`${apiEndpoint}/generateGame`)
-      console.log(response.data)
       gameId = response.data
     } catch(error) {
       console.error(error);
@@ -107,9 +94,7 @@ const GameConfiguration = () => {
   const getQuestions = async () => {
     try {
       const topicsFormated = formatearTopics()
-      console.log(topicsFormated)
       const response = await axios.get(`${apiEndpoint}/questions?n_preguntas=${numPreguntas}&n_respuestas=${numRes}${topicsFormated}`);
-      console.log(response.data.length)
       for (var i = 0; i < response.data.length; i++) {
         var possibleAnswers = [response.data[i].respuesta_correcta]
         for (var j = 0; j < response.data[i].respuestas_incorrectas.length; j++) {
@@ -190,9 +175,6 @@ const GameConfiguration = () => {
 
         </div>
 
-        {/* <div className="comenzarJuego">
-          <button onClick={initiateGame}>Comenzar Juego</button>
-        </div> */}
         <Button onClick={initiateGame} text="Comenzar Juego"/>
 
       </Container>

diff --git a/webapp/src/components/game/GameConfiguration.test.js b/webapp/src/components/game/GameConfiguration.test.js
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { ContextFun } from '../Context';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
@@ -30,10 +30,17 @@ describe("Game Configuration", () => {
         expect(linkElement).toBeInTheDocument();
         linkElement = screen.getByText(/Comenzar Juego/i);
         expect(linkElement).toBeInTheDocument();
+
+        let tematics = document.getElementsByClassName('configureTopic');
+        expect(tematics).toHaveLength(1);
+
+        let numPreguntas = document.getElementsByClassName('configureNumberOfQuestions');
+        expect(numPreguntas).toHaveLength(1);
     });
 
-    test("check number of elements on topics section and configure number of questions",async () => {
+    test("modify number of questions for game",async () => {
 
+        const { getByLabelText } = 
         render(
             <ContextFun>
                 <Router>
@@ -42,11 +49,33 @@ describe("Game Configuration", () => {
             </ContextFun>
         );
 
-        let tematics = document.getElementsByClassName('configureTopic');
-        expect(tematics).toHaveLength(1);
+        const input = getByLabelText('Número de preguntas:');
+        fireEvent.change(input, { target: { value: '5' } });
+        expect(input.value).toBe('5');
+        // try to put number of questions = 0
+        fireEvent.change(input, { target: { value: '0' } });
+        expect(input.value).toBe('5');
+        expect(screen.getAllByText(/El número de preguntas debe ser mayor que 0/i)[0]).toBeInTheDocument();
+    });
 
-        let numPreguntas = document.getElementsByClassName('configureNumberOfQuestions');
-        expect(numPreguntas).toHaveLength(1);
+    test("modify number of answers for game",async () => {
+
+        const { getByLabelText } = 
+        render(
+            <ContextFun>
+                <Router>
+                    <GameConfiguration />
+                </Router>
+            </ContextFun>
+        );
+
+        const input = getByLabelText('Número de respuestas:');
+        fireEvent.change(input, { target: { value: '5' } });
+        expect(input.value).toBe('5');
+        //try to put number of answers < 2
+        fireEvent.change(input, { target: { value: '1' } });
+        expect(input.value).toBe('5');
+        expect(screen.getAllByText(/El número de respuestas debe ser mayor que 2/i)[0]).toBeInTheDocument();
     });
 
 });