Clase 21 de 34 • Curso Intermedio de Ruby on Rails
Contenido del curso
Curso Intermedio de Ruby on Rails: Migración y Optimización Avanzada
Migración de Rails a MongoDB con Mongoid y Pruebas Automatizadas
Gestión de Múltiples Versiones de MongoDB en Linux
Migración de Rails a MongoDB con Mongoid: Configuración Inicial
Migración de Modelos de Active Record a Mongoid
Migración completa de aplicaciones con MongoDB y Rails
Pruebas Automatizadas: Introducción a TDD y BDD en Desarrollo de Software
Creación de Fábricas Automatizadas con FactoryBot y Faker en Rails
Integración de Librerías para Pruebas Automatizadas en Rails
Pruebas de Modelos en Rails con Mongoid y RSpec
Pruebas de Validación y Guardado en Modelos Rails
Validación y Pruebas de Modelos en Ruby on Rails
Pruebas de Integración en Rails: Configuración y Ejecución Básica
Creación y prueba de tareas con métodos POST en Rails
Automatización de Pruebas con Headless Browser y Capybara en Rails
Pruebas de Sistema con KPIBara y WebDriver en Rails
Automatización de Pruebas de Sistema con Selenium y JavaScript
Envío de Emails Automático al Crear Tareas
Introducción a Service Objects en Ruby on Rails
Pruebas de TDD para Service Object de Notificaciones por Correo
Creación de Service Objects para Envío de Correos en Ruby on Rails
Procesos en Background con Sucker Punch en Rails
Pruebas con Doubles en Rails usando Sucker Punch
Máquinas de Estado Finito: Conceptos y Aplicaciones Prácticas
Creación de Máquinas de Estados con AASM en Ruby on Rails
Creación de Service Object para Gestión de Estados de Tareas en Rails
Acciones de Controlador y Pruebas en Ruby on Rails
Integración de AJAX en Gestión de Estados de Tareas en Ruby on Rails
Si estás trabajando con formularios en tus proyectos web, es probable que hayas considerado cómo mejorar la experiencia del usuario al seleccionar elementos en listas desplegables. Selectize es una excelente herramienta para lograrlo, ya que convierte los selectores tradicionales en opciones más dinámicas e interactivas. En este artículo, exploraremos cómo integrar Selectize cuando trabajamos con formularios de tareas utilizando la gema Kokoon y cómo ajustar las pruebas para mantenerlas válidas.
El primer paso consiste en identificar el momento adecuado para aplicar Selectize. En este caso, esperamos el evento de inserción de un nuevo archivo gracias a Kokoon, que nos proporciona un callback 'before insert'. Es importante definir un contenedor en HTML donde se integrarán los elementos anidados.
En el código, esto se podría realizar de la siguiente manera:
$(document).on('cocoon:before-insert', '#contenedor', function(e, insertedItem) {
insertedItem.find('select').selectize();
});
Aquí, '#contenedor' es el lugar en nuestro HTML que alberga los nuevos elementos. Asegúrate de conocer qué contenedor en tu HTML cumple esta función.
Una vez definido el callback, debemos asegurarnos de que nuestros elementos selectivos tengan la clase selectize para que la función que hemos creado los reconozca. En tu archivo parcial para el formulario, debes asegurarte de incluir esta clase:
<select class="selectize" name="usuario_id"></select>
<select class="selectize" name="rol_id"></select>
Estas clases aseguran que nuestros selectores serán mejorados con Selectize cuando el evento de inserción ocurra.
Cuando integramos Selectize, podemos enfrentar desafíos en nuestras pruebas, principalmente debido a la incompatibilidad con herramientas como Capybara que no manejan bien elementos ocultos o reestructurados por Selectize. Hay varias estrategias para superar este obstáculo, una de ellas es mediante la ejecución de scripts que simulan las interacciones necesarias:
page.execute_script("$('select#task_category_id')[0].selectize.setValue('valor')")
En este ejemplo, el script se inyecta para definir un valor en un select que ha sido mejorado con Selectize. Utilizamos el método setValue provisto por la API de Selectize.
Los formularios anidados generan IDs aleatorios que complican la identificación de elementos específicos. Una solución es usar clases adicionales para cada elemento selectivo. Esto permite usar selectores de clases en lugar de IDs:
document.querySelector(".class-name").selectize.setValue('valor');
Esto asegura una mayor precisión sin depender de los IDs generados dinámicamente.
Las combinaciones de tecnologías, como JavaScript y Capybara, pueden generar conflictos en el flujo de trabajo, pero son valiosas para mejorar la experiencia del usuario. Capybara ofrece simulaciones precisas del navegador, pero es necesario adaptar las pruebas para dinámicas nuevas como las presentadas por Selectize. En este sentido, integrar scripts y comprobar su ejecución correcta es crucial.
Este proceso que acabamos de seguir no solo mejora la interfaz y la experiencia del usuario con los formularios de tareas, sino que también refuerza la importancia de las pruebas para garantizar la funcionalidad del sistema. Así que, ¡no te desanimes ante nuevos desafíos y busca siempre mejorar la calidad de tus desarrollos!