Building an animated line component

In this section, we’ll create a new AnimatedLine component.

This component contains no animation logic itself but, instead, draws a line from the start of the line being animated to the current turtle position. Therefore, it needs two props: commandToAnimate, which would be one of the drawLine command structures shown previously, and the turtle prop, containing the position.

Let’s begin:

1. Create a new file, test/AnimatedLine.test.js, and prime it with the following imports and describe block setup. Notice the inclusion of the sample instruction definition for horizontalLine:

   import React from "react";
   import ReactDOM from "react-dom";
   import {
     initializeReactContainer,
     render,
     element,
   } from "./reactTestExtensions";
   import { AnimatedLine } from "../src/AnimatedLine";
   import { horizontalLine } from "./sampleInstructions";
   const turtle ...