From 39d360c790351b6aff83f5a6a964bee9490d2daf Mon Sep 17 00:00:00 2001
From: Liliana <uo288574@uniovi.es>
Date: Sat, 27 Apr 2024 11:48:38 +0200
Subject: [PATCH] Test for the calculator game. Review secureRandomNumber
 function of Utils.js

---
 webapp/src/components/Util.js                 |  2 +-
 webapp/src/components/game/Calculator.js      | 11 ++++-
 webapp/src/components/game/Calculator.test.js | 47 +++++++++++++++++++
 3 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 webapp/src/components/game/Calculator.test.js

diff --git a/webapp/src/components/Util.js b/webapp/src/components/Util.js
index e157470f..723e1858 100644
--- a/webapp/src/components/Util.js
+++ b/webapp/src/components/Util.js
@@ -24,4 +24,4 @@ function secureRandomNumber(max) {
     return randomBytes[0] % max;
 }
 
-export {shuffleArray}
\ No newline at end of file
+export {shuffleArray, secureRandomNumber}
\ No newline at end of file
diff --git a/webapp/src/components/game/Calculator.js b/webapp/src/components/game/Calculator.js
index ae9885bc..76b9f301 100644
--- a/webapp/src/components/game/Calculator.js
+++ b/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>
diff --git a/webapp/src/components/game/Calculator.test.js b/webapp/src/components/game/Calculator.test.js
new file mode 100644
index 00000000..9a51d60a
--- /dev/null
+++ b/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();
+    });
+
+});
+