wip: typescript tests

Author: aleclarson

.npmignore

@@ -0,0 +1 @@
+dist/__tests__

package.json

@@ -18,7 +18,7 @@
     "test": "jest",
     "test:dev": "jest --watch --no-coverage",
     "test:coverage:watch": "jest --watch",
-    "test:ts": "tsc --noEmit",
+    "test:ts": "tsc -p types/__tests__/tsconfig.json",
     "postinstall": "node -e \"console.log('\\u001b[35m\\u001b[1mEnjoy react-spring? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/react-spring/donate\\u001b[0m')\""
   },
   "husky": {
@@ -97,6 +97,7 @@
     "rollup-plugin-node-resolve": "4.0.0",
     "rollup-plugin-size-snapshot": "0.8.0",
     "rollup-plugin-uglify": "6.0.2",
+    "spec.ts": "^1.1.0",
     "typescript": "3.3.3"
   },
   "peerDependencies": {

tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "include": ["src", "types"],
   "compilerOptions": {
     "target": "es2017",
     "moduleResolution": "node",
@@ -15,6 +16,5 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "strict": true
-  },
-  "include": ["src/**/*", "types/**/*.ts"]
+  }
 }

types/__tests__/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "jsxBracketSameLine": true,
+  "tabWidth": 2,
+  "printWidth": 80
+}

types/__tests__/common.ts

@@ -0,0 +1,125 @@
+import {
+  PickAnimated,
+  ForwardProps,
+  AnimatedProps,
+  AnimatedValue,
+  SpringFrame,
+  UnknownProps,
+} from '../lib/common';
+import { assert, _, test } from 'spec.ts';
+
+const reservedProps = {
+  config: null,
+  from: {},
+  to: {},
+  ref: null,
+  reset: null,
+  reverse: null,
+  immediate: null,
+  delay: null,
+  lazy: null,
+  onStart: null,
+  onRest: null,
+  onFrame: null,
+  attach: null,
+};
+
+const forwardProps = {
+  foo: null,
+  bar: null,
+};
+
+type RProps = typeof reservedProps;
+type FProps = typeof forwardProps;
+
+test('ForwardProps', () => {
+  // With reserved props, no forward props
+  type P1 = ForwardProps<RProps>;
+  assert(_ as P1, _ as {});
+
+  // With reserved and forward props
+  type P2 = ForwardProps<RProps & FProps>;
+  assert(_ as P2, _ as FProps);
+
+  // With forward props, no reserved props
+  type P3 = ForwardProps<FProps>;
+  assert(_ as P3, _ as FProps);
+
+  // No reserved or forward props
+  type P4 = ForwardProps<{}>;
+  assert(_ as P4, _ as {});
+});
+
+test('PickAnimated', () => {
+  // No props
+  type A1 = PickAnimated<{}>;
+  assert(_ as A1, _ as {});
+
+  // Forward props only
+  type A3 = PickAnimated<FProps>;
+  assert(_ as A3, _ as FProps);
+
+  // Forward props and "from" prop
+  type A4 = PickAnimated<{ foo: null; from: { bar: null } }>;
+  assert(_ as A4, _ as FProps);
+
+  // "to" and "from" props
+  type A5 = PickAnimated<{ to: { foo: null }; from: { bar: null } }>;
+  assert(_ as A5, _ as FProps);
+});
+
+test('AnimatedProps', () => {
+  // Primitive props
+  type P2 = AnimatedProps<{ foo?: number }>;
+  assert(
+    _ as P2,
+    _ as {
+      foo?: number | AnimatedValue<number>;
+    }
+  );
+
+  // Object props
+  type P3 = AnimatedProps<{ foo?: { bar?: number } }>;
+  assert(
+    _ as P3,
+    _ as {
+      foo?: AnimatedProps<{ bar?: number }>;
+    }
+  );
+
+  // Array props
+  type P4 = AnimatedProps<{ foo: [number, number] }>;
+  assert(
+    _ as P4,
+    _ as {
+      foo: [number, number] | AnimatedValue<[number, number]>;
+    }
+  );
+
+  // Atomic object props
+  type P5 = AnimatedProps<{
+    set: Set<any>;
+    map: Map<any, any>;
+    date: Date;
+    func: Function;
+    prom: Promise<any>;
+  }>;
+  assert(
+    _ as P5,
+    _ as {
+      set: Set<any> | AnimatedValue<Set<any>>;
+      map: Map<any, any> | AnimatedValue<Map<any, any>>;
+      date: Date | AnimatedValue<Date>;
+      func: Function | AnimatedValue<Function>;
+      prom: Promise<any> | AnimatedValue<Promise<any>>;
+    }
+  );
+});
+
+test('SpringFrame', () => {
+  type T1 = SpringFrame<{}>;
+  assert(_ as T1, _ as { [x: string]: unknown });
+
+  type T2 = SpringFrame<{ to: { a: number }; from: { b: number } }>;
+  assert(_ as T2, _ as UnknownProps & { a: number; b: number });
+});

types/__tests__/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "include": ["*.ts"],
+  "compilerOptions": {
+    "target": "es2017",
+    "moduleResolution": "node",
+    "lib": ["dom", "es2017"],
+    "noEmit": true,
+    "jsx": "react",
+    "allowSyntheticDefaultImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strict": true
+  }
+}

types/__tests__/useSpring.tsx

