Here's one example: My web application contains draggable elements. When dragging an element, the browser produces a "ghost image". I want to remove the "ghost image" when dragging and I write a test for this behaviour.
My problem is that I initially have no idea how to fix this bug and the only way I can write a test is after I have fixed it.
In a simple function such as let sum = (a, b) => a - b
, you can write a test as to why sum(1, 2)
does not equal 3
before writing any code.
In the case I am describing, I can't test, because I don't know what the verification is (I don't know what the assertion should be).
A solution to the problem described is:
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);
I could not have known that this was the solution. I could not even have written the test after finding the solution online, because the only way I could have known if it really worked, was to add this code into my codebase and verify with the browser if it had the desired effect. The test had to be written after the code, which goes against TDD.
What would be the TDD approach to this problem? Is writing the test before the code mandatory or optional?