Mastering React Test-Driven Development

Extracting out StaticLines

The Git tag for this section is animation.

The current Drawing component already draws a set of lines. Our first job is to extract that into its own component, named StaticLines.

1. The test suite for the Drawing component contains a set of sample lines. These will be useful in the StaticLines test suite too, so let's extract them now. Create a new file named test/sampleLines.js and add the following content:

export const horizontalLine = {  drawCommand: 'drawLine',  id: 123,  x1: 100,  y1: 100,  x2: 200,  y2: 100};export const verticalLine = {  drawCommand: 'drawLine',  id: 234,  x1: 200,  y1: 100,  x2: 200,  y2: 200};export const diagonalLine = {  drawCommand: 'drawLine',  id: 235,  x1: 200,  y1: 200,  x2: 300,  y2: 300};

2. In ...