Esta es la prueba de Diego Sanz para hacer un componente Range partiendo de cero en React.
Este proyecto ha sido creado con Create React App, utilizando Typescript en modo estricto y haciendo uso de Styled Components para la maquetación.
- Clonar el repositorio.
- Cambiarse a la carpeta del proyecto.
- Ejecutar
yarnpara instalar las dependencias.
yarn start: lanza el servidor de desarrollo para poder probar y seguir programando la aplicación.yarn test: ejecuta los test e2e y unitarios. Existen las opcionesyarn test:e2eyyarn test:unitpara ejecutarlos individualmente.yarn build: prepara y optimiza la aplicación para lanzarla en producción.
Para usar el componente sólo hay que importarlo. Sus propiedades son:
value, de tipo{min: number, max: number}: es el valor con el cual se establecería el valor máximo y mínimo seleccionados.options, de tipo{min: number, max: number}para el caso un rango normal ynumber[]para valores fijos. Establece qué valores va a poder tomar el usuario. Si el valor no se establece el componente se quedará en modo deshabilitado.disabled, de tipo booleano. Sirve para deshabilitar el componente. El icono cambia a no permitido y se desabilita que el usuario pueda modificar cualquier valor.unit, de tipostring. Establece el texto de las unidades que está manejando el componente.onChange, función que se ejecuta cuando cambia el valor. Como parámetro envía el valor{min: number, max: number}seleccionado.
Al ser una prueba, y para no extenderla demasiado en el tiempo, se ha optado por no realizar la covertura de test al completo ya que los casos más significativos sí que están testados. Tampoco se ha invertido tiempo en el diseño más allá de la maquetación del componente <Range>.
Leer el apartado Posibles mejoras para más información.
Se ha diseñado con la idea de que ambos valores máximo y mínimo puedan ser iguales, de manera que se filtraría por un número específico.
En el Range que recibe como options valores predefinidos en un array, he optado por que cada valor esté situado en base al 100% del total. De esta forma el valor más pequeño es un 1 y el mayor es un 100, el valor 50 estará situado en la mitad. Al soltar el control este se moverá para ajustarse a su posición.
Se han duplicado y gestionado varios estados en algunos elementos de la app para una mejor experiencia de usuario. Por ejemplo los inputs de texto tienen su propio estado interno ya que así el usuario puede borrar completamente el valor y escribir uno nuevo. El mismo caso es para el porcentaje de desplazamiento de los controles por deslizamiento: el usuario puede mover libremente el control y sólo cuando lo suelta, el control se mueve a su posición indicada.
Se ha optado por un diseño responsive de todo el componente. Por defecto ocupa el 100% del ancho y será su contenedor el encargado de limitar su tamaño. Los campos de texto también han sido diseñados para adaptarse al tamaño del texto que contienen. Además, se puede cambiar el tamaño de la ventana en cualquier momento sin que los valores se vean afectados o sin que haya que hacer recálculos internos.
Si este diseño no fuera el adecuado, se podría modificar facilmente dando un ancho con CSS a la clase .range para dárselo a todo el componente o a .range__bar para dárselo a la parte deslizable sin contar los inputs de texto.
Como se sugería en el PDF de la prueba, he usado la web de mokable para crear la API. En caso de que los endpoints no estén disponibles se detalla su respuesta a continuación:
{"min": 1, "max": 100}{
"values": [1.99, 5.99, 10.99, 30.99, 50.99, 70.99]
}- Sólo se han hecho test E2E con Puppeteer probando los conceptos más relevantes. Se podría extender para probar otras combinaciones de manipulación del range, probar el ejercicio 2, etcétera, pero en esencia sería lo mismo que los test ya creados.
- Poner un control
pre-commitcon Husky para realizar los test y verificar que siempre se suben cambios testados al repositorio. - Añadir un storybook para poder añadirlo a nuestro catálogo de componentes.