Aqui está um exemplo: Meu aplicativo Web contém elementos arrastáveis. Ao arrastar um elemento, o navegador produz uma "imagem fantasma". Quero remover a "imagem fantasma" ao arrastar e escrevo um teste para esse comportamento.
Meu problema é que inicialmente não tenho idéia de como corrigir esse bug e a única maneira de escrever um teste é depois de corrigi-lo.
Em uma função simples como let sum = (a, b) => a - b, você pode escrever um teste para saber por sum(1, 2)que não é igual 3antes de escrever qualquer código.
No caso que estou descrevendo, não posso testar, porque não sei qual é a verificação (não sei qual deve ser a afirmação).
Uma solução para o problema descrito é:
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);
Eu não poderia saber que essa era a solução. Eu não poderia nem ter escrito o teste depois de encontrar a solução on-line, porque a única maneira de saber se ela realmente funcionava era adicionar esse código à minha base de código e verificar com o navegador se tinha o efeito desejado. O teste teve que ser escrito após o código, que vai contra o TDD.
Qual seria a abordagem TDD para esse problema? Escrever o teste antes do código é obrigatório ou opcional?