diff --git a/Img/Comparacion 1.png b/Img/Comparacion 1.png new file mode 100644 index 0000000..10be8ad Binary files /dev/null and b/Img/Comparacion 1.png differ diff --git a/Img/Comparacion 2.png b/Img/Comparacion 2.png new file mode 100644 index 0000000..2db90a9 Binary files /dev/null and b/Img/Comparacion 2.png differ diff --git a/Img/Prototipo de alta fidelidad 1-4.jpeg.png b/Img/Prototipo de alta fidelidad 1-4.jpeg.png new file mode 100644 index 0000000..2da65a9 Binary files /dev/null and b/Img/Prototipo de alta fidelidad 1-4.jpeg.png differ diff --git a/Img/Prototipo de alta fidelidad 2-4.jpeg.png b/Img/Prototipo de alta fidelidad 2-4.jpeg.png new file mode 100644 index 0000000..e7d7229 Binary files /dev/null and b/Img/Prototipo de alta fidelidad 2-4.jpeg.png differ diff --git a/Img/Prototipo de alta fidelidad 3-4.jpeg.png b/Img/Prototipo de alta fidelidad 3-4.jpeg.png new file mode 100644 index 0000000..b3dcf0c Binary files /dev/null and b/Img/Prototipo de alta fidelidad 3-4.jpeg.png differ diff --git a/Img/Prototipo de alta fidelidad 4-4.jpeg.png b/Img/Prototipo de alta fidelidad 4-4.jpeg.png new file mode 100644 index 0000000..9c53b0c Binary files /dev/null and b/Img/Prototipo de alta fidelidad 4-4.jpeg.png differ diff --git a/Img/Prototipo de baja fidelidad 1-3.jpeg b/Img/Prototipo de baja fidelidad 1-3.jpeg new file mode 100644 index 0000000..691cd06 Binary files /dev/null and b/Img/Prototipo de baja fidelidad 1-3.jpeg differ diff --git a/Img/Prototipo de baja fidelidad 2-3.jpeg b/Img/Prototipo de baja fidelidad 2-3.jpeg new file mode 100644 index 0000000..ddf55cf Binary files /dev/null and b/Img/Prototipo de baja fidelidad 2-3.jpeg differ diff --git a/Img/Prototipo de baja fidelidad 3-3.jpeg b/Img/Prototipo de baja fidelidad 3-3.jpeg new file mode 100644 index 0000000..3176998 Binary files /dev/null and b/Img/Prototipo de baja fidelidad 3-3.jpeg differ diff --git a/Img/Proyecto Pokemon (Final).png b/Img/Proyecto Pokemon (Final).png new file mode 100644 index 0000000..42a80bd Binary files /dev/null and b/Img/Proyecto Pokemon (Final).png differ diff --git a/Img/Proyecto Pokemon 1 (Final).png b/Img/Proyecto Pokemon 1 (Final).png new file mode 100644 index 0000000..5609baf Binary files /dev/null and b/Img/Proyecto Pokemon 1 (Final).png differ diff --git a/Img/Test Usabilidad 1.png b/Img/Test Usabilidad 1.png new file mode 100644 index 0000000..e347271 Binary files /dev/null and b/Img/Test Usabilidad 1.png differ diff --git a/Img/Test Usabilidad 4.png b/Img/Test Usabilidad 4.png new file mode 100644 index 0000000..9e48abf Binary files /dev/null and b/Img/Test Usabilidad 4.png differ diff --git a/README.md b/README.md index a45b7d5..6f2a8cd 100644 --- a/README.md +++ b/README.md @@ -2,622 +2,104 @@ ## Índice -* [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) +* [1. Definición del producto](#1-definición-del-producto) +* [2. Historias de usuario](#2-historias-de-usuario) +* [3. Prototipo de baja fidelidad](#3-prototipo-de-baja-fidelidad) +* [4. Diseño de la Interfaz de Usuario (prototipo de alta fidelidad)](#4-diseño-de-la-interfaz-de-Usuario-(prototipo-de-alta-fidelidad)) +* [5. Tests de usabilidad](#5-tests-de-usabilidad) +* [6. Tecnologías usadas](#6-tecnologias-usadas) *** -## 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), -el 90% de la data que existe hoy ha sido creada durante los últimos dos años. -Cada día generamos 2.5 millones de terabytes de datos, una cifra sin -precedentes. - -No obstante, los datos por sí mismos son de poca utilidad. Para que esas -grandes cantidades de datos se conviertan en **información** fácil de leer para -los usuarios, necesitamos entender y procesar estos datos. Una manera simple de -hacerlo es creando _interfaces_ y _visualizaciones_. - -En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte -izquierda se puede construir una interfaz amigable y entendible por las -usuarias, al lado derecho. - -![pokemon-data-to-ui](https://user-images.githubusercontent.com/12631491/218505816-c6d11758-9de4-428f-affb-2a56ea4d68c4.png) - -## 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: - -* [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. [API Rick and Morty](https://rickandmortyapi.com). - - [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) -

