2011-08-07 17 views
5

He estado experimentando con métodos en las últimas semanas tratando de encontrar el mejor método para usar BDD para una aplicación web que se basa en el elemento canvas de HTML5 y la interacción del usuario con él.Integration Testing the Canvas

He estado usando Jasmine and Cucumber with Rspec, para realizar pruebas de especificación e integración de cada parte de mi aplicación, pero ha surgido cualquier intento de integración de prueba del lienzo ... sin éxito. Escribí un plugin de jQuery que maneja la interacción con el lienzo y también lo inicializa.

quería probar Intergration el dibujo real en el lienzo, asegurándose de que cuando se llama algo así como

$("canvas").draw("lineTo", 10, 10) 

en realidad hay una línea creada en el elemento canvas en los puntos (10,10). Esto es lo que ha probado ser changeling, he tratado de usar el método contextual getImageData() en cualquier píxel dibujado. Esto me ha llevado a un agujero, no importa cómo consulto el lienzo obtengo datos de píxeles que representan un píxel transparente negro, que según el MDC dice que estoy consultando el lienzo fuera de contexto.

Esto creo que es un problema con la gema Jasmine con RoR. Si pudiera resolver ese problema, estaría feliz, pero no es la única solución que estoy dispuesto a aceptar. Realmente me gustaría ayudar a pensar en una forma efectiva de probar el lienzo de integración, incluso si no estoy realmente comprobando los datos de píxeles directamente.

Gracias a cualquiera por su ayuda, esto es realmente me ejecuta en un bloque.

Respuesta

3

He escrito una herramienta, js-imagediff, que se integra con Jasmine para probar el lienzo. Puede ver un ejemplo aquí: unit testing canvas with javascript imagediff and jasmine. Avísame si esto es útil.

Sin embargo, utiliza getImageData para hacer la diferencia. ¿Estás recibiendo errores específicos con esa llamada? ¿O tienes un enlace a la página de MDC a la que te refieres?

+0

¿Qué conjunto de coincidencias fresco, la parte difícil estaría produciendo lo que quiere de la tela a prueba contra – austinbv

+0

Así que en mi caso, yo lo uso para pruebas de regresión, en lugar de BDD. Probé una versión estable de un proyecto en comparación con la versión de desarrollo. Para utilizar esto en BDD, se pueden crear pequeñas pruebas dibujando en un lienzo de forma manual y escribiendo un método en el lienzo específico. La única otra opción que conozco es utilizar un lienzo simulado y espías de jazmín. Yo diría que es más intuitivo ver cuál es tu prueba en los versículos esperando que se invoquen ciertos métodos en el contexto del lienzo simulado. – cesutherland

+0

Sí, estoy usando espías atm – austinbv

0

Puede usar Nightwatchjs para esto ... http://nightwatchjs.org/ Tiene una API para interactuar con elementos DOM, pero también es extensible. He escrito algunos ejemplos de comandos y afirmaciones personalizadas que puede usar para probar juegos de Phaser basados ​​en Canvas, pero puede ver cómo se hace y crear sus propias pruebas que ejecutan llamadas a la API de dibujo.

ver algunos ejemplos aquí: https://github.com/hayesmaker/phase-2-e