Implementación Selectize en Formularios Dinámicos con Kokoon y CafeScript

Contenido del curso

Introducción

Pruebas

Interacción dinámica

Notificaciones

Ciclos de vida

Cierre

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0014:50

Implementación Selectize en Formularios Dinámicos con Kokoon y CafeScript

Curso Intermedio de Ruby on Rails

Clase 21 de 34

Clase 21 / 34

Recursos

¿Cómo integrar Selectize con formularios dinámicos?

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.

¿Cómo transformar un select tradicional en un Selectize?

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.

¿Cómo añadir la clase Selectize en el HTML?

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.

Ejecución de pruebas con Selectize

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.

¿Qué hacer con los IDs dinámicos?

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.

Importancia de las pruebas posteriores a la integración

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!

Resumen

¿Cómo integrar Selectize con formularios dinámicos?

¿Cómo transformar un select tradicional en un Selectize?

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.

¿Cómo añadir la clase Selectize en el HTML?

<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.

Ejecución de pruebas con Selectize

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.

¿Qué hacer con los IDs dinámicos?

document.querySelector(".class-name").selectize.setValue('valor');

Esto asegura una mayor precisión sin depender de los IDs generados dinámicamente.

Importancia de las pruebas posteriores a la integración

Introducción

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

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

Interacción dinámica

Uso de CoffeeScript con Rails y Webpacker: Integración y Ejemplos

Integración de Selectize con RAILs y Webpacker

Formularios Anidados en Rails: Uso de Simple Form y Cocoon

Implementación Selectize en Formularios Dinámicos con Kokoon y CafeScript

Notificaciones

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

Ciclos de vida

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

Cierre

Optimización de rendimiento en aplicaciones web con Ruby on Rails

Migración y Pruebas Automatizadas en Ruby on Rails

Implementación Selectize en Formularios Dinámicos con Kokoon y CafeScript