Cuando hackeas en el núcleo de Blockly o desarrollas un complemento, el área de pruebas es una herramienta muy útil. Tiene una instancia preconfigurada de Blockly que puedes usar para pruebas, depuración o creación de prototipos. En Google, prácticamente todo el desarrollo de Blockly se realiza con el área de pruebas. Como vista previa, aquí tienes el campo de pruebas simple en el servidor de demostración.
Existen 3 tipos de zonas de pruebas para Blockly principal: simple, avanzada y múltiple. En blockly-samples, por lo general, solo se usa el campo de pruebas avanzado.
Requisitos previos
Blockly ahora usa el sistema de módulo de Cierre. Debido a la forma en que se cargan, los módulos de Closure sin compilar deben obtenerse de una URL de http: o https: y no se pueden obtener directamente de las URLs de file:. Por lo tanto, para cargar el campo de pruebas en modo sin compilar, debes hacerlo desde un servidor web local.
Creamos una secuencia de comandos que inicia un servidor local y carga todo el código necesario para cargar los módulos de Blockly. Deberás tener
npm instalado en tu máquina
y ejecutar npm install desde la raíz de Blockly para instalar todas
las dependencias.
Cómo usar Internet Explorer
Blockly ahora usa funciones avanzadas en su base de código que pueden no ser compatibles con Internet Explorer. En el código comprimido (compilado), estas funciones se transpilan para funcionar con IE, pero es posible que no funcione la carga del código no comprimido. Si cargas el campo de pruebas en IE, incluso a través de un servidor HTTP local, el campo de pruebas cargará automáticamente el código comprimido de Blockly para garantizar la compatibilidad. Consulta la sección "Cómo acceder a los espacios de pruebas directamente" para obtener más detalles sobre cómo probar cambios en el espacio de pruebas en modo comprimido.
Simple Playground
Las otras dos zonas de juegos se basan en la zona de juegos simple. Muestra una caja de herramientas y un espacio de trabajo, y te permite ajustar una cantidad limitada de parámetros de configuración.
Para abrir el Playground, ejecuta
npm run start
desde la raíz de Blockly. Asegúrate de que no haya nada más escuchando en el puerto 8080. Este comando iniciará un servidor que alojará los módulos de Blockly y abrirá automáticamente tu navegador en la página del área de pruebas. Cuando tengas todo listo para cerrar el campo de pruebas, finaliza el proceso (Ctrl + C en entornos de Mac y Linux).
El campo de pruebas incluye lo siguiente:
- Todo el código está descomprimido para lograr un desarrollo rápido.
- Todos los bloques predeterminados (excepto algunos que están obsoletos)
- Todos los generadores de lenguajes (JavaScript, Python, PHP, Lua y Dart)
- Serializa y deserializa el estado del lugar de trabajo (JSON o XML).
- Cambia entre el diseño de LTR y RTL.
- Cambiar entre diseños de la caja de herramientas
- Pruebas de esfuerzo para el renderizador
- Registrar todos los eventos en la consola
Zona de juegos avanzada
El campo de pruebas avanzado contiene funciones adicionales para facilitar aún más la depuración de Blockly. Este también es el campo de pruebas predeterminado que se usa en blockly-samples para todos los complementos.
Este parque infantil cuenta con todas las funciones simples de los parques infantiles, además de lo siguiente:
- Se pueden configurar parámetros adicionales, como el tamaño de la cuadrícula, los controles de zoom o movimiento, el renderizador, el tema y mucho más.
- La configuración y los bloques utilizados se almacenan en caché y se usan automáticamente la próxima vez que se carga el campo de pruebas.
- Consulta el resultado de cada generador en la misma ventana.
Para iniciar el campo de pruebas avanzado de cualquier complemento en blockly-samples, ejecuta npm run
start desde el directorio raíz del complemento. Actualmente, solo se puede ejecutar un complemento a la vez, y usa el puerto 3000. Si tienes problemas para iniciar el complemento, primero asegúrate de que no haya nada más escuchando en ese puerto.
Para iniciar el campo de pruebas avanzado en el núcleo, ejecuta npm run start desde la raíz de Blockly y, luego, haz clic en el vínculo "Avanzado" debajo del título.
También puedes crear tu propia página de prueba que incluya la zona de pruebas avanzada mediante el paquete de herramientas para desarrolladores de Blockly.
Zona de juegos múltiple
El área de juegos múltiple contiene varias áreas de juegos con diferentes configuraciones para el modo LTR y la ubicación de la caja de herramientas. Se usa principalmente para verificar rápidamente que Blockly no haya dañado ningún elemento relacionado con LTR antes de un lanzamiento. Para abrir esta zona de pruebas, sigue los pasos de la zona de pruebas simple y, luego, cambia la URL a /tests/multi_playground.html.
Prueba los cambios
Cuando ejecutas cualquiera de los espacios de pruebas desde un servidor local, todo lo que debes hacer para ver los cambios en Blockly en la mayoría de los casos es actualizar la página. Si agregaste un archivo nuevo o una dependencia nueva a un archivo, es posible que debas ejecutar primero npm run
build, que actualizará el archivo test/deps.js para garantizar que las dependencias se carguen correctamente y, luego, actualizar la página.
Si ejecutas el campo de pruebas avanzado de un complemento, ni siquiera es necesario que actualices la página. Los cambios se cargan automáticamente.
Cómo acceder a los playgrounds directamente
Anteriormente, se podía acceder al campo de pruebas simple de forma local navegando directamente al archivo test/playground.html en el navegador. Esto aún es posible con los
simulacros simples y múltiples, pero ya no se recomienda. Si lo haces,
el campo de pruebas detectará que no estás ejecutando un servidor local y
usará automáticamente archivos Blockly comprimidos (consulta la
página Building Blockly para obtener más información). Además, cada vez que cambies algo en el núcleo de Blockly, deberás
reconstruir el núcleo y preparar los cambios. Podrás acceder a estas páginas si se alojan en un servidor remoto, como nuestro ejemplo alojado en nuestro sitio de demostración. El fondo será de color azul brillante cuando estés en modo comprimido.
El campo de pruebas avanzado no está disponible a través del acceso de file:.