- -- [ ] **Variables (declaración, asignación, ámbito)** - -
Links

- - * [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) -

- -- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)** - -
Links

- - * [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) -

- -- [ ] **Uso de bucles/ciclos (while, for, for..of)** - -
Links

- - * [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) -

- -- [ ] **Funciones (params, args, return)** - -
Links

- - * [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) -

- -- [ ] **Pruebas unitarias (unit tests)** - -
Links

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

- -- [ ] **Módulos de ECMAScript (ES Modules)** - -
Links

- - * [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) -

- -- [ ] **Uso de linter (ESLINT)** - -- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)** - -- [ ] **Diferenciar entre expresiones (expressions) y sentencias (statements)** - -### Control de Versiones (Git y GitHub) - -- [ ] **Git: Instalación y configuración** - -- [ ] **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** - -### 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 rango de tiempo estimado para completar el proyecto es de 3 a 4 Sprints. -* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la - interfaz será desplegada usando [GitHub Pages](https://pages.github.com/). - -## 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. Permitir al usuario interactuar para obtener la infomación que necesita. -3. Ser _responsive_, es decir, debe visualizarse sin problemas desde distintos - tamaños de pantallas: móviles, tablets y desktops. -4. 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). - -## 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 ` - + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 71c59f2..0f1744d 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,102 @@ -import { example } from './data.js'; -// import data from './data/lol/lol.js'; +import {filter} from './data.js'; +import {order} from "./data.js"; +import {spawnCal} from "./data.js"; import data from './data/pokemon/pokemon.js'; -// import data from './data/rickandmorty/rickandmorty.js'; -console.log(example, data); +//dynamic browser windows +const targets = document.querySelectorAll('[data-target]') +const content = document.querySelectorAll('[data-content]') +targets.forEach(target => { + target.addEventListener('click', () => { + content.forEach(c => { + c.classList.remove('index'); + }); + const t = document.querySelector(target.dataset.target); + t.classList.add('index'); + }) +}); + +//Constant where the data is stored +const dataPokedex = data.pokemon; +//Vizualization of the data on the pag(img,num,name,generation,type) +function paint (dataArray) { + let contentPokedexMain = ""; + dataArray.forEach((element)=>{ + contentPokedexMain += `
+

${element.num}

+
+ +
+

${element.name}

+

${element.generation.name}

+

${element.type}

+

