Ecco un esempio: la mia applicazione web contiene elementi trascinabili. Quando si trascina un elemento, il browser produce una "immagine fantasma". Voglio rimuovere l'immagine "fantasma" durante il trascinamento e scrivo un test per questo comportamento.
Il mio problema è che inizialmente non ho idea di come correggere questo bug e l'unico modo per scrivere un test è dopo che l'ho risolto.
In una semplice funzione come let sum = (a, b) => a - b , puoi scrivere un test sul motivo per cui sum(1, 2) non è uguale a 3 prima di scrivere qualsiasi codice.
Nel caso che sto descrivendo, non posso testare, perché non so quale sia la verifica (non so quale dovrebbe essere l'asserzione).
Una soluzione al problema descritto è:
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);
Non potevo sapere che questa era la soluzione. Non avrei nemmeno potuto scrivere il test dopo aver trovato la soluzione online, perché l'unico modo in cui avrei potuto sapere se funzionasse davvero, era aggiungere questo codice nella mia base di codice e verificare con il browser se avesse avuto l'effetto desiderato. Il test doveva essere scritto dopo il codice, che va contro TDD.
Quale sarebbe l'approccio TDD a questo problema? Il test è scritto prima del codice obbligatorio o facoltativo?