@@ -0,0 +1,202 @@
+import {
+  animated,
+  useSpring,
+  AnimatedValue,
+  SpringHandle,
+  SpringStopFn,
+  SpringUpdateFn,
+} from '../web';
+import React, { useRef } from 'react';
+import { assert, test, _ } from 'spec.ts';
+import { UnknownProps } from '../lib/common';
+
+test('infer return type via forward prop', () => {
+  const props = useSpring({ foo: 0 });
+  assert(props, _ as UnknownProps & {
+    foo: AnimatedValue<number>;
+  });
+
+  test('using with "animated()" component', () => {
+    const Test = animated((_: { style: { foo: number } }) => null);
+    return <Test style={props} />;
+  });
+});
+
+test('infer return type via "from" prop', () => {
+  const props = useSpring({
+    from: { foo: 0 },
+  });
+  assert(props, _ as UnknownProps & {
+    foo: AnimatedValue<number>;
+  });
+});
+
+test('infer return type via "to" prop', () => {
+  const props = useSpring({
+    to: { foo: 0 },
+  });
+  assert(props, _ as UnknownProps & {
+    foo: AnimatedValue<number>;
+  });
+});
+
+test('infer return type via "from" and "to" props', () => {
+  const props = useSpring({
+    from: { foo: 0 },
+    to: { bar: '1' },
+  });
+  assert(props, _ as UnknownProps & {
+    foo: AnimatedValue<number>;
+    bar: AnimatedValue<string>;
+  });
+});
+
+test('infer return type via "from" and forward props', () => {
+  const props = useSpring({
+    from: { foo: 0 },
+    bar: '1',
+  });
+  assert(props, _ as UnknownProps & {
+    foo: AnimatedValue<number>;
+    bar: AnimatedValue<string>;
+  });
+});
+
+test('infer animated array', () => {
+  const props = useSpring({
+    to: { foo: [0, 0] },
+  });
+  assert(props, _ as UnknownProps & {
+    foo: AnimatedValue<number[]>;
+  });
+
+  test('interpolated array', () => {
+    props.foo.interpolate((a, b) => {
+      assert(a, _ as number);
+      assert(b, _ as number);
+    });
+  });
+});
+
+test('imperative mode', () => {
+  const [props, update, stop] = useSpring(() => ({
+    foo: 0,
+  }));
+  assert(props, _ as UnknownProps & { foo: AnimatedValue<number> });
+  assert(update, _ as SpringUpdateFn<{ foo: number }>);
+  assert(stop, _ as SpringStopFn);
+
+  test('update()', () => {
+    update({
+      foo: 100,
+      onRest(values) {
+        assert(values, _ as UnknownProps & {
+          foo: number;
+        });
+      },
+    });
+  });
+
+  test('stop()', () => {
+    stop();
+    stop(true);
+    stop(true, 'foo');
+    stop('foo');
+    stop('foo', 'bar');
+  });
+
+  test('with delay and reset', () => {
+    const [props] = useSpring(() => ({
+      foo: 0,
+      delay: 1000,
+      reset: true,
+    }));
+    assert(props, _ as UnknownProps & {
+      foo: AnimatedValue<number>;
+    });
+  });
+
+  test('with callbacks', () => {
+    const [props] = useSpring(() => ({
+      foo: 0,
+      onStart(anim) {
+        assert(anim, _ as any);
+      },
+      onFrame(values) {
+        assert(values.foo, _ as any);
+      },
+      onRest(values) {
+        assert(values.foo, _ as any);
+      },
+    }));
+    assert(props, _ as UnknownProps & {
+      foo: AnimatedValue<number>;
+    });
+  });
+});
+
+test('spring refs', () => {
+  const ref = useRef<SpringHandle>(null);
+  useSpring({ foo: 1, ref });
+  ref.current!.start();
+  ref.current!.stop(true, 'foo', 'bar');
+  ref.current!.stop();
+});
+
+test('basic config', () => {
+  const props = useSpring({
+    width: 100,
+    from: { width: 0 },
+    reset: _ as boolean,
+    onStart(anim) {
+      assert(anim, _ as any);
+    },
+    onFrame(values) {
+      assert(values.width, _ as unknown);
+    },
+    onRest(values) {
+      assert(values.width, _ as unknown);
+    },
+  });
+  assert(props, _ as UnknownProps & {
+    width: AnimatedValue<number>;
+  });
+});
+
+test('function as "to" prop', () => {
+  const props = useSpring({
+    to: async next => {
+      assert(next, _ as SpringUpdateFn);
+      await next({
+        foo: 0,
+        width: '100%', // New keys can be animated.
+        delay: 1000,
+        config: { duration: 1000 },
+        onRest(values) {
+          assert(values, _ as UnknownProps);
+        },
+      });
+    },
+  });
+  assert(props, _ as UnknownProps);
+});
+
+test('array as "to" prop', () => {
+  // Avoid inferring "opacity" here, unless the "from" prop exists.
+  const props = useSpring({
+    to: [{ opacity: 1 }, { opacity: 0 }],
+    // This key is ignored because "to" exists.
+    opacity: 0,
+  });
+  assert(props, _ as UnknownProps);
+
+  test('with "from" prop', () => {
+    const props = useSpring({
+      to: [{ opacity: 1 }, { opacity: 0 }],
+      from: { opacity: 0 },
+    });
+    assert(props, _ as UnknownProps & {
+      opacity: AnimatedValue<number>;
+    });
+  });
+});