Aquí hay un ejemplo: mi aplicación web contiene elementos arrastrables. Al arrastrar un elemento, el navegador genera una "imagen fantasma". Quiero eliminar la "imagen fantasma" al arrastrar y escribo una prueba para este comportamiento.
Mi problema es que inicialmente no tengo idea de cómo solucionar este error y la única forma en que puedo escribir una prueba es después de haberlo solucionado.
En una función simple como let sum = (a, b) => a - b, puede escribir una prueba de por qué sum(1, 2)no es igual 3antes de escribir cualquier código.
En el caso que describo, no puedo probar, porque no sé cuál es la verificación (no sé cuál debería ser la afirmación).
Una solución al problema descrito es:
let dataTransfer = e.dataTransfer
let canvas = document.createElement('canvas');
canvas.style.opacity = '0';
canvas.style.position = 'absolute';
canvas.style.top = '-1000px';
dataTransfer.effectAllowed = 'none';
document.body.appendChild(canvas);
dataTransfer.setDragImage(canvas, 0, 0);
No podría haber sabido que esta era la solución. Ni siquiera pude haber escrito la prueba después de encontrar la solución en línea, porque la única forma de saber si realmente funcionaba era agregar este código a mi base de código y verificar con el navegador si tenía el efecto deseado. La prueba tuvo que escribirse después del código, que va en contra de TDD.
¿Cuál sería el enfoque TDD para este problema? ¿Escribir la prueba antes del código es obligatorio u opcional?