- ¿Qué es esto?
- Instalación e inicialización de la aplicación
- Demostración de la aplicación corriendo
- Pruebas Realizadas
- Tecnologías Utilizadas
- Licencia
Un desafío para poder comprobar habilidades relacionadas al desarrollo web frontend. Propuesto por Ticmas(Vi-Datec).
Las especificaciones y requerimientos se encuentra en el siguiente archivo:
Los siguientes pasos son para clonarlo y revisar localmente el proyecto:
- En tu consola favorita coloca (necesitaras tener Git instalado):
git clone https://github.com/PeterDamianG/ChallengeTicmas.git
- En el lugar donde lo hayas descargado, nos movemos al directorio:
cd ChallengeTicmas
- El siguiente paso consiste en instalar todas las dependencias del desarrollo (si no has usado con anterioridad Playwright puede llegar a demorar bastante):
npm install
- Antes de poder levantar el proyecto en modo de desarrollo, debemos configurar obligatoriamente una variable de entorno:
Nos dirigiremos al archivo de configuración de entorno llamado "env.example", eliminamos su extensión, dejándolo como "env" y dentro veremos:
REACT_APP_API_URL=https://api.themoviedb.org/3/search/movie?api_key=
REACT_APP_API_IMG=https://image.tmdb.org/t/p/w200/
REACT_APP_API_KEY=
REACT_APP_LIMIT_SEARCH=6
En la línea "REACT_APP_API_KEY", debemos escribir nuestra API KEY quedando por ejemplo de la siguiente manera:
REACT_APP_API_KEY=a131415bc3dafd1f2058dd2568376fd1
Aclaración: Esa API KEY es inventada, necesitas obtener la tuya propia desde The-Movie-DB.
- Después de obtener una KEY valida podremos levantar el app en modo desarrollo para observarla con el siguiente comando:
npm start
La aplicación comenzara a funcionar en LocalHost.
Estás son algunas imágenes del proyecto corriendo:
Para la realización de pruebas unitarias e integración, se utilizo Jest y como complemento TestingLibrary. Con los siguientes comandos correremos la batería de pruebas:
Este comando correrá los archivos con extensión *.test.{ts,tsx,js,jsx} entre otros, pero esos son los que nos interesan. Ya que son toda la batería de pruebas de nuestro proyecto. La siguiente es una imagen del resultado:
Este comando generara una carpeta llamada "coverage" la cual contendrá una visión de la cantidad del proyecto que actualmente se encuentra cubierta por pruebas. Luego de recorrer toda la batería de pruebas, se mostrará el resultado por consola:
En caso de ya haber corrido el anterior comando, también tenemos la opción de ver la cobertura de las pruebas de una manera más amigable. Esto abrirá nuestro navegador con lo siguiente:
Aclaración: Solo se busco obtener un porcentaje por encima de 75%, lo cual se considera bueno. No estaba en el objetivo optimizar hasta lo más cercano a 100%.
Para la realización de pruebas e2e, se utilizo Playwright. Con el siguiente comando correremos la batería de pruebas:
Este comando levantará por si mismo en modo de desarrollo la aplicación y realizará las pruebas pertinentes. En caso de ya nosotros tener la aplicación corriendo, generara conflicto y nos responderá con errores. Este es el resultado final que veremos en consola:
Advertencia: Se crearan imágenes y videos de los resultados en la carpeta "test-results".
Este comando nos abrirá en nuestro navegador, una forma más amigable de revisar los resultados de las pruebas e2e. Como se muestra en la siguiente imagen:
