fix(linear-gradient): sanitize linear gradients so two stops are alwa…

…ys present (#230)

packages/prefabs/src/linear-gradient.ts

@@ -186,4 +186,18 @@ export class LinearGradient extends prefab<LinearGradientData>() {
       end: Point2D.make(x2, y2),
     });
   }
+
+  sanitize (data: LinearGradientData) {
+    if (!data.stops.length) {
+      const stop = GradientStop.make(0, Color.rgb(0, 0, 0));
+      data.stops.push(stop);
+    }
+
+    if (data.stops.length < 2) {
+      const stop = GradientStop.make(1, data.stops[0].color);
+      data.stops.push(stop);
+    }
+
+    return data;
+  }
 }

packages/prefabs/test/linear-gradient.test.ts

@@ -1,5 +1,5 @@
 import {Color} from '../src/color';
-import {LinearGradient, Toward} from '../src/linear-gradient';
+import {GradientStop, LinearGradient, Toward} from '../src/linear-gradient';
 import {Point2D} from '../src/point2d';
 
 describe('linear-gradient', () => {
@@ -93,7 +93,8 @@ describe('linear-gradient', () => {
 
   test('make points static constructor', () => {
     const colors = [
-      Color.hsl(0.25, 1, 0.5),
+      Color.hsl(0, 1, 0.5),
+      Color.hsl(0.5, 1, 0.5),
     ];
     const start = Point2D.make(0, 0);
     const end = Point2D.make(1, 1);
@@ -106,6 +107,89 @@ describe('linear-gradient', () => {
           position: 0,
           color: colors[0].serialize(),
         },
+        {
+          position: 1,
+          color: colors[1].serialize(),
+        },
+      ],
+    });
+  });
+
+  test('make constructor with one color should provide two stops', () => {
+    const color = Color.hsl(0.25, 1, 0.5);
+    const gradient = LinearGradient.make(Toward.Right, color);
+    expect(gradient.serialize()).toEqual({
+      start: Point2D.make(0, 0.5).serialize(),
+      end: Point2D.make(1, 0.5).serialize(),
+      stops: [
+        {
+          position: 0,
+          color: color.serialize(),
+        },
+        {
+          position: 1,
+          color: color.serialize(),
+        },
+      ],
+    });
+  });
+
+  test('make constructor with no colors should provide two stops', () => {
+    const gradient = LinearGradient.make(Toward.Right);
+    expect(gradient.serialize()).toEqual({
+      start: Point2D.make(0, 0.5).serialize(),
+      end: Point2D.make(1, 0.5).serialize(),
+      stops: [
+        {
+          position: 0,
+          color: Color.rgb(0, 0, 0).serialize(),
+        },
+        {
+          position: 1,
+          color: Color.rgb(0, 0, 0).serialize(),
+        },
+      ],
+    });
+  });
+
+  test('initializer should construct a gradient with two stops when 1 stop is provided', () => {
+    const start = Point2D.make(0, 0);
+    const end = Point2D.make(1, 1);
+    const color = Color.hsl(0.25, 1, 0.5);
+    const stops = [GradientStop.make(0, color)];
+    const gradient = new LinearGradient({start, end, stops});
+    expect(gradient.serialize()).toEqual({
+      start: start.serialize(),
+      end: end.serialize(),
+      stops: [
+        {
+          position: 0,
+          color: color.serialize(),
+        },
+        {
+          position: 1,
+          color: color.serialize(),
+        },
+      ],
+    });
+  });
+
+  test('initializer construct a gradient with two stops when 1 stop is provided', () => {
+    const start = Point2D.make(0, 0);
+    const end = Point2D.make(1, 1);
+    const gradient = new LinearGradient({start, end, stops: []});
+    expect(gradient.serialize()).toEqual({
+      start: start.serialize(),
+      end: end.serialize(),
+      stops: [
+        {
+          position: 0,
+          color: Color.rgb(0, 0, 0).serialize(),
+        },
+        {
+          position: 1,
+          color: Color.rgb(0, 0, 0).serialize(),
+        },
       ],
     });
   });