added tests

src/mixins/Animatable.ts

@@ -75,10 +75,6 @@ export class AnimationPlayer extends MetaBase {
 			player.playbackRate = playbackRate;
 		}
 
-		if (finish) {
-			player.finish();
-		}
-
 		if (reverse) {
 			player.reverse();
 		}
@@ -115,6 +111,9 @@ export class AnimationPlayer extends MetaBase {
 		const node = this.getNode(key);
 
 		if (node) {
+			if (!Array.isArray(animateProperties)) {
+				animateProperties = [ animateProperties ];
+			}
 			animateProperties.forEach((properties) => {
 				properties = typeof properties === 'function' ? properties() : properties;
 

tests/intern.ts

@@ -62,6 +62,7 @@ export const loaderOptions = {
 		{ name: 'maquette', location: 'node_modules/maquette/dist', main: 'maquette' },
 		{ name: 'pepjs', location: 'node_modules/pepjs/dist', main: 'pep' },
 		{ name: 'intersection-observer', location: 'node_modules/intersection-observer', main: 'intersection-observer' },
+		{ name: 'web-animations-js', location: 'node_modules/web-animations-js', main: 'web-animations-js' },
 		{ name: 'grunt-dojo2', location: 'node_modules/grunt-dojo2'},
 		{ name: 'sinon', location: 'node_modules/sinon/pkg', main: 'sinon' }
 	],

tests/unit/all.ts

@@ -1,17 +1,17 @@
 import 'dojo/has!host-node?../support/loadJsdom';
-// import './Container';
-// import './WidgetBase';
-// import './Registry';
-// import './customElements';
-// import './d';
-// import './decorators/all';
+import './Container';
+import './WidgetBase';
+import './Registry';
+import './customElements';
+import './d';
+import './decorators/all';
 import './mixins/all';
-// import './util/all';
-// import './main';
-// import './diff';
-// import './RegistryHandler';
-// import './Injector';
-// import './tsx';
-// import './tsxIntegration';
-// import './NodeHandler';
-// import './meta/all';
+import './util/all';
+import './main';
+import './diff';
+import './RegistryHandler';
+import './Injector';
+import './tsx';
+import './tsxIntegration';
+import './NodeHandler';
+import './meta/all';

tests/unit/mixins/Animatable.ts

@@ -1,25 +1,40 @@
+import global from '@dojo/shim/global';
 import { VNode } from '@dojo/interfaces/vdom';
 import * as registerSuite from 'intern!object';
 import * as assert from 'intern/chai!assert';
-import { AnimatableMixin, AnimationPlayer } from '../../../src/mixins/Animatable';
+import { WidgetProperties } from '../../../src/interfaces';
+import { AnimatableMixin, AnimationPlayer, AnimationControls, AnimationTimingProperties } from '../../../src/mixins/Animatable';
 import { WidgetBase } from '../../../src/WidgetBase';
 import { v } from '../../../src/d';
-import { spy } from 'sinon';
+import { spy, stub } from 'sinon';
 
-const staticAnimateProperties = {
-	id: 'staticAnimation',
-	effects: [
-		{ height: '0px' },
-		{ height: '10px' }
-	]
-};
+interface TestWidgetProperties extends WidgetProperties {
+	controls?: AnimationControls;
+	effects?: any;
+	timing?: AnimationTimingProperties;
+	animate?: boolean;
+}
 
-class TestWidget extends AnimatableMixin(WidgetBase) {
+class TestWidget extends AnimatableMixin(WidgetBase)<TestWidgetProperties> {
 	render() {
+		const {
+			animate = true,
+			controls = {},
+			timing = {},
+			effects = [
+				{ height: '0px' },
+				{ height: '10px' }
+			] } = this.properties;
+
 		return v('div', {}, [
 			v('div', {
 				key: 'animated',
-				animate: staticAnimateProperties
+				animate: animate ? {
+					id: 'animation',
+					effects,
+					controls,
+					timing
+				} : undefined
 			}),
 			v('div', {
 				key: 'nonAnimated'
@@ -32,6 +47,17 @@ class TestWidget extends AnimatableMixin(WidgetBase) {
 	}
 }
 
+const keyframeCtorStub = stub();
+const animationCtorStub = stub();
+const pauseStub = stub();
+const playStub = stub();
+const reverseStub = stub();
+const cancelStub = stub();
+const finishStub = stub();
+const startStub = stub();
+const currentStub = stub();
+let metaNode: HTMLElement;
+
 registerSuite({
 	name: 'animatable',
 	'animatable mixin': {
@@ -43,7 +69,6 @@ registerSuite({
 
 			widget.__render__();
 			assert.isTrue(addSpy.calledOnce);
-			assert.isTrue(addSpy.firstCall.calledWith('animated', staticAnimateProperties));
 		},
 		'clears animations after new animations have been added'() {
 			const widget = new TestWidget();
@@ -70,6 +95,220 @@ registerSuite({
 		}
 	},
 	'animation player': {
+		beforeAll() {
+			class KeyframeEffectMock {
+				constructor(...args: any[]) {
+					keyframeCtorStub(...args);
+				}
+			}
+			class AnimationMock {
+				constructor(...args: any[]) {
+					animationCtorStub(...args);
+				}
+				pause() {
+					pauseStub();
+				}
+				play() {
+					playStub();
+				}
+				reverse() {
+					reverseStub();
+				}
+				cancel() {
+					cancelStub();
+				}
+				finish() {
+					finishStub();
+				}
+				startTime(time: number) {
+					startStub(time);
+				}
+				currentTime(time: number) {
+					currentStub(time);
+				}
+				set onfinish(onFinish: () => {}) {
+					onFinish();
+				}
+			}
+			global.KeyframeEffect = KeyframeEffectMock;
+			global.Animation = AnimationMock;
+		},
+		beforeEach() {
+			keyframeCtorStub.reset();
+			animationCtorStub.reset();
+			pauseStub.reset();
+			playStub.reset();
+			reverseStub.reset();
+			cancelStub.reset();
+			finishStub.reset();
+			startStub.reset();
+			currentStub.reset();
+			metaNode = document.createElement('div');
+		},
+		afterEach() {
+
+		},
+		'creates new KeyframeEffect and Animation for each animated node'() {
+			const widget = new TestWidget();
+			const meta = widget.getMeta();
+			stub(meta, 'getNode').returns(metaNode);
+
+			widget.__render__();
+			assert.isTrue(keyframeCtorStub.calledOnce);
+			assert.isTrue(animationCtorStub.calledOnce);
+		},
+		'passed timing and node info to keyframe effect'() {
+			const widget = new TestWidget();
+			widget.__setProperties__({
+				timing: {
+					duration: 2
+				}
+			});
+			const meta = widget.getMeta();
+			stub(meta, 'getNode').returns(metaNode);
+
+			widget.__render__();
+			assert.isTrue(keyframeCtorStub.calledOnce);
+			assert.isTrue(keyframeCtorStub.firstCall.calledWithMatch(
+				metaNode,
+				[
+					{ height: '0px' },
+					{ height: '10px' }
+				],
+				{
+					duration: 2
+				}
+			));
+		},
+		'starts animations paused'() {
+			const widget = new TestWidget();
+			const meta = widget.getMeta();
+			stub(meta, 'getNode').returns(metaNode);
+
+			widget.__render__();
+			assert.isTrue(pauseStub.calledOnce);
+			assert.isTrue(playStub.notCalled);
+		},
+		'plays when play set to true'() {
+			const widget = new TestWidget();
+			widget.__setProperties__({
+				controls: {
+					play: true
+				}
+			});
+			const meta = widget.getMeta();
+			stub(meta, 'getNode').returns(metaNode);
+
+			widget.__render__();
+			assert.isTrue(playStub.calledOnce);
+			assert.isTrue(pauseStub.notCalled);
+		},
+		'reverses when reverse set to true'() {
+			const widget = new TestWidget();
+			widget.__setProperties__({
+				controls: {
+					reverse: true
+				}
+			});
+			const meta = widget.getMeta();
+			stub(meta, 'getNode').returns(metaNode);
+
+			widget.__render__();
+			assert.isTrue(reverseStub.calledOnce);
+		},
+		'cancels when cancel set to true'() {
+			const widget = new TestWidget();
+			widget.__setProperties__({
+				controls: {
+					cancel: true
+				}
+			});
+			const meta = widget.getMeta();
+			stub(meta, 'getNode').returns(metaNode);
 
+			widget.__render__();
+			assert.isTrue(cancelStub.calledOnce);
+		},
+		'finishes when finish set to true'() {
+			const widget = new TestWidget();
+			widget.__setProperties__({
+				controls: {
+					finish: true
+				}
+			});
+			const meta = widget.getMeta();
+			stub(meta, 'getNode').returns(metaNode);
+
+			widget.__render__();
+			assert.isTrue(finishStub.calledOnce);
+		},
+		'can set start time'() {
+			const widget = new TestWidget();
+			widget.__setProperties__({
+				controls: {
+					startTime: 2
+				}
+			});
+			const meta = widget.getMeta();
+			stub(meta, 'getNode').returns(metaNode);
+
+			widget.__render__();
+			assert.isTrue(startStub.calledOnce);
+			assert.isTrue(startStub.firstCall.calledWith(2));
+		},
+		'can set current time'() {
+			const widget = new TestWidget();
+			widget.__setProperties__({
+				controls: {
+					currentTime: 2
+				}
+			});
+			const meta = widget.getMeta();
+			stub(meta, 'getNode').returns(metaNode);
+
+			widget.__render__();
+			assert.isTrue(currentStub.calledOnce);
+			assert.isTrue(currentStub.firstCall.calledWith(2));
+		},
+		'will execute effects function if one is passed'() {
+			const widget = new TestWidget();
+			const fx = stub().returns([]);
+			widget.__setProperties__({
+				effects: fx
+			});
+			const meta = widget.getMeta();
+			stub(meta, 'getNode').returns(metaNode);
+
+			widget.__render__();
+			assert.isTrue(fx.calledOnce);
+		},
+		'clears down used animations on next render if theyve been removed'() {
+			const widget = new TestWidget();
+			const meta = widget.getMeta();
+			stub(meta, 'getNode').returns(metaNode);
+
+			widget.__render__();
+			assert.isTrue(cancelStub.notCalled);
+			widget.__setProperties__({
+				animate: false
+			});
+			widget.__render__();
+			assert.isTrue(cancelStub.calledOnce);
+		},
+		'will call onfinish function if passed'() {
+			const onFinishStub = stub();
+			const widget = new TestWidget();
+			const meta = widget.getMeta();
+			stub(meta, 'getNode').returns(metaNode);
+
+			widget.__setProperties__({
+				controls: {
+					onFinish: onFinishStub
+				}
+			});
+
+			widget.__render__();
+			assert.isTrue(onFinishStub.calledOnce);
+		}
 	}
 });

tests/unit/mixins/all.ts

@@ -1,4 +1,4 @@
 import './Animatable';
-// import './Themeable';
-// import './Projector';
-// import './I18n';
+import './Themeable';
+import './Projector';
+import './I18n';