add tests for input keyframe type checks

Author: g-harel

internal/animate/testing/script.ts

@@ -259,7 +259,11 @@ const loopBetween = (percentage: number, a: Point[], b: Point[]): Point[] => {
     }
 };
 
-const genAnimation = (speed: number, offset: number, timing: blobs2Animate.CanvasKeyframe["timingFunction"]) => {
+const genAnimation = (
+    speed: number,
+    offset: number,
+    timing: blobs2Animate.CanvasKeyframe["timingFunction"],
+) => {
     const animation = blobs2Animate.canvasPath();
 
     const loopAnimation = () => {

internal/errors.ts

@@ -3,7 +3,8 @@ export const error = (message: string) => {
 };
 
 export const typeCheck = (name: string, val: any, expected: string[]) => {
-    const actual = typeof val;
+    let actual: string = typeof val;
+    if (actual === "number" && isNaN(val)) actual = "NaN";
     if (!expected.includes(actual)) {
         error(`"${name}" should have type "${expected.join("|")}" but was "${actual}".`);
     }

internal/gen.ts

@@ -28,14 +28,14 @@ export const genBlob = (pointCount: number, offset: () => number): Point[] => {
 };
 
 export const genFromOptions = (blobOptions: BlobOptions): Point[] => {
-    const rgen = rand(String(blobOptions.seed));
-
     typeCheck("blobOptions", blobOptions, ["object"]);
     typeCheck("seed", blobOptions.seed, ["string", "number"]);
     typeCheck("extraPoints", blobOptions.extraPoints, ["number"]);
     typeCheck("randomness", blobOptions.randomness, ["number"]);
     typeCheck("size", blobOptions.size, ["number"]);
 
+    const rgen = rand(String(blobOptions.seed));
+
     // Scale of random movement increases as randomness approaches infinity.
     // randomness = 0   -> rangeStart = 1
     // randomness = 2   -> rangeStart = 0.8333

package.json

@@ -42,7 +42,8 @@
     "blob",
     "svg",
     "path",
-    "canvas"
+    "canvas",
+    "animation"
   ],
   "prettier": {
     "tabWidth": 4,

public/animate.test.ts

@@ -0,0 +1,174 @@
+import {canvasPath, CanvasKeyframe} from "./animate";
+
+const genKeyframe = (): CanvasKeyframe => ({
+    duration: 1000 * Math.random(),
+    delay: 1000 * Math.random(),
+    timingFunction: "linear",
+    callback: () => {},
+    blobOptions: {
+        extraPoints: Math.floor(10 * Math.random()),
+        randomness: Math.floor(10 * Math.random()),
+        seed: Math.random(),
+        size: 100 + 200 * Math.random(),
+    },
+    canvasOptions: {
+        offsetX: 100 * Math.random(),
+        offsetY: 100 * Math.random(),
+    },
+});
+
+describe("animate", () => {
+    describe("canvasPath", () => {
+        describe("transition", () => {
+            describe("keyframe", () => {
+                // TODO test for errors in the nth keyframe.
+                it("should accept minimal generated keyframe", () => {
+                    const animation = canvasPath();
+                    const keyframe = genKeyframe();
+
+                    expect(() => animation.transition(keyframe)).not.toThrow();
+                });
+
+                interface TestCase {
+                    test: string;
+                    edit: (keyframe: CanvasKeyframe) => void;
+                    error?: RegExp;
+                }
+
+                const testCases: Array<TestCase> = [
+                    {
+                        test: "should accept valid duration",
+                        edit: (keyframe) => (keyframe.duration = 100),
+                    },
+                    {
+                        test: "should accept zero duration",
+                        edit: (keyframe) => (keyframe.duration = 0),
+                    },
+                    {
+                        test: "should reject undefined duration",
+                        edit: (keyframe) => delete keyframe.duration,
+                        error: /duration.*number.*undefined/g,
+                    },
+                    {
+                        test: "should reject negative duration",
+                        edit: (keyframe) => (keyframe.duration = -10),
+                        error: /duration.*invalid/g,
+                    },
+                    {
+                        test: "should reject broken duration",
+                        edit: (keyframe) => (keyframe.duration = NaN),
+                        error: /duration.*number.*NaN/g,
+                    },
+                    {
+                        test: "should reject invalid duration",
+                        edit: (keyframe) => (keyframe.duration = "123" as any),
+                        error: /duration.*number.*string/g,
+                    },
+                    {
+                        test: "should accept valid delay",
+                        edit: (keyframe) => (keyframe.delay = 200),
+                    },
+                    {
+                        test: "should accept zero delay",
+                        edit: (keyframe) => (keyframe.delay = 0),
+                    },
+                    {
+                        test: "should accept undefined delay",
+                        edit: (keyframe) => delete keyframe.delay,
+                    },
+                    {
+                        test: "should reject negative delay",
+                        edit: (keyframe) => (keyframe.delay = -10),
+                        error: /delay.*invalid/g,
+                    },
+                    {
+                        test: "should reject broken delay",
+                        edit: (keyframe) => (keyframe.delay = NaN),
+                        error: /delay.*number.*NaN/g,
+                    },
+                    {
+                        test: "should reject invalid delay",
+                        edit: (keyframe) => (keyframe.delay = "123" as any),
+                        error: /delay.*number.*string/g,
+                    },
+                    {
+                        test: "should accept known timingFunction",
+                        edit: (keyframe) => (keyframe.timingFunction = "ease"),
+                    },
+                    {
+                        test: "should accept undefined timingFunction",
+                        edit: (keyframe) => delete keyframe.timingFunction,
+                    },
+                    {
+                        test: "should reject invalid timingFunction",
+                        edit: (keyframe) => (keyframe.timingFunction = (() => 0) as any),
+                        error: /timingFunction.*string.*function/g,
+                    },
+                    {
+                        test: "should reject unknown timingFunction",
+                        edit: (keyframe) => (keyframe.timingFunction = "unknown" as any),
+                        error: /timingFunction.*not recognized.*unknown/g,
+                    },
+                    {
+                        test: "should accept valid callback",
+                        edit: (keyframe) => (keyframe.callback = () => console.log("test")),
+                    },
+                    {
+                        test: "should accept undefined callback",
+                        edit: (keyframe) => delete keyframe.callback,
+                    },
+                    {
+                        test: "should reject invalid callback",
+                        edit: (keyframe) => (keyframe.callback = {} as any),
+                        error: /callback.*function.*object/g,
+                    },
+                    // TODO complete blobOptions type tests, should be the same as non-animated.
+                    {
+                        test: "should reject undefined blobOptions",
+                        edit: (keyframe) => delete keyframe.blobOptions,
+                        error: /blobOptions.*object.*undefined/g,
+                    },
+                    {
+                        test: "should accept empty canvasOptions",
+                        edit: (keyframe) => (keyframe.canvasOptions = {}),
+                    },
+                    {
+                        test: "should accept undefined canvasOptions",
+                        edit: (keyframe) => delete keyframe.canvasOptions,
+                    },
+                    {
+                        test: "should accept undefined canvasOptions offsetX",
+                        edit: (keyframe) => delete keyframe.canvasOptions?.offsetX,
+                    },
+                    {
+                        test: "should reject broken canvasOptions offsetX",
+                        edit: (keyframe) => (keyframe.canvasOptions = {offsetX: NaN}),
+                        error: /canvasOptions.*offsetX.*number.*NaN/g,
+                    },
+                    {
+                        test: "should accept undefined canvasOptions offsetY",
+                        edit: (keyframe) => delete keyframe.canvasOptions?.offsetY,
+                    },
+                    {
+                        test: "should reject broken canvasOptions offsetY",
+                        edit: (keyframe) => (keyframe.canvasOptions = {offsetY: NaN}),
+                        error: /canvasOptions.*offsetY.*number.*NaN/g,
+                    },
+                ];
+
+                for (const testCase of testCases) {
+                    it(testCase.test, () => {
+                        const animation = canvasPath();
+                        const keyframe = genKeyframe();
+                        testCase.edit(keyframe);
+                        if (testCase.error) {
+                            expect(() => animation.transition(keyframe)).toThrow(testCase.error);
+                        } else {
+                            expect(() => animation.transition(keyframe)).not.toThrow();
+                        }
+                    });
+                }
+            });
+        });
+    });
+});

public/animate.ts

@@ -39,7 +39,6 @@ const canvasBlobGenerator = (keyframe: CanvasKeyframe): Point[] => {
 };
 
 // Only need to check properties unique to the canvas animation generator.
-// TODO test bad inputs.
 const canvasKeyframeChecker = (keyframe: CanvasKeyframe, index: number) => {
     typeCheck(`keyframe[${index}].canvasOptions`, keyframe.canvasOptions, ["object", "undefined"]);
     if (keyframe.canvasOptions) {

public/legacy.test.ts

@@ -7,7 +7,7 @@ const genMinimalOptions = (): BlobOptions => ({
     color: "#fff",
 });
 
-describe("blobs", () => {
+describe("legacy", () => {
     it("should return a different result when seed is not provided", () => {
         const options = genMinimalOptions();