Testing changes

README.md

@@ -3,27 +3,33 @@ Esta prueba evalúa conocimientos de programación en base a una situación que
 ## Software necesarios
 * [GIT](https://git-scm.com/downloads)
 * Cualquier navegador WEB
+
 ## Instrucciones antes de empezar
 1.  Crear una cuenta en [Github](https://git-scm.com/book/es/v2/GitHub-Creaci%C3%B3n-y-configuraci%C3%B3n-de-la-cuenta).
 2.  Crear un [fork](https://docs.github.com/es/get-started/quickstart/fork-a-repo) a este repositorio.
 3.  Clonar el repositorio forkeado en tu computadora.
 4.  Úbicate en el repositorio raíz del proyecto (Ubicación del proyecto forkeado en tu computadora).
 5.  Abrir desde del navegador el archivo index.html de este proyecto.
+
 ## Casos de usos
 Un banco financiero implementó el juego, Adivina tu número, la cual consiste en adivinar un número entre 1 al 100 durante 10 intentos. Así mismo para facilitar dicho juego se debe cumplir los siguientes requisitos:
 * El número a adivinar debe pertenecer al conjunto de los enteros (e.g. 1, 2, 3...)
 * El número que ingresará el jugador debe pertenecer al conjunto de los enteros (e.g. 1, 2, 3...), en caso que no ingrese un número entero, debe mostrarse una alerta al usuario y no se debe incrementar un intento de prueba.
 * Sí el número que ingresó el jugador es mayor al número a adivinar, se debe mostrar el siguiente mensaje en color negro: "Incorrecto! El número es mayor!", en caso que sea menor, se debe mostrar: "Incorrecto! El número es menor!".
 * Si después de 10 intentos, el usuario no adivina el número, se debe mostrarse el mensaje de color rojo: "!!!Pérdistes!!!"
 * Si el usuario adivina el número antes de los 10 intentos, se debe mostrar el mensaje de color verde: "Felicitaciones! adivinaste el número!".
+
 ## Situación del proyecto.
 El desarrollador implementó toda la interfaz gráfica, y así mismo la lógica del juego en el archivo index.html (Con HTML, Javascript y CSS), sin embargo el equipo de desarrollo cometió el error de no testear dicho proyecto, y lo colocaron en los servidores de producción. Para su sorpresa, al momento de que el cliente lo vió... ¡NO FUNCIONABA NADA!
 Dado a esta experiencia, el banco financiero contrató a un tester para realizar las pruebas respectivas con la finalidad de que el proyecto funcione correctamente de acuerdo a los requerimientos dados.
+
 ## Plan de ataque
 Como tester debes solucionar este problema en tu repositorio de github, así mismo debe presentarle al equipo de desarrollo todos los errores que fuiste encontrando y corregiendo (i.e. Una breve descripción del error y su solución respectiva). Dentro del archivo test-strategy.md, igualmente el lider del equipo recomendó a cada tester, ver la consola del navegador de web para identificar más rápido los errores del proyecto.
+
 ## Entregables
 Como entregables debe presentar lo siguiente:
 * El archivo index.html corregido de acuerdo a las observaciones de testeo, cabe mencionar que este archivo debe ser funcional (Al momento de abrir el proyecto, debe funcionar de acuerdo a la lógica de negocio planteado en este ejercicio).
 * El plan de ataque test-strategy.md
+
 ## Recursos:
 * Event Target: https://developer.mozilla.org/es/docs/Web/API/EventTarget

index.html

@@ -41,12 +41,19 @@ <h1>Juego Adivina tu número</h1>
 </body>
 
 <script>
-  let randomNumber = Math.random() * 10;
+  //Error al generar número aleatorio porque lo multiplicaba por 10 y sin redondearlo, 
+  //se implementa la siguiente lógica para que esté entre 1 y 100
+  let randomNumber = Math.floor(Math.random() * 100) + 1;
+
+  //La variable ATTEMPS tenía 5, le cambiamos a 10 intentos que es lo que pide el requerimiento
+  const ATTEMPS = 10;
 
-  const ATTEMPS = 5;
   const guesses = document.querySelector('.guesses');
   const lastResult = document.querySelector('.lastResult');
-  const lowOrHi = document.querySelector('lowOrHi');
+
+  //Error en el selector, en la siguiente linea no apunta a la clase correcta que es ".lowOrHi"
+  const lowOrHi = document.querySelector('.lowOrHi');
+
   const guessSubmit = document.querySelector('.guessSubmit');
   const guessField = document.querySelector('.guessField');
 
@@ -60,19 +67,22 @@ <h1>Juego Adivina tu número</h1>
       guesses.textContent = 'Número aleatorio anterior: ';
     }
     guesses.textContent += userGuess + ' ';
-
-    if(userGuess === randomNumber) {
-      lastResult.textContent = '!!!Pérdistes!!!';
-      lastResult.style.backgroundColor = 'black';
+    //En la siguiente función cambiamos el background a green, eliminamos un = para la equivalencia
+    if(userGuess == randomNumber) {
+      lastResult.textContent = '¡Felicitaciones! adivinaste el número!';
+      lastResult.style.backgroundColor = 'green';
       lowOrHi.textContent = '';
       setGameOver();
-    } else if(guessCount === ATTEMPS) {
-      lastResult.textContent = 'Felicitaciones! adivinaste el número!';
+    //En el siguiente bloque de código, como tester también vemos errores ortográficos y o texto que no se comprende, cambiamos el "!!!Pérdistes!!!" y sugerimos:
+    //También cambiamos la condición en lugar de "===" colocamos ">" esto nos indica que el último intento es el número 10, pasado de 10 perdimos el juego.
+    } else if(guessCount > ATTEMPS) {
+      lastResult.textContent = '¡Perdiste!, el número era: ' + randomNumber;
       lastResult.style.backgroundColor = 'red';
       setGameOver();
+    //Cambiamos el color a naranja, al ser incorrecto.
     } else {
       lastResult.textContent = 'Incorrecto! ';
-      lastResult.style.backgroundColor = 'green';
+      lastResult.style.backgroundColor = 'orange';
       if(userGuess < randomNumber) {
         lowOrHi.textContent = 'El número es mayor!';
       } else if(userGuess > randomNumber) {
@@ -84,15 +94,17 @@ <h1>Juego Adivina tu número</h1>
     guessField.value = '';
     guessField.focus();
   }
-  guessSubmit.addeventListener('click', checkGuess);
+  //En la siguiente linea está mal escrito, debería de ser addEventListener
+  guessSubmit.addEventListener('click', checkGuess);
 
   function setGameOver() {
 	  guessField.disabled = true;
 	  guessSubmit.disabled = true;
 	  resetButton = document.createElement('button');
 	  resetButton.textContent = 'Comienza un nuevo juego';
 	  document.body.appendChild(resetButton);
-	  resetButton.addeventListener('click', resetGame);
+    //En la siguiente linea está mal escrito, debería de ser addEventListener
+	  resetButton.addEventListener('click', resetGame);
   }
 
   function resetGame() {
@@ -111,7 +123,9 @@ <h1>Juego Adivina tu número</h1>
 
 	  lastResult.style.backgroundColor = 'white';
 
-	  randomNumber = Math.floor(Math.random()) + 1;
+	  //randomNumber = Math.floor(Math.random()) + 1;
+    //Nuevamente cambiaoms la lógica del número aleatorio y la corregimos a:
+    randomNumber = Math.floor(Math.random() * 100) + 1;
   }
 </script>
 </html>

test-strategy.md

@@ -0,0 +1,63 @@
+# Plan de ataque para testeo del Juego "Adivina tu Número"
+
+## Objetivo
+En el siguiente documento se documentan los errores encontrados, con su respectiva solución y o sugerencias de cambios.
+
+## Bugs y Soluciones
+
+1. **Error en la generación del número aleatorio**
+   - **Descripción**: El número aleatorio se generaba incorrectamente, resultando en un rango de 0 a 10.
+   - **Solución**: Se modificó la línea de código para generar un número entre 1 y 100:
+     ```javascript
+     let randomNumber = Math.floor(Math.random() * 100) + 1;
+     ```
+
+2. **Error en el selector de clase**
+   - **Descripción**: Se utilizó un selector incorrecto para la clase `lowOrHi`, este no permitía mostrar mensajes.
+   - **Solución**: Se corrigió el selector a:
+     ```javascript
+     const lowOrHi = document.querySelector('.lowOrHi');
+     ```
+
+3. **Error en la función de escucha de eventos**
+   - **Descripción**: No se escribió correctamente `addeventListener`, esto causa que la función no se ejecute al hacer click en el botón.
+   - **Solución**: Se corrigió a: `addEventListener`:
+     ```javascript
+     guessSubmit.addEventListener('click', checkGuess);
+     ```
+
+4. **Lógica incorrecta al ganar el juego**
+   - **Descripción**: El mensaje de victoria se mostraba cuando se agotaban los intentos en lugar de cuando el usuario adivinaba el número correcto.
+   - **Solución**: Se reformuló la condición en el `if`:
+     ```javascript
+     if(userGuess === randomNumber) {
+         lastResult.textContent = '¡Felicitaciones! adivinaste el número!';
+     }
+     ```
+
+5. **Uso incorrecto de `Math.random()` para reiniciar el juego**
+   - **Descripción**: Al reiniciar, el número aleatorio no se generaba correctamente, manteniendo el mismo número.
+   - **Solución**: Se corrigió la línea de código en la función, al cual se le dió lógica `resetGame`:
+     ```javascript
+     randomNumber = Math.floor(Math.random() * 100) + 1;
+     ```
+
+6. **El mensaje de "PERDER EL JUEGO"**
+   - **Descripción**: El mensaje tenía errores ortográficos, también era confuso se cambió el: "!!!Pérdistes!!!" por un texto más comprensible.
+   - **Solución**: Se modificó el mensaje obtenido al perder el juego:
+     ```javascript
+     lastResult.textContent = '¡Perdiste! El número era ' + randomNumber;
+     ```
+## Sugerencias:
+1. Según mi experiencia de trabajo en Banco Industrial y acostumbrado a las metodologías, como Project Manager y QA, solo hacía sugerencias de cambios con las funciones a implementar si era necesario, es decir en el desarrollo presentado se observa que:
+
+(Siguiendo las instrucciones no agregaré desarrollo nuevo, en el ámbito real por temas de roles no era una buena práctica)
+
+a. Se evalúa que ingresan números negativos y positivos sin un límite de caracteres.
+b. Se evalúa que se ingresan caracteres especiales, estos mismos si se reconocen como string pero en un futuro podría ser una vulnerabilidad para el desarrollo.
+c. Se intentó ingresar una cadena <h1>123</h1> y esta misma la reconoce como string, en el desarrollo se sugiere que el campo se reconozca unicamente como numérico y que no acepte caracteres diferentes.
+d. Si se realiza una operación matemática por ejemplo usar una practica de manejo de errores.
+
+
+## Conclusión
+Se realizaron pruebas exhaustivas desde el punto de vista desarrollador y también desde el punto de vista usuario, puesto que hay muchos usuarios que son atentos al detalle y el simple hecho de no empezar con mayúsculas, una palabra mal escrita o un botón que no funciona, hace desagradable su experiencia con la interacción del software.