Merge pull request #41 from Etelbina/main

Readme and welcome tests

README.md

@@ -3,51 +3,44 @@
     <img src="https://github.com/Etelbina/dataverse/blob/main/src/resources/Icons/Logo.png?raw=true" width="50" height="50"> 
     <h1 style="text-align: center; margin-left: 10px;">My Beauty Plant</h1>
   </div>
-    <!-- <p align="left" style="margin-top:50px;">
-   <img src="https://img.shields.io/badge/STATUS-EN%20DESAROLLO-green">
-   </p> -->
 </div>
 
 ## Índice
-
 * [1. Descripción del Proyecto](#1-descripción-del-proyecto)
 * [2. Características Destacadas 📌](#2-características-destacadas-📌)
 * [3. Demostración](#3-demostración)
 * [4. Tecnologías y Herramientas Utilizadas](#4-tecnologías-y-herramientas-utilizadas)
-* [5. Enfoque de Desarrollo](#5-enfoque-de-desarrollo)
-* [6. Prototipos](#6-prototipos)
-* [7. Tests](#7-tests)
+* [5. Tests](#5-tests)
+* [6. Enfoque de Desarrollo](#6-enfoque-de-desarrollo)
+* [7. Prototipos](#7-prototipos)
 * [8. Desarrolladoras](#8-desarrolladoras)
 * [9. Conclusión](#9-conclusión)
-
 ***
 
 ## 1. Descripción del Proyecto
    <p align="left" style="margin-top:50px;">
    <img src="https://img.shields.io/badge/STATUS-EN%20DESAROLLO-green">
    </p> 
 
-<p style="text-align:justify">Nuestra aplicación web aborda la inquietud común sobre el cuidado de las plantas, ofreciendo respuesta a preguntas frecuentes, como frecuencia de riego, ubicación ideal, técnicas de poda, etc. Lo que distingue* a nuestra aplicación es su enfoque en simplificar el cuidado, proporcionando a los usuarios una guía intuitiva y estéticamente agradable.</p>
+<p style="text-align:justify">Esta es la segunda versión de nuestro proyecto que intenta ayudar a las usuarias a elegir las plantas ideales para su estilo de vida y las condiciones climáticas y de espacio a su disposición; así como el correcto mantenimiento de éstas. En esta segunda iteración ofrecemos como una posibilidad más, la ineracción directa y personalizada con las plantas a traves de un chatbot individual con cada planta o un chat grupal con varias de ellas.</p>
 
-<p style="text-align:justify">Debido a la creciente tendencia de tener plantas en casa sin comprender completamente sus necesidades, iniciamos este proyecto como parte del bootcamp de Laboratoria. Para el futuro, planeamos expandir la aplicación incorporando datos más detallados y permitiendo a nuestros usuarios encontrar la planta perfecta según su estilo de vida y preferencias personales, a fin de brindarles una guia completa para el cuidado de sus plantas.</p>
+<p style="text-align:justify">Para el futuro, planeamos integrar el total de las funcionalidades de ambos proyectos y agregar detalles de usabilidad que hemos identificado como indispensables para nuestras usuarias después de recibir su feedback.</p>
 
 ## 2. Características Destacadas 📌
 
-- Exploración Intuitiva: Navega sin problemas entre categorías para encontrar la planta perfecta, incluso si no tienes una variedad específica en mente. Encuentra tu planta ideal según su propósito o características deseadas.
+- Navegación ágil: Al ser una SPA se ha logrado que la navegación entre las vistas sea aún más eficiente.
 
-- Búsqueda y Ordenación: Encuentra rápidamente la planta que buscas utilizando la función de búsqueda por nombre. Además, organiza el contenido según tus preferencias, facilitando la ubicación de la información que necesitas.
+- Búsqueda, ordenado y filtrado: Encuentra rápidamente la planta que buscas utilizando la función de búsqueda por nombre. Además, organiza el contenido según su tus preferencias de categoría y orden.
 
-- Visualización Rápida de Cuidado: la función de visualización te permitira identificar fácilmente la dificultad de cuidado de una planta, así como sus necesidades de agua y exposición solar en una escala simple.
-
-- Estadísticas por Categoría: Obtén una visión general de los requerimientos comunes dentro de una categoría para tomar decisiones más informadas.
+- Visualización de información: La interfaz ayuda a identificar fácilmente la dificultad de cuidado, la necesid de agua y exposición solar de una planta. Así como una visión general de los requerimientos comunes dentro de una categoría para tomar decisiones más informadas.
 
 - Chat con plantas individuales: Puedes conversar con las plantas para preguntarle detalles específicas sobre sus características y detalles de su cuidado.
 
 - Chat grupal con plantas: Puedes conversar con varias plantas a la vez para preguntarles consejos para tener un jardín hermoso.
 
 ## 3. Demostración 
 
-![gif](https://github.com/Joseline0609/dataverse/assets/151554917/13ec97b8-7a1b-4ed3-ba5b-911b7d1749a1)
+![gif](https://dev-013-dataverse-chat-vk53.vercel.app)
 
 ## 4. Tecnologías y Herramientas Utilizadas 
 
@@ -71,62 +64,57 @@ A traves de la solicitud HTTP se le indica al sistema que personifique la planta
 ### Proceso de Generación de Datos con IA
 La información y las imágenes fueron generadas mediante inteligencia artificial utilizando prompts, y posteriormente, las imágenes fueron mejoradas y detalladas utilizando recursos como Canva. Este enfoque combinado de tecnologías de IA y herramientas de diseño permitió crear contenido informativo y visualmente atractivo.
 
-### Prototipos
-### Figma
+### Diseño y prototipado
+* Figma
 Se utilizó Figma para la creación de prototipos (tanto de baja, media y alta fidelidad), permitiendo una planificación detallada de la interfaz de usuario y una colaboración eficiente entre los miembros del equipo.
 
-<a href="https://www.figma.com/file/dSltZ7FoI402Us3GVLXwbD/Dataverse?type=design&node-id=58-3&mode=design&t=sQAXBv0lTt8r09VI-0">Prototipos de Baja Fidelidad</a>
+### Prototipos de Baja Fidelidad 
+![Alt text](src/resources/Readme-Images/baja-fidelidad.png)
+
+### Prototipos de Media Fidelidad 
+![Alt text](src/resources/Readme-Images/media-fidelidad.png)
+
+### Prototipos de Alta Fidelidad 
+![alt text](src/resources/Readme-Images/alta-fidelidad.png)
 
-<a href="https://www.figma.com/file/dSltZ7FoI402Us3GVLXwbD/Dataverse?type=design&node-id=137-500&mode=design&t=sQAXBv0lTt8r09VI-0">Prototipos de Media Fidelidad</a>
+<a href="https://www.figma.com/file/VK0flqbA0LbFZMm1BCtrGM/dv-Chat?type=design&node-id=127-1341&mode=design&t=5IAVsp1F4KQi1UqJ-0">Preview</a>
 
-<a href="https://www.figma.com/file/dSltZ7FoI402Us3GVLXwbD/Dataverse?type=design&node-id=202-807&mode=design&t=sQAXBv0lTt8r09VI-0">Prototipos de Alta Fidelidad</a>
+<a href="https://www.figma.com/proto/VK0flqbA0LbFZMm1BCtrGM/dv-Chat?type=design&node-id=127-1387&t=Xwda7uqvU0a2lVxF-1&scaling=scale-down&page-id=127%3A1341&starting-point-node-id=127%3A1387&show-proto-sidebar=1&mode=design">Archivo</a>
 
-### Canva
-Canva se empleó para mejorar y detallar las imágenes generadas por IA, proporcionando herramientas visuales adicionales para perfeccionar el contenido, asi como para crear prototipos de baja fidelidad.
-![canva](src/resources/Readme-Images/canva.png)
+* Canva
+Canva se empleó para mejorar y detallar los diseños, las imágenes de fondo y los íconos que se utilizaron.
 
 ### Organización
 La organización del proyecto se gestionó utilizando Trello que facilitó la planificación, el seguimiento y la comunicación eficaz entre los miembros del equipo.
 
-### Trello 
+* Trello 
 ![alt text](src/resources/Readme-Images/trello.png)
 
 ### Testeos de Usabilidad
 Se llevaron a cabo testeos de usabilidad para evaluar la eficacia y la experiencia del usuario. Estos procesos de prueba garantizaron que la aplicación fuera intuitiva y cumpliera con los objetivos previstos, proporcionando retroalimentación valiosa para mejoras continuas. Dentro de esta mejoras destacamos:
 
-### Historias de Usuarias
+### Historias de Usuarias e Hitos
 
-El proyecto se consideró finalizado una vez que se completaron exitosamente las seis historias de usuario establecidas.
+Se estipularon 6 grandes hitos y dentro de estos se estipularon las historias de usuarias acordes a estos.
 
 ## 5. Enfoque de Desarrollo
 "My Beauty Plant" se ha gestado bajo un enfoque de desarrollo que abarca más allá de la elección de tecnologías. Aspectos importantes de nuestro enfoque incluyen:
 
-- Centrado en el Usuario: Desde la concepción hasta la implementación, hemos priorizado las necesidades y la experiencia del usuario para garantizar una aplicación intuitiva y útil.
-
-- Colaboración Eficiente: La colaboración fluida entre los miembros del equipo se facilitó mediante herramientas como Notion y Trello. La comunicación efectiva fue clave para el progreso constante del proyecto.
+- Centrado en el Usuario: Desde la concepción hasta la implementación, hemos priorizado las necesidades y la experiencia de la usuaria para garantizar una aplicación intuitiva y útil a medida que recibíamos comentarios de usuarios y desarrolladores
 
-- Iteraciones Continuas: Se adoptó un enfoque iterativo, permitiendo la mejora constante a través de ciclos de retroalimentación. La aplicación evolucionó a medida que recibíamos comentarios de usuarios y desarrolladores.
+- Colaboración Eficiente: La colaboración y comunicación fluida entre los miembros del equipo se facilitó adoptando un enfoque iterativo, permitiendo la mejora constante a través de ciclos de retroalimentación basadas en metodologías ágiles como SCRUM.
 
 - Flexibilidad y Adaptabilidad: La arquitectura y el diseño se concebieron con la capacidad de adaptarse a futuras expansiones y mejoras, brindando flexibilidad para evolucionar con las necesidades cambiantes.
 
-- Priorizacion: Nos hemos enfocado en los requisitos solicitados para entrega del proyecto sin desatender la experiencia de las usuarias.
-
-## 6. Prototipos
-### Prototipos de Baja Fidelidad 
-![Alt text](src/resources/Readme-Images/baja-fidelidad.png)
-
-### Prototipos de Media Fidelidad 
-![Alt text](src/resources/Readme-Images/media-fidelidad.png)
-
-### Prototipos de Alta Fidelidad 
-![alt text](src/resources/Readme-Images/alta-fidelidad.png)
+- Priorizacion: Nos hemos enfocado en los requisitos solicitados para entrega del proyecto sin desatender la experiencia de las usuarias. Para esto se utilizaron metodologías como MOSCOW y la matriz de Eisenhower.
 
 ## 7. Tests
 
 ### Test asincronos
 Se crearon mocks de las peticiones y de la data para testear las funciones de comunicación con la IA.
 
 ### Test unitarios
+Se crearon test de la implementación lógica de las funcionalidades.
 ```javascript
 // Jest se utilizó para garantizar la calidad y confiabilidad del código.
 //Ejemplo de filtrado por id
@@ -153,6 +141,6 @@ it ('returns an array with filtered data by id', () => {
 Con 💛 de <a href="https://www.linkedin.com/in/etelbina-ca%C3%B1edo-507baa1b5/">Etelbina Cañedo</a> & <a href="https://www.linkedin.com/in/joseline-garc%C3%ADa-0053521b2/">Joseline García</a>.
 
 ## 9. Conclusión
-<p style="text-align:justify">"My Beauty Plant" representa nuestra dedicación para simplificar el cuidado de las plantas mediante una aplicación intuitiva y visualmente atractiva. A lo largo del proyecto, hemos fusionado inteligencia artificial con herramientas de diseño para crear contenido informativo y estéticamente agradable.</p>
+<p style="text-align:justify">"My Beauty Plant - Chat" representa nuestra evolución como frontend developers enfocadas a la resolución sencilla de tareas nobles y cotidianas como el cuidado de las plantas y la curiosidad por saber más sobre sobre estas.</p>
 
 <p style="text-align:justify">Mirando hacia adelante, planeamos fusionar el proyecto anterior con este proyecto para poder integrar las funcionalidades de ambos en una sola aplicación. Agradecemos a todos por ser parte de esta experiencia verde y esperamos que "My Beauty Plant" continúe siendo una guía confiable para los amantes de las plantas.</p>

src/router.js

@@ -44,7 +44,7 @@ const queryStringToObject = (queryString) => {
  * @param { a string } props - the extention to find the specific item
  */
 
-const renderView = (pathname, props = {}) => {
+export const renderView = (pathname, props = {}) => {
   const root = rootElement;
   root.innerHTML = "";
   if (ROUTES[pathname]) {

src/views/Welcome.js

@@ -45,7 +45,6 @@ export const Welcome = () => {
       userNameValue = user.value;
       navigateTo("/Home", { title: "Home" });
     } else if (apiKey.value.length > 40 || apiKey[0]+apiKey[1]+apiKey[2] === "sk-") {
-      userNameValue = user.value;
       userNameValue = user.value;
       apiKeyValue = apiKey.value;
       setApiKey(apiKey.value);

test/router.spec.js

@@ -1,13 +1,26 @@
-import { navigateTo } from "../src/router.js";
-import { renderView } from "../src/router.js";
-
-jest.mock("../src/router.js", () => ({
-  renderView: jest.fn(),
-}));
+import { navigateTo, setRoutes, setRootElement } from "../src/router.js";
+import { Home } from "../src/views/Home.js";
+import NotFound from "../src/views/Notfound.js";
 
 describe ("navigateTo", () => {
+
+  setRoutes({
+    "/Home": Home,
+    "/Notfound": NotFound,
+  });
+
+  const newRoot = document.createElement('div');
+  setRootElement(newRoot);
+  window.structuredClone = (val) => JSON.parse(JSON.stringify(val));
+
+  test("Send us to the right view", () => {
+    navigateTo("/Home", { title: "Home" });    
+    // Expect new root to contain home
+    expect(newRoot).toBeTruthy();
+  });
+
   test("Send us to the right view", () => {
-    navigateTo("/Home", { title: "Home" });
-    expect(renderView).toHaveBeenCalledWith("/Home");
+    navigateTo("/NotAPage", { title: "Not a page" });
+    expect(newRoot).toBeTruthy();
   });
 });

test/views.spec.js

@@ -3,6 +3,9 @@ import NotFound from "../src/views/Notfound.js";
 import IndividualChat from "../src/views/Individual.js";
 import { Home } from "../src/views/Home.js";
 import { GroupChat } from "../src/views/Group.js";
+import { navigateTo } from "../src/router.js";
+import { userNameValue } from "../src/views/Welcome.js"
+import { setApiKey } from "../src/lib/apikey.js";
 
 describe("views", () => {
   test("The view Welcome exists", () => {
@@ -30,5 +33,55 @@ describe("views", () => {
     const group = GroupChat();
     expect(group).toBeTruthy();
   });
-
 });
+
+jest.mock("../src/router.js", () => ({
+  navigateTo: jest.fn(),
+}));
+
+jest.mock("../src/lib/apikey.js", () => ({
+  setApiKey: jest.fn(),
+}));
+
+describe("Welcome enterButton", () => {
+  const welcome = Welcome();
+  const enterButton = welcome.querySelector("#enter-button");
+
+  test('it should be a button', () => {
+    expect(enterButton).toBeDefined();
+  });
+
+  const user = welcome.querySelector("#input-name");
+  user.value = "UserName";
+  test("Should triger navigateTo Home", () => {
+    enterButton.click();
+    expect(navigateTo).toHaveBeenCalled();
+  });
+
+  test("Should set className to input none", () => {
+    user.value = "";
+    enterButton.click();
+    expect(user.className).toBe("input none");
+  });
+
+  test("Should set the userNameValue", () => {
+    enterButton.click();
+    expect(userNameValue).toBeTruthy();
+  });
+
+  const key = welcome.querySelector("#apikey");
+  key.value = "";
+
+  it("Should reset the textbox", () => {
+    key.value = "notValid";
+    enterButton.click();
+    expect(setApiKey).toHaveBeenCalledTimes(0);
+  });
+
+  test("Should set the apiKey Value", () => {
+    key.value = "sk-ThisIsAFakeApiKeyForATestrgdbfgvbfgbvrgbcdfgcfbv";
+    enterButton.click();
+    expect(setApiKey).toHaveBeenCalled();
+  });
+
+});