diff --git a/README.md b/README.md index 7825c572..ddb4b964 100644 --- a/README.md +++ b/README.md @@ -4,16 +4,11 @@ * [1. Preámbulo](#1-preámbulo) * [2. Resumen del proyecto](#2-resumen-del-proyecto) -* [3. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje) -* [4. Consideraciones generales](#4-consideraciones-generales) -* [5. Criterios de aceptación mínimos del proyecto](#5-criterios-de-aceptación-mínimos-del-proyecto) -* [6. Hacker edition](#6-hacker-edition) -* [7. Consideraciones técnicas](#7-consideraciones-técnicas) -* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias) -* [9. Checklist](#9-checklist) - +* [3. Definición y Objetivos del Proyecto](#3-Definición-y-Objetivos-del-proyecto) +* [4. Historias de Usuario](#4-Historias-de-Usuario) +* [5. Diseño de Interfaz de Usuario](#5-Diseño-de-Interfaz-de-Usuario) +* [6. Objetivos de Aprendizaje](#6-Objetivos-de-Aprendizaje) *** - ## 1. Preámbulo Según [Forbes](https://www.forbes.com/sites/bernardmarr/2018/05/21/how-much-data-do-we-create-every-day-the-mind-blowing-stats-everyone-should-read), @@ -28,590 +23,226 @@ hacerlo es creando _interfaces_ y _visualizaciones_. ## 2. Resumen del proyecto -En este proyecto **construirás una _página web_ para visualizar un -_conjunto (set) de datos_** que se adecúe a lo que descubras que tu usuario -necesita. - -Como entregable final tendrás una página web que permita **visualizar la data, -filtrarla, ordenarla y hacer algún cálculo agregado**. Con cálculo agregado -nos referimos a distintos cálculos que puedes hacer con la data para mostrar -información aún más relevante para los usuarios (promedio, el valor máximo -o mínimo, etc). - -Esta vez te proponemos una serie de datos de diferentes _temáticas_ para que -explores y decidas con qué temática te interesa trabajar. Hemos elegido -específicamente estos sets de datos porque creemos que se adecúan bien a esta -etapa de tu aprendizaje. - -Una vez que definas tu área de interés, buscar entender quién es tu usuario -y qué necesita saber o ver exactamente; luego podrás construir la interfaz que -le ayude a interactuar y entender mejor esos datos. - -Estos son datos que te proponemos: + * Se consideró como usuario principal personas que no saben de pokémon y quieren empezar a aprender sobre este juego y los pokémon de modo que se consideró que la que la página fuera lo más accesible posible para los usuarios + * Creamos una pagina que permite a los usuarios conocer información a detalle en el cual podra ordenar alfabeticamente, filtrar por tipo y buscar cada pokemon. + * Pokémon: En este set encontrarás una lista con los 251 Pokémon de la región de Kanto y Johto, junto con sus respectivas estadísticas usadas en el juego Pokémon GO. -* [Pokémon](src/data/pokemon/pokemon.json): - En este set encontrarás una lista con los 251 Pokémon de la región de Kanto - y Johto, junto con sus respectivas estadísticas usadas en el juego [Pokémon GO](http://pokemongolive.com). - [Investigación con jugadores de Pokémon Go](src/data/pokemon/README.md) -* [League of Legends - Challenger leaderboard](src/data/lol/lol.json): - Este set de datos muestra la lista de campeones en una liga del - juego League of Legends (LoL). - - [Investigación con jugadores de LoL](src/data/lol/README.md) - -* [Rick and Morty](src/data/rickandmorty/rickandmorty.json). - Este set nos proporciona la lista de los personajes de la serie Rick and - Morty. - - [Investigación con seguidores de Rick and Morty](src/data/rickandmorty/README.md) - -* [Juegos Olímpicos de Río de Janeiro](src/data/athletes/athletes.json). - Este set nos proporciona la lista de los atletas que ganaron medallas en las - olímpiadas de Río de Janeiro. - - [Investigación con interesados en juegos olímpicos de Río de Janeiro](src/data/athletes/README.md) - -* [Studio Ghibli](src/data/ghibli/ghibli.json). - En este set encontrarás una lista de las animaciones y sus personajes del - [Studio Ghibli](https://ghiblicollection.com/). - - [Investigación con seguidores de las animaciones del Studio Ghibli](src/data/ghibli/README.md) - -* [Harry Potter](src/data/harrypotter/harry.json). - En este set encontrarás una lista de los personajes,libros pociones - y hechizos de toda la saga de - [Harry Potter](https://harrypotter.fandom.com). - - [Investigación con seguidoras de Harry Potter](src/data/harrypotter/README.md) - -El objetivo principal de este proyecto es que aprendas a diseñar y construir una -interfaz web donde se pueda visualizar y manipular data, entendiendo lo que el -usuario necesita. - -## 3. Objetivos de aprendizaje - -Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo. - -### HTML - -- [ ] **Uso de HTML semántico** - -
Links

- - * [HTML semántico](https://curriculum.laboratoria.la/es/topics/html/02-html5/02-semantic-html) - * [Semantics - MDN Web Docs Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) -

- -### CSS - -- [ ] **Uso de selectores de CSS** - -
Links

- - * [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/01-css/01-intro-css) - * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors) -

- -- [ ] **Modelo de caja (box model): borde, margen, padding** - -
Links

- - * [Box Model & Display](https://curriculum.laboratoria.la/es/topics/css/01-css/02-boxmodel-and-display) - * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) - * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) - * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) - * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/) -

- -- [ ] **Uso de flexbox en CSS** - -
Links

- - * [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - * [Flexbox Froggy](https://flexboxfroggy.com/#es) - * [Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) -

- -### Web APIs - -- [ ] **Uso de selectores del DOM** - -
Links

- - * [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/02-dom/03-1-dom-methods-selection) - * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) - * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) -

- -- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)** - -
Links

- - * [Introducción a eventos - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events) - * [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener) - * [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/removeEventListener) - * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event) -

