diff --git a/README.md b/README.md index fe704b0..03faf3c 100644 --- a/README.md +++ b/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= POSTGRES_URL= +OPENAI_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 diff --git a/mockup.png b/mockup.png deleted file mode 100644 index 73dc6eb..0000000 Binary files a/mockup.png and /dev/null differ diff --git a/readme-images/architecture-diagram.png b/readme-images/architecture-diagram.png new file mode 100644 index 0000000..49eebf3 Binary files /dev/null and b/readme-images/architecture-diagram.png differ diff --git a/readme-images/demo-image-1.png b/readme-images/demo-image-1.png new file mode 100644 index 0000000..71bd9ff Binary files /dev/null and b/readme-images/demo-image-1.png differ diff --git a/readme-images/demo-image-2.png b/readme-images/demo-image-2.png new file mode 100644 index 0000000..2c6eb1c Binary files /dev/null and b/readme-images/demo-image-2.png differ diff --git a/readme-images/demo-image-3.png b/readme-images/demo-image-3.png new file mode 100644 index 0000000..d3392d3 Binary files /dev/null and b/readme-images/demo-image-3.png differ diff --git a/readme-images/demo-image-4.png b/readme-images/demo-image-4.png new file mode 100644 index 0000000..b428401 Binary files /dev/null and b/readme-images/demo-image-4.png differ diff --git a/readme-images/demo-image-5.png b/readme-images/demo-image-5.png new file mode 100644 index 0000000..307673e Binary files /dev/null and b/readme-images/demo-image-5.png differ diff --git a/readme-images/demo-image-6.png b/readme-images/demo-image-6.png new file mode 100644 index 0000000..98a40e2 Binary files /dev/null and b/readme-images/demo-image-6.png differ diff --git a/readme-images/demo-image-7.png b/readme-images/demo-image-7.png new file mode 100644 index 0000000..2959f8e Binary files /dev/null and b/readme-images/demo-image-7.png differ diff --git a/readme-images/demo-image-8.png b/readme-images/demo-image-8.png new file mode 100644 index 0000000..a7d03a7 Binary files /dev/null and b/readme-images/demo-image-8.png differ diff --git a/readme-images/tech-diagram.png b/readme-images/tech-diagram.png new file mode 100644 index 0000000..77493d5 Binary files /dev/null and b/readme-images/tech-diagram.png differ diff --git a/test/FormTextInput.test.tsx b/test/FormTextInput.test.tsx index 2100093..c2543fa 100644 --- a/test/FormTextInput.test.tsx +++ b/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(); + + 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(); + + 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(); + + 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(); + + 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(); + + 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", () => { diff --git a/test/NoDataCard.test.tsx b/test/NoDataCard.test.tsx new file mode 100644 index 0000000..ad554cf --- /dev/null +++ b/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(); + + 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(); + + 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(); + + const textElement = screen.getByText(testText); + expect(textElement).toBeInTheDocument(); + expect(textElement).toHaveTextContent(testText); + }); +}); diff --git a/test/Slider.test.tsx b/test/Slider.test.tsx new file mode 100644 index 0000000..2ed7792 --- /dev/null +++ b/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(); + + 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(); + + 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( + , + ); + + 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); + }); +});