Aquí hay un ejemplo: Mi aplicación web contiene elementos que se pueden arrastrar. Al arrastrar un elemento, el navegador produce 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 haberla solucionado.
En una función simple como let sum = (a, b) => a - b , puedes escribir una prueba de por qué sum(1, 2) no es igual a 3 antes de escribir cualquier código.
En el caso que estoy describiendo, no puedo realizar la prueba porque no sé qué 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 podría haber escrito la prueba después de encontrar la solución en línea, porque la única forma de saber si realmente funcionó, fue agregar este código en mi código base y verificar con el navegador si tuvo 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?