- -- [ ] **Manipulación dinámica del DOM** - -
Links

- - * [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) - * [Node.appendChild() - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild) - * [Document.createElement() - MDN](https://developer.mozilla.org/es/docs/Web/API/Document/createElement) - * [Document.createTextNode()](https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode) - * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML) - * [Node.textContent - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/textContent) -

- -### JavaScript - -- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos** - -- [ ] **Arrays (arreglos)** - -
Links

- - * [Arreglos](https://curriculum.laboratoria.la/es/topics/javascript/04-arrays) - * [Array - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/) - * [Array.prototype.sort() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) - * [Array.prototype.forEach() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) - * [Array.prototype.map() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map) - * [Array.prototype.filter() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) - * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) -

-- [ ] **Objetos (key, value)** -
Links

- * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects) -

+## 3. Definición y Objetivos del Proyecto -- [ ] **Variables (declaración, asignación, ámbito)** + Definición del producto -
Links

+### Usuarios + Niños, jovenes y adultos (Desde los 6 - 45 años), + Sin conocimiento previo del juego que deseen navegar en una web confiable y agradable para aprender caracteristicas de los pokemones para convertirse en un maestro pokemon. +### Objetivos del proyecto + * Que los usuarios puedan tener una herramienta donde consultar informacion de pokemones . + * Reconocer a los pokemones Nombre y tipo . + * Puedan tener una navegación intuitiva. +### Problemas que soluciona + * Mostrar 251 pokemons en la pagina principal cada uno con sus tres características principales + (imagen,número de pokemon, nombre y tipo) + * Se presentara una gráfico con los tipos de cada pokemon + * Filtrar por Tipo + * Ordenar pokemons alfabéticamente de A-Z + * Ordenar pokemons alfabéticamente de Z-A + * Buscar por nombre a un pokemon - * [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/01-values-variables-and-types) - * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/02-variables) -

+## 4. Historias de Usuario + ### HU1: Mostrar todos los pokemones -- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)** + Quien -> Yo, como usuario + Qué?-> Ver todos los pokemones en la pantalla. + Para?-> Poder escoger un pokemon. + + ### Criterios de Aceptación + + - [x] **Encabezado con imagen de Pokemon Go.** + - [x] **Que el main tenga una imagen de fondo (wallpaper de Pokemon)** + - [x] **Visualizar los pokemones en lineas, haciendo scroll hacia abajo para poder visualizarlos a todos.** + - [x] **Que se muestren todos los nombres de los Pokemones** + - [x] **Mostrar todos los números de los pokemones** + - [x] **Que todos los pokemones se muestren en un marco con bordes redondeados.** + + ### Definición de terminado + + - [x] **Fiel al prototipo** + - [x] **Sea responsive. Que permanezca anclado mientras dar scroll.** + - [x] **Despliegue en github.** + - [x] **Testing** -
Links

+ ### HU2: Filtrar Pokemon + + Quien -> Yo, como usuario + Qué? -> Quiero filtrar todos los pokemones por tipo: Planta, Fuego, Agua… + Para? -> Aprender a escoger los pokemones por tipo dependiendo de la batalla pokemon que tenga. - * [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/01-conditionals-and-loops) - * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals) -

+ ### Criterios de Aceptación -- [ ] **Uso de bucles/ciclos (while, for, for..of)** + - [x] Un botón que despliegue un menú con las opciones de tipo. -
Links

+ ### Definición de terminado - * [Bucles (Loops)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/02-loops) - * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration) -

+ - [x] Fiel al prototipo + - [x] Que el código no marque error. + - [x] Despliegue en GitHub. + - [x] Testing -- [ ] **Funciones (params, args, return)** + ### HU3: Input que permita escribir el nombre de los pokemones para buscarlos -
Links

+ Quien -> Yo, como usuario + Qué? -> Buscar los pokemones por nombre + Para? -> Aprender a escoger los pokemones por tipo dependiendo de la batalla pokemon que tenga. - * [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/03-functions) - * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/01-classic) - * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/02-arrow) - * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions) -

+ ### Criterios de Aceptación -- [ ] **Pruebas unitarias (unit tests)** + - [x] Input que permita buscar por teclado los nombres de los pokemones. -
Links

+ ### Definición de terminado - * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started) -

+ - [x] Fiel al prototipo + - [x] Que el código no marque error. + - [x] Despliegue en GitHub. + - [x] Testing -- [ ] **Módulos de ECMAScript (ES Modules)** + ### HU4: Ordenar los poquemones de A-Z y Z-A -
Links

+ Quien -> Yo, como usuario + Qué? -> Conocer los nombres de manera ordenada + Para? -> Reconocerlos más fácil dependiendo de la batalla pokemon que tenga. - * [import - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import) - * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export) -

