Mastering React Test-Driven Development

Building an AnimatedLine component

The Git tag for this section is animated-line-component.

This component is straightforward: we will pass to it the line to be drawn and the current turtle position. Rather than drawing the line from x1,y1 to x2,y2 as we do with StaticLines for an animating line, we'll draw it from x1,y1 to the current turtle position. The turtle position will move at a constant speed from the x1,y1 coordinate until it reaches the x2,y2 co-ordinate, drawing a line behind it:

1. Create a new file, test/AnimatedLine.test.js, and prime it with the following imports and describe the block setup. This is very similar to what we just did for StaticLines. The main difference is that we're passing in a new turtle prop:

import React ...