` + }) + document.getElementById('content-pokedexs').innerHTML = contentPokedexMain +} +paint (dataPokedex); +// pokemon power percentage display +function statsPokemon (dataArry) { + let contentPokedexStats = ""; + dataArry.forEach((element)=> { + contentPokedexStats += ` + + ${element.num} + + ${element.name} + ${element.stats["base-attack"]} + ${element.stats["base-defense"]} + ${element.stats["base-stamina"]} + ${element.stats["max-cp"]} + ${element.stats["max-hp"]} + ${spawnCal.spawnPer(element["spawn-chance"])} + ` + }); + document.getElementById('pokedex-stats').innerHTML =contentPokedexStats; +} +statsPokemon(dataPokedex); +//Type filter +function filter1() { + const selectFilter = document.getElementById("type-pokemon"); + selectFilter.addEventListener("change", () => { + const typeF = selectFilter.value; + if (typeF === "Type") { + paint(dataPokedex); + } else { + paint(filter.typeFilter(dataPokedex, typeF)); + } + }); +} +filter1(); + +//Generation filter +function filter2() { + const selectGeneration = document.getElementById("type-generation"); + selectGeneration.addEventListener("change", () => { + const generationF = selectGeneration.value; + if (generationF === "Gen") { + paint(dataPokedex); + } else { + return paint(filter.typeFilterGeneration(dataPokedex, generationF)); + } + }); +} +filter2(); + +//Order (Ascending,orderDescending,Number) +function allOrder() { + const selectOrder = document.getElementById("type-order"); + selectOrder.addEventListener("change", () => { + const typ = selectOrder.value; + if (typ === "Ascending") { + return paint(order.orderAscending(dataPokedex)); + } else if (typ === "Descending") { + return paint(order.orderDescending(dataPokedex)); + } else if (typ === "Major-Minor") { + return paint(order.orderNumber1(dataPokedex)); + } else if (typ === "Minor-Major") { + return paint(order.orderNumber2(dataPokedex)); + } + }); +} +allOrder(); diff --git a/src/style.css b/src/style.css index e69de29..c14d1c7 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,521 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; + font-family:monospace, serif; +} + +body{ + position: absolute; + width: 100%; + display: flex; + flex-flow: column wrap; + justify-content: center; +} + +/*Header y navegador */ +.container-title{ + background-image: url(https://tophinhanhdep.com/wp-content/uploads/2021/11/Star-Anime-Wallpapers.jpg); + display: flex; + height: 100px; + width: 100%; + max-width: 100%; + flex-flow: row wrap; + justify-content: space-between; +} + +.container-title nav { + width: 70%; + height: 100%; +} +.container-title nav ul{ + height: 100%; + width: 100%; + list-style: none; + display: flex; + flex-flow: row wrap; + justify-content: right; +} + +.container-title nav li{ + cursor: pointer; + transition: .3s; + color: #fff; + padding: 30px; + font-size: 2em; +} + +.nav-list li:hover{ + color: #fff; + background-color: #1e3780; +} + +.container-logo { + height: 100%; + width: 20%; +} + +.container-title img { + height: 100%; + width: 100%; + object-fit: contain; +} + + +/*Browser windows functionality js*/ +.index[data-content] { + display: block; +} +[data-content] { + display: none; +} + +.filters{ + width: 100%; +} +/*filter design*/ + +.container-filter-box{ + margin: 15px 8%; +} + +.filterr{ + display: flex; + background-color: hsla(278, 30%, 50%, 0.71); + padding: 20px; + border-radius: 10px; + width: 100%; + height: 100%; + flex-flow: row ; + justify-content: space-between; +} + +.filter__01{ + display: flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: center; +} +.filter__01 select{ + width: 150px; + margin: 0px 10px 0px 0px; + background-color:#fffafa; + border:5px solid #1e3780 ; + border-radius: 13px; + display: flex; + position: relative; + font-size: 18px; + height: 50px; + font-weight: bolder; +} +.filter__01 select option{ + min-height: 40px; + display: flex; + align-items: center; + border:1px solid #a6a5a57a ; + border-top: #000 solid 1px; + position: absolute; + top: 0; + width: 100%; + text-align: center; + z-index: 1; + box-sizing: border-box; +} +.filter__01 select:focus option{ + position: relative; + position: all; +} +.filter__01 .filter-label-1{ + width: 150px; + margin: 0px 10px ; + background-color:#dcdde1; + border:5px solid #dcdde1 ; + border-radius: 13px; + display: flex; + position: relative; + font-size: 18px; + height: 50px; + font-weight: bolder; +} +.filter__02{ + background-color: red; + text-align: center; + width: 150px; + margin: 0px 0px; + background-color:#fff; + border:5px solid #1e3780 ; + border-radius: 13px; + display: flex; + flex-direction: row; + position: relative; + height: 50px; + font-size: 18px; +font-weight: bold; +} +.filter__01 select option{ + min-height: 40px; + display: flex; + align-items: center; + border:1px solid #8a59a6 ; + border-top: none; + position: absolute; + top: 0; + width: 100%; + pointer-events: none; + order:2; + z-index: 1; + transition: background 0.5s ease-in-out; + box-sizing: border-box; + overflow: hidden; + white-space: nowrap; +} + + + +/*box data of the pokemon*/ +.box-pokedex{ + margin: 15px 8%; + background-color: #fff; + display: flex; + flex-flow: row wrap; + justify-content: space-evenly; + min-height: calc(100vh - 1000px); + border:5px solid #1e3780; + border-radius: 13px; +} +.card{ + text-align: center; + border: 2px solid grey; + box-shadow:2px 2px 4px black ; + height: 14em; + width: 12em; + margin: 10px 5px; + background-color: #fff;; + padding:10px; +} +.card:hover { + color: #fff; + border: 2px solid #000; + background-color: hsla(278, 30%, 50%, 0.71); + transition: .5s; + color: #000; +} + +.card .p-1{ + text-align: center; + text-transform: capitalize; + width: 150px; + display: inline-block; + background-color:hsl(225, 90%, 60%); +} +.card .p-2{ + text-transform: capitalize; + text-align: center; + width: 150px; + display: inline-block; + background-color:hsl(225, 90%, 70%); +} +.card .p-3{ + text-transform: capitalize; + text-align: center; + width:150px; + background-color:hsl(225, 90%, 80%); + display: inline-block; + padding-bottom:5px ; +} +.pokemon-img img { + width: 150px; + height: 100px; + object-fit: contain; + background-image: url('https://i.pinimg.com/736x/33/ac/6a/33ac6af8e90054568ab47ad0ef2d02a2.jpg'); + background-size: 450px; + border-radius: 10px; +} + + + +/*stats*/ +.stats-contain { + background-color:#fff; + width: 85%; + margin: 15px 8%; + border:5px solid #1e3780 ; + border-radius: 13px; +} +.main-table { + background-color:#fff ;/*#f8dbd556*/ + width: 100%; + height: 100%; +} +.main-table thead { + padding: 20px; + font-size: 1.2em; + background-color: #8a59a6; + color: #ffffff; +} +.title-table{ + background-color: #27408d; + padding: 5px; + font-size: 1.5em; +} +.element-datatr { + font-size: 25px; + font-weight: bolder; + text-align: center; + text-transform: capitalize; +} +.element-datatr td { + text-align: center; + margin: 10px; + padding: 6px; +} +.element-datatr td img{ + width:100%; + height:100%; +} +@media screen and (min-width: 200px) and (max-width: 480px) { + table{ + display: block; + overflow-x: auto; + } + .stats-contain { + margin: 15px 7%; + } + + .main-table thead { + font-size: 22px; + } + .element-datatr { + font-size: 20px; + + } + .element-datatr td img{ + width:70px; + height:70px; + } +} +@media screen and (min-width: 481px) and (max-width: 889px) { + table{ + display: block; + overflow-x: auto; + } + .stats-contain { + margin: 15px 7%; + } + + .main-table thead { + font-size: 22px; + } + .element-datatr { + font-size: 20px; + + } + .element-datatr td img{ + width:70px; + height:70px; + }} +/*footer*/ +.cotainer-footer { + position: relative; + background-color: #1e3780; + display: flex; + flex-flow: wrap row; + height: 40%; + justify-content: space-evenly; + align-items: center; + border-color: #8a59a6; + border-style: solid; + min-height: calc(30vh - 30px); + +} +.logo-footer { + padding: 0px; + flex: 28%; + display: flex; + justify-content: center; +} + +.box-img-poke { + width: 45%; +} + +.logo-footer img { + height: 100%; + width: 100%; + object-fit: contain; +} + +.data-collaborator { + flex: 34%; + height: 100%; + display: flex; + flex-flow: column wrap; + justify-content: center; +} + +.data-collaborator div { + margin: 5px 0px; + text-align: center; +} + +.data-collaborator div a { + color:#dbd5d5; + margin: 10px; + font-size: 1em; + cursor: pointer; +} + +.data-collaborator p { + margin: 5px 0px; + font-size: 1.1em; + text-align: center; + font-weight: bold; + color:#fff; +} + + +.icon-info { + background-color: ; + padding: 10px; + flex: 28%; + height: 100%; + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +.icon-info ion-icon { + font-size: 3em; + text-align: center; + color: #fff; + margin: 5px; + cursor: pointer; + +} + + +@media screen and (max-width:800px){/*laptap nav*/ + + + .container-title{ + height: 75px; + width: 100%; + } + + .container-title nav { + width: 80%; + height: 100%; + } + .container-title nav li{ + padding: 23px 15px; + font-size: 1.5em; + } + .container-logo { + height: 100%; + width: 20%; + } +} +@media screen and (max-width:840px){/*laptap filt*/ + + .filterr{ + display: flex; + background-color: hsla(278, 30%, 50%, 0.71); + padding: 20px; + border-radius: 10px; + width: 100%; + height: 100%; + flex-flow: row ; + justify-content: space-between; + } + + .filter__01{ + display: flex; + flex-flow: row ; + justify-content: space-between; + align-items: center; + } + .filter__01 select{ + margin: 0px 10px 0px 0px; + width: 8.5em; + height: 3em; + font-size: 0.8em; + } + .filter__01 .filter-label-1{ + width: 7em; + margin: 0px 10px ; + height: 35px; + font-size: 12px; + } + .filter__02{ + background-color: #fff; + width: 5em; + margin: 0px 0px; + height: 35px; + font-size: 15px; + } +} +@media screen and (max-width: 540px){ + .container-filter-box{ + margin: 15px 4%; + } + + .filterr{ + background-color: hsla(278, 30%, 50%, 0.71); + } + + .filter__01{ + } + .filter__01 select{ + text-align: center; + margin: 0px 5px; + font-size: 10px; + width: 6.5em; + height: 3em; + } + + .filter__01 .filter-label-1{ + text-align: center; + width: 65px; + margin: 0px 0px; + height: 30px; + font-size: 10px; + } + .filter__02{ + text-align: center; + margin: 0px 0px; + font-size: 10px; + width: 6.5em; + height: 3em; + } + + .box-pokedex{ + margin: 15px 4%; + } + .card{ + height:10em; + width: 8em; + padding: 0px; + + } + .card .p-1{ + display: inline-block; + width: 100%; + } + .card .p-2{ + display: inline-block; + width: 100%; + } + .card .p-3{ + display: inline-block; + width: 100%; + } + .cotainer-footer { + display: flex; + flex-flow: wrap column; + } + .pokemon-img img{ + width: 80px; + height: 60px; + } +} diff --git a/test/data.spec.js b/test/data.spec.js index 09b1f23..32800d8 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,23 +1,486 @@ -import { example, anotherExample } from '../src/data.js'; +import {filter, order, spawnCal} from '../src/data.js'; +import {dataMock} from './dataMock.js'; +describe('filter', () => { + it('es un objecto', () => { + expect(typeof filter).toBe('object'); + }); + describe('filter.typeFilter',() => { + it('es un funcion', () => { + expect(typeof filter.typeFilter).toBe('function'); + }) + }) + it('el filtro debe retornar un array con los pokemones de tipo veneno', () => { + const typeP = "poison"; + const filteredPoke = filter.typeFilter(dataMock.pokemon,typeP); + expect(filteredPoke[0].type.includes(typeP)).toBe(true) + expect(filteredPoke[1].type.includes(typeP)).toBe(true) + }); + describe('filter.typeFilterGeneration',() => { + it('es una funcion',() => { + expect(typeof filter.typeFilterGeneration).toBe('function'); + }) + }) + it('el filtro debe retornar un array con los pokemones de generacion kanto', () => { + const gen = "kanto"; + const filterGen = filter.typeFilterGeneration(dataMock.pokemon,gen); + expect(filterGen[0].generation.name.includes(gen)).toBe(true) + expect(filterGen[1].generation.name.includes(gen)).toBe(true) + }) + +}); -describe('example', () => { - it('is a function', () => { - expect(typeof example).toBe('function'); +describe("order", () => { + it("es un objecto", () => { + expect(typeof order).toBe("object"); }); + describe("order.orderAscending", () => { + it("es un funcion", () => { + expect(typeof order.orderAscending).toBe("function"); + }); + }); + it("la funcion debe retornar un array de nombres organizados por orden ascendente", () => { + const ordenAsc = [ + { + num: "153", + name: "bayleef", + generation: { + name: "johto", + }, - it('returns `example`', () => { - expect(example()).toBe('example'); + type: ["grass"], + "spawn-chance": null, + }, + { + num: "001", + name: "bulbasaur", + generation: { + name: "kanto", + }, + type: ["grass", "poison"], + "spawn-chance": "0.69", + }, + { + num: "004", + name: "charmander", + generation: { + name: "kanto", + }, + type: ["fire"], + "spawn-chance": "0.253", + }, + { + num: "002", + name: "ivysaur", + generation: { + name: "kanto", + }, + type: ["grass", "poison"], + "spawn-chance": "0.042", + }, + { + num: "172", + name: "pichu", + generation: { + name: "johto", + }, + type: ["electric"], + "spawn-chance": "0", + }, + { + num: "007", + name: "squirtle", + generation: { + name: "kanto", + }, + type: ["water"], + "spawn-chance": "0.58", + }, + ]; + expect(order.orderAscending(dataMock.pokemon)).toEqual(ordenAsc); }); -}); + it("la funcion debe retornar un array de elementos iguales", () => { + const ordenZEntrada = [ + { + num: "007", + name: "squirtle", + generation: { + name: "kanto", + }, + type: ["water"], + "spawn-chance": "0.58", + }, + { + num: "007", + name: "squirtle", + generation: { + name: "kanto", + }, + type: ["water"], + "spawn-chance": "0.58", + }, + ]; + const ordenZSalida = [ + { + num: "007", + name: "squirtle", + generation: { + name: "kanto", + }, + type: ["water"], + "spawn-chance": "0.58", + }, + { + num: "007", + name: "squirtle", + generation: { + name: "kanto", + }, + type: ["water"], + "spawn-chance": "0.58", + }, + ]; + expect(order.orderAscending(ordenZEntrada)).toEqual(ordenZSalida); + }); + describe("order.orderDescending", () => { + it("es una funcion", () => { + expect(typeof order.orderAscending).toBe("function"); + }); + it("la funcion debe retornar un array de nombres organizados por orden descendente", () => { + const ordenDes = [ + { + num: "007", + name: "squirtle", + generation: { + name: "kanto", + }, + type: ["water"], + "spawn-chance": "0.58", + }, + { + num: "172", + name: "pichu", + generation: { + name: "johto", + }, + type: ["electric"], + "spawn-chance": "0", + }, + { + num: "002", + name: "ivysaur", + generation: { + name: "kanto", + }, + type: ["grass", "poison"], + "spawn-chance": "0.042", + }, + { + num: "004", + name: "charmander", + generation: { + name: "kanto", + }, + type: ["fire"], + "spawn-chance": "0.253", + }, + { + num: "001", + name: "bulbasaur", + generation: { + name: "kanto", + }, + type: ["grass", "poison"], + "spawn-chance": "0.69", + }, + { + num: "153", + name: "bayleef", + generation: { + name: "johto", + }, + + type: ["grass"], + "spawn-chance": null, + }, + ]; + expect(order.orderDescending(dataMock.pokemon)).toEqual(ordenDes); + }); + it("La funcion debe retornar un array de elementos iguales", () => { + const ordenZEntrada = [ + { + num: "007", + name: "squirtle", + generation: { + name: "kanto", + }, + type: ["water"], + "spawn-chance": "0.58", + }, + { + num: "007", + name: "squirtle", + generation: { + name: "kanto", + }, + type: ["water"], + "spawn-chance": "0.58", + }, + ]; + const ordenZSalida = [ + { + num: "007", + name: "squirtle", + generation: { + name: "kanto", + }, + type: ["water"], + "spawn-chance": "0.58", + }, + { + num: "007", + name: "squirtle", + generation: { + name: "kanto", + }, + type: ["water"], + "spawn-chance": "0.58", + }, + ]; + expect(order.orderDescending(ordenZEntrada)).toEqual(ordenZSalida); + }); + }); + describe("order.orderNumber1", () => { + it("es una funcion", () => { + expect(typeof order.orderNumber1).toBe("function"); + }); + }); + it("la funcion debe retornar un array de numeros organizados de mayor a menor", () => { + const orderNum1 = [ + { + num: "172", + name: "pichu", + generation: { + name: "johto", + }, + type: ["electric"], + "spawn-chance": "0", + }, + { + num: "153", + name: "bayleef", + generation: { + name: "johto", + }, + type: ["grass"], + "spawn-chance": null, + }, + { + num: "007", + name: "squirtle", + generation: { + name: "kanto", + }, + type: ["water"], + "spawn-chance": "0.58", + }, + { + num: "004", + name: "charmander", + generation: { + name: "kanto", + }, + type: ["fire"], + "spawn-chance": "0.253", + }, + { + num: "002", + name: "ivysaur", + generation: { + name: "kanto", + }, + type: ["grass", "poison"], + "spawn-chance": "0.042", + }, + { + num: "001", + name: "bulbasaur", + generation: { + name: "kanto", + }, + type: ["grass", "poison"], + "spawn-chance": "0.69", + }, + ]; + expect(order.orderNumber1(dataMock.pokemon)).toEqual(orderNum1); + }); + it("la funcion debe retornar un array de numeros iguales", () => { + const ordenEntrada1 = [ + { + num: "002", + name: "ivysaur", + generation: { + name: "kanto", + }, + type: ["grass", "poison"], + "spawn-chance": "0.042", + }, + { + num: "002", + name: "ivysaur", + generation: { + name: "kanto", + }, + type: ["grass", "poison"], + "spawn-chance": "0.042", + }, + ]; + const ordenSalida1 = [ + { + num: "002", + name: "ivysaur", + generation: { + name: "kanto", + }, + type: ["grass", "poison"], + "spawn-chance": "0.042", + }, + { + num: "002", + name: "ivysaur", + generation: { + name: "kanto", + }, + type: ["grass", "poison"], + "spawn-chance": "0.042", + }, + ]; + expect(order.orderNumber1(ordenEntrada1)).toEqual(ordenSalida1); + }); -describe('anotherExample', () => { - it('is a function', () => { - expect(typeof anotherExample).toBe('function'); + describe("order.orderNumber2", () => { + it("és una funcion", () => { + expect(typeof order.orderNumber2).toBe("function"); + }); }); + it("la funcion debe retornar un array de numeros de menor a mayor", () => { + const order2 = [ + { + num: "001", + name: "bulbasaur", + generation: { + name: "kanto", + }, + type: ["grass", "poison"], + "spawn-chance": "0.69", + }, + { + num: "002", + name: "ivysaur", + generation: { + name: "kanto", + }, + type: ["grass", "poison"], + "spawn-chance": "0.042", + }, + { + num: "004", + name: "charmander", + generation: { + name: "kanto", + }, + type: ["fire"], + "spawn-chance": "0.253", + }, + { + num: "007", + name: "squirtle", + generation: { + name: "kanto", + }, + type: ["water"], + "spawn-chance": "0.58", + }, + { + num: "153", + name: "bayleef", + generation: { + name: "johto", + }, - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); + type: ["grass"], + "spawn-chance": null, + }, + { + num: "172", + name: "pichu", + generation: { + name: "johto", + }, + type: ["electric"], + "spawn-chance": "0", + }, + ]; + expect(order.orderNumber2(dataMock.pokemon)).toEqual(order2); + }); + it("la funcion debe retornar un array numeros iguales", () => { + const ordenEntrada2 = [ + { + num: "002", + name: "ivysaur", + generation: { + name: "kanto", + }, + type: ["grass", "poison"], + "spawn-chance": "0.042", + }, + { + num: "002", + name: "ivysaur", + generation: { + name: "kanto", + }, + type: ["grass", "poison"], + "spawn-chance": "0.042", + }, + ]; + const ordenSalida2 = [ + { + num: "002", + name: "ivysaur", + generation: { + name: "kanto", + }, + type: ["grass", "poison"], + "spawn-chance": "0.042", + }, + { + num: "002", + name: "ivysaur", + generation: { + name: "kanto", + }, + type: ["grass", "poison"], + "spawn-chance": "0.042", + }, + ]; + expect(order.orderNumber2(ordenEntrada2)).toEqual(ordenSalida2); }); }); +describe("spawnCal", () => { + it("es un objeto", () => { + expect(typeof spawnCal).toBe("object"); + }); + describe("spawnPer", () => { + it("es una funcion", () => { + expect(typeof spawnCal.spawnPer).toBe("function"); + }); + }); + it('Debe retorna un porcentaje de aparicion de la posicion [0] que es ("4.32%")', () => { + const respCal = "4.32%"; + expect(spawnCal.spawnPer(dataMock.pokemon[0]["spawn-chance"])).toBe( + respCal + ); + }); +}); \ No newline at end of file diff --git a/test/dataMock.js b/test/dataMock.js new file mode 100644 index 0000000..24577b1 --- /dev/null +++ b/test/dataMock.js @@ -0,0 +1,60 @@ +export const dataMock = { + pokemon: [ + { + num: "001", + name: "bulbasaur", + generation: { + name: "kanto", + }, + type: ["grass", "poison"], + "spawn-chance": "0.69", + }, + + { + num: "002", + name: "ivysaur", + generation: { + name: "kanto", + }, + type: ["grass", "poison"], + "spawn-chance": "0.042", + }, + { + num: "153", + name: "bayleef", + generation: { + name: "johto", + }, + + type: ["grass"], + "spawn-chance": null, + }, + { + num: "172", + name: "pichu", + generation: { + name: "johto", + }, + type: ["electric"], + "spawn-chance": "0", + }, + { + num: "004", + name: "charmander", + generation: { + name: "kanto", + }, + type: ["fire"], + "spawn-chance": "0.253", + }, + { + num: "007", + name: "squirtle", + generation: { + name: "kanto", + }, + type: ["water"], + "spawn-chance": "0.58", + }, + ], +};