From 5333282f0c7ce87f3c5ec327bfa48ed3a08389b7 Mon Sep 17 00:00:00 2001 From: Dominik Wilkowski Date: Thu, 20 Apr 2017 16:39:32 +1000 Subject: [PATCH] (#98) fixed specs for super small edge cases Signed-off-by: Dominik Wilkowski --- package.json | 4 +-- packages/animate/README.md | 40 +++++++++++---------- packages/animate/package.json | 15 ++++++++ packages/animate/src/js/module.js | 15 ++++---- packages/animate/tests/site/index.html | 40 +++++++++++++++++++++ packages/animate/tests/unit/animate.spec.js | 40 ++++++++++----------- 6 files changed, 104 insertions(+), 50 deletions(-) diff --git a/package.json b/package.json index de465a6d1..784a92ea1 100644 --- a/package.json +++ b/package.json @@ -18,8 +18,8 @@ "bootstrap": "lerna bootstrap", "build": "lerna run build", "publish": "lerna publish --skip-git", - "test": "lerna run test:a11y --concurrency 1 && node scripts/helper.js test", - "test:unit-test": "jest" + "test:unit-test": "jest", + "test": "lerna run test:a11y --concurrency 1 && node scripts/helper.js test" }, "jest": { "testRegex": "\\.spec.js$", diff --git a/packages/animate/README.md b/packages/animate/README.md index cf1a12ab0..e94ce14a6 100644 --- a/packages/animate/README.md +++ b/packages/animate/README.md @@ -52,20 +52,20 @@ Animate has 3 functions: The options settings are: `element` - DOM node/s you want to animate -`property` - CSS property you want to animate (optional, defaults to `height`) -`endSize` - 'auto' or pixel size of the property after the animation has finished (optional) -`speed` - animation speed in milliseconds (optional, defaults to `250ms`) +`property` - CSS property you want to animate (optional, defaults to `height`) +`endSize` - 'auto' or pixel size of the property after the animation has finished (optional) +`speed` - animation speed in milliseconds (optional, defaults to `250ms`) `callback` - callback function to run when the animation completes (optional) Example: ```js UIKIT.animate.Run( - element: document.getElementById('elementId'), - property: 'height', - endSize: 'auto', - speed: 1000, - callback: myFunction, + element: document.getElementById('elementId'), + property: 'height', + endSize: 'auto', + speed: 1000, + callback: myFunction, ) ``` @@ -81,7 +81,7 @@ Example: ```js UIKIT.animate.Stop( - element: document.getElementById('elementId'), + element: document.getElementById('elementId'), ) ``` @@ -92,22 +92,22 @@ UIKIT.animate.Stop( The options settings are: `element` - DOM node/s you want to animate -`property` - CSS property you want to animate (optional, defaults to `height`) -`openSize` - pixel size of the property when the element is open (optional, defaults to `auto`) -`closeSize` - pixel size of the property when the element is closed (optional, defaults to `0`) -`speed` - animation speed in milliseconds (optional, defaults to `250ms`) +`property` - CSS property you want to animate (optional, defaults to `height`) +`openSize` - pixel size of the property when the element is open (optional, defaults to `auto`) +`closeSize` - pixel size of the property when the element is closed (optional, defaults to `0`) +`speed` - animation speed in milliseconds (optional, defaults to `250ms`) `callback` - callback function to run when the animation completes (optional) Example: ```js UIKIT.animate.Toggle( - element: document.getElementById('elementId'), - property: 'height', - closeSize: 0, - openSize: 'auto', - speed: 1000, - callback: myFunction, + element: document.getElementById('elementId'), + property: 'height', + closeSize: 0, + openSize: 'auto', + speed: 1000, + callback: myFunction, ) ``` @@ -146,6 +146,8 @@ animate The visual test: http://uikit.apps.staging.digital.gov.au/packages/animate/tests/site/ +Run `jest` for the unit tests + **[⬆ back to top](#contents)** diff --git a/packages/animate/package.json b/packages/animate/package.json index 86258bbe8..6b69a53dd 100644 --- a/packages/animate/package.json +++ b/packages/animate/package.json @@ -50,12 +50,27 @@ }, "devDependencies": { "browser-sync": "^2.18.6", + "jest-cli": "^19.0.2", "npm-run-all": "^4.0.1", "onchange": "^3.2.1" }, "files": [ "lib/*" ], + "jest": { + "testRegex": "\\.spec.js$", + "collectCoverageFrom": [ + "lib/js/*.js" + ], + "coverageThreshold": { + "global": { + "branches": 0, + "functions": 0, + "lines": 0, + "statements": 0 + } + } + }, "engines": { "node": ">=0.12.0", "npm": "^3.0.0" diff --git a/packages/animate/src/js/module.js b/packages/animate/src/js/module.js index 7a9461dc3..5b0d90e70 100644 --- a/packages/animate/src/js/module.js +++ b/packages/animate/src/js/module.js @@ -43,24 +43,24 @@ var UIKIT = UIKIT || {}; var distance = endSize - initialSize; // the overall distance the animation needs to travel var intervalTime = ( speed / distance ); // the time each setInterval iteration will take var stepSize = distance < 0 ? -1 : 1; // if distance is negative then we set stepSize to -1 - var steps = Math.abs( distance / stepSize ); // the amount of steps required to achieve animation + var steps = Math.abs( distance / stepSize ); // the amount of steps required to get to endSize intervalTime = speed / steps; - // we need to adjust our animation specs if interval time exceeds 60FPS eg intervalTime < 16.67ms + // we need to adjust our animation specs if interval time exceeds 60FPS eg intervalTime < 16.67ms (1000 / 60) = (50 / 3) if( Math.abs( intervalTime ) < ( 50 / 3 ) ) { - stepSize = Math.round( ( 50 / 3 ) / intervalTime ); - steps = Math.abs( Math.floor( distance / stepSize ) ); - stepSize = distance < 0 ? -stepSize : stepSize; - intervalTime = speed / steps; + intervalTime = ( 50 / 3 ); // let’s not get lower that 60FPS + steps = Math.ceil( Math.abs( speed / intervalTime ) ); // we now need the steps and make sure we ceil them so -1 won't make them negative + stepSize = distance / steps; // last thing is step sizes which are derived from all of the above } return { stepSize: stepSize, - steps: ( steps - 1 ), //TODO small distance with long time + steps: ( steps - 1 ), intervalTime: intervalTime, }; } + // export for node and babel environments if( typeof module !== 'undefined' ) { animate.CalculateAnimationSpecs = CalculateAnimationSpecs; } @@ -169,7 +169,6 @@ var UIKIT = UIKIT || {}; var element = elements[ i ]; // this element UIKIT.animate.Stop( element ); // stop any previous animations var initialSize = parseInt( GetCSSPropertyBecauseIE( element, options.property ) ); // the elements current size - var endSize = options.endSize; // the element end size if( options.endSize === 'auto' ) { // calculate what 'auto' means in pixel diff --git a/packages/animate/tests/site/index.html b/packages/animate/tests/site/index.html index 66fc61e18..a877832cc 100644 --- a/packages/animate/tests/site/index.html +++ b/packages/animate/tests/site/index.html @@ -234,6 +234,46 @@

Open, close and toggle multiple items

+
+ +
+
+

Edge cases

+
+ +
+

less pixel than steps

+ +
+
+ + + +
+
+ +
+ +
+ +
+

Half pixel step size

+ +
+
+ + + +
+
+ +
+  


+
+ +
+
+ diff --git a/packages/animate/tests/unit/animate.spec.js b/packages/animate/tests/unit/animate.spec.js index fb31b5e50..5b7f125dc 100644 --- a/packages/animate/tests/unit/animate.spec.js +++ b/packages/animate/tests/unit/animate.spec.js @@ -15,15 +15,15 @@ test('UIKIT.animate.CalculateAnimationSpecs should calculate correct animation v } const result3 = { - "intervalTime": 12.5, - "stepSize": -1, - "steps": 19, + "intervalTime": 16.666666666666668, + "stepSize": -1.3333333333333333, + "steps": 14, } const result4 = { - "intervalTime": 15.625, - "stepSize": -27, - "steps": 15, + "intervalTime": 16.666666666666668, + "stepSize": -27.466666666666665, + "steps": 14, } const result5 = { @@ -51,21 +51,21 @@ test('UIKIT.animate.CalculateAnimationSpecs should calculate correct animation v } const result9 = { - "intervalTime": 14.586709886547812, - "stepSize": 2, - "steps": 616, + "intervalTime": 16.666666666666668, + "stepSize": 2.285185185185185, + "steps": 539, } const result10 = { - "intervalTime": 16, + "intervalTime": 16.666666666666668, "stepSize": 2, "steps": 4, } const result11 = { - "intervalTime": 14.285714285714286, - "stepSize": -128, - "steps": 6, + "intervalTime": 16.666666666666668, + "stepSize": -128.16666666666666, + "steps": 5, } const result12 = { @@ -75,8 +75,8 @@ test('UIKIT.animate.CalculateAnimationSpecs should calculate correct animation v } const result13 = { - "intervalTime": 0, - "stepSize": 0, + "intervalTime": 16.666666666666668, + "stepSize": 3, "steps": 0, } @@ -110,23 +110,21 @@ test('UIKIT.animate.CalculateAnimationSpecs should calculate correct animation v }); + expect.extend({ toBeWholeNumber( received ) { - console.log(received.stepSize) - return { message: () => ( - `expected ${ received.stepSize } to be a whole number` + `expected ${ received.steps } to be a whole number` ), - pass: Math.round( received.stepSize ) === received.stepSize, + pass: Math.round( received.steps ) === received.steps, }; }, }); -test('UIKIT.animate.CalculateAnimationSpecs should only return whole number for steps', () => { +test('UIKIT.animate.CalculateAnimationSpecs should only return whole number for steps', () => { expect( UIKIT.animate.CalculateAnimationSpecs( 162, 982, 350 ) ).toBeWholeNumber(); expect( UIKIT.animate.CalculateAnimationSpecs( 0, 3, 6 ) ).toBeWholeNumber(); - });