Pregunta Prueba de Javascript que manipula el DOM


He estado buscando suites de prueba de JavaScript y he encontrado QUnit ser muy interesante Entiendo cómo probar el código computacional, pero ...

¿Cómo se prueban las aplicaciones javascript escritas principalmente para la manipulación DOM?

parece que probar la posición / color / etc. de los elementos DOM sería un punto discutible porque terminarías haciendo algo así:

$("li.my_element").css("background-color", "#f00");

y luego en tu prueba ...

$(function() {
    module("coloring");
    test("test_my_element", function() {
        var li_element_color = $("li.my_element").css('background-color');
        equals(li_element_color, "#f00");
    });
});

esto simplemente no se siente bien porque básicamente solo hace esto:

var my_li= $("li.my_element");
my_li.css("background-color", "#f00");
if ( my_li.css("background-color") == "#f00" ) {
    return true;
}

¿Estoy loco? ¿Cómo se supone que se hará esto?

editar: el corazón de la pregunta:

Creo que a lo que me refiero es a que necesito asegurarme de que el código no se rompa antes de implementarlo, pero la gran mayoría son UI helpers y ajax. ¿Cómo pruebo que las cosas están apareciendo correctamente?

Algunos ejemplos:

  • probar que un cuadro de diálogo de IU de JQuery aparece sobre todos los demás elementos
  • probar que el arrastrar y soltar funciona correctamente
  • prueba que el color de un droppable cambia cuando un elemento cae sobre él
  • probar que el ajax está funcionando correctamente
  • prueba que no hay comas extrañas que rompan IE

32
2017-09-16 19:38


origen


Respuestas:


He encontrado que las pruebas Javascript / DOM, especialmente para las interacciones simples que describes, no son tan útiles. Comprobará que las cosas estén configuradas correctamente, y como jQuery es tan declarativo, sus pruebas se parecen mucho a su código.

Mi opinión actual es que si está escribiendo componentes JS más grandes, tiene sentido extraer un conjunto de comportamientos interrelacionados en un plugin jQuery y un conjunto de pruebas para él.

Pero de los ejemplos que mencionó, parece que realmente está buscando un nivel de protección dentro de su sitio web integrado. Una herramienta como el Selenio probablemente sea más poderosa y apropiada para ti. En particular,

  • puede ser automatizado
  • puede ejecutarse contra múltiples navegadores, incluido IE
  • se ejecuta dentro del contexto de su aplicación web y páginas, por lo que puede probarse drag-n-drop donde realmente sucede en lugar de en algún entorno de prueba.
  • AJAX puede ser probado

16
2017-09-19 03:58



En lugar de probar la función JQuery css. Su prueba debe simular la función css y asegurarse de que se invoque solo una vez con el color correcto. El código probado debe ser tuyo, no los marcos.


12
2017-09-17 14:00



Además de lo que Jason Harwig está diciendo, diría que las pruebas unitarias son una prueba para garantizar que el código se ejecute como se espera. Si quieres probar eso, entonces Jason tiene toda la razón sobre cómo debes hacerlo. Si quiere ejecutar pruebas para verificar que la manipulación del DOM está ocurriendo (prueba de UI) y no el código real que está haciendo la manipulación del DOM (prueba de unidad), entonces es posible que desee comprobar algo como Selenio, WatiN o Watir.


3
2017-09-17 14:09



Supongo que muchas personas prueban visualmente: es decir, miran la salida de su navegador en su monitor, para ver si miradas al igual que el DOM fue manipulado como se esperaba.

Si es necesario que sea un caso de prueba automatizado (por ejemplo, para pruebas de regresión), tal vez graben la salida (como la captura de pantalla) y hagan algo así como comparar dos capturas de pantalla para ver si los resultados son los mismos.

En lugar de capturar una captura de pantalla, puede capturar todo el DOM y hacer una comparación lado a lado de los árboles DOM capturados (que podría ser menos propenso a errores que la comparación de píxeles).


1
2017-09-16 20:02



Pruebo AJAX cosas como esta:

  1. Haga la llamada AJAX
  2. Configurar un temporizador de JavaScript
  3. Comprueba el DOM para ver si se han producido los cambios esperados

Ahora bien, es posible que la llamada AJAX no haya regresado antes de que realice su verificación, pero esta también es información de prueba útil; con una llamada AJAX, hay (por lo general) algún tiempo después del cual lo llamaríamos un error. Como ejemplo, si estamos haciendo una sugerencia emergente y tardamos 30 segundos en regresar, es un error.


0
2017-12-18 12:45