Test for the calculator game. Review secureRandomNumber function of U…

…tils.js

webapp/src/components/Util.js

@@ -24,4 +24,4 @@ function secureRandomNumber(max) {
     return randomBytes[0] % max;
 }
 
-export {shuffleArray}
+export {shuffleArray, secureRandomNumber}

webapp/src/components/game/Calculator.js

@@ -1,5 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { shuffleArray, secureRandomNumber } from '../Util';
+import { Container, Typography, Box, LinearProgress} from '@mui/material';
+import { Footer } from '../footer/Footer';
+import { Nav } from '../nav/Nav';
 
 const Calculator = () => {
 
@@ -41,6 +44,11 @@ const Calculator = () => {
         }
 
         shuffleArray(options);
+        return {
+            q: `${num1} ${operator} ${num2}`,
+            options: options,
+            correctAnswer: correctAnswer
+        };
     }
 
 
@@ -66,7 +74,8 @@ const Calculator = () => {
                 <div class="questionCalculator">
 
                 <Typography class="questionText" component="h1" variant="h5" sx={{ textAlign: 'center' }}>
-                    {question.question}
+                    {generateQuestion()}
+                    {question.q}
                 </Typography>
 
                 </div>

webapp/src/components/game/Calculator.test.js

@@ -0,0 +1,47 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ContextFun } from '../Context';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import { BrowserRouter as Router } from 'react-router-dom';
+import Calculator from './Calculator';
+
+const mockAxios = new MockAdapter(axios);
+
+describe("Calculator game", () => {
+
+    beforeEach(() => {
+        mockAxios.reset();
+    });
+
+    test("renders Calculator",async () => {
+        render(
+            <ContextFun>
+                <Router>
+                    <Calculator/>
+                </Router>
+            </ContextFun>
+        );
+
+        // Comprobamos que el número de elementos sea 3
+        let operation = document.getElementsByClassName('questionStructure')[0][0];
+        const separatedText = operation.split(' ');
+        expect(separatedText.length).toBeGreaterThan(3);
+        // Comprobamos que el número de respuestas posibles sea 4
+        let answers = document.getElementsByClassName('questionStructure')[1];
+        expect(answers).toHaveLength(4);
+        // Tratamos de hacer la operación
+        let number1 = separatedText[0];
+        let number2 = separatedText[2];
+        let op = separatedText[1];
+        let result;
+        switch (op) {
+            case '+': result = number1 + number2; break;
+            case '-': result = number1 - number2; break;
+            case 'x': result = number1 * number2; break;
+            case '÷': result = Math.round(number1 / number2); break;
+        }
+        expect(screen.getByText(result)).toBeInTheDocument();
+    });
+
+});
+