From 861040e707c07e1e55008dc136ae8d25c698235a Mon Sep 17 00:00:00 2001 From: Tom Dye Date: Thu, 19 Oct 2017 16:27:00 +0100 Subject: [PATCH] bumped test coverage --- package-lock.json | 39 +++--- tests/unit/mixins/Animatable.ts | 213 ++++++++++++++++++-------------- 2 files changed, 137 insertions(+), 115 deletions(-) diff --git a/package-lock.json b/package-lock.json index 70d105d0..6acdbaca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,7 @@ "integrity": "sha1-qHGcQXsIDAEtNJeyjiKKwJdF/fI=", "dev": true, "requires": { - "@types/node": "8.0.44" + "@types/node": "8.0.45" } }, "@types/glob": { @@ -38,7 +38,7 @@ "dev": true, "requires": { "@types/minimatch": "3.0.1", - "@types/node": "8.0.44" + "@types/node": "8.0.45" } }, "@types/grunt": { @@ -47,7 +47,7 @@ "integrity": "sha512-fKrWJ+uFq9j3tP2RLm9cY7Z50LhhPnSHQCliCZP5lPAWC7TydnU+BcLR0KQIHe9Gbn1oGfkRIq3u56MNCC1qyw==", "dev": true, "requires": { - "@types/node": "8.0.44" + "@types/node": "8.0.45" } }, "@types/handlebars": { @@ -75,7 +75,7 @@ "dev": true, "requires": { "@types/jquery": "3.2.15", - "@types/node": "8.0.44" + "@types/node": "8.0.45" } }, "@types/lodash": { @@ -97,9 +97,9 @@ "dev": true }, "@types/node": { - "version": "8.0.44", - "resolved": "https://registry.npmjs.org/@types/node/-/node-8.0.44.tgz", - "integrity": "sha512-56TeARKE2uMi7xWhpRRws/QdnpSVx9i7E8esGiPYoj90jnonGfmV1vwRLvHWYjPxF5u5l7p5fgdKwdse+VeAQQ==", + "version": "8.0.45", + "resolved": "https://registry.npmjs.org/@types/node/-/node-8.0.45.tgz", + "integrity": "sha512-4q3e+DdiRli/aMgYOwtKCOrM4Vys+OQCcHts76lJUfKRCjfjfTqB4FjXsZ8jkyBEgPrPN0Rq93uCKmgd7ePY2w==", "dev": true }, "@types/shelljs": { @@ -108,7 +108,7 @@ "integrity": "sha1-32E73biCJe0JzlyDX2INyq8VXms=", "dev": true, "requires": { - "@types/node": "8.0.44" + "@types/node": "8.0.45" } }, "@types/sinon": { @@ -340,7 +340,7 @@ "dev": true, "requires": { "browserslist": "1.7.7", - "caniuse-db": "1.0.30000747", + "caniuse-db": "1.0.30000748", "normalize-range": "0.1.2", "num2fraction": "1.2.2", "postcss": "5.2.18", @@ -564,7 +564,7 @@ "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=", "dev": true, "requires": { - "caniuse-db": "1.0.30000747", + "caniuse-db": "1.0.30000748", "electron-to-chromium": "1.3.26" } }, @@ -664,15 +664,15 @@ "dev": true, "requires": { "browserslist": "1.7.7", - "caniuse-db": "1.0.30000747", + "caniuse-db": "1.0.30000748", "lodash.memoize": "4.1.2", "lodash.uniq": "4.5.0" } }, "caniuse-db": { - "version": "1.0.30000747", - "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000747.tgz", - "integrity": "sha1-j1vWweXmBFpNTmxqOlktGeGotRQ=", + "version": "1.0.30000748", + "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000748.tgz", + "integrity": "sha1-eF2e381kW/eVxv887TPEXVgMSKA=", "dev": true }, "capture-stack-trace": { @@ -7046,12 +7046,6 @@ "requires": { "glob": "7.1.2" } - }, - "typescript": { - "version": "2.5.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.5.3.tgz", - "integrity": "sha512-ptLSQs2S4QuS6/OD1eAKG+S5G8QQtrU5RT32JULdZQtM1L3WTi34Wsu48Yndzi8xsObRAB9RPt/KhA9wlpEF6w==", - "dev": true } } }, @@ -7448,6 +7442,11 @@ } } }, + "web-animations-js": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/web-animations-js/-/web-animations-js-2.3.1.tgz", + "integrity": "sha1-Om2bwVGWN3qQ+OKAP6UmIWWwRRA=" + }, "webidl-conversions": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz", diff --git a/tests/unit/mixins/Animatable.ts b/tests/unit/mixins/Animatable.ts index 192daa19..be6475a4 100644 --- a/tests/unit/mixins/Animatable.ts +++ b/tests/unit/mixins/Animatable.ts @@ -2,42 +2,22 @@ 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 { 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, stub } from 'sinon'; -interface TestWidgetProperties extends WidgetProperties { - controls?: AnimationControls; - effects?: any; - timing?: AnimationTimingProperties; - animate?: boolean; -} - -class TestWidget extends AnimatableMixin(WidgetBase) { - protected getAnimation(): {} | undefined | (() => {}) { - const { animate = true, - controls = {}, - timing = {}, - effects = [ - { height: '0px' }, - { height: '10px' } - ] } = this.properties; - - return animate ? { - id: 'animation', - effects, - controls, - timing - } : undefined; - } +let effects: any; +let controls: AnimationControls; +let timing: AnimationTimingProperties; +let animate: any; +class TestWidget extends AnimatableMixin(WidgetBase) { render() { return v('div', {}, [ v('div', { key: 'animated', - animate: this.getAnimation() + animate }), v('div', { key: 'nonAnimated' @@ -45,28 +25,12 @@ class TestWidget extends AnimatableMixin(WidgetBase) { ]); } - getMeta() { - return this.meta(AnimationPlayer); + callInvalidate() { + this.invalidate(); } -} -class PropertyFunctionWidget extends TestWidget { - getAnimation() { - const { controls = {}, - timing = {}, - effects = [ - { height: '0px' }, - { height: '10px' } - ] } = this.properties; - - return function () { - return { - id: 'animation', - effects, - controls, - timing - }; - }; + getMeta() { + return this.meta(AnimationPlayer); } } @@ -79,10 +43,23 @@ const cancelStub = stub(); const finishStub = stub(); const startStub = stub(); const currentStub = stub(); +const playbackRateStub = stub(); let metaNode: HTMLElement; registerSuite({ name: 'animatable', + 'beforeEach'() { + effects = [ + { height: '0px' }, + { height: '10px' } + ]; + controls = {}; + timing = {}; + animate = { + id: 'animation', + effects + }; + }, 'animatable mixin': { 'adds an animatable player for each node with animations'() { const widget = new TestWidget(); @@ -152,6 +129,9 @@ registerSuite({ set onfinish(onFinish: () => {}) { onFinish(); } + set playbackRate(rate: number) { + playbackRateStub(rate); + } } global.KeyframeEffect = KeyframeEffectMock; global.Animation = AnimationMock; @@ -166,6 +146,7 @@ registerSuite({ finishStub.reset(); startStub.reset(); currentStub.reset(); + playbackRateStub.reset(); metaNode = document.createElement('div'); }, afterEach() { @@ -180,13 +161,22 @@ registerSuite({ assert.isTrue(keyframeCtorStub.calledOnce); assert.isTrue(animationCtorStub.calledOnce); }, + 'reuses previous KeyframeEffect and Player when animation is still valid'() { + const widget = new TestWidget(); + const meta = widget.getMeta(); + stub(meta, 'getNode').returns(metaNode); + + widget.__render__(); + widget.callInvalidate(); + widget.__render__(); + assert.isTrue(keyframeCtorStub.calledOnce); + assert.isTrue(animationCtorStub.calledOnce); + }, 'passed timing and node info to keyframe effect'() { + animate.timing = { + duration: 2 + }; const widget = new TestWidget(); - widget.__setProperties__({ - timing: { - duration: 2 - } - }); const meta = widget.getMeta(); stub(meta, 'getNode').returns(metaNode); @@ -213,12 +203,10 @@ registerSuite({ assert.isTrue(playStub.notCalled); }, 'plays when play set to true'() { + animate.controls = { + play: true + }; const widget = new TestWidget(); - widget.__setProperties__({ - controls: { - play: true - } - }); const meta = widget.getMeta(); stub(meta, 'getNode').returns(metaNode); @@ -227,12 +215,10 @@ registerSuite({ assert.isTrue(pauseStub.notCalled); }, 'reverses when reverse set to true'() { + animate.controls = { + reverse: true + }; const widget = new TestWidget(); - widget.__setProperties__({ - controls: { - reverse: true - } - }); const meta = widget.getMeta(); stub(meta, 'getNode').returns(metaNode); @@ -240,12 +226,10 @@ registerSuite({ assert.isTrue(reverseStub.calledOnce); }, 'cancels when cancel set to true'() { + animate.controls = { + cancel: true + }; const widget = new TestWidget(); - widget.__setProperties__({ - controls: { - cancel: true - } - }); const meta = widget.getMeta(); stub(meta, 'getNode').returns(metaNode); @@ -253,25 +237,32 @@ registerSuite({ assert.isTrue(cancelStub.calledOnce); }, 'finishes when finish set to true'() { + animate.controls = { + finish: 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); }, + 'sets playback rate when passed'() { + animate.controls = { + playbackRate: 2 + }; + const widget = new TestWidget(); + const meta = widget.getMeta(); + stub(meta, 'getNode').returns(metaNode); + + widget.__render__(); + assert.isTrue(playbackRateStub.calledOnce); + }, 'can set start time'() { + animate.controls = { + startTime: 2 + }; const widget = new TestWidget(); - widget.__setProperties__({ - controls: { - startTime: 2 - } - }); const meta = widget.getMeta(); stub(meta, 'getNode').returns(metaNode); @@ -280,12 +271,10 @@ registerSuite({ assert.isTrue(startStub.firstCall.calledWith(2)); }, 'can set current time'() { + animate.controls = { + currentTime: 2 + }; const widget = new TestWidget(); - widget.__setProperties__({ - controls: { - currentTime: 2 - } - }); const meta = widget.getMeta(); stub(meta, 'getNode').returns(metaNode); @@ -294,11 +283,9 @@ registerSuite({ 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 - }); + animate.effects = fx; + const widget = new TestWidget(); const meta = widget.getMeta(); stub(meta, 'getNode').returns(metaNode); @@ -312,29 +299,35 @@ registerSuite({ widget.__render__(); assert.isTrue(cancelStub.notCalled); - widget.__setProperties__({ - animate: false - }); + + widget.callInvalidate(); + animate = undefined; + widget.__render__(); assert.isTrue(cancelStub.calledOnce); }, 'will call onfinish function if passed'() { const onFinishStub = stub(); + animate.controls = { + onFinish: onFinishStub + }; const widget = new TestWidget(); const meta = widget.getMeta(); stub(meta, 'getNode').returns(metaNode); - widget.__setProperties__({ - controls: { - onFinish: onFinishStub - } - }); - widget.__render__(); assert.isTrue(onFinishStub.calledOnce); }, 'can return a function instead of properties object'() { - const widget = new PropertyFunctionWidget(); + const animateReturn = { + id: 'animation', + effects, + controls, + timing + }; + animate = () => animateReturn; + + const widget = new TestWidget(); const meta = widget.getMeta(); stub(meta, 'getNode').returns(metaNode); @@ -348,6 +341,36 @@ registerSuite({ ], {} )); + }, + 'does not create animation if function does not return properties'() { + animate = () => undefined; + + const widget = new TestWidget(); + const meta = widget.getMeta(); + stub(meta, 'getNode').returns(metaNode); + + widget.__render__(); + assert.isTrue(keyframeCtorStub.notCalled); + }, + 'can have multiple animations on a single node'() { + animate = [{ + id: 'animation1', + effects, + controls, + timing + }, + { + id: 'animation2', + effects, + controls, + timing + }]; + const widget = new TestWidget(); + const meta = widget.getMeta(); + stub(meta, 'getNode').returns(metaNode); + + widget.__render__(); + assert.isTrue(keyframeCtorStub.calledTwice); } } });