diff --git a/apps/tests/ui/animation/animation-tests.ts b/apps/tests/ui/animation/animation-tests.ts index dd4b831cb..a27a35c2c 100644 --- a/apps/tests/ui/animation/animation-tests.ts +++ b/apps/tests/ui/animation/animation-tests.ts @@ -15,10 +15,10 @@ import animation = require("ui/animation"); // ``` // -export var test_AnimatingProperties = function (done) { +export var test_AnimatingProperties = function(done) { var mainPage: pageModule.Page; var label: labelModule.Label; - var pageFactory = function (): pageModule.Page { + var pageFactory = function(): pageModule.Page { label = new labelModule.Label(); label.text = "label"; var stackLayout = new stackLayoutModule.StackLayout(); @@ -64,10 +64,10 @@ export var test_AnimatingProperties = function (done) { // } -export var test_CancellingAnimation = function (done) { +export var test_CancellingAnimation = function(done) { var mainPage: pageModule.Page; var label: labelModule.Label; - var pageFactory = function (): pageModule.Page { + var pageFactory = function(): pageModule.Page { label = new labelModule.Label(); label.text = "label"; var stackLayout = new stackLayoutModule.StackLayout(); @@ -83,7 +83,7 @@ export var test_CancellingAnimation = function (done) { // // # Cancelling animation // ``` JavaScript - var animation1 = label.createAnimation({ translate: { x: 100, y: 100}, duration: 500 }); + var animation1 = label.createAnimation({ translate: { x: 100, y: 100 }, duration: 500 }); animation1.play() .then(() => { ////console.log("Animation finished"); @@ -109,10 +109,10 @@ export var test_CancellingAnimation = function (done) { // } -export var test_CancellingAnimate = function (done) { +export var test_CancellingAnimate = function(done) { var mainPage: pageModule.Page; var label: labelModule.Label; - var pageFactory = function (): pageModule.Page { + var pageFactory = function(): pageModule.Page { label = new labelModule.Label(); label.text = "label"; var stackLayout = new stackLayoutModule.StackLayout(); @@ -153,10 +153,10 @@ export var test_CancellingAnimate = function (done) { // } -export var test_ChainingAnimations = function (done) { +export var test_ChainingAnimations = function(done) { var mainPage: pageModule.Page; var label: labelModule.Label; - var pageFactory = function (): pageModule.Page { + var pageFactory = function(): pageModule.Page { label = new labelModule.Label(); label.text = "label"; var stackLayout = new stackLayoutModule.StackLayout(); @@ -198,10 +198,10 @@ export var test_ChainingAnimations = function (done) { // } -export var test_ReusingAnimations = function (done) { +export var test_ReusingAnimations = function(done) { var mainPage: pageModule.Page; var label: labelModule.Label; - var pageFactory = function (): pageModule.Page { + var pageFactory = function(): pageModule.Page { label = new labelModule.Label(); label.text = "label"; var stackLayout = new stackLayoutModule.StackLayout(); @@ -245,12 +245,12 @@ export var test_ReusingAnimations = function (done) { // } -export var test_AnimatingMultipleViews = function (done) { +export var test_AnimatingMultipleViews = function(done) { var mainPage: pageModule.Page; var label1: labelModule.Label; var label2: labelModule.Label; var label3: labelModule.Label; - var pageFactory = function (): pageModule.Page { + var pageFactory = function(): pageModule.Page { label1 = new labelModule.Label(); label1.text = "label1"; label2 = new labelModule.Label(); @@ -299,10 +299,10 @@ export var test_AnimatingMultipleViews = function (done) { // } -export var test_AnimateOpacity = function (done) { +export var test_AnimateOpacity = function(done) { var mainPage: pageModule.Page; var label: labelModule.Label; - var pageFactory = function (): pageModule.Page { + var pageFactory = function(): pageModule.Page { label = new labelModule.Label(); label.text = "label"; var stackLayout = new stackLayoutModule.StackLayout(); @@ -327,10 +327,82 @@ export var test_AnimateOpacity = function (done) { }); } -export var test_AnimateBackgroundColor = function (done) { +export var test_AnimateOpacity_ShouldThrow_IfNotNumber = () => { + var label = new labelModule.Label(); + helper.buildUIAndRunTest(label, (views: Array) => { + TKUnit.assertThrows(() => { + label.animate({ opacity: "0.75" }); + }, "Setting opacity to a non number should throw."); + }); +} + +export var test_AnimateDelay_ShouldThrow_IfNotNumber = () => { + var label = new labelModule.Label(); + helper.buildUIAndRunTest(label, (views: Array) => { + TKUnit.assertThrows(() => { + label.animate({ delay: "1" }); + }, "Setting delay to a non number should throw."); + }); +} + +export var test_AnimateDuration_ShouldThrow_IfNotNumber = () => { + var label = new labelModule.Label(); + helper.buildUIAndRunTest(label, (views: Array) => { + TKUnit.assertThrows(() => { + label.animate({ duration: "1" }); + }, "Setting duration to a non number should throw."); + }); +} + +export var test_AnimateIterations_ShouldThrow_IfNotNumber = () => { + var label = new labelModule.Label(); + helper.buildUIAndRunTest(label, (views: Array) => { + TKUnit.assertThrows(() => { + label.animate({ iterations: "1" }); + }, "Setting iterations to a non number should throw."); + }); +} + +export var test_AnimateRotate_ShouldThrow_IfNotNumber = () => { + var label = new labelModule.Label(); + helper.buildUIAndRunTest(label, (views: Array) => { + TKUnit.assertThrows(() => { + label.animate({ rotate: "1" }); + }, "Setting rotate to a non number should throw."); + }); +} + +export var test_AnimateScale_ShouldThrow_IfNotPair = () => { + var label = new labelModule.Label(); + helper.buildUIAndRunTest(label, (views: Array) => { + TKUnit.assertThrows(() => { + label.animate({ scale: "1" }); + }, "Setting scale to a non Pair should throw."); + }); +} + +export var test_AnimateTranslate_ShouldThrow_IfNotPair = () => { + var label = new labelModule.Label(); + helper.buildUIAndRunTest(label, (views: Array) => { + TKUnit.assertThrows(() => { + label.animate({ translate: "1" }); + }, "Setting translate to a non Pair should throw."); + }); +} + +export var test_AnimateBackgroundColor_ShouldThrow_IfNotValidColorStringOrColor = () => { + var label = new labelModule.Label(); + helper.buildUIAndRunTest(label, (views: Array) => { + TKUnit.assertThrows(() => { + label.animate({ backgroundColor: "test" }); + }, "Setting backgroundColor to a not valid color string or Color should throw."); + }); +} + +export var test_AnimateBackgroundColor = function(done) { var mainPage: pageModule.Page; var label: labelModule.Label; - var pageFactory = function (): pageModule.Page { + var pageFactory = function(): pageModule.Page { label = new labelModule.Label(); label.text = "label"; var stackLayout = new stackLayoutModule.StackLayout(); @@ -356,10 +428,41 @@ export var test_AnimateBackgroundColor = function (done) { }); } -export var test_AnimateTranslate = function (done) { +export var test_AnimateBackgroundColor_FromString = function(done) { var mainPage: pageModule.Page; var label: labelModule.Label; - var pageFactory = function (): pageModule.Page { + var pageFactory = function(): pageModule.Page { + label = new labelModule.Label(); + label.text = "label"; + var stackLayout = new stackLayoutModule.StackLayout(); + stackLayout.addChild(label); + mainPage = new pageModule.Page(); + mainPage.content = stackLayout; + return mainPage; + }; + + helper.navigate(pageFactory); + TKUnit.waitUntilReady(() => { return label.isLoaded }); + + var expected = "Red"; + var clr = new colorModule.Color(expected); + + label.animate({ backgroundColor: expected }) + .then(() => { + TKUnit.assert(label.backgroundColor.equals(clr)); + helper.goBack(); + done(); + }) + .catch((e) => { + helper.goBack(); + done(e); + }); +} + +export var test_AnimateTranslate = function(done) { + var mainPage: pageModule.Page; + var label: labelModule.Label; + var pageFactory = function(): pageModule.Page { label = new labelModule.Label(); label.text = "label"; var stackLayout = new stackLayoutModule.StackLayout(); @@ -386,10 +489,10 @@ export var test_AnimateTranslate = function (done) { }); } -export var test_AnimateScale = function (done) { +export var test_AnimateScale = function(done) { var mainPage: pageModule.Page; var label: labelModule.Label; - var pageFactory = function (): pageModule.Page { + var pageFactory = function(): pageModule.Page { label = new labelModule.Label(); label.text = "label"; var stackLayout = new stackLayoutModule.StackLayout(); @@ -404,8 +507,8 @@ export var test_AnimateScale = function (done) { label.animate({ scale: { x: 2, y: 3 } }) .then(() => { - TKUnit.assertEqual(label.scaleX, 2,"label.scaleX"); - TKUnit.assertEqual(label.scaleY, 3,"label.scaleY"); + TKUnit.assertEqual(label.scaleX, 2, "label.scaleX"); + TKUnit.assertEqual(label.scaleY, 3, "label.scaleY"); assertIOSNativeTransformIsCorrect(label); helper.goBack(); done(); @@ -416,10 +519,10 @@ export var test_AnimateScale = function (done) { }); } -export var test_AnimateRotate = function (done) { +export var test_AnimateRotate = function(done) { var mainPage: pageModule.Page; var label: labelModule.Label; - var pageFactory = function (): pageModule.Page { + var pageFactory = function(): pageModule.Page { label = new labelModule.Label(); label.text = "label"; var stackLayout = new stackLayoutModule.StackLayout(); @@ -445,10 +548,10 @@ export var test_AnimateRotate = function (done) { }); } -export var test_AnimateTranslateScaleAndRotateSimultaneously = function (done) { +export var test_AnimateTranslateScaleAndRotateSimultaneously = function(done) { var mainPage: pageModule.Page; var label: labelModule.Label; - var pageFactory = function (): pageModule.Page { + var pageFactory = function(): pageModule.Page { label = new labelModule.Label(); label.text = "label"; var stackLayout = new stackLayoutModule.StackLayout(); @@ -482,10 +585,10 @@ export var test_AnimateTranslateScaleAndRotateSimultaneously = function (done) { }); } -export var test_AnimateTranslateScaleAndRotateSequentially = function (done) { +export var test_AnimateTranslateScaleAndRotateSequentially = function(done) { var mainPage: pageModule.Page; var label: labelModule.Label; - var pageFactory = function (): pageModule.Page { + var pageFactory = function(): pageModule.Page { label = new labelModule.Label(); label.text = "label"; var stackLayout = new stackLayoutModule.StackLayout(); @@ -529,10 +632,10 @@ export var test_AnimateTranslateScaleAndRotateSequentially = function (done) { }); } -export var test_AnimationsAreAlwaysPlayed = function (done) { +export var test_AnimationsAreAlwaysPlayed = function(done) { var mainPage: pageModule.Page; var label: labelModule.Label; - var pageFactory = function (): pageModule.Page { + var pageFactory = function(): pageModule.Page { label = new labelModule.Label(); label.text = "label"; var stackLayout = new stackLayoutModule.StackLayout(); @@ -565,10 +668,10 @@ export var test_AnimationsAreAlwaysPlayed = function (done) { }); } -export var test_PlayPromiseIsResolvedWhenAnimationFinishes = function (done) { +export var test_PlayPromiseIsResolvedWhenAnimationFinishes = function(done) { var mainPage: pageModule.Page; var label: labelModule.Label; - var pageFactory = function (): pageModule.Page { + var pageFactory = function(): pageModule.Page { label = new labelModule.Label(); label.text = "label"; var stackLayout = new stackLayoutModule.StackLayout(); @@ -595,10 +698,10 @@ export var test_PlayPromiseIsResolvedWhenAnimationFinishes = function (done) { }); } -export var test_PlayPromiseIsRejectedWhenAnimationIsCancelled = function (done) { +export var test_PlayPromiseIsRejectedWhenAnimationIsCancelled = function(done) { var mainPage: pageModule.Page; var label: labelModule.Label; - var pageFactory = function (): pageModule.Page { + var pageFactory = function(): pageModule.Page { label = new labelModule.Label(); label.text = "label"; var stackLayout = new stackLayoutModule.StackLayout(); diff --git a/ui/animation/animation-common.ts b/ui/animation/animation-common.ts index 24d67aab3..534fb2439 100644 --- a/ui/animation/animation-common.ts +++ b/ui/animation/animation-common.ts @@ -1,5 +1,7 @@ import definition = require("ui/animation"); import viewModule = require("ui/core/view"); +import colorModule = require("color"); +import types = require("utils/types"); import * as traceModule from "trace"; var trace: typeof traceModule; @@ -46,8 +48,8 @@ export class CubicBezierAnimationCurve implements definition.CubicBezierAnimatio // We didn't want to actually modify Promise; as the cancel() is ONLY valid for animations "Promise" export class AnimationPromise implements definition.AnimationPromise { public cancel(): void { /* Do Nothing */ } - public then(onFulfilled?: (value?: any) => void, onRejected?: (error?: any) => void): AnimationPromise { return new AnimationPromise();} - public catch(onRejected?: (error?: any) => void): AnimationPromise { return new AnimationPromise();} + public then(onFulfilled?: (value?: any) => void, onRejected?: (error?: any) => void): AnimationPromise { return new AnimationPromise(); } + public catch(onRejected?: (error?: any) => void): AnimationPromise { return new AnimationPromise(); } } export class Animation implements definition.Animation { @@ -139,11 +141,32 @@ export class Animation implements definition.Animation { this._reject(new Error("Animation cancelled.")); } - private static _createPropertyAnimations(animationDefinition: definition.AnimationDefinition): Array { + private static _createPropertyAnimations(animationDefinition: definition.AnimationDefinition): Array { if (!animationDefinition.target) { throw new Error("No animation target specified."); } + for (let item in animationDefinition) { + if (!types.isDefined(animationDefinition[item])) { + continue; + } + + if ((item === Properties.opacity || + item === Properties.rotate || + item === "duration" || + item === "delay" || + item === "iterations") && !types.isNumber(animationDefinition[item])) { + throw new Error(`Property ${item} must be valid number. Value: ${animationDefinition[item]}`); + } else if ((item === Properties.scale || + item === Properties.translate) && + (!types.isNumber((animationDefinition[item]).x) || + !types.isNumber((animationDefinition[item]).y))) { + throw new Error(`Property ${item} must be valid Pair. Value: ${animationDefinition[item]}`); + } else if (item === Properties.backgroundColor && !colorModule.Color.isValid(animationDefinition.backgroundColor)) { + throw new Error(`Property ${item} must be valid color. Value: ${animationDefinition[item]}`); + } + } + var propertyAnimations = new Array(); // opacity @@ -164,7 +187,8 @@ export class Animation implements definition.Animation { propertyAnimations.push({ target: animationDefinition.target, property: Properties.backgroundColor, - value: animationDefinition.backgroundColor, + value: types.isString(animationDefinition.backgroundColor) ? + new colorModule.Color(animationDefinition.backgroundColor) : animationDefinition.backgroundColor, duration: animationDefinition.duration, delay: animationDefinition.delay, iterations: animationDefinition.iterations,