+ ### Criterios de Aceptación -- [ ] **Uso de linter (ESLINT)** + - [x] Un botón que despliegue las opciones A-Z y Z-A -- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)** + ### Definición de terminado -- [ ] **Diferenciar entre expresiones (expressions) y sentencias (statements)** + - [x] Fiel al prototipo + - [x] Que el código no marque error. + - [x] Despliegue en GitHub. + - [x] Testing -### Control de Versiones (Git y GitHub) + ### HU5: Tabular y Graficar los pokemones según su tipo -- [ ] **Git: Instalación y configuración** + Quien -> Yo, como usuario + Qué? -> Conocer cuántos pokemones hay en cada tipo. + Para? -> Reconocerlos más fácil los pokemones por tipo para la batalla pokemon que tenga. + + ### Criterios de Aceptación + + - [x] Un botón que muestre una tabla y gráfica con los tipos de pokemones + + ### Definición de terminado + + - [x] Fiel al prototipo + - [x] Que el código no marque error. + - [x] Despliegue en GitHub. + - [x] Testing + +## 5. Diseño de Interfaz de Usuario + ### **Prototipo de baja fidelidad** +

+ Prototipo baja fidelidad +

+
En el proceso de desarrollo del proyecto, cada miembro del equipo comenzó a trabajar en la creación de un prototipo de baja fidelidad de forma individual. Esto nos permitió explorar diferentes opciones de diseño y de flujo de usuario. + Una vez que cada miembro del equipo completó su prototipo, los compartimos y trabajamos juntos en la unión de ambos. Al unir los prototipos, pudimos combinar nuestras ideas y elegir las mejores opciones de cada uno. De esta manera, creamos un prototipo que incorporó las mejores prácticas de diseño y de usabilidad.
+ + ### **Prototipo de alta fidelidad** +

+ Prototipo alta fidelidad +

+Para crear el prototipo de alta fidelidad, nos basamos en el prototipo de baja fidelidad que habíamos desarrollado anteriormente. Utilizamos una herramienta de diseño para crear una versión más refinada del prototipo, en el que incluimos más detalles visuales y funcionales. +Comenzamos por agregar más detalles a las diferentes secciones y elementos de la interfaz gráfica, tales como iconos, colores, imágenes, texturas y otros elementos visuales que mejoraran la experiencia de usuario. También ajustamos el tamaño y posición de los diferentes elementos para mejorar la accesibilidad y la legibilidad de la información. +A medida que agregamos cada historia de usuario, modificamos el prototipo de alta fidelidad, ajustando y modificando la interfaz gráfica para que coincidiera con los requisitos de la historia de usuario en cuestión. Esto nos permitió garantizar que la interfaz gráfica cumpliera con los criterios de aceptación definidos y ofreciera la mejor experiencia de usuario posible. + + ### **Producto Final** +

+ Producto Final +

-- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)** - -- [ ] **Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)** - -- [ ] **GitHub: Creación de cuenta y repos, configuración de llaves SSH** - -- [ ] **GitHub: Despliegue con GitHub Pages** - -
Links

- - * [Sitio oficial de GitHub Pages](https://pages.github.com/) -

- -- [ ] **GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)** - -### Centrado en el usuario - -- [ ] **Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro** - -### Diseño de producto - -- [ ] **Crear prototipos de alta fidelidad que incluyan interacciones** - -- [ ] **[Seguir los principios básicos de diseño visual](https://coda.io/d/Bootcamp-UX-Contenido_dqkqk2rV9Z2/Diseno-Visual_suOT7#_luWsQ)** - -### Investigación - -- [ ] **Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad** - -
Links

