Calendario personal para tus eventos de la semana! 📆 ✅
- Los eventos son generados a partir de un archivo JSON que actúa a modo de API
- Los nuevos eventos creados se almacenan en el LocalStorage, por medio de convertir el JSON en un string. Este string es luego reconvertido a JSON y leÃdo para generar las casillas de evento. También es posible modificar o cancelar eventos.
- Se detecta si es la primera visita del usuario por medio de la lectura de su LocalStorage, y se le muestra un cartel de instrucciones si lo es.
- Incluye tanto tests de interfaz (Cypress) como unitarios (Jest)
A fin de correr la aplicación, es necesario disponer de las siguientes herramientas:
- IDE de preferencia
- Node
Será necesario, para comenzar, descargar o clonar el repositorio en el que se encuentra en este momento. Para ello, deberá clickear el botón verde "Clone or download".
Si prefiere descargarlo, simplemente deberá clickear en la opcion "Download ZIP". Y luego extrar el archivo en la dirección de su preferencia.
Si, por otro lado, prefiere clonarlo, puede hacer uso de software como Github Desktop. En este caso, copie el URL presentado al clikear el boton verde. Luego abra Github Desktop y dirÃjase a la opción "File" de la barra superior, elija la opción "Clone Repository" en el menú. Este proceso puede llevarse a cabo con Ctrl+Shift+O.
Se le presentará una ventana en la que deberá clickear la opción "URL". Allà podrá pegar el URL del repositorio y decidir una dirección en la que clonarlo.
Para este paso será necesario tener acceso a las herramientas mencionadas en el apartado REQUISITOS, por favor asegúrese de que dispone de ellas.
Tras abrir la carpeta del repositorio con su IDE de preferencia, abra una nueva terminal/consola. Allà tipee el siguiente comando:
npm install
La aplicación necesita de un servidor para funcionar. Para levantar uno, tipee el siguiente comando en la terminal:
npm run server
Por favor asegúrese de no cerrar la terminal. Si lo hace, la aplicación no podrá correrse.
Visite el sitio localhost:8080/index.html
en su navegador. Al hacerlo, deberÃa ver lo siguiente:
Si el calendario no muestra eventos al iniciarse, asegúrese de que su Local Storage esté vacÃo. Para vaciarlo, puede seguir estos pasos:
- Presione F12. Aparecerá ante usted la consola.
- Si desea, puede escribir allÃ
localStorage.clear()
y presionar enter. - Si prefiere no llevar a cabo el paso anterior, dirÃjase a la pestaña "Application" y busque allà la opción "Clear Storage", clickeela.
Para realizar los tests de interfaz, hice uso de Cypress.
Con el servidor levantado, abra otra terminal y tipee el comando:
npm run cypress:open
Esto deberÃa abrir Cypress, de modo que aparecerá la siguiente ventana:
Clickee en la opción resaltada ("Run all specs").
Con el servidor levantado, abra una terminal y tipee el comando:
npm run cypress:run
Los resultados de los tests se mostrarán en la terminal. Al finalizar los testeos, puede dirigirse a la carpeta './cypress/videos'. Allà encontrará videos donde podrá ver como se llevó a cabo el testeo.
Para realizar los tests unitarios, hice uso de Jest.
Para correr Jest normalmente, tipee el siguiente comando en la terminal:
npm run test
Para que Jest le brinde un informe con los porcentajes de código que los testeos han cubierto, puede utilizar en la terminal el comando:
npm run test-coverage