From f768fda881fabe1f710669063b0f36007dd6c928 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 14 Apr 2016 15:01:32 +0300 Subject: [PATCH] Fixed some slow tests. (#1968) Fixed modal page on iOS7. --- CrossPlatformModules.csproj | 4 +- apps/tests/app/mainPage.ts | 3 + apps/tests/observable-tests.ts | 4 - apps/tests/testRunner.ts | 53 +-- apps/tests/timer-tests.ts | 86 ++-- .../activity-indicator-tests.ts | 3 +- apps/tests/ui/animation/animation-tests.ts | 416 +++++------------- .../tests/ui/animation/css-animation-tests.ts | 175 ++++---- apps/tests/ui/bindable-tests.ts | 2 +- apps/tests/ui/helper.ts | 3 +- apps/tests/ui/page/page-tests-common.ts | 10 +- apps/tests/ui/page/page-tests.ios.ts | 8 +- apps/tests/ui/repeater/repeater-tests.ts | 47 +- .../ui/tab-view/tab-view-navigation-tests.ts | 76 ++-- apps/tests/ui/view/view-tests-common.ts | 6 +- apps/tests/weak-event-listener-tests.ts | 5 - .../xml-declaration/xml-declaration-tests.ts | 12 +- timer/timer.ios.ts | 57 ++- ui/core/view.d.ts | 12 +- ui/page/page.d.ts | 2 +- ui/page/page.ios.ts | 12 +- 21 files changed, 398 insertions(+), 598 deletions(-) diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj index 4465754e9..f3bbc4871 100644 --- a/CrossPlatformModules.csproj +++ b/CrossPlatformModules.csproj @@ -99,6 +99,7 @@ + modal-page.xml @@ -161,6 +162,7 @@ + Designer @@ -2211,7 +2213,7 @@ False - + \ No newline at end of file diff --git a/apps/tests/app/mainPage.ts b/apps/tests/app/mainPage.ts index 8060aa485..eb88d4e0f 100644 --- a/apps/tests/app/mainPage.ts +++ b/apps/tests/app/mainPage.ts @@ -1,6 +1,7 @@ import {Page} from "ui/page"; import * as trace from "trace"; import tests = require("../testRunner"); +import {Label} from "ui/label"; trace.enable(); trace.addCategories(trace.categories.Test + "," + trace.categories.Error); @@ -11,6 +12,8 @@ page.id = "mainPage"; page.on(Page.navigatedToEvent, onNavigatedTo); function onNavigatedTo(args) { + let label = new Label({ text: "Running non-UI tests..." }); + page.content = label args.object.off(Page.navigatedToEvent, onNavigatedTo); setTimeout(function () { tests.runAll(); diff --git a/apps/tests/observable-tests.ts b/apps/tests/observable-tests.ts index 8a02dd570..5e1504561 100644 --- a/apps/tests/observable-tests.ts +++ b/apps/tests/observable-tests.ts @@ -431,12 +431,10 @@ export var test_ObservableCreatedWithJSON_shouldDistinguishSeparateObjects = fun }); observable1.set("val", 10); - TKUnit.wait(0.1); TKUnit.assert(propName1 === "val", "propName1 should be 'val'"); TKUnit.assert(newValue1 === 10, "newValue1 should be 10"); observable2.set("val", 20); - TKUnit.wait(0.1); TKUnit.assert(propName2 === "val", "propName2 should be 'val'"); TKUnit.assert(newValue2 === 20, "newValue2 should be 20"); @@ -470,12 +468,10 @@ export var test_ObservablesCreatedWithJSON_shouldNotInterfereWithOneAnother = fu }); observable1.set("property1", 10); - TKUnit.wait(0.1); TKUnit.assert(propName1 === "property1", "propName1 should be 'property1'"); TKUnit.assert(newValue1 === 10, "newValue1 should be 10"); observable2.set("property2", 20); - TKUnit.wait(0.1); TKUnit.assert(propName2 === "property2", "propName2 should be 'property2'"); TKUnit.assert(newValue2 === 20, "newValue2 should be 20"); }; diff --git a/apps/tests/testRunner.ts b/apps/tests/testRunner.ts index fa3ca05f7..fc40fa3fb 100644 --- a/apps/tests/testRunner.ts +++ b/apps/tests/testRunner.ts @@ -26,34 +26,44 @@ export function isRunningOnEmulator(): boolean { } export var allTests = {}; +if (!isRunningOnEmulator()) { + allTests["LOCATION"] = require("./location-tests"); +} + +allTests["PLATFORM"] = require("./platform-tests"); +allTests["FILE SYSTEM"] = require("./file-system-tests"); +allTests["HTTP"] = require("./http-tests"); +allTests["XHR"] = require("./xhr-tests"); +allTests["FETCH"] = require("./fetch-tests"); +allTests["APPLICATION SETTINGS"] = require("./application-settings-tests"); +allTests["APPLICATION"] = require("./application-tests"); +allTests["IMAGE SOURCE"] = require("./image-source-tests"); +allTests["OBSERVABLE-ARRAY"] = require("./observable-array-tests"); +allTests["VIRTUAL-ARRAY"] = require("./virtual-array-tests"); +allTests["OBSERVABLE"] = require("./observable-tests"); +allTests["TIMER"] = require("./timer-tests"); +allTests["COLOR"] = require("./color-tests"); +allTests["DEPENDENCY-OBSERVABLE"] = require("./ui/dependency-observable-tests"); +allTests["BINDABLE"] = require("./ui/bindable-tests"); +allTests["BINDING-EXPRESSIONS"] = require("./ui/binding-expressions-tests"); +allTests["XML-PARSER"] = require("./xml-parser-tests/xml-parser-tests"); +allTests["FORMATTEDSTRING"] = require("./text/formatted-string-tests"); +allTests["FILE-SYSTEM-ACCESS"] = require("./file-system-access-tests/file-system-access-tests"); +allTests["FILE-NAME-RESOLVER"] = require("./file-name-resolver-tests/file-name-resolver-tests"); +allTests["WEAK-EVENTS"] = require("./weak-event-listener-tests"); +allTests["CONNECTIVITY"] = require("./connectivity-tests"); + allTests["PROXY-VIEW-CONTAINER"] = require("./ui/proxy-view-container/proxy-view-container-tests") allTests["SCROLL-VIEW"] = require("./ui/scroll-view/scroll-view-tests"); allTests["ACTION-BAR"] = require("./ui/action-bar/action-bar-tests"); allTests["XML-DECLARATION"] = require("./xml-declaration/xml-declaration-tests"); -allTests["APPLICATION"] = require("./application-tests"); allTests["DOCKLAYOUT"] = require("./layouts/dock-layout-tests"); allTests["WRAPLAYOUT"] = require("./layouts/wrap-layout-tests"); allTests["ABSOLUTELAYOUT"] = require("./layouts/absolute-layout-tests"); allTests["GRIDLAYOUT"] = require("./layouts/grid-layout-tests"); allTests["STACKLAYOUT"] = require("./layouts/stack-layout-tests"); -allTests["PLATFORM"] = require("./platform-tests"); allTests["STYLE-PROPERTIES"] = require("./ui/style/style-properties-tests"); -allTests["FILE SYSTEM"] = require("./file-system-tests"); -allTests["HTTP"] = require("./http-tests"); -allTests["XHR"] = require("./xhr-tests"); -allTests["FETCH"] = require("./fetch-tests"); allTests["FRAME"] = require("./frame-tests"); -allTests["APPLICATION SETTINGS"] = require("./application-settings-tests"); -allTests["IMAGE SOURCE"] = require("./image-source-tests"); -allTests["TIMER"] = require("./timer-tests"); -allTests["COLOR"] = require("./color-tests"); -allTests["OBSERVABLE-ARRAY"] = require("./observable-array-tests"); -allTests["VIRTUAL-ARRAY"] = require("./virtual-array-tests"); -allTests["OBSERVABLE"] = require("./observable-tests"); -allTests["DEPENDENCY-OBSERVABLE"] = require("./ui/dependency-observable-tests"); -allTests["BINDABLE"] = require("./ui/bindable-tests"); -allTests["BINDING-EXPRESSIONS"] = require("./ui/binding-expressions-tests"); -allTests["XML-PARSER"] = require("./xml-parser-tests/xml-parser-tests"); allTests["VIEW"] = require("./ui/view/view-tests"); allTests["STYLE"] = require("./ui/style/style-tests"); allTests["VISUAL-STATE"] = require("./ui/style/visual-state-tests"); @@ -73,31 +83,22 @@ allTests["LISTVIEW"] = require("./ui/list-view/list-view-tests"); allTests["ACTIVITY-INDICATOR"] = require("./ui/activity-indicator/activity-indicator-tests"); allTests["TEXT-FIELD"] = require("./ui/text-field/text-field-tests"); allTests["TEXT-VIEW"] = require("./ui/text-view/text-view-tests"); -allTests["FORMATTEDSTRING"] = require("./text/formatted-string-tests"); -allTests["FILE-SYSTEM-ACCESS"] = require("./file-system-access-tests/file-system-access-tests"); -allTests["FILE-NAME-RESOLVER"] = require("./file-name-resolver-tests/file-name-resolver-tests"); allTests["LIST-PICKER"] = require("./ui/list-picker/list-picker-tests"); allTests["DATE-PICKER"] = require("./ui/date-picker/date-picker-tests"); allTests["TIME-PICKER"] = require("./ui/time-picker/time-picker-tests"); allTests["WEB-VIEW"] = require("./ui/web-view/web-view-tests"); allTests["HTML-VIEW"] = require("./ui/html-view/html-view-tests"); -allTests["WEAK-EVENTS"] = require("./weak-event-listener-tests"); allTests["REPEATER"] = require("./ui/repeater/repeater-tests"); allTests["SEARCH-BAR"] = require('./ui/search-bar/search-bar-tests'); -allTests["CONNECTIVITY"] = require("./connectivity-tests"); allTests["SEGMENTED-BAR"] = require("./ui/segmented-bar/segmented-bar-tests"); allTests["ANIMATION"] = require("./ui/animation/animation-tests"); allTests["CSS-ANIMATION"] = require("./ui/animation/css-animation-tests"); -if (!isRunningOnEmulator()) { - allTests["LOCATION"] = require("./location-tests"); -} // Skip transitions on android emulators with API 23 if (!(platform.device.os === platform.platformNames.android && parseInt(platform.device.sdkVersion) === 23 && isRunningOnEmulator())) { allTests["TANSITIONS"] = require("./navigation/transition-tests"); } -// Navigation tests should always be last. allTests["NAVIGATION"] = require("./navigation/navigation-tests"); var testsWithLongDelay = { diff --git a/apps/tests/timer-tests.ts b/apps/tests/timer-tests.ts index f212e3f6f..94a2a40e6 100644 --- a/apps/tests/timer-tests.ts +++ b/apps/tests/timer-tests.ts @@ -1,6 +1,5 @@ import TKUnit = require("./TKUnit"); -import platform = require("platform"); -var timer = require("timer/timer"); +import timer = require("timer"); // // # Timer module @@ -12,30 +11,29 @@ var timer = require("timer/timer"); // ``` // -export var test_setTimeout_isDefined = function () { +export function test_setTimeout_isDefined() { TKUnit.assert(typeof (timer.setTimeout) !== "undefined", "Method timer.setTimeout() should be defined!"); }; -export var test_clearTimeout_isDefined = function () { +export function test_clearTimeout_isDefined() { TKUnit.assert(typeof (timer.clearTimeout) !== "undefined", "Method timer.clearTimeout() should be defined!"); }; -export var test_setInterval_isDefined = function () { +export function test_setInterval_isDefined() { TKUnit.assert(typeof (timer.setInterval) !== "undefined", "Method timer.setInterval() should be defined!"); }; -export var test_clearInterval_isDefined = function () { +export function test_clearInterval_isDefined() { TKUnit.assert(typeof (timer.clearInterval) !== "undefined", "Method timer.clearInterval() should be defined!"); }; -export var test_setTimeout = function () { - var completed: boolean; - var isReady = function () { return completed; } +export function test_setTimeout() { + let completed: boolean; // // ### Evaluates an expression after 0 milliseconds. // ``` JavaScript - timer.setTimeout(function () { + timer.setTimeout(() => { // completed = true; // @@ -43,66 +41,54 @@ export var test_setTimeout = function () { // ``` // - TKUnit.waitUntilReady(isReady, 0.5); + TKUnit.waitUntilReady(() => completed, 0.5); TKUnit.assert(completed, "Callback should be called!"); }; -export var test_setTimeout_callbackCalledAfterSpecifiedTime = function () { - var completed: boolean; - var isReady = function () { return completed; } +export function test_setTimeout_callbackCalledAfterSpecifiedTime() { + let completed = false; // // ### Evaluates an expression after a specified number of milliseconds. // ``` JavaScript - timer.setTimeout(function () { + timer.setTimeout(() => { // completed = true; // - }, 500); + }, 10); // ``` // - TKUnit.waitUntilReady(isReady, 1); + TKUnit.waitUntilReady(() => completed, 1); TKUnit.assert(completed, "Callback should be called after specified time!"); }; -export var test_setTimeout_callbackNotCalled = function () { - var completed: boolean; - var isReady = function () { return completed; } +export function test_setTimeout_callbackNotCalled() { + let completed = false; + timer.setTimeout(() => completed = true, 50); - timer.setTimeout(function () { - completed = true; - }, 1000); - - TKUnit.waitUntilReady(isReady, 0.5); + TKUnit.waitUntilReady(() => completed, 0.01); TKUnit.assert(!completed, "Callback should be called after specified time!"); }; -export var test_setTimeout_shouldReturnNumber = function () { - var id = timer.setTimeout(function () { +export function test_setTimeout_shouldReturnNumber() { + let id = timer.setTimeout(() => { // }); TKUnit.assert(typeof id === "number", "Callback should return number!"); }; -export var test_setTimeout_callbackShouldBeCleared = function () { - // This test is very unstable in iOS, because the platform does not guarantee the - // callback will be cleared on time. Better skip it for iOS. - if (platform.device.os === platform.platformNames.ios) { - return; - } - - var completed: boolean; - var isReady = function () { return completed; } +export function test_setTimeout_callbackShouldBeCleared() { + let completed = false; // // ### Cancels the evaluation with the clearTimeout method. // ``` JavaScript - var id = timer.setTimeout(function () { + let id = timer.setTimeout(() => { // completed = true; // - }, 2000); + }, 50); //// Clear timeout with specified id. timer.clearTimeout(id); @@ -110,19 +96,18 @@ export var test_setTimeout_callbackShouldBeCleared = function () { // ``` // - TKUnit.waitUntilReady(isReady, 3); + TKUnit.waitUntilReady(() => completed, 0.060); TKUnit.assert(!completed, "Callback should be cleared when clearTimeout() is executed for specified id!"); }; -export var test_setInterval_callbackCalledDuringPeriod = function () { - var counter = 0; - var expected = 4; - var isReady = function () { return counter >= expected; } +export function test_setInterval_callbackCalledDuringPeriod() { + let counter = 0; + let expected = 4; // // ### Evaluates an expression each time a specified number of milliseconds has elapsed. // ``` JavaScript - timer.setInterval(function () { + timer.setInterval(() => { // counter++; // @@ -130,18 +115,17 @@ export var test_setInterval_callbackCalledDuringPeriod = function () { // ``` // - TKUnit.waitUntilReady(isReady, 0.5); - TKUnit.assert(isReady(), "Callback should be raised at least" + expected + "times! Callback raised " + counter + " times."); + TKUnit.waitUntilReady(() => counter >= expected, 0.5); + TKUnit.assert(counter >= expected, "Callback should be raised at least" + expected + "times! Callback raised " + counter + " times."); }; -export var test_setInterval_callbackShouldBeCleared = function () { - var counter = 0; - var isReady = function () { return false; } +export function test_setInterval_callbackShouldBeCleared() { + let counter = 0; // // ### Cancel the interval previously started using the setInterval method. // ``` JavaScript - var id = timer.setInterval(function () { + let id = timer.setInterval(() => { // counter++; // @@ -150,6 +134,6 @@ export var test_setInterval_callbackShouldBeCleared = function () { // ``` // - TKUnit.waitUntilReady(isReady, 0.5); + TKUnit.waitUntilReady(() => false, 0.5); TKUnit.assert(counter === 1, "Callback should be raised only once!"); }; \ No newline at end of file diff --git a/apps/tests/ui/activity-indicator/activity-indicator-tests.ts b/apps/tests/ui/activity-indicator/activity-indicator-tests.ts index ec492c938..480060f57 100644 --- a/apps/tests/ui/activity-indicator/activity-indicator-tests.ts +++ b/apps/tests/ui/activity-indicator/activity-indicator-tests.ts @@ -19,7 +19,6 @@ import activityIndicatorModule = require("ui/activity-indicator"); //``` //  -var ASYNC = 0.2; export function test_default_TNS_values() { // // ### Creating an activity indicator @@ -50,7 +49,7 @@ export function test_set_TNS_value_updates_native_value() { function testAction(views: Array) { indicator.busy = true; - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => getNativeBusy(indicator) === true); TKUnit.assertEqual(getNativeBusy(indicator), true, "Native value is different from TNS value."); }; diff --git a/apps/tests/ui/animation/animation-tests.ts b/apps/tests/ui/animation/animation-tests.ts index 47e5df0e4..ffeb4eb1a 100644 --- a/apps/tests/ui/animation/animation-tests.ts +++ b/apps/tests/ui/animation/animation-tests.ts @@ -1,9 +1,8 @@ import TKUnit = require("../../TKUnit"); import helper = require("../helper"); -import pageModule = require("ui/page"); import viewModule = require("ui/core/view"); -import labelModule = require("ui/label"); -import stackLayoutModule = require("ui/layouts/stack-layout"); +import {Label} from "ui/label"; +import {StackLayout} from "ui/layouts/stack-layout"; import colorModule = require("color"); import enums = require("ui/enums"); @@ -15,21 +14,18 @@ import animation = require("ui/animation"); // ``` // -export var test_AnimatingProperties = 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; - }; +function prepareTest(): Label { + let mainPage = helper.getCurrentPage(); + let label = new Label({ text: "label" }); + let stackLayout = new StackLayout(); + stackLayout.addChild(label); + mainPage.content = stackLayout; + TKUnit.waitUntilReady(() => label.isLoaded); + return label; +} - helper.navigate(pageFactory); - TKUnit.waitUntilReady(() => { return label.isLoaded }); +export function test_AnimatingProperties(done) { + let label = prepareTest(); // // # Animating properties @@ -40,7 +36,7 @@ export var test_AnimatingProperties = function(done) { translate: { x: 100, y: 100 }, scale: { x: 2, y: 2 }, rotate: 180, - duration: 1000, + duration: 10, delay: 100, iterations: 3, curve: enums.AnimationCurve.easeIn @@ -62,26 +58,13 @@ export var test_AnimatingProperties = function(done) { // } -export var test_CancellingAnimation = 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 }); +export function test_CancellingAnimation(done) { + let label = prepareTest(); // // # Cancelling animation // ``` JavaScript - var animation1 = label.createAnimation({ translate: { x: 100, y: 100 }, duration: 500 }); + var animation1 = label.createAnimation({ translate: { x: 100, y: 100 }, duration: 20 }); animation1.play() .then(() => { ////console.log("Animation finished"); @@ -106,26 +89,13 @@ export var test_CancellingAnimation = function(done) { // } -export var test_CancellingAnimate = 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 }); +export function test_CancellingAnimate(done) { + let label = prepareTest(); // // # Cancelling animation // ``` JavaScript - var animation1 = label.animate({ translate: { x: 100, y: 100 }, duration: 500 }) + var animation1 = label.animate({ translate: { x: 100, y: 100 }, duration: 20 }) .then(() => { ////console.log("Animation finished"); // @@ -149,32 +119,25 @@ export var test_CancellingAnimate = function(done) { // } -export var test_ChainingAnimations = 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 }); +export function test_ChainingAnimations(done) { + let label = prepareTest(); // // # Chaining animations // ``` JavaScript - label.animate({ opacity: 0 }) - .then(() => label.animate({ opacity: 1 })) - .then(() => label.animate({ translate: { x: 200, y: 200 } })) - .then(() => label.animate({ translate: { x: 0, y: 0 } })) - .then(() => label.animate({ scale: { x: 5, y: 5 } })) - .then(() => label.animate({ scale: { x: 1, y: 1 } })) - .then(() => label.animate({ rotate: 180 })) - .then(() => label.animate({ rotate: 0 })) + + let duration = 300; + // + duration = 5; + // + label.animate({ opacity: 0, duration: duration }) + .then(() => label.animate({ opacity: 1, duration: duration })) + .then(() => label.animate({ translate: { x: 200, y: 200 }, duration: duration })) + .then(() => label.animate({ translate: { x: 0, y: 0 }, duration: duration })) + .then(() => label.animate({ scale: { x: 5, y: 5 }, duration: duration })) + .then(() => label.animate({ scale: { x: 1, y: 1 }, duration: duration })) + .then(() => label.animate({ rotate: 180, duration: duration })) + .then(() => label.animate({ rotate: 0, duration: duration })) .then(() => { ////console.log("Animation finished"); // @@ -192,27 +155,14 @@ export var test_ChainingAnimations = function(done) { // } -export var test_ReusingAnimations = 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 }); +export function test_ReusingAnimations(done) { + let label = prepareTest(); // // # Reusing animations // ``` JavaScript - var animation1 = label.createAnimation({ translate: { x: 100, y: 100 } }); - var animation2 = label.createAnimation({ translate: { x: 0, y: 0 } }); + var animation1 = label.createAnimation({ translate: { x: 100, y: 100 }, duration: 5 }); + var animation2 = label.createAnimation({ translate: { x: 0, y: 0 }, duration: 5 }); animation1.play() .then(() => animation2.play()) @@ -237,36 +187,25 @@ export var test_ReusingAnimations = 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 { - label1 = new labelModule.Label(); - label1.text = "label1"; - label2 = new labelModule.Label(); - label2.text = "label2"; - label3 = new labelModule.Label(); - label3.text = "label3"; - var stackLayout = new stackLayoutModule.StackLayout(); - stackLayout.addChild(label1); - stackLayout.addChild(label2); - stackLayout.addChild(label3); - mainPage = new pageModule.Page(); - mainPage.content = stackLayout; - return mainPage; - }; - helper.navigate(pageFactory); - TKUnit.waitUntilReady(() => { return label1.isLoaded && label2.isLoaded }); +export function test_AnimatingMultipleViews(done) { + let mainPage = helper.getCurrentPage(); + let label1 = new Label({ text: "label1" }); + let label2 = new Label({ text: "label2" }); + let label3 = new Label({ text: "label3" }); + let stackLayout = new StackLayout(); + stackLayout.addChild(label1); + stackLayout.addChild(label2); + stackLayout.addChild(label3); + mainPage.content = stackLayout; + TKUnit.waitUntilReady(() => label3.isLoaded); // // # Animating multiple views simultaneously // ``` JavaScript var animations: Array = [ - { target: label1, translate: { x: 200, y: 200 }, duration: 1000, delay: 0 }, - { target: label2, translate: { x: 200, y: 200 }, duration: 1000, delay: 333 }, - { target: label3, translate: { x: 200, y: 200 }, duration: 1000, delay: 666 }, + { target: label1, translate: { x: 200, y: 200 }, duration: 20, delay: 0 }, + { target: label2, translate: { x: 200, y: 200 }, duration: 20, delay: 7 }, + { target: label3, translate: { x: 200, y: 200 }, duration: 20, delay: 14 }, ]; var a = new animation.Animation(animations); a.play() @@ -289,23 +228,10 @@ export var test_AnimatingMultipleViews = function(done) { // } -export var test_AnimateOpacity = 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; - }; +export function test_AnimateOpacity(done) { + let label = prepareTest(); - helper.navigate(pageFactory); - TKUnit.waitUntilReady(() => { return label.isLoaded }); - - label.animate({ opacity: 0.75 }) + label.animate({ opacity: 0.75, duration: 20 }) .then(() => { TKUnit.assertEqual(label.opacity, 0.75, "label.opacity"); done(); @@ -315,8 +241,8 @@ export var test_AnimateOpacity = function(done) { }); } -export var test_AnimateOpacity_ShouldThrow_IfNotNumber = () => { - var label = new labelModule.Label(); +export function test_AnimateOpacity_ShouldThrow_IfNotNumber() { + var label = new Label(); helper.buildUIAndRunTest(label, (views: Array) => { TKUnit.assertThrows(() => { label.animate({ opacity: "0.75" }); @@ -324,8 +250,8 @@ export var test_AnimateOpacity_ShouldThrow_IfNotNumber = () => { }); } -export var test_AnimateDelay_ShouldThrow_IfNotNumber = () => { - var label = new labelModule.Label(); +export function test_AnimateDelay_ShouldThrow_IfNotNumber() { + var label = new Label(); helper.buildUIAndRunTest(label, (views: Array) => { TKUnit.assertThrows(() => { label.animate({ delay: "1" }); @@ -333,8 +259,8 @@ export var test_AnimateDelay_ShouldThrow_IfNotNumber = () => { }); } -export var test_AnimateDuration_ShouldThrow_IfNotNumber = () => { - var label = new labelModule.Label(); +export function test_AnimateDuration_ShouldThrow_IfNotNumber() { + var label = new Label(); helper.buildUIAndRunTest(label, (views: Array) => { TKUnit.assertThrows(() => { label.animate({ duration: "1" }); @@ -342,8 +268,8 @@ export var test_AnimateDuration_ShouldThrow_IfNotNumber = () => { }); } -export var test_AnimateIterations_ShouldThrow_IfNotNumber = () => { - var label = new labelModule.Label(); +export function test_AnimateIterations_ShouldThrow_IfNotNumber() { + var label = new Label(); helper.buildUIAndRunTest(label, (views: Array) => { TKUnit.assertThrows(() => { label.animate({ iterations: "1" }); @@ -351,8 +277,8 @@ export var test_AnimateIterations_ShouldThrow_IfNotNumber = () => { }); } -export var test_AnimateRotate_ShouldThrow_IfNotNumber = () => { - var label = new labelModule.Label(); +export function test_AnimateRotate_ShouldThrow_IfNotNumber() { + var label = new Label(); helper.buildUIAndRunTest(label, (views: Array) => { TKUnit.assertThrows(() => { label.animate({ rotate: "1" }); @@ -360,8 +286,8 @@ export var test_AnimateRotate_ShouldThrow_IfNotNumber = () => { }); } -export var test_AnimateScale_ShouldThrow_IfNotPair = () => { - var label = new labelModule.Label(); +export function test_AnimateScale_ShouldThrow_IfNotPair() { + var label = new Label(); helper.buildUIAndRunTest(label, (views: Array) => { TKUnit.assertThrows(() => { label.animate({ scale: "1" }); @@ -369,8 +295,8 @@ export var test_AnimateScale_ShouldThrow_IfNotPair = () => { }); } -export var test_AnimateTranslate_ShouldThrow_IfNotPair = () => { - var label = new labelModule.Label(); +export function test_AnimateTranslate_ShouldThrow_IfNotPair() { + var label = new Label(); helper.buildUIAndRunTest(label, (views: Array) => { TKUnit.assertThrows(() => { label.animate({ translate: "1" }); @@ -378,8 +304,8 @@ export var test_AnimateTranslate_ShouldThrow_IfNotPair = () => { }); } -export var test_AnimateBackgroundColor_ShouldThrow_IfNotValidColorStringOrColor = () => { - var label = new labelModule.Label(); +export function test_AnimateBackgroundColor_ShouldThrow_IfNotValidColorStringOrColor() { + var label = new Label(); helper.buildUIAndRunTest(label, (views: Array) => { TKUnit.assertThrows(() => { label.animate({ backgroundColor: "test" }); @@ -387,24 +313,11 @@ export var test_AnimateBackgroundColor_ShouldThrow_IfNotValidColorStringOrColor }); } -export var test_AnimateBackgroundColor = 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 }); +export function test_AnimateBackgroundColor(done) { + let label = prepareTest(); var red = new colorModule.Color("Red"); - label.animate({ backgroundColor: red }) + label.animate({ backgroundColor: red, duration: 20 }) .then(() => { TKUnit.assert(label.backgroundColor.equals(red)); done(); @@ -414,26 +327,12 @@ export var test_AnimateBackgroundColor = 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 }); - +export function test_AnimateBackgroundColor_FromString(done) { + let label = prepareTest(); var expected = "Red"; var clr = new colorModule.Color(expected); - label.animate({ backgroundColor: expected }) + label.animate({ backgroundColor: expected, duration: 20 }) .then(() => { TKUnit.assert(label.backgroundColor.equals(clr)); done(); @@ -443,23 +342,10 @@ export var test_AnimateBackgroundColor_FromString = function(done) { }); } -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(); - stackLayout.addChild(label); - mainPage = new pageModule.Page(); - mainPage.content = stackLayout; - return mainPage; - }; +export function test_AnimateTranslate(done) { + let label = prepareTest(); - helper.navigate(pageFactory); - TKUnit.waitUntilReady(() => { return label.isLoaded }); - - label.animate({ translate: { x: 100, y: 200 } }) + label.animate({ translate: { x: 100, y: 200 }, duration: 20 }) .then(() => { TKUnit.assertEqual(label.translateX, 100, "label.translateX"); TKUnit.assertEqual(label.translateY, 200, "label.translateY"); @@ -471,23 +357,10 @@ export var test_AnimateTranslate = function(done) { }); } -export var test_AnimateScale = 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; - }; +export function test_AnimateScale(done) { + let label = prepareTest(); - helper.navigate(pageFactory); - TKUnit.waitUntilReady(() => { return label.isLoaded }); - - label.animate({ scale: { x: 2, y: 3 } }) + label.animate({ scale: { x: 2, y: 3 }, duration: 20 }) .then(() => { TKUnit.assertEqual(label.scaleX, 2, "label.scaleX"); TKUnit.assertEqual(label.scaleY, 3, "label.scaleY"); @@ -499,23 +372,10 @@ export var test_AnimateScale = function(done) { }); } -export var test_AnimateRotate = 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; - }; +export function test_AnimateRotate(done) { + let label = prepareTest(); - helper.navigate(pageFactory); - TKUnit.waitUntilReady(() => { return label.isLoaded }); - - label.animate({ rotate: 123 }) + label.animate({ rotate: 123, duration: 20 }) .then(() => { TKUnit.assertEqual(label.rotate, 123, "label.rotate"); assertIOSNativeTransformIsCorrect(label); @@ -526,26 +386,14 @@ export var test_AnimateRotate = function(done) { }); } -export var test_AnimateTranslateScaleAndRotateSimultaneously = 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 }); +export function test_AnimateTranslateScaleAndRotateSimultaneously(done) { + let label = prepareTest(); label.animate({ translate: { x: 100, y: 200 }, scale: { x: 2, y: 3 }, - rotate: 123 + rotate: 123, + duration: 20 }) .then(() => { TKUnit.assertEqual(label.translateX, 100, "label.translateX"); @@ -561,28 +409,15 @@ export var test_AnimateTranslateScaleAndRotateSimultaneously = function(done) { }); } -export var test_AnimateTranslateScaleAndRotateSequentially = 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; - }; +export function test_AnimateTranslateScaleAndRotateSequentially(done) { + let label = prepareTest(); - helper.navigate(pageFactory); - TKUnit.waitUntilReady(() => { return label.isLoaded }); - - label.animate({ translate: { x: 100, y: 200 } }) + label.animate({ translate: { x: 100, y: 200 }, duration: 20 }) .then(() => { TKUnit.assertEqual(label.translateX, 100, "label.translateX"); TKUnit.assertEqual(label.translateY, 200, "label.translateY"); assertIOSNativeTransformIsCorrect(label); - return label.animate({ scale: { x: 2, y: 3 } }); + return label.animate({ scale: { x: 2, y: 3 }, duration: 20 }); }) .then(() => { TKUnit.assertEqual(label.translateX, 100, "label.translateX"); @@ -590,7 +425,7 @@ export var test_AnimateTranslateScaleAndRotateSequentially = function(done) { TKUnit.assertEqual(label.scaleX, 2, "label.scaleX"); TKUnit.assertEqual(label.scaleY, 3, "label.scaleY"); assertIOSNativeTransformIsCorrect(label); - return label.animate({ rotate: 123 }); + return label.animate({ rotate: 123, duration: 20 }); }) .then(() => { TKUnit.assertEqual(label.translateX, 100, "label.translateX"); @@ -606,24 +441,11 @@ export var test_AnimateTranslateScaleAndRotateSequentially = function(done) { }); } -export var test_AnimationsAreAlwaysPlayed = 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; - }; +export function test_AnimationsAreAlwaysPlayed(done) { + let label = prepareTest(); - helper.navigate(pageFactory); - TKUnit.waitUntilReady(() => { return label.isLoaded }); - - var animation1 = label.createAnimation({ opacity: 0 }); - var animation2 = label.createAnimation({ opacity: 1 }); + var animation1 = label.createAnimation({ opacity: 0, duration: 20 }); + var animation2 = label.createAnimation({ opacity: 1, duration: 20 }); animation1.play() .then(() => { @@ -640,23 +462,10 @@ export var test_AnimationsAreAlwaysPlayed = function(done) { }); } -export var test_PlayPromiseIsResolvedWhenAnimationFinishes = 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; - }; +export function test_PlayPromiseIsResolvedWhenAnimationFinishes(done) { + let label = prepareTest(); - helper.navigate(pageFactory); - TKUnit.waitUntilReady(() => { return label.isLoaded }); - - var animation = label.createAnimation({ opacity: 0, duration: 1000 }); + var animation = label.createAnimation({ opacity: 0, duration: 20 }); animation.play() .then(function onResolved() { @@ -668,23 +477,10 @@ export var test_PlayPromiseIsResolvedWhenAnimationFinishes = function(done) { }); } -export var test_PlayPromiseIsRejectedWhenAnimationIsCancelled = 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; - }; +export function test_PlayPromiseIsRejectedWhenAnimationIsCancelled(done) { + let label = prepareTest(); - helper.navigate(pageFactory); - TKUnit.waitUntilReady(() => { return label.isLoaded }); - - var animation = label.createAnimation({ opacity: 0, duration: 1000 }); + var animation = label.createAnimation({ opacity: 0, duration: 20 }); animation.play() .then(function onResolved() { diff --git a/apps/tests/ui/animation/css-animation-tests.ts b/apps/tests/ui/animation/css-animation-tests.ts index 6aff374b5..a7f5fd175 100644 --- a/apps/tests/ui/animation/css-animation-tests.ts +++ b/apps/tests/ui/animation/css-animation-tests.ts @@ -1,5 +1,4 @@ import TKUnit = require("../../TKUnit"); -import page = require("ui/page"); import styleScope = require("ui/styling/style-scope"); import keyframeAnimation = require("ui/animation/keyframe-animation"); import enums = require("ui/enums"); @@ -8,6 +7,7 @@ import stackModule = require("ui/layouts/stack-layout"); import labelModule = require("ui/label"); import color = require("color"); import selectorModule = require("ui/styling/css-selector"); +//import styling = require("ui/styling"); function createAnimationFromCSS(css: string, name: string): keyframeAnimation.KeyframeAnimationInfo { let scope = new styleScope.StyleScope(); @@ -32,7 +32,7 @@ function findSelectorInScope(scope: styleScope.StyleScope, name: string): select return selector; } -exports.test_ReadAnimationProperties = function () { +export function test_ReadAnimationProperties() { let css = ".test { " + "animation-name: first; " + "animation-duration: 4s; " + @@ -50,16 +50,18 @@ exports.test_ReadAnimationProperties = function () { TKUnit.assertEqual(animation.iterations, 10); TKUnit.assertTrue(animation.isForwards); TKUnit.assertTrue(animation.isReverse); -}; -exports.test_ReadTheAnimationProperty = function () { +} + +export function test_ReadTheAnimationProperty() { let animation = createAnimationFromCSS(".test { animation: second 0.2s ease-out 1 2 }", "test"); TKUnit.assertEqual(animation.name, "second"); TKUnit.assertEqual(animation.duration, 200); TKUnit.assertEqual(animation.curve, enums.AnimationCurve.easeOut); TKUnit.assertEqual(animation.delay, 1000); TKUnit.assertEqual(animation.iterations, 2); -}; -exports.test_ReadAnimationCurve = function () { +} + +export function test_ReadAnimationCurve() { let animation = createAnimationFromCSS(".test { animation-timing-function: ease-in; }", "test"); TKUnit.assertEqual(animation.curve, enums.AnimationCurve.easeIn); animation = createAnimationFromCSS(".test { animation-timing-function: ease-out; }", "test"); @@ -73,30 +75,34 @@ exports.test_ReadAnimationCurve = function () { animation = createAnimationFromCSS(".test { animation-timing-function: cubic-bezier(0.1, 1.0, 0.5, 0.5); }", "test"); let curve = animation.curve; TKUnit.assert(curve.x1 === 0.1 && curve.y1 === 1.0 && curve.x2 === 0.5 && curve.y2 === 0.5); -}; -exports.test_ReadIterations = function () { +} + +export function test_ReadIterations() { let animation = createAnimationFromCSS(".test { animation-iteration-count: 5; }", "test"); TKUnit.assertEqual(animation.iterations, 5); animation = createAnimationFromCSS(".test { animation-iteration-count: infinite; }", "test"); TKUnit.assertEqual(animation.iterations, Number.MAX_VALUE); -}; -exports.test_ReadFillMode = function () { +} + +export function test_ReadFillMode() { let animation = createAnimationFromCSS(".test { animation-iteration-count: 5; }", "test"); TKUnit.assertFalse(animation.isForwards); animation = createAnimationFromCSS(".test { animation-fill-mode: forwards; }", "test"); TKUnit.assertTrue(animation.isForwards); animation = createAnimationFromCSS(".test { animation-fill-mode: backwards; }", "test"); TKUnit.assertFalse(animation.isForwards); -}; -exports.test_ReadDirection = function () { +} + +export function test_ReadDirection() { let animation = createAnimationFromCSS(".test { animation-iteration-count: 5; }", "test"); TKUnit.assertFalse(animation.isReverse); animation = createAnimationFromCSS(".test { animation-direction: reverse; }", "test"); TKUnit.assertTrue(animation.isReverse); animation = createAnimationFromCSS(".test { animation-direction: normal; }", "test"); TKUnit.assertFalse(animation.isReverse); -}; -exports.test_ReadKeyframe = function () { +} + +export function test_ReadKeyframe() { let scope = new styleScope.StyleScope(); scope.css = ".test { animation-name: test; } @keyframes test { from { background-color: red; } to { background-color: blue; } }"; scope.ensureSelectors(); @@ -109,8 +115,9 @@ exports.test_ReadKeyframe = function () { TKUnit.assertEqual(animation.keyframes[1].duration, 1, "Second keyframe duration should be 1"); TKUnit.assertEqual(animation.keyframes[0].declarations.length, 1, "Keyframe declarations are not correct"); TKUnit.assertEqual(animation.keyframes[0].declarations[0].property, "backgroundColor", "Keyframe declarations are not correct"); -}; -exports.test_ReadScale = function () { +} + +export function test_ReadScale() { let animation = createAnimationFromCSS(".test { animation-name: test; } @keyframes test { to { transform: scaleX(5),scaleY(10); } }", "test"); let scale = animation.keyframes[0].declarations[0].value; TKUnit.assertEqual(animation.keyframes[0].declarations[0].property, "scale"); @@ -127,8 +134,9 @@ exports.test_ReadScale = function () { scale = animation.keyframes[0].declarations[0].value; TKUnit.assertEqual(animation.keyframes[0].declarations[0].property, "scale"); TKUnit.assert(scale.x === 10 && scale.y === 20); -}; -exports.test_ReadTranslate = function () { +} + +export function test_ReadTranslate() { let animation = createAnimationFromCSS(".test { animation-name: test; } @keyframes test { to { transform: translateX(5),translateY(10); } }", "test"); let translate = animation.keyframes[0].declarations[0].value; TKUnit.assertEqual(animation.keyframes[0].declarations[0].property, "translate"); @@ -145,8 +153,9 @@ exports.test_ReadTranslate = function () { translate = animation.keyframes[0].declarations[0].value; TKUnit.assertEqual(animation.keyframes[0].declarations[0].property, "translate"); TKUnit.assert(translate.x === 10 && translate.y === 20); -}; -exports.test_ReadRotate = function () { +} + +export function test_ReadRotate() { let animation = createAnimationFromCSS(".test { animation-name: test; } @keyframes test { to { transform: rotate(5); } }", "test"); TKUnit.assertEqual(animation.keyframes[0].declarations[0].property, "rotate"); TKUnit.assertEqual(animation.keyframes[0].declarations[0].value, 5); @@ -156,8 +165,9 @@ exports.test_ReadRotate = function () { animation = createAnimationFromCSS(".test { animation-name: test; } @keyframes test { to { transform: rotate(0.7853981634rad); } }", "test"); TKUnit.assertEqual(animation.keyframes[0].declarations[0].property, "rotate"); TKUnit.assertTrue(animation.keyframes[0].declarations[0].value - 45 < 0.1); -}; -exports.test_ReadTransform = function () { +} + +export function test_ReadTransform() { let css = ".test { animation-name: test; } @keyframes test { to { transform: rotate(10),scaleX(5),translate(2,4); } }"; let animation = createAnimationFromCSS(css, "test"); let rotate = animation.keyframes[0].declarations[0].value; @@ -173,8 +183,9 @@ exports.test_ReadTransform = function () { TKUnit.assertEqual(rotate, 0); TKUnit.assert(scale.x === 1 && scale.y === 1); TKUnit.assert(translate.x === 0 && translate.y === 0); -}; -exports.test_ReadAnimationWithUnsortedKeyframes = function () { +} + +export function test_ReadAnimationWithUnsortedKeyframes() { let css = ".test { animation-name: test; } " + "@keyframes test { " + "from { opacity: 0; } " + @@ -196,14 +207,16 @@ exports.test_ReadAnimationWithUnsortedKeyframes = function () { TKUnit.assertEqual(animation.keyframes[3].duration, 0.6); TKUnit.assertEqual(animation.keyframes[4].duration, 0.8); TKUnit.assertEqual(animation.keyframes[5].duration, 1); -}; -exports.test_ReadAnimationsWithCSSImport = function () { +} + +export function test_ReadAnimationsWithCSSImport() { let css = "@import '~/ui/animation/test.css'; .test { animation-name: test; }"; let animation = createAnimationFromCSS(css, "test"); TKUnit.assertEqual(animation.keyframes.length, 3); TKUnit.assertEqual(animation.keyframes[1].declarations[0].property, "backgroundColor"); -}; -exports.test_LoadTwoAnimationsWithTheSameName = function () { +} + +export function test_LoadTwoAnimationsWithTheSameName() { let scope = new styleScope.StyleScope(); scope.css = "@keyframes a1 { from { opacity: 0; } to { opacity: 1; } } @keyframes a1 { from { opacity: 0; } to { opacity: 0.5; } } .a { animation-name: a1; }"; scope.ensureSelectors(); @@ -217,8 +230,9 @@ exports.test_LoadTwoAnimationsWithTheSameName = function () { selector = findSelectorInScope(scope, "a"); TKUnit.assertEqual(selector.animations[0].keyframes.length, 2); TKUnit.assertEqual(selector.animations[0].keyframes.length, 2); -}; -exports.test_LoadAnimationProgrammatically = function () { +} + +export function test_LoadAnimationProgrammatically() { let stack = new stackModule.StackLayout(); helper.buildUIAndRunTest(stack, function (views) { let page = views[1]; @@ -228,54 +242,54 @@ exports.test_LoadAnimationProgrammatically = function () { TKUnit.assertEqual(animation.keyframes[1].declarations[0].property, "opacity"); TKUnit.assertEqual(animation.keyframes[1].declarations[0].value, 0); }); -}; -exports.test_ExecuteCSSAnimation = function () { - let mainPage; - let label; - let pageFactory = function () { - label = new labelModule.Label(); - label.text = "label"; - let stackLayout = new stackModule.StackLayout(); - stackLayout.addChild(label); - mainPage = new page.Page(); - mainPage.css = "@keyframes k { from { background-color: red; } to { background-color: green; } } .l { animation-name: k; animation-duration: 0.5s; animation-fill-mode: forwards; }"; - mainPage.content = stackLayout; - return mainPage; - }; - helper.navigate(pageFactory); - TKUnit.waitUntilReady(function () { return label.isLoaded; }); +} + +export function test_ExecuteCSSAnimation() { + let mainPage = helper.getCurrentPage(); + mainPage.css = null; + let label = new labelModule.Label({ text: "label" }); + let stackLayout = new stackModule.StackLayout(); + stackLayout.addChild(label); + + mainPage.css = "@keyframes k { from { background-color: red; } to { background-color: green; } } .l { animation-name: k; animation-duration: 0.1s; animation-fill-mode: forwards; }"; + mainPage.content = stackLayout; + + TKUnit.waitUntilReady(() => label.isLoaded); label.className = "l"; - TKUnit.waitUntilReady(function () { return new color.Color("green").equals(label.backgroundColor); }, 1); - TKUnit.assert(new color.Color("green").equals(label.backgroundColor)); -}; -// exports.test_ExecuteFillMode = function () { -// let mainPage; -// let label; -// let pageFactory = function () { -// label = new labelModule.Label(); -// label.text = "label"; -// let stackLayout = new stackModule.StackLayout(); -// stackLayout.addChild(label); -// mainPage = new page.Page(); -// mainPage.css = "@keyframes k { from { background-color: red; } to { background-color: green; } } " + -// ".l { animation-name: k; animation-duration: 0.5s; animation-fill-mode: none; } " + -// ".l2 { animation-name: k; animation-duration: 0.5s; animation-fill-mode: forwards; }"; -// mainPage.content = stackLayout; -// return mainPage; -// }; -// helper.navigate(pageFactory); -// TKUnit.waitUntilReady(function () { return label.isLoaded; }); -// TKUnit.assertEqual(label.backgroundColor, undefined); -// label.className = "l"; -// TKUnit.wait(2); -// TKUnit.assertEqual(label.backgroundColor, undefined); -// label.className = "l2"; -// TKUnit.waitUntilReady(function() { return new color.Color("green").equals(label.backgroundColor); }, 1); -// TKUnit.assert(new color.Color("green").equals(label.backgroundColor)); -// helper.goBack(); -// helper.goBack(); -// }; -exports.test_ReadTwoAnimations = function () { + let green = new color.Color("green"); + TKUnit.waitUntilReady(() => green.equals(label.backgroundColor), 1); + TKUnit.assertEqual(label.backgroundColor, green); +} + +//export function test_ExecuteFillMode() { +// let mainPage = helper.getCurrentPage(); +// mainPage.style._resetValue(styling.properties.backgroundColorProperty); +// mainPage.style._resetValue(styling.properties.colorProperty); +// mainPage._resetValue(labelModule.Label.bindingContextProperty); +// mainPage._resetValue(labelModule.Label.cssClassProperty); +// mainPage._resetValue(labelModule.Label.idProperty); +// mainPage.css = null; + +// let label = new labelModule.Label({ text: "label" }); +// let stackLayout = new stackModule.StackLayout(); +// stackLayout.addChild(label); +// mainPage.css = "@keyframes k { from { background-color: red; } to { background-color: green; } } " + +// ".l { animation-name: k; animation-duration: 0.5s; animation-fill-mode: none; } " + +// ".l2 { animation-name: k; animation-duration: 0.5s; animation-fill-mode: forwards; }"; +// mainPage.content = stackLayout; + +// TKUnit.waitUntilReady(() => label.isLoaded); + +// TKUnit.assertEqual(label.backgroundColor, undefined, "label.backgroundColor should be undefind"); + +// label.className = "l"; +// TKUnit.assertEqual(label.backgroundColor, undefined, "label.backgroundColor should be undefind"); + +// label.className = "l2"; +// TKUnit.assertEqual(label.backgroundColor, new color.Color("green")); +//} + +export function test_ReadTwoAnimations() { let scope = new styleScope.StyleScope(); scope.css = ".test { animation: one 0.2s ease-out 1 2, two 2s ease-in; }"; scope.ensureSelectors(); @@ -285,8 +299,9 @@ exports.test_ReadTwoAnimations = function () { TKUnit.assertEqual(selector.animations[1].curve, enums.AnimationCurve.easeIn); TKUnit.assertEqual(selector.animations[1].name, "two"); TKUnit.assertEqual(selector.animations[1].duration, 2000); -}; -exports.test_AnimationCurveInKeyframes = function () { +} + +export function test_AnimationCurveInKeyframes() { let scope = new styleScope.StyleScope(); scope.css = "@keyframes an { from { animation-timing-function: linear; background-color: red; } 50% { background-color: green; } to { background-color: black; } } .test { animation-name: an; animation-timing-function: ease-in; }"; scope.ensureSelectors(); @@ -298,4 +313,4 @@ exports.test_AnimationCurveInKeyframes = function () { let realAnimation = keyframeAnimation.KeyframeAnimation.keyframeAnimationFromInfo(animation, 2); TKUnit.assertEqual(realAnimation.animations[1].curve, enums.AnimationCurve.linear); TKUnit.assertEqual(realAnimation.animations[2].curve, enums.AnimationCurve.easeIn); -}; +} \ No newline at end of file diff --git a/apps/tests/ui/bindable-tests.ts b/apps/tests/ui/bindable-tests.ts index 3af9b5712..338078102 100644 --- a/apps/tests/ui/bindable-tests.ts +++ b/apps/tests/ui/bindable-tests.ts @@ -917,7 +917,7 @@ export function test_BindingContextOfAChildElementIsNotOverwrittenBySettingTheBi }); page.content = child; - TKUnit.waitUntilReady(() => { return testFinished }); + TKUnit.waitUntilReady(() => testFinished); } export var test_BindingHitsGetterTooManyTimes = function () { diff --git a/apps/tests/ui/helper.ts b/apps/tests/ui/helper.ts index 8e1fdbb7a..b1e0fde4e 100644 --- a/apps/tests/ui/helper.ts +++ b/apps/tests/ui/helper.ts @@ -109,7 +109,8 @@ export function buildUIWithWeakRefAndInteract(createFunc: ( newPage.content = sp; - TKUnit.waitUntilReady(() => { return testFinished; }, MEMORY_ASYNC); + TKUnit.waitUntilReady(() => testFinished, MEMORY_ASYNC); + TKUnit.assertTrue(testFinished, "Test did not completed.") done(null); } diff --git a/apps/tests/ui/page/page-tests-common.ts b/apps/tests/ui/page/page-tests-common.ts index 37405011f..b61dea3f4 100644 --- a/apps/tests/ui/page/page-tests-common.ts +++ b/apps/tests/ui/page/page-tests-common.ts @@ -490,11 +490,17 @@ export function test_WhenPageIsNavigatedToItCanShowAnotherPageAsModal() { let page = args.object; TKUnit.assertNull(page.modal, "currentPage.modal should be undefined when no modal page is shown!"); let basePath = "ui/page/"; - modalPage = page.showModal(basePath + "modal-page", ctx, modalCloseCallback, false); - TKUnit.assertTrue((modalPage).showingModally, "showingModally"); + let entry: frameModule.NavigationEntry = { + moduleName: basePath + "modal-page" + }; + + modalPage = frameModule.resolvePageFromEntry(entry); modalPage.on(Page.shownModallyEvent, onShownModal); modalPage.on(Page.loadedEvent, onModalLoaded); modalPage.on(Page.unloadedEvent, onModalUnloaded); + + page.showModal(modalPage, ctx, modalCloseCallback, false); + TKUnit.assertTrue((modalPage).showingModally, "showingModally"); }; var masterPageFactory = function (): Page { diff --git a/apps/tests/ui/page/page-tests.ios.ts b/apps/tests/ui/page/page-tests.ios.ts index ec65f5c36..9c296cdf5 100644 --- a/apps/tests/ui/page/page-tests.ios.ts +++ b/apps/tests/ui/page/page-tests.ios.ts @@ -77,8 +77,8 @@ export function test_page_no_anctionBar_measure_no_spanUnderBackground_measure_l let lbl = new Label(); page.content = lbl; - helper.navigate(() => { return page; }); - TKUnit.waitUntilReady(() => { return page.isLayoutValid; }); + helper.navigate(() => page); + TKUnit.waitUntilReady(() => page.isLayoutValid); TKUnit.assertTrue(page.isLoaded, "page NOT loaded!"); let bounds = page._getCurrentLayoutBounds(); @@ -92,7 +92,7 @@ export function test_page_no_anctionBar_measure_no_spanUnderBackground_measure_l TKUnit.assertEqual(contentHeight, frameHeight - statusBarHeight, "Page.content height should match Frame height - statusBar height."); page.backgroundSpanUnderStatusBar = false; - TKUnit.waitUntilReady(() => { return page.isLayoutValid; }); + TKUnit.waitUntilReady(() => page.isLayoutValid); pageHeight = page._getCurrentLayoutBounds().bottom - page._getCurrentLayoutBounds().top; TKUnit.assertEqual(pageHeight, frameHeight - statusBarHeight, "Page should be given Frame height - statusBar height."); @@ -100,7 +100,7 @@ export function test_page_no_anctionBar_measure_no_spanUnderBackground_measure_l TKUnit.assertEqual(contentHeight, pageHeight, "Page.content height should match Page height."); page.actionBarHidden = false; - TKUnit.waitUntilReady(() => { return page.isLayoutValid; }); + TKUnit.waitUntilReady(() => page.isLayoutValid); pageHeight = page._getCurrentLayoutBounds().bottom - page._getCurrentLayoutBounds().top; TKUnit.assertEqual(pageHeight, frameHeight - statusBarHeight, "Page should be given Frame height - statusBar height."); diff --git a/apps/tests/ui/repeater/repeater-tests.ts b/apps/tests/ui/repeater/repeater-tests.ts index 36c2a2f6e..1fa15f1db 100644 --- a/apps/tests/ui/repeater/repeater-tests.ts +++ b/apps/tests/ui/repeater/repeater-tests.ts @@ -88,7 +88,7 @@ export function test_set_items_to_array_loads_all_items() { // ``` // - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assert(getChildAtText(repeater, 0) === "red", "Item not created for index 0"); TKUnit.assert(getChildAtText(repeater, 1) === "green", "Item not created for index 1"); @@ -104,7 +104,7 @@ export function test_set_items_to_array_creates_views() { function testAction(views: Array) { repeater.items = FEW_ITEMS; - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), FEW_ITEMS.length, "views count."); }; @@ -119,7 +119,7 @@ export function test_refresh_after_adding_items_to_array_loads_new_items() { var colors = ["red", "green", "blue"]; repeater.items = colors; - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), colors.length, "views count."); // // > Note, that changing the array after the repeater is shown will not update the UI. @@ -147,7 +147,7 @@ export function test_refresh_reloads_all_items() { repeater.items = itemsToBind; - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => repeater.isLayoutValid); testStarted = true; itemsToBind[0] = "red"; @@ -156,7 +156,7 @@ export function test_refresh_reloads_all_items() { repeater.refresh(); - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assert(getChildAtText(repeater, 0) === "red", "Item not created for index 0"); TKUnit.assert(getChildAtText(repeater, 1) === "green", "Item not created for index 1"); @@ -171,11 +171,11 @@ export function test_set_itmes_to_null_clears_items() { function testAction(views: Array) { repeater.items = FEW_ITEMS; - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), FEW_ITEMS.length, "views count."); repeater.items = null; - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 0, "views count."); }; @@ -196,7 +196,7 @@ export function test_set_itemsLayout_accepted() { function testAction(views: Array) { repeater.items = FEW_ITEMS; - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assert((repeater.itemsLayout).orientation === "horizontal", "views count."); TKUnit.assertEqual(getChildrenCount(repeater), FEW_ITEMS.length, "views count."); }; @@ -209,11 +209,11 @@ export function test_set_itmes_to_undefiend_clears_items() { function testAction(views: Array) { repeater.items = FEW_ITEMS; - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), FEW_ITEMS.length, "views count."); repeater.items = undefined; - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 0, "views count."); }; @@ -225,11 +225,11 @@ export function test_set_itmes_to_different_source_loads_new_items() { function testAction(views: Array) { repeater.items = [1, 2, 3]; - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 3, "views count."); repeater.items = ["a", "b", "c", "d"]; - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 4, "views count."); }; @@ -248,6 +248,7 @@ export function test_set_items_to_observable_array_loads_all_items() { // ``` // + TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assert(getChildAtText(repeater, 0) === "red", "Item not created for index 0"); TKUnit.assert(getChildAtText(repeater, 1) === "green", "Item not created for index 1"); TKUnit.assert(getChildAtText(repeater, 2) === "blue", "Item not created for index 2"); @@ -263,7 +264,7 @@ export function test_add_to_observable_array_refreshes_the_Repeater() { var colors = new observableArray.ObservableArray(["red", "green", "blue"]); repeater.items = colors; - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 3, "getChildrenCount"); // @@ -273,7 +274,7 @@ export function test_add_to_observable_array_refreshes_the_Repeater() { //// The Repeater will be updated automatically. // ``` // - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 4, "getChildrenCount"); }; @@ -288,11 +289,11 @@ export function test_remove_from_observable_array_refreshes_the_Repeater() { function testAction(views: Array) { repeater.items = data; - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 3, "getChildrenCount"); data.pop(); - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 2, "getChildrenCount"); }; @@ -307,12 +308,12 @@ export function test_splice_observable_array_refreshes_the_Repeater() { function testAction(views: Array) { repeater.items = data; - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 3, "getChildrenCount"); // Remove the first 2 elements and add data.splice(0, 2, "d", "e", "f"); - TKUnit.wait(ASYNC); + TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 4, "getChildrenCount"); }; @@ -343,7 +344,7 @@ export function test_usingAppLevelConvertersInRepeaterItems() { repeater.itemTemplate = "'); function testAction(views: Array) { - var tab: TabView = p.content; - - TKUnit.wait(0.2); - + let tab: TabView = p.content; TKUnit.assertEqual(tab.selectedIndex, 1); }; diff --git a/timer/timer.ios.ts b/timer/timer.ios.ts index d97d4fc04..fbd938573 100644 --- a/timer/timer.ios.ts +++ b/timer/timer.ios.ts @@ -1,23 +1,42 @@ /** * iOS specific timer functions implementation. */ -var timeoutCallbacks = {}; +var timeoutCallbacks = new Map>(); var timerId = 0; +interface KeyValuePair { + k: K; + v: V +} + class TimerTargetImpl extends NSObject { - static new(): TimerTargetImpl { - return super.new(); - } - private _callback: Function; + public canceled = false; + private id: number + private shouldRepeat: boolean - public initWithCallback(callback: Function): TimerTargetImpl { - this._callback = callback; - return this; + public static initWithCallback(callback: Function, id: number, shouldRepeat: boolean): TimerTargetImpl { + let handler = TimerTargetImpl.new(); + handler._callback = callback; + handler.id = id; + handler.shouldRepeat = shouldRepeat; + return handler; } public tick(timer): void { - this._callback(); + if (!this.canceled) { + this._callback(); + } + + if (this.canceled || !this.shouldRepeat) { + this.unregister(); + } + } + + public unregister() { + let timer = timeoutCallbacks.get(this.id).k; + timer.invalidate(); + timeoutCallbacks.delete(this.id); } public static ObjCExposedMethods = { @@ -27,14 +46,12 @@ class TimerTargetImpl extends NSObject { function createTimerAndGetId(callback: Function, milliseconds: number, shouldRepeat: boolean): number { timerId++; - var id = timerId; + let id = timerId; + let timerTarget = TimerTargetImpl.initWithCallback(callback, id, shouldRepeat); + let timer = NSTimer.scheduledTimerWithTimeIntervalTargetSelectorUserInfoRepeats(milliseconds / 1000, timerTarget, "tick", null, shouldRepeat); - var timerTarget = TimerTargetImpl.new().initWithCallback(callback); - var timer = NSTimer.scheduledTimerWithTimeIntervalTargetSelectorUserInfoRepeats(milliseconds / 1000, timerTarget, "tick", null, shouldRepeat); - - if (!timeoutCallbacks[id]) { - timeoutCallbacks[id] = timer; - } + let pair: KeyValuePair = { k: timer, v: timerTarget }; + timeoutCallbacks.set(id, pair); return id; } @@ -44,9 +61,9 @@ export function setTimeout(callback: Function, milliseconds = 0): number { } export function clearTimeout(id: number): void { - if (timeoutCallbacks[id]) { - timeoutCallbacks[id].invalidate(); - delete timeoutCallbacks[id]; + let pair = timeoutCallbacks.get(id); + if (pair) { + pair.v.unregister(); } } @@ -54,4 +71,4 @@ export function setInterval(callback: Function, milliseconds = 0): number { return createTimerAndGetId(zonedCallback(callback), milliseconds, true); } -export var clearInterval = clearTimeout; +export var clearInterval = clearTimeout; \ No newline at end of file diff --git a/ui/core/view.d.ts b/ui/core/view.d.ts index cd6594e20..d2c4a886c 100644 --- a/ui/core/view.d.ts +++ b/ui/core/view.d.ts @@ -96,22 +96,19 @@ declare module "ui/core/view" { /** * Specifies extra space on the left side of this view. */ - marginLeft: number; - + marginLeft?: number; /** * Specifies extra space on the top side of this view. */ - marginTop: number; - + marginTop?: number; /** * Specifies extra space on the right side of this view. */ - marginRight: number; - + marginRight?: number; /** * Specifies extra space on the bottom side of this view. */ - marginBottom: number; + marginBottom?: number; /** * Gets or sets the visibility of this view. */ @@ -120,7 +117,6 @@ declare module "ui/core/view" { * [Deprecated. Please use className instead] Gets or sets the CSS class of this view. */ cssClass?: string; - /** * Gets or sets the CSS class name of this view. */ diff --git a/ui/page/page.d.ts b/ui/page/page.d.ts index 06472aefa..29ac2e6eb 100644 --- a/ui/page/page.d.ts +++ b/ui/page/page.d.ts @@ -195,7 +195,7 @@ declare module "ui/page" { showModal(moduleName: string, context: any, closeCallback: Function, fullscreen?: boolean): Page; /** - * Shows the page contained in moduleName as a modal view. + * Shows the page passed as parameter as a modal view. * @param page - Page instance to be shown modally. * @param context - Any context you want to pass to the modally shown page. This same context will be available in the arguments of the Page.shownModally event handler. * @param closeCallback - A function that will be called when the page is closed. Any arguments provided when calling ShownModallyData.closeCallback will be available here. diff --git a/ui/page/page.ios.ts b/ui/page/page.ios.ts index ee8f6b814..35ae089fd 100644 --- a/ui/page/page.ios.ts +++ b/ui/page/page.ios.ts @@ -345,16 +345,8 @@ export class Page extends pageCommon.Page { super._raiseShowingModallyEvent(); - parent.ios.presentViewControllerAnimatedCompletion(this._ios, utils.ios.MajorVersion >= 8, null); - - if (utils.ios.MajorVersion >= 8) { - var that = this; - UIViewControllerTransitionCoordinator.prototype.animateAlongsideTransitionCompletion.call(parent.ios.transitionCoordinator(), null, function() { - that._raiseShownModallyEvent(); - }); - } else { - this._raiseShownModallyEvent(); - } + parent.ios.presentViewControllerAnimatedCompletion(this._ios, utils.ios.MajorVersion >= 7, null); + UIViewControllerTransitionCoordinator.prototype.animateAlongsideTransitionCompletion.call(parent.ios.transitionCoordinator(), null, () => this._raiseShownModallyEvent()); } protected _hideNativeModalView(parent: Page) {