Merge pull request #242 from wizelineacademy/dev

Dev

README.md

@@ -4,23 +4,72 @@ Una plataforma de retroalimentación y evaluación para empleados dentro de una
 
 [📌 Diseño de Figma](https://www.figma.com/file/klnYbVO4bRceWdcZrKkmZq/MockUp?type=design&node-id=0%3A1&mode=design&t=ZbcneFEULlyu53gy-1)
 
-![Mockup](mockup.png)
-
-# 📚 Usage
-
-Make sure you have the right `.env.local` file in your project
+![Demo Image 1](readme-images/demo-image-1.png)
+![Demo Image 2](readme-images/demo-image-2.png)
+![Demo Image 3](readme-images/demo-image-3.png)
+![Demo Image 4](readme-images/demo-image-4.png)
+![Demo Image 5](readme-images/demo-image-5.png)
+![Demo Image 6](readme-images/demo-image-6.png)
+![Demo Image 7](readme-images/demo-image-7.png)
+![Demo Image 8](readme-images/demo-image-8.png)
+
+# Diagrama de Arquitectura
+
+https://excalidraw.com/#room=4e86bc2d7aa398220159,Rx-NMC5JHMVoTkhTiVgTYw
+
+![Architecture Diagram](readme-images/architecture-diagram.png)
+
+# Diagrama de Tecnologías
+
+![Tech Diagram](readme-images/tech-diagram.png)
+
+# Breve descripción de cada tecnología
+
+- **React.js:** Biblioteca de JavaScript para construir interfaces de usuario.
+- **HeadlessUI:** Componentes UI accesibles y no opinados para React y Vue.
+- **Mantine:** Biblioteca de componentes y hooks para React, con enfoque en la accesibilidad y usabilidad.
+- **ReactQuery:** Librería para gestionar el estado de las solicitudes de datos en aplicaciones React.
+- **Tailwind:** Framework de CSS basado en utilidades para diseñar rápidamente interfaces.
+- **Next.js:** Framework de React para desarrollo de aplicaciones web estáticas y dinámicas con renderizado del lado del servidor.
+- **Auth.js:** Solución para autenticación en aplicaciones web, previamente conocida como NextAuth.js.
+- **TypeScript:** Lenguaje de programación que extiende JavaScript con tipado estático opcional.
+- **Postgres:** Sistema de gestión de bases de datos relacional de código abierto.
+- **Vercel Postgres:** Servicio de bases de datos Postgres gestionado y escalable ofrecido por Vercel.
+- **Amazon SQS:** Servicio de cola de mensajes completamente gestionado de Amazon Web Services.
+- **OpenAI:** Organización y tecnología que desarrolla inteligencia artificial avanzada, como GPT-4.
+- **GitHub Actions:** Plataforma de integración y entrega continua para automatizar flujos de trabajo de desarrollo.
+- **GitHub Projects:** Herramienta de gestión de proyectos y seguimiento de tareas integrada en GitHub.
+- **ESLint:** Herramienta de análisis estático para encontrar y corregir problemas en el código JavaScript.
+- **Prettier:** Formateador de código que asegura un estilo consistente en múltiples lenguajes.
+- **Cypress:** Framework para pruebas end-to-end automatizadas en aplicaciones web.
+- **Vitest:** Framework de pruebas unitarias para proyectos Vite.
+- **Ion SST:** Framework para desplegar aplicaciones serverless en AWS con infraestructura como código.
+- **Amazon S3:** Servicio de almacenamiento de objetos escalable y duradero de Amazon Web Services.
+
+# 📚 Uso
+
+Asegurate de tener el archivo `.env.local` en tu proyecto
 
 ```env
 AUTH_SECRET=<YOUR KEY>
 POSTGRES_URL=<YOUR KEY>
+OPENAI_KEY=<YOUR KEY>
 ```
 
-To run the app
+Para correr la app sin hacer un despliegue local en SST (más rápido)
 
 ```bash
 npm run dev
 ```
 
+Para correr la app con un despliegue local en SST (aquí se pueden probar features) que dependen de un SQS (queue de amazon) o un S3 Bucket (para la subida de imagenes)
+
+**Nota:** para correr SST localmente necesitas una Mac/Linux. Windows no es soportado.
+
+```bash
+npm run dev:sst
+```
+
 ## Problema
 
 Muchas empresas no cuentan con un sistema para dar retroalimentación entre los empleados, o si lo tienen, está de una manera muy sesgada, esto hace que muchas veces no se reconozca el esfuerzo de ciertos empleados que van muy bien, y no se le de un plan de mejora a aquellos que no van tan bien.
@@ -39,21 +88,40 @@ Autonocimiento y mejora de las habilidades del empleado, incremento en la produc
 - Managers
 - Chief Officers
 
-## Ideas de funcionalidades
-
-- Dashboard del empleado
-  - Propio y de los compañeros
-  - Del project manager a su equipo
-  - Del CEO a todas las areas que maneja
-  - Análisis de métricas con inteligencia artificial generativa
-- Análisis de mensajes en Slack
-  - Lectura de los mensajes de un canal específico para cuidar que se mantengan las normas de rendimiento y respeto
-- Presentación de issues/tasks de Github Projects y código de GitHub
-  - Análisis de código y entrega según los guidelines
-- Encuestas atómicas de rendimiento y coevaluación
-- Asistente virtual de proyectos
-- Alerta de rendimiento bajo
-  - Detectar con anticipación a los colaboradores con resultados inferiores a los esperados
-  - Dar soluciones como asistencia psicológica, workshops o mentoreo a personas en una crisis
-- Plan de mejora personalizado generado con IA a partir de reviews
-- Corrección de feedback eliminando sesgos e incrementando motivación
+## Flujo principal de funcionalidades
+
+**Crear un usuario**
+
+- Abrir register
+- Llenar el formulario con los datos del usuario
+- Cambiar la foto de perfil y el banner de SVG
+- Mostrar el dashboard, PCP, gráficas vacías
+
+**Mostrar pantalla de administrador (Ya tiene que tener proyectos creados)**
+
+- Crear un nuevo proyecto
+- Llenar el formulario necesario
+- Añadir 4 miembros, entre ellos el usuario nuevo
+- Mostrar las gráficas del nuevo proyecto
+- Mostrar el PCP vacío de ese nuevo proyecto
+
+**Regresar a la vista del nuevo usuario**
+
+- Mostrar mis estadisticas de que ya me han calificado y he calificado
+- Mostrar las notificaciones
+- Contestar encuesta RULER
+- Contestar encuesta Sprint
+- Contestar encuesta Final
+- Mostrar mis estadisticas actualizadas
+
+**Regresar a la vista del usuario administrador**
+
+- Mostrar gráficas de proyecto
+- Correr el SQS
+- Mostrar sus tasks y resources nuevos y en history
+
+**Regresar a la vista del nuevo usuario**
+
+- Mostrar el nuevo PCP con sus tasks y tareas
+- Mostrar el PCP que viene del ruler
+- Mostrar su perfil de usuarios con los nuevos traits

test/FormTextInput.test.tsx

@@ -1,7 +1,60 @@
+import React from "react";
 import FormTextInput from "@/components/FormTextInput";
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 
+describe("FormTextInput Component", () => {
+  //  José Eduardo de Valle Lara A01734957 - Test #1/5
+  it("renders correctly with provided props", () => {
+    render(<FormTextInput name="email" type="email" label="Email Address" />);
+
+    const input = screen.getByTestId("email");
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute("type", "email");
+    expect(screen.getByLabelText("Email Address")).toBeInTheDocument();
+  });
+
+  // José Eduardo de Valle Lara A01734957 - Test #2/5
+  it("toggles password visibility when show button is clicked", () => {
+    render(<FormTextInput name="password" type="password" label="Password" />);
+
+    const input = screen.getByTestId("password");
+    const toggleButton = screen.getByRole("button", { name: /show/i });
+
+    expect(input).toHaveAttribute("type", "password");
+
+    fireEvent.click(toggleButton);
+    expect(input).toHaveAttribute("type", "text");
+
+    fireEvent.click(toggleButton);
+    expect(input).toHaveAttribute("type", "password");
+  });
+
+  // José Eduardo de Valle Lara A01734957 - Test #3/5
+  it("sets autocomplete attribute based on type and name", () => {
+    render(<FormTextInput name="name" type="text" label="Full Name" />);
+
+    const input = screen.getByTestId("name");
+    expect(input).toHaveAttribute("autocomplete", "on");
+  });
+
+  // José Eduardo de Valle Lara A01734957 - Test #4/5
+  it("sets autocomplete attribute for email", () => {
+    render(<FormTextInput name="email" type="email" label="Email Address" />);
+
+    const input = screen.getByTestId("email");
+    expect(input).toHaveAttribute("autocomplete", "on");
+  });
+
+  // José Eduardo de Valle Lara A01734957 - Test #5/5
+  it("sets autocomplete attribute off for other fields", () => {
+    render(<FormTextInput name="username" type="text" label="Username" />);
+
+    const input = screen.getByTestId("username");
+    expect(input).toHaveAttribute("autocomplete", "off");
+  });
+});
+
 describe("FormTextInput Component Test", () => {
   // José Carlos Sánchez Gómez A01745810 - Test #1/10
   it("Should render input", () => {

test/NoDataCard.test.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import NoDataCard from "@/components/NoDataCard";
+
+describe("NoDataCard Component", () => {
+  // José Eduardo de Valle Lara A01734957 - Test #6/10
+  it("renders correctly with provided text", () => {
+    const testText = "No data available";
+    render(<NoDataCard text={testText} />);
+
+    const textElement = screen.getByText(testText);
+    expect(textElement).toBeInTheDocument();
+    expect(textElement).toHaveClass(
+      "text-center text-sm font-medium text-grayText",
+    );
+  });
+
+  // José Eduardo de Valle Lara A01734957 - Test #7/10
+  it("renders image on medium and larger screens", () => {
+    render(<NoDataCard text="No data available" />);
+
+    const imageElement = screen.getByAltText("NoDataSVG");
+    expect(imageElement).toBeInTheDocument();
+    expect(imageElement).toHaveClass("hidden md:block");
+  });
+
+  // José Eduardo de Valle Lara A01734957 - Test #8/10
+  it("contains the provided text", () => {
+    const testText = "No data available";
+    render(<NoDataCard text={testText} />);
+
+    const textElement = screen.getByText(testText);
+    expect(textElement).toBeInTheDocument();
+    expect(textElement).toHaveTextContent(testText);
+  });
+});

test/Slider.test.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import Slider from "@/components/Slider";
+
+describe("Slider Component", () => {
+  // José Eduardo de Valle Lara A01734957 - Test #9/10
+  it("renders correctly with provided props", () => {
+    render(<Slider label="Test Label" name="testSlider" />);
+
+    expect(screen.getByText("Test Label")).toBeInTheDocument();
+    expect(screen.getByTestId("slider-testSlider")).toBeInTheDocument();
+    expect(screen.getByTestId("input-slider")).toBeInTheDocument();
+  });
+
+  // José Eduardo de Valle Lara A01734957 - Test #10/10
+  it("changes value when interacted with", () => {
+    render(<Slider label="Test Label" name="testSlider" />);
+
+    const slider = screen.getByTestId("input-slider") as HTMLInputElement;
+    fireEvent.change(slider, { target: { value: 5 } });
+
+    expect(slider.value).toBe("5");
+  });
+
+  // José Eduardo de Valle Lara A01734957 - Test #11/10
+  it("calls onChange with correct parameters", () => {
+    const handleChange = vi.fn();
+    render(
+      <Slider label="Test Label" name="testSlider" onChange={handleChange} />,
+    );
+
+    const slider = screen.getByTestId("input-slider") as HTMLInputElement;
+    fireEvent.change(slider, { target: { value: 7 } });
+
+    expect(handleChange).toHaveBeenCalledWith(expect.any(Object), "testSlider");
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+});