Mastering React Test-Driven Development

Isolating components for animation

There are two parts to this animation:

• First, there's a movement animation that occurs when lines are being drawn. Say, for example, that the user has entered forward 100 as an instruction. We want the turtle to move slowly 100 units along, at a given speed. As it moves, it will draw the line behind it.
• The second animation is turtle rotation. The turtle does not turn instantly; if the user types rotate 90 then the turtle should rotate slowly until it has made a quarter turn.

The code we'll write is relatively complicated, so we need to do some up-front design first.