- - * [Intro a testeos usabilidad](https://coda.io/@bootcamp-laboratoria/contenido-ux/test-de-usabilidad-15) - * [Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?](https://eugeniacasabona.medium.com/pruebas-con-usuarios-1-qu%C3%A9-cu%C3%A1ndo-y-para-qu%C3%A9-testeamos-7c3a89b4b5e7) -

- -## 4. Consideraciones generales - -* Este proyecto se debe resolver en duplas. -* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la - interfaz será desplegada usando [GitHub Pages](https://pages.github.com/). -* Tiempo para completarlo: Toma como referencia 4 semanas. - -## 5. Criterios de aceptación mínimos del proyecto - -Los criterios para considerar que has completado este proyecto son: - -### Definición del producto - -Documenta brevemente tu trabajo en el archivo `README.md` de tu repositorio, -contándonos cómo fue tu proceso de diseño y cómo crees que el producto resuelve -el problema (o problemas) que tiene tu usuario. - -### Historias de usuario - -Una vez que entiendas las necesidades de tus usuarios, escribe las [Historias -de Usuario](https://es.wikipedia.org/wiki/Historias_de_usuario) que representen -todo lo que el usuario necesita hacer/ver. Las **Historias de Usuario** deben -ser el resultado de tu proceso de investigación o _research_ de tus usuarios. - -Asegúrate de incluir la definición de terminado (_definition of done_) y los -Criterios de Aceptación para cada una. - -En la medida de lo posible, termina una historia de usuario antes de pasar -a la siguiente (Cumple con Definición de Terminado + Criterios de Aceptación). - -### Diseño de la Interfaz de Usuario - -#### Prototipo de baja fidelidad - -Durante tu trabajo deberás haber hecho e iterado bocetos (_sketches_) de tu -solución usando papel y lápiz. Te recomendamos tomar fotos de todas las -iteraciones que hagas, que las subas a tu repositorio y las menciones en tu -`README.md`. - -#### Prototipo de alta fidelidad - -Lo siguiente es diseñar tu Interfaz de Usuario (UI por sus siglas en inglés - -_User Interface_). Para eso debes aprender a utilizar alguna herramienta de -diseño visual. Nosotros te recomendamos [Figma](https://www.figma.com/) que es -una herramienta que funciona en el navegador y, además, puedes crear una cuenta -gratis. Sin embargo, eres libre de utilizar otros editores gráficos como -Illustrator, Photoshop, PowerPoint, Keynote, etc. - -El diseño debe representar el _ideal_ de tu solución. Digamos que es lo que -desearías implementar si tuvieras tiempo ilimitado para trabajar. Además, tu -diseño debe seguir los fundamentos de _visual design_. - -#### Testeos de usabilidad - -Durante el reto deberás hacer _tests_ de usabilidad con distintos usuarios, y -en base a los resultados, deberás iterar tus diseños. Cuéntanos -qué problemas de usabilidad detectaste a través de los _tests_ y cómo los -mejoraste en tu propuesta final. - -### Implementación de la Interfaz de Usuario (HTML/CSS/JS) - -Luego de diseñar tu interfaz de usuario deberás trabajar en su implementación. -**No** es necesario que construyas la interfaz exactamente como la diseñaste. -Tu tiempo de hacking es escaso, así que deberás priorizar - -Como mínimo, tu implementación debe: - -1. Mostrar la data en una interfaz: puede ser un card, una tabla, una lista, - etc. -2. Ser _responsive_, es decir, debe visualizarse sin problemas desde distintos - tamaños de pantallas: móviles, tablets y desktops. -3. Que la interfaz siga los fundamentos de _visual design_. - -### Pruebas unitarias - -El _boilerplate_ de este proyecto no incluye Pruebas Unitarias (_tests_), así es -que tendrás que escribirlas tú para las funciones encargadas de _procesar_, -_filtrar_ y _ordenar_ la data, así como _calcular_ estadísticas. - -Tus _pruebas unitarias_ deben dar una cobertura del 70% de _statements_ -(_sentencias_), _functions_ (_funciones_), _lines_ (_líneas_), y _branches_ -(_ramas_) del archivo `src/data.js` que contenga tus funciones y está detallado -en la sección de [Consideraciones técnicas](#srcdatajs). +### **Testeos de usabilidad** +Para evaluar la usabilidad de nuestra página web, realizamos pruebas con usuarios reales y solicitamos su feedback a través del canal de Slack del equipo. Los usuarios (compañeras y coaches) probaron la página desplegada en GitHub y nos brindaron sus opiniones y sugerencias para mejorar la navegación y la experiencia de usuario. A partir de estos test de usabilidad, pudimos identificar áreas de mejora y realizar ajustes en la interfaz para lograr una mejor experiencia para el usuario. + - [X] *En el filtro por tipo, podrían agregar la opción "todos" para no tener que retroceder para ver todos los pokemons otra vez.* + - [X] *Las imágenes de los pokemones centrarlos un poco y en el buscar por nombre, capaz que las letras podrián ser de un tamaño mas pequeño..Espero que les sirva..saluditos* + - [x] *cuando selecciono un filtro nunca me indica que fue lo que filtre, esa info siempre debe ser visible para el usuario lo que podrian hacer es cambiar el texto del boton por la opcion seleccionada* + - [x] *como no hay nada debajo del nombre del pokemon podrian reducir el tamaño de la carta y asi mostrar mas pokemones* + - [x] *Tal vez echar un ojo en las funciones de ordenar para unificrlas dado que son basicamente el mismo codigo* + - [x] *Modificar el header de un color solido a uno mas vistoso en este caso fue una imagen acorde con la pagina.* + ### **Implementación de la Interfaz de Usuario (HTML/CSS/JS)** + - [x] Mostrar la data en una interfaz: puede ser un card, una tabla, una lista, etc. + - [x] Ser _responsive_, es decir, debe visualizarse sin problemas desde distintos tamaños de pantallas: móviles, tablets y desktops. + - [x] Que la interfaz siga los fundamentos de _visual design_. + ### **Pruebas unitarias** + Nuestras pruebas unitarias para el archivo src/data.js cumplen con las especificaciones técnicas del proyecto, proporcionando una cobertura de del 100% en statements, functions, lines, y branches. Esto nos asegura que nuestras funciones están siendo probadas exhaustivamente y que cualquier error o fallo en el código será detectado. Lo que nos asegura que nuestro proyecto es escalable. ### Checklist -* [ ] Usa VanillaJS. -* [ ] Pasa linter (`npm run pretest`) -* [ ] Pasa tests (`npm test`) -* [ ] Pruebas unitarias cubren un mínimo del 70% de statements, functions y +* [x] Usa VanillaJS. +* [x] Pasa linter (`npm run pretest`) +* [x] Pasa tests (`npm test`) +* [x] Pruebas unitarias cubren un mínimo del 70% de statements, functions y lines y branches. -* [ ] Incluye _Definición del producto_ clara e informativa en `README.md`. -* [ ] Incluye historias de usuario en `README.md`. -* [ ] Incluye _sketch_ de la solución (prototipo de baja fidelidad) en +* [x] Incluye _Definición del producto_ clara e informativa en `README.md`. +* [x] Incluye historias de usuario en `README.md`. +* [x] Incluye _sketch_ de la solución (prototipo de baja fidelidad) en `README.md`. -* [ ] Incluye _Diseño de la Interfaz de Usuario_ (prototipo de alta fidelidad) +* [x] Incluye _Diseño de la Interfaz de Usuario_ (prototipo de alta fidelidad) en `README.md`. -* [ ] Incluye el listado de problemas que detectaste a través de tests de +* [x] Incluye el listado de problemas que detectaste a través de tests de usabilidad en el `README.md`. -* [ ] UI: Muestra lista y/o tabla con datos y/o indicadores. -* [ ] UI: Permite ordenar data por uno o más campos (asc y desc). -* [ ] UI: Permite filtrar data en base a una condición. -* [ ] UI: Es _responsive_. - -## 6. Hacker edition - -Las secciones llamadas _Hacker Edition_ son **opcionales**. Si **terminaste** -con todo lo anterior y te queda tiempo, intenta completarlas. Así podrás -profundizar y/o ejercitar más sobre los objetivos de aprendizaje del proyecto. - -Features/características extra sugeridas: - -* En lugar de consumir la data estática brindada en este repositorio, puedes - consumir la data de forma dinámica, cargando un archivo JSON por medio de - `fetch`. La carpeta `src/data` contiene una versión `.js` y una `.json` de - de cada set datos. -* Agregarle a tu interfaz de usuario implementada visualizaciones gráficas. Para - ello te recomendamos explorar librerías de gráficas como - [Chart.js](https://www.chartjs.org/) - o [Google Charts](https://developers.google.com/chart/). -* 100% Coverage - -## 7. Consideraciones técnicas - -La lógica del proyecto debe estar implementada completamente en JavaScript -(ES6), HTML y CSS. En este proyecto NO está permitido usar librerías o -frameworks, solo [vanilla JavaScript](https://medium.com/laboratoria-how-to/vanillajs-vs-jquery-31e623bbd46e), -con la excepción de librerías para hacer gráficas (charts); ver -[_Parte opcional_](#6-hacker-edition) más arriba. - -El _boilerplate_ contiene una estructura de archivos como punto de partida así -como toda la configuración de dependencias: - -```text -. -├── EXTRA.md -├── README.md -├── package.json -├── src -| ├── data (según con qué data trabajes) -| | ├── lol -| | | ├── lol.js -| | | ├── lol.json -| | | └── README.md -| | ├── pokemon -| | | ├── pokemon.js -| | | ├── pokemon.json -| | | └── README.md -| | └── rickandmorty -| | | ├── rickandmorty.js -| | | ├── rickandmorty.json -| | | └── README.md -| | └── athletes -| | | ├── athletes.js -| | | ├── athletes.json -| | | └── README.md -| | └── ghibli -| | | ├── ghibli.js -| | | ├── ghibli.json -| | | └── README.md -| ├── data.js -| ├── index.html -| ├── main.js -| └── style.css -└── test - └── data.spec.js - -directory: 7 file: 20 -``` - -### `src/index.html` - -Como en el proyecto anterior, existe un archivo `index.html`. Como ya sabes, -acá va la página que se mostrará al usuario. También nos sirve para indicar -qué scripts se usarán y unir todo lo que hemos hecho. - -### `src/main.js` - -Recomendamos usar `src/main.js` para todo tu código que tenga que ver con -mostrar los datos en la pantalla. Con esto nos referimos básicamente a la -interacción con el DOM. Operaciones como creación de nodos, registro de -manejadores de eventos (_event listeners_ o _event handlers_), .... - -Esta no es la única forma de dividir tu código, puedes usar más archivos y -carpetas, siempre y cuando la estructura sea clara para tus compañeras. - -En este archivo encontrarás una serie de _imports_ _comentados_. Para _cargar_ -las diferentes fuentes de datos tendrás que _descomentar_ la línea -correspondiente. - -Por ejemplo, si "descomentamos" la siguiente línea: - -```js -// import data from './data/lol/lol.js'; -``` - -La línea quedaría así: - -```js -import data from './data/lol/lol.js'; -``` - -Y ahora tendríamos la variable `data` disponible en el script `src/main.js`. - -### `src/data.js` - -El corazón de este proyecto es la manipulación de datos a través de arreglos -y objetos. - -Te recomendamos que este archivo contenga toda la funcionalidad que corresponda -a obtener, procesar y manipular datos (tus funciones). Por ejemplo: - -* `filterData(data, condition)`: esta función `filter` o filtrar recibiría la - data, y nos retornaría aquellos datos que sí cumplan con la condición. - -* `sortData(data, sortBy, sortOrder)`: esta función `sort` u ordenar - recibe tres parámetros. - El primer parámetro, `data`, nos entrega los datos. - El segundo parámetro, `sortBy`, nos dice con respecto a cuál de los campos de - la data se quiere ordenar. - El tercer parámetro, `sortOrder`, indica si se quiere ordenar de manera - ascendente o descendente. - -* `computeStats(data)`: la función `compute` o calcular, nos permitirá hacer - cálculos estadísticos básicos para ser mostrados de acuerdo a la data - proporcionada. - -Estos nombres de funciones y de parámetros son solamente referenciales, lo que -decidas depende de tu propia implementación. - -Estas funciones deben ser [_puras_](https://medium.com/laboratoria-developers/introducci%C3%B3n-a-la-programaci%C3%B3n-funcional-en-javascript-parte-2-funciones-puras-b99e08c2895d) -e independientes del DOM. Estas funciones serán después usadas desde el archivo -`src/main.js`, al cargar la página, y cada vez que el usuario interactúe (click, -filtrado, ordenado, ...). - -### `src/data` - -En esta carpeta están los datos de las diferentes fuentes. Encontrarás una -carpeta por cada fuente, y dentro de cada carpeta dos archivos: uno con la -extensión `.js` y otro `.json`. Ambos archivos contienen la misma data; la -diferencia es que el `.js` lo usaremos a través de una etiqueta ` +
+
+ +
+
+
+ + +
+ + + +
+
+
+
+ + + + + + + + + + + +
+ +
+
diff --git a/src/main.js b/src/main.js index 71c59f2d..2038766e 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,143 @@ -import { example } from './data.js'; -// import data from './data/lol/lol.js'; -import data from './data/pokemon/pokemon.js'; -// import data from './data/rickandmorty/rickandmorty.js'; +import { tarjetas, filtrarTipos, buscarPorNombre, abcOrder } from "./data.js"; -console.log(example, data); +import data from "./data/pokemon/pokemon.js"; + +const todos = { + pokemon: [...data.pokemon], +}; + +const bloqueTarjetas = document.getElementById("bloqueTarjetas"); +bloqueTarjetas.innerHTML = tarjetas(data); +const tipoPokemon = document.getElementsByClassName("tipoPokemon"); +const inputBuscar = document.getElementById("inputBuscar"); +const Ordenar = document.getElementsByClassName("Ordenar"); + +const dropdownBtns = document.querySelectorAll(".dropbtn"); +dropdownBtns.forEach((button) => { + const dropdownContent = document.getElementById(button.dataset.target); + const options = dropdownContent.querySelectorAll("a"); + options.forEach((option) => { + option.addEventListener("click", () => { + button.textContent = option.textContent.toUpperCase(); + }); + option.textContent = option.textContent.toUpperCase(); + }); +}); + +for (const tipo of tipoPokemon) { + tipo.addEventListener("click", () => { + if (tipo.name === "todos") { + bloqueTarjetas.innerHTML = tarjetas(todos); + } else { + const pokemonesTipo = filtrarTipos(data, tipo.name); + bloqueTarjetas.innerHTML = tarjetas(pokemonesTipo); + } + }); +} + +inputBuscar.addEventListener("input", function () { + const FiltroNombre = buscarPorNombre( + data, + inputBuscar.value.trim().substring(0, 3) + ); + + if (FiltroNombre.pokemon.length === 0) { + alert("No se encontraron resultados"); + } + + bloqueTarjetas.innerHTML = tarjetas(FiltroNombre); +}); + +for (const item of Ordenar) { + item.addEventListener("click", () => { + if (item.name === "todos") { + bloqueTarjetas.innerHTML = tarjetas(todos); + } + if (item.name === "AZ") { + const SortData = abcOrder(data, item.name); + bloqueTarjetas.innerHTML = tarjetas(SortData); + } else if (item.name === "ZA") { + const SortData = abcOrder(data, item.name); + bloqueTarjetas.innerHTML = tarjetas(SortData); + } + }); +} + +const arrayTypes = [ + "psychic", + "ground", + "water", + "fighting", + "normal", + "ghost", + "grass", + "poison", + "flying", + "dark", + "fairy", + "dragon", + "rock", + "steel", + "ice", + "electric", +]; +const arrayTotalTypes = []; +for (let index = 0; index < arrayTypes.length; index++) { + arrayTotalTypes.push({ + type: arrayTypes[index], + total: filtrarTipos(data, arrayTypes[index]).pokemon.length / 100, + }); +} + +const toggleTableBtn = document.getElementById("toggle-table-btn"); +const myTable = document.getElementById("my-table"); +//const myChart = document.getElementById("my-chart"); + +toggleTableBtn.addEventListener("click", () => { + myTable.classList.toggle("hidden"); + //myChart.classList.toggle("hidden"); + + const table = document.getElementById("tablaDatos"); + table.innerHTML = ""; + for (let i = 0; i < arrayTotalTypes.length; i++) { + const row = document.createElement("tr"); + const coldName = document.createElement("td"); + coldName.textContent = arrayTotalTypes[i].type; + row.appendChild(coldName); + const colTotal = document.createElement("td"); + colTotal.textContent = arrayTotalTypes[i].total; + row.appendChild(colTotal); + + table.appendChild(row); + } + + // const canvas = document.getElementById("my-chart"); + // const ctx = canvas.getContext("2d"); + + // const chart = new Chart(ctx, { + // type: "bar", + // data: { + // labels: arrayTotalTypes.map((item) => item.type.toUpperCase()), + // datasets: [ + // { + // label: "TOTAL DE POKEMONES", + // data: arrayTotalTypes.map((item) => item.total), + // backgroundColor: "blue", + // borderColor: '#36A2EB', + // }, + // ], + // }, + // options: { + // scales: { + // yAxes: [ + // { + // ticks: { + // beginAtZero: true, + // }, + // }, + // ], + // }, + // }, + // }); + // }); +}); diff --git a/src/style.css b/src/style.css index e69de29b..74279565 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,325 @@ + +* { + margin: 0; + padding: 0; + +} + + +/*Encabezado con banner al fondo*/ +.header{ + background-color:#230C2E ; + position:sticky; top:0; + padding-bottom:25px; + background:url(Im-go.jpg) center center no-repeat; + background-size: cover; + justify-content: space-between; + z-index: 1; +} + + /*Imagen de Pokemon Go al centro del Encabezado*/ +.img-go{ + max-width: 250px; + display: block; + margin: 0 auto; +} + +body{ + background: #f1ee3d; + font-family: Consolas; +} + +/*Da formato al container de las Tarjetas*/ +#bloqueTarjetas { + display: flex; + justify-content: center; + /* top/botton left/right */ + padding: 20px 30px; + flex-wrap: wrap; + gap: 5%; + z-index: 0; +} + +/*Tarjeta de Pokemon con bordes*/ +.tarjeta { + border-width: 10px; + padding: 2px; + border:6px double + #230C2E; + margin: 40px 20px; + border-radius: 20px; + gap: 15px; + text-align: center; + align-items: center; + margin-bottom: 20px; + height: 40vh; + background:url(fondo.jpg); + display: flex; + flex-direction: column ; +} + +/*Imagen de Pokemon*/ +.imagenPokemon { + width:20vh; + margin-top: 10px; + margin-bottom: 10px; + /* justify-content: center; */ +} + +/*Nombre y Num de Cada Pokemon*/ +p{ + margin-bottom: .1px; + text-align: center; + font-size: 18px; + color: #230C2E; +} + +/*FlipCards*/ +.card div { + display: flex; + backface-visibility: hidden; + transition: all 0.3s cubic-bezier(0.1, 0.22, 0.8, 1.13); +} + +.card .front { + width: 20vh; + margin-top: 10px; + margin-bottom: 10px; + transform: perspective(200px) rotateY(0deg); +} + +.card .back { + width: 20vh; + margin-top: 10px; + margin-bottom: 10px; + transform: perspective(200px) rotateY(180deg); +} + +.card:hover .front { + width: 20vh; + margin-top: 10px; + margin-bottom: 10px; + transform: perspective(500px) rotateY(180deg); +} + +.front.tarjeta{ + position: absolute; +} + +.card:hover .back { + width: 20vh; + margin-top: 10px; + margin-bottom: 10px; + transform: perspective(100px) rotateY(360deg); +} + +.about { + max-width: 100%; + text-align: justify; + padding: 10px; + font-size: 12px; + color:black; +} + +/*Da formato a Botones*/ +.dropbtn { + background-color: #0075BE; + color: white; + padding: 15px; + font-size: 12px; + margin: 10px; + cursor: pointer; + border-radius:10px; + box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; + border:none; +} +#toggle-table-btn{ + background-color: #0075BE; + color: white; + padding: 15px; + font-size: 12px; + margin: 10px; + cursor: pointer; + border-radius:10px; + box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; + border:none; +} + +/*Posición del Menú Desplegable */ +.dropdown { + position: relative; + display: inline; +} + +/* Menú desplegable Escondido por Default*/ +.dropdown-content { + display: none; + position: absolute; + background-color: #f5f10c; + min-width: 160px; +} + +/*Estilo adentro del Menú Desplegable*/ +.dropdown-content a { + margin:5px; + padding:3px; + text-decoration: none; + display: flex; + flex-wrap: wrap; + flex-direction:row; +} + +/* Estilo de los links en hover */ +.dropdown-content a:hover { + background-color:#FFCC00; + color:black; +} + +/*Menu desplegable estilo*/ +.dropdown:hover .dropdown-content { + display: block; + position: absolute; + top: 100%; + border-radius: 15px; + background-color: #203079; + column-count: 2; +} + +/* Change the background color of the dropdown button when the dropdown content is shown */ +.dropdown:hover .dropbtn { + background-color: #FFCC00; + color:black; +} + +/*Elimina las viñetas de la li*/ +.menu-tipos{ + list-style:none; +} + +a:visited { + color:white ; +} + +a:focus-within { + color: goldenrod; + font-weight: bold; +} + +/*Da formato al container de los Botones*/ +.botones { + display: flex; + align-items: center; + justify-content: space-evenly; + flex-direction: row; + flex-wrap: wrap; +} + +/*Da formato a Input*/ +.buscar input[type="text"]{ + width: 100%; + display:flex; + font-size: 15px; + padding: 7px; + border-radius: 10px; + text-align: right; + box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; + border:none; + +} + +/*Da formato al container de Input*/ +.buscar{ + display:flex; +} + +/*Da formato al container de la Tabla*/ +.container{ + align-content: center; + margin: 15px; +} + +#my-table { + width: 50%; + border-style:double; + border-color: #203079; + background:url(fondo.jpg); + margin: 0 auto; + box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; +} + +th, td { + padding: 3px; + text-align: center; + border-bottom: 1px solid #ddd; +} + +th { + background-color: #0075BE; + color: white; +} + +.hidden { + display: none; +} + +.my-chart{ + display: none; + width:50% ; + height:40%; +} + +/* para despositivos moviles */ +@media (max-width: 800px){ + #bloqueTarjetas { + gap: 20%; + } + .tarjeta { + width: 50%; + } + .dropbtn #toggle-table-btn { + background-color: #0075BE; + color: white; + padding: 16px; + font-size: 10% + } + .buscar input{ + width: 70vw; + display: flex; + font-size: 5%; + border-radius: 15px; + text-align: right; + justify-content: flex-end; + position: relative; + } + .botones { + display: flex; + align-items: center; + justify-content: space-evenly; + flex-direction: row; + flex-wrap: wrap; + font-size: 70%; + width: 100%; + z-index:2; + } + .dropdown { + position: relative; + display: inline-block; + } + .dropdown-content { + display: none; + position: absolute; + background-color: #1fd31f; + min-width: 160px; + z-index:1; + } + .about { + max-width: 100%; + text-align: center; + padding: 10px; + font-size: 25px; + color:black; + } + .img-go { + width: 100%; + } +} \ No newline at end of file diff --git a/test/data.spec.js b/test/data.spec.js index 09b1f23f..c2f99ff7 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,23 +1,271 @@ -import { example, anotherExample } from '../src/data.js'; +import { + tarjetas, + filtrarTipos, + buscarPorNombre, + abcOrder, +} from "../src/data.js"; +const data = { + pokemon: [ + { + num: "002", + name: "ivysaur", + img: "https://www.serebii.net/pokemongo/pokemon/002.png", + type: ["grass", "poison"], + stats: { + "base-attack": "151", + "base-defense": "143", + "base-stamina": "155", + "max-cp": "1699", + "max-hp": "134", + }, + }, + { + num: "003", + name: "venusaur", + img: "https://www.serebii.net/pokemongo/pokemon/003.png", + type: ["grass", "poison"], + stats: { + "base-attack": "198", + "base-defense": "189", + "base-stamina": "190", + "max-cp": "2720", + "max-hp": "162", + }, + }, + { + num: "004", + name: "charmander", + img: "https://www.serebii.net/pokemongo/pokemon/004.png", + type: ["fire"], + stats: { + "base-attack": "116", + "base-defense": "93", + "base-stamina": "118", + "max-cp": "980", + "max-hp": "105", + }, + }, + { + num: "005", + name: "charmeleon", + img: "https://www.serebii.net/pokemongo/pokemon/005.png", + type: ["fire"], + stats: { + "base-attack": "158", + "base-defense": "126", + "base-stamina": "151", + "max-cp": "1653", + "max-hp": "131", + }, + }, + { + num: "006", + name: "charizard", + img: "https://www.serebii.net/pokemongo/pokemon/006.png", + type: ["fire", "flying"], + stats: { + "base-attack": "223", + "base-defense": "173", + "base-stamina": "186", + "max-cp": "2889", + "max-hp": "158", + }, + }, + ], +}; -describe('example', () => { - it('is a function', () => { - expect(typeof example).toBe('function'); +describe("tarjetas", () => { + it("tarjetas es una función", () => { + expect(typeof tarjetas).toBe("function"); }); - - it('returns `example`', () => { - expect(example()).toBe('example'); + it("tarjetas retorna una cadena", () => { + expect(typeof tarjetas(data)).toBe("string"); }); }); +describe("filtrarTipos", () => { + it("filtrarTipos es una función", () => { + expect(typeof filtrarTipos).toBe("function"); + }); + it("filtrarTipos retorna un objeto", () => { + expect(typeof filtrarTipos(data, "fire")).toBe("object"); + }); + it("filtrarTipos retorna un arreglo de objetos filtrados", () => { + expect(filtrarTipos(data, "fire")).toStrictEqual({ + pokemon: [ + { + num: "004", + name: "charmander", + img: "https://www.serebii.net/pokemongo/pokemon/004.png", + type: ["fire"], + stats: { + "base-attack": "116", + "base-defense": "93", + "base-stamina": "118", + "max-cp": "980", + "max-hp": "105", + }, + }, + { + num: "005", + name: "charmeleon", + img: "https://www.serebii.net/pokemongo/pokemon/005.png", + type: ["fire"], + stats: { + "base-attack": "158", + "base-defense": "126", + "base-stamina": "151", + "max-cp": "1653", + "max-hp": "131", + }, + }, + { + num: "006", + name: "charizard", + img: "https://www.serebii.net/pokemongo/pokemon/006.png", + type: ["fire", "flying"], + stats: { + "base-attack": "223", + "base-defense": "173", + "base-stamina": "186", + "max-cp": "2889", + "max-hp": "158", + }, + }, + ], + }); + }); +}); -describe('anotherExample', () => { - it('is a function', () => { - expect(typeof anotherExample).toBe('function'); +describe("buscarPorNombre", () => { + it("buscarPorNombre es una función", () => { + expect(typeof buscarPorNombre).toBe("function"); + }); + it("buscarPorNombre retorna un objeto", () => { + expect(typeof buscarPorNombre(data, "ch")).toBe("object"); + }); + it("buscarPorNombre retorna los pokemones que coinciden con las primeras letras de su nombre", () => { + const expected = { + pokemon: [ + { + num: "004", + name: "charmander", + img: "https://www.serebii.net/pokemongo/pokemon/004.png", + type: ["fire"], + stats: { + "base-attack": "116", + "base-defense": "93", + "base-stamina": "118", + "max-cp": "980", + "max-hp": "105", + }, + }, + { + num: "005", + name: "charmeleon", + img: "https://www.serebii.net/pokemongo/pokemon/005.png", + type: ["fire"], + stats: { + "base-attack": "158", + "base-defense": "126", + "base-stamina": "151", + "max-cp": "1653", + "max-hp": "131", + }, + }, + { + num: "006", + name: "charizard", + img: "https://www.serebii.net/pokemongo/pokemon/006.png", + type: ["fire", "flying"], + stats: { + "base-attack": "223", + "base-defense": "173", + "base-stamina": "186", + "max-cp": "2889", + "max-hp": "158", + }, + }, + ], + }; + expect(buscarPorNombre(data, "ch")).toEqual(expected); }); + it("buscarPorNombre retorna un array con un elemento cuando buscamos `charmander`", () => { + const resultadoEsperado = { + pokemon: [ + { + name: "charmander", + }, + ], + }; + const resultadoObtenido = buscarPorNombre(data, "charmander").pokemon.map( + (p) => { + return { name: p.name }; + } + ); + expect({ pokemon: resultadoObtenido }).toStrictEqual(resultadoEsperado); + }); + it("buscarPorNombre devuelve un arreglo vacío si el nombre no está en la data", () => { + expect(buscarPorNombre(data, "Inventado")).toStrictEqual({ pokemon: [] }); + }); +}); - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); +describe("abcOrder", () => { + it("abcOrder es una función", () => { + expect(typeof abcOrder).toBe("function"); + }); + it("abcOrder retorna un objeto", () => { + expect(typeof abcOrder(data)).toBe("object"); + }); + it("abcOrder ordena los datos de A a Z", () => { + const expected = { + pokemon: [ + { + name: "charizard", + }, + { + name: "charmander", + }, + { + name: "charmeleon", + }, + { + name: "ivysaur", + }, + { + name: "venusaur", + }, + ], + }; + const result = abcOrder(data, "AZ").pokemon.map((p) => { + return { name: p.name }; + }); + expect({ pokemon: result }).toEqual(expected); + }); + it("abcOrder ordena los datos de Z a A", () => { + const expected = { + pokemon: [ + { + name: "venusaur", + }, + { + name: "ivysaur", + }, + { + name: "charmeleon", + }, + { + name: "charmander", + }, + { + name: "charizard", + }, + ], + }; + const result = abcOrder(data, "ZA").pokemon.map((p) => { + return { name: p.name }; + }); + expect({ pokemon: result }).toEqual(expected); }); });