Merge branch 'develop'

jest.config.js

@@ -109,7 +109,7 @@ module.exports = {
   // restoreMocks: false,
 
   // The root directory that Jest should scan for tests and modules within
-  rootDir: 'test',
+  rootDir: 'src',
 
   // A list of paths to directories that Jest should use to search for files in
   // roots: [

package.json

@@ -8,7 +8,8 @@
     "url": "https://github.com/jeremyckahn/shifty.git"
   },
   "description": "A teeny tiny tweening engine in JavaScript.",
-  "main": "dist/shifty.js",
+  "browser": "dist/shifty.js",
+  "main": "dist/shifty.node.js",
   "devDependencies": {
     "@babel/core": "^7.3.4",
     "@babel/preset-env": "^7.3.4",
@@ -40,10 +41,10 @@
     "doc:view": "live-server dist/doc --port=9124",
     "doc:watch": "nodemon --exec \"npm run doc\" --watch src --watch ./ --ext js,md --ignore dist",
     "doc:live": "run-p doc:watch doc:view",
-    "lint": "eslint src test webpack.*",
+    "lint": "eslint src webpack.*",
     "deploy": "npm run build && npm run doc && gh-pages -d dist",
     "preversion": "npm run ci",
-    "prettier": "prettier '{src,test}/**/*.js' webpack.* --write",
+    "prettier": "prettier 'src/**/*.js' webpack.* --write",
     "postversion": "git push && git push --tags && npm run deploy && npm publish"
   },
   "husky": {

src/bezier.test.js

@@ -0,0 +1,62 @@
+import {
+  Tweenable,
+  interpolate,
+  setBezierFunction,
+  unsetBezierFunction,
+} from './';
+
+test('can create a linear bezier easing curve', () => {
+  setBezierFunction('bezier-linear', 0.25, 0.25, 0.75, 0.75);
+
+  expect(interpolate({ x: 0 }, { x: 10 }, 0.25, 'linear').x.toFixed(1)).toEqual(
+    interpolate({ x: 0 }, { x: 10 }, 0.25, 'bezier-linear').x.toFixed(1)
+  );
+  expect(interpolate({ x: 0 }, { x: 10 }, 0.5, 'linear').x.toFixed(1)).toEqual(
+    interpolate({ x: 0 }, { x: 10 }, 0.5, 'bezier-linear').x.toFixed(1)
+  );
+  expect(interpolate({ x: 0 }, { x: 10 }, 0.75, 'linear').x.toFixed(1)).toEqual(
+    interpolate({ x: 0 }, { x: 10 }, 0.75, 'bezier-linear').x.toFixed(1)
+  );
+});
+
+test('can create a "stretched" linear bezier easing curve', () => {
+  setBezierFunction('bezier-stretched-linear', 0, 0, 1, 1);
+
+  expect(interpolate({ x: 0 }, { x: 10 }, 0.25, 'linear').x.toFixed(1)).toEqual(
+    interpolate({ x: 0 }, { x: 10 }, 0.25, 'bezier-stretched-linear').x.toFixed(
+      1
+    )
+  );
+  expect(interpolate({ x: 0 }, { x: 10 }, 0.5, 'linear').x.toFixed(1)).toEqual(
+    interpolate({ x: 0 }, { x: 10 }, 0.5, 'bezier-stretched-linear').x.toFixed(
+      1
+    )
+  );
+  expect(interpolate({ x: 0 }, { x: 10 }, 0.75, 'linear').x.toFixed(1)).toEqual(
+    interpolate({ x: 0 }, { x: 10 }, 0.75, 'bezier-stretched-linear').x.toFixed(
+      1
+    )
+  );
+});
+
+test('can remove a bezier easing curve', () => {
+  setBezierFunction('bezier-linear', 0, 0, 1, 1);
+  unsetBezierFunction('bezier-linear');
+  expect(!Tweenable.prototype['bezier-linear']).toBeTruthy();
+});
+
+test('bezier handle positions are stored on a custom easing function', () => {
+  const easingFunction = setBezierFunction(
+    'decoration-test',
+    0.2,
+    0.4,
+    0.6,
+    0.8
+  );
+
+  expect(easingFunction.displayName).toEqual('decoration-test');
+  expect(easingFunction.x1).toEqual(0.2);
+  expect(easingFunction.y1).toEqual(0.4);
+  expect(easingFunction.x2).toEqual(0.6);
+  expect(easingFunction.y2).toEqual(0.8);
+});

src/interpolate.test.js

@@ -0,0 +1,31 @@
+import { interpolate } from './';
+
+test('computes the midpoint of two numbers', () => {
+  const interpolated = interpolate({ x: 0 }, { x: 10 }, 0.5);
+
+  expect(5).toEqual(interpolated.x);
+});
+
+test('computes the midpoint of two token strings', () => {
+  const interpolated = interpolate({ color: '#000' }, { color: '#fff' }, 0.5);
+
+  expect('rgb(127,127,127)').toEqual(interpolated.color);
+});
+
+test('accounts for optional delay', () => {
+  let interpolated = interpolate({ x: 0 }, { x: 10 }, 0.5, 'linear', 0.5);
+  expect(interpolated.x).toEqual(0);
+
+  interpolated = interpolate({ x: 0 }, { x: 10 }, 1.0, 'linear', 0.5);
+  expect(interpolated.x).toEqual(5);
+
+  interpolated = interpolate({ x: 0 }, { x: 10 }, 1.5, 'linear', 0.5);
+  expect(interpolated.x).toEqual(10);
+});
+
+test('supports per-interpolation custom easing curves', () => {
+  const easingFn = pos => pos * 2;
+
+  const interpolated = interpolate({ x: 0 }, { x: 10 }, 0.5, easingFn);
+  expect(interpolated.x).toEqual(10);
+});

src/token.test.js

@@ -0,0 +1,126 @@
+import { interpolate } from './';
+
+test('can tween an rgb color', () => {
+  const from = { color: 'rgb(0,128,255)' },
+    to = { color: 'rgb(128,255,0)' };
+
+  let interpolated = interpolate(from, to, 0);
+  expect(interpolated.color).toEqual(from.color);
+  interpolated = interpolate(from, to, 0.5);
+  expect(interpolated.color).toEqual('rgb(64,191,127)');
+  interpolated = interpolate(from, to, 1);
+  expect(interpolated.color).toEqual(to.color);
+});
+
+test('can tween an rgb color with a number in the tween', () => {
+  const from = { color: 'rgb(0,128,255)', x: 0 },
+    to = { color: 'rgb(128,255,0)', x: 10 };
+
+  let interpolated = interpolate(from, to, 0);
+  expect(interpolated.color).toEqual(from.color);
+  interpolated = interpolate(from, to, 0.5);
+  expect(interpolated.color).toEqual('rgb(64,191,127)');
+  expect(interpolated.x).toEqual(5);
+  interpolated = interpolate(from, to, 1);
+  expect(interpolated.color).toEqual(to.color);
+});
+
+test('can tween hex color values', () => {
+  const from = { color: '#ff00ff' },
+    to = { color: '#00ff00' };
+
+  let interpolated = interpolate(from, to, 0);
+  expect(interpolated.color).toEqual('rgb(255,0,255)');
+  interpolated = interpolate(from, to, 0.5);
+  expect(interpolated.color).toEqual('rgb(127,127,127)');
+  interpolated = interpolate(from, to, 1);
+  expect(interpolated.color).toEqual('rgb(0,255,0)');
+});
+
+test('can tween multiple rgb color tokens', () => {
+  const from = { color: 'rgb(0,128,255) rgb(255,0,255)' },
+    to = { color: 'rgb(128,255,0) rgb(0,255,0)' };
+
+  let interpolated = interpolate(from, to, 0);
+  expect(interpolated.color).toEqual(from.color);
+  interpolated = interpolate(from, to, 0.5);
+  expect(interpolated.color).toEqual('rgb(64,191,127) rgb(127,127,127)');
+  interpolated = interpolate(from, to, 1);
+  expect(interpolated.color).toEqual(to.color);
+});
+
+test("each token chunk can have it's own easing curve", () => {
+  const from = { color: 'rgb(0,0,0)' },
+    to = { color: 'rgb(255,255,255)' },
+    easing = 'linear easeInQuad easeInCubic';
+
+  const interpolated = interpolate(from, to, 0.5, easing);
+  const interpolatedR = parseInt(
+    interpolate({ r: 0 }, { r: 255 }, 0.5, 'linear').r,
+    10
+  );
+  const interpolatedG = parseInt(
+    interpolate({ g: 0 }, { g: 255 }, 0.5, 'easeInQuad').g,
+    10
+  );
+  const interpolatedB = parseInt(
+    interpolate({ b: 0 }, { b: 255 }, 0.5, 'easeInCubic').b,
+    10
+  );
+  const targetString =
+    'rgb(' + interpolatedR + ',' + interpolatedG + ',' + interpolatedB + ')';
+
+  expect(interpolated.color).toEqual(targetString);
+});
+
+test('missing token eases inherit from the last easing listed', () => {
+  const from = { color: 'rgb(0,0,0)' },
+    to = { color: 'rgb(255,255,255)' },
+    easing = 'linear easeInQuad';
+
+  const interpolated = interpolate(from, to, 0.5, easing);
+  const interpolatedR = parseInt(
+    interpolate({ r: 0 }, { r: 255 }, 0.5, 'linear').r,
+    10
+  );
+  const interpolatedG = parseInt(
+    interpolate({ g: 0 }, { g: 255 }, 0.5, 'easeInQuad').g,
+    10
+  );
+  const interpolatedB = parseInt(
+    interpolate({ b: 0 }, { b: 255 }, 0.5, 'easeInQuad').b,
+    10
+  );
+  const targetString =
+    'rgb(' + interpolatedR + ',' + interpolatedG + ',' + interpolatedB + ')';
+
+  expect(interpolated.color).toEqual(targetString);
+});
+
+test('can tween a negative value token to a positive value', () => {
+  const from = { transform: 'translateX(-50)' },
+    to = { transform: 'translateX(50)' };
+
+  let interpolated = interpolate(from, to, 0);
+  expect(interpolated.transform).toEqual('translateX(-50)');
+  interpolated = interpolate(from, to, 0.5);
+  expect(interpolated.transform).toEqual('translateX(0)');
+  interpolated = interpolate(from, to, 1);
+  expect(interpolated.transform).toEqual('translateX(50)');
+});
+
+test('can interpolate two number strings that have no non-number token structure', () => {
+  const from = { x: '2' };
+  const to = { x: '3' };
+  const interpolated = interpolate(from, to, 0.5);
+
+  expect(interpolated.x).toEqual('2.5');
+});
+
+test('can tween css value pairs', () => {
+  const from = { x: '0px 0px' };
+  const to = { x: '100px 100px' };
+
+  const interpolated = interpolate(from, to, 0.5);
+  expect(interpolated.x).toEqual('50px 50px');
+});