Skip to content

Animation error handing improved #1836

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
enchev merged 1 commit into from
Mar 24, 2016
Merged

Animation error handing improved #1836

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 138 additions & 35 deletions apps/tests/ui/animation/animation-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@ import animation = require("ui/animation");
// ```
// </snippet>

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();
Expand Down Expand Up @@ -64,10 +64,10 @@ export var test_AnimatingProperties = function (done) {
// </snippet>
}

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();
Expand All @@ -83,7 +83,7 @@ export var test_CancellingAnimation = function (done) {
// <snippet module="ui/animation" title="animation">
// # 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");
Expand All @@ -109,10 +109,10 @@ export var test_CancellingAnimation = function (done) {
// </snippet>
}

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();
Expand Down Expand Up @@ -153,10 +153,10 @@ export var test_CancellingAnimate = function (done) {
// </snippet>
}

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();
Expand Down Expand Up @@ -198,10 +198,10 @@ export var test_ChainingAnimations = function (done) {
// </snippet>
}

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();
Expand Down Expand Up @@ -245,12 +245,12 @@ export var test_ReusingAnimations = function (done) {
// </snippet>
}

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();
Expand Down Expand Up @@ -299,10 +299,10 @@ export var test_AnimatingMultipleViews = function (done) {
// </snippet>
}

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();
Expand All @@ -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<viewModule.View>) => {
TKUnit.assertThrows(() => {
label.animate({ opacity: <any>"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<viewModule.View>) => {
TKUnit.assertThrows(() => {
label.animate({ delay: <any>"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<viewModule.View>) => {
TKUnit.assertThrows(() => {
label.animate({ duration: <any>"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<viewModule.View>) => {
TKUnit.assertThrows(() => {
label.animate({ iterations: <any>"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<viewModule.View>) => {
TKUnit.assertThrows(() => {
label.animate({ rotate: <any>"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<viewModule.View>) => {
TKUnit.assertThrows(() => {
label.animate({ scale: <any>"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<viewModule.View>) => {
TKUnit.assertThrows(() => {
label.animate({ translate: <any>"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<viewModule.View>) => {
TKUnit.assertThrows(() => {
label.animate({ backgroundColor: <any>"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();
Expand All @@ -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 {
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: <any>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 {
var pageFactory = function(): pageModule.Page {
label = new labelModule.Label();
label.text = "label";
var stackLayout = new stackLayoutModule.StackLayout();
Expand All @@ -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();
Expand All @@ -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();
Expand All @@ -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();
Expand All @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand All @@ -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();
Expand Down
32 changes: 28 additions & 4 deletions ui/animation/animation-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -139,11 +141,32 @@ export class Animation implements definition.Animation {
this._reject(new Error("Animation cancelled."));
}

private static _createPropertyAnimations(animationDefinition: definition.AnimationDefinition): Array<PropertyAnimation> {
private static _createPropertyAnimations(animationDefinition: definition.AnimationDefinition): Array<PropertyAnimation> {
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((<definition.Pair>animationDefinition[item]).x) ||
!types.isNumber((<definition.Pair>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<PropertyAnimation>();

// opacity
Expand All @@ -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(<any>animationDefinition.backgroundColor) : animationDefinition.backgroundColor,
duration: animationDefinition.duration,
delay: animationDefinition.delay,
iterations: animationDefinition.iterations,
Expand Down