Merge branch 'master' into mdonev/release-to-master7251

tests/app/ui/animation/animation-tests.ts

@@ -9,14 +9,22 @@ import { AnimationPromise } from "tns-core-modules/ui/animation";
 
 // >> animation-require
 import * as animation from "tns-core-modules/ui/animation";
+import { PercentLength } from "tns-core-modules/ui/styling/style-properties";
 // << animation-require
 
-function prepareTest(): Label {
+function prepareTest(parentHeight?: number, parentWidth?: number): Label {
     let mainPage = helper.getCurrentPage();
     let label = new Label();
     label.text = "label";
 
     let stackLayout = new StackLayout();
+    // optionally size the parent extent to make assertions about percentage values
+    if (parentHeight !== undefined) {
+        stackLayout.height = PercentLength.parse(parentHeight + "");
+    }
+    if (parentWidth !== undefined) {
+        stackLayout.width = PercentLength.parse(parentWidth + "");
+    }
     stackLayout.addChild(label);
     mainPage.content = stackLayout;
     TKUnit.waitUntilReady(() => label.isLoaded);
@@ -395,6 +403,110 @@ export function test_AnimateRotate(done) {
         });
 }
 
+function animateExtentAndAssertExpected(along: "height" | "width", value: PercentLength, pixelExpected: PercentLength): Promise<void> {
+    function pretty(val) {
+        return JSON.stringify(val, null, 2);
+    }
+    const parentExtent = 200;
+    const height = along === "height" ? parentExtent : undefined;
+    const width = along === "height" ? undefined : parentExtent;
+    const label = prepareTest(height, width);
+    const props = {
+        duration: 5,
+        [along]: value
+    };
+    return label.animate(props).then(() => {
+        const observedString: string = PercentLength.convertToString(label[along]);
+        const inputString: string = PercentLength.convertToString(value);
+        TKUnit.assertEqual(
+            observedString,
+            inputString,
+            `PercentLength.convertToString(${pretty(value)}) should be "${inputString}" but is "${observedString}"`
+        );
+        // assert that the animated view"s calculated pixel extent matches the expected pixel value
+        const observedNumber: number = PercentLength.toDevicePixels(label[along], parentExtent, parentExtent);
+        const expectedNumber: number = PercentLength.toDevicePixels(pixelExpected, parentExtent, parentExtent);
+        TKUnit.assertEqual(
+            observedNumber,
+            expectedNumber,
+            `PercentLength.toDevicePixels(${inputString}) should be "${expectedNumber}" but is "${observedNumber}"`
+        );
+        assertIOSNativeTransformIsCorrect(label);
+    });
+}
+
+export function test_AnimateExtent_Should_ResolvePercentageStrings(done) {
+    let promise: Promise<any> = Promise.resolve();
+    const pairs: [string, string][] = [
+        ["100%", "200px"],
+        ["50%", "100px"],
+        ["25%", "50px"],
+        ["-25%", "-50px"],
+        ["-50%", "-100px"],
+        ["-100%", "-200px"],
+    ];
+    pairs.forEach((pair) => {
+        const input = PercentLength.parse(pair[0]);
+        const expected = PercentLength.parse(pair[1]);
+        promise = promise.then(() => {
+            return animateExtentAndAssertExpected("height", input, expected);
+        });
+        promise = promise.then(() => {
+            return animateExtentAndAssertExpected("width", input, expected);
+        });
+    });
+    promise.then(() => done()).catch(done);
+}
+
+export function test_AnimateExtent_Should_AcceptStringPixelValues(done) {
+    let promise: Promise<any> = Promise.resolve();
+    const pairs: [string, number][] = [
+        ["100px", 100],
+        ["50px", 50]
+    ];
+    pairs.forEach((pair) => {
+        const input = PercentLength.parse(pair[0]);
+        const expected = {
+            unit: "px",
+            value: pair[1]
+        } as PercentLength;
+        promise = promise.then(() => {
+            return animateExtentAndAssertExpected("height", input, expected);
+        });
+        promise = promise.then(() => {
+            return animateExtentAndAssertExpected("width", input, expected);
+        });
+    });
+    promise.then(() => done()).catch(done);
+}
+
+export function test_AnimateExtent_Should_AcceptNumberValuesAsDip(done) {
+    let promise: Promise<any> = Promise.resolve();
+    const inputs: any[] = [200, 150, 100, 50, 0];
+    inputs.forEach((value) => {
+        const parsed = PercentLength.parse(value);
+        promise = promise.then(() => {
+            return animateExtentAndAssertExpected("height", parsed, parsed);
+        });
+        promise = promise.then(() => {
+            return animateExtentAndAssertExpected("width", parsed, parsed);
+        });
+    });
+    promise.then(() => done()).catch(done);
+}
+
+export function test_AnimateExtent_Should_ThrowIfCannotParsePercentLength() {
+    const label = new Label();
+    helper.buildUIAndRunTest(label, (views: Array<viewModule.View>) => {
+        TKUnit.assertThrows(() => {
+            label.animate({width: "-frog%"});
+        }, "Invalid percent string should throw");
+        TKUnit.assertThrows(() => {
+            label.animate({height: "-frog%"});
+        }, "Invalid percent string should throw");
+    });
+}
+
 export function test_AnimateTranslateScaleAndRotateSimultaneously(done) {
     let label = prepareTest();
 

tests/app/ui/styling/style-properties-tests.ts

@@ -10,6 +10,7 @@ import { isAndroid, isIOS } from "tns-core-modules/platform";
 import { View } from "tns-core-modules/ui/core/view";
 import { Length, PercentLength } from "tns-core-modules/ui/core/view";
 import * as fontModule from "tns-core-modules/ui/styling/font";
+import { LengthPercentUnit, LengthPxUnit } from "tns-core-modules/ui/styling/style-properties";
 
 export function test_setting_textDecoration_property_from_CSS_is_applied_to_Style() {
     test_property_from_CSS_is_applied_to_style("textDecoration", "text-decoration", "underline");
@@ -862,3 +863,57 @@ export function test_border_radius() {
     TKUnit.assertTrue(Length.equals(testView.style.borderBottomRightRadius, expected), "bottom");
     TKUnit.assertTrue(Length.equals(testView.style.borderBottomLeftRadius, expected), "left");
 }
+
+function assertPercentLengthParseInputOutputPairs(pairs: [string, any][]) {
+    pairs.forEach((pair: [string, any]) => {
+        const output = PercentLength.parse(pair[0]) as LengthPxUnit | LengthPercentUnit;
+        TKUnit.assertEqual(pair[1].unit, output.unit,
+            `PercentLength.parse('${pair[0]}') should return unit '${pair[1].unit}' but returned '${output.unit}'`
+        );
+        TKUnit.assertEqual(pair[1].value.toFixed(2), output.value.toFixed(2),
+            `PercentLength.parse('${pair[0]}') should return value '${pair[1].value}' but returned '${output.value}'`
+        );
+    });
+}
+
+export function test_PercentLength_parses_pixel_values_from_string_input() {
+    assertPercentLengthParseInputOutputPairs([
+        ["4px", {unit: "px", value: 4}],
+        ["-4px", {unit: "px", value: -4}],
+    ]);
+}
+
+export function test_PercentLength_parses_percentage_values_from_string_input() {
+    assertPercentLengthParseInputOutputPairs([
+        ["4%", {unit: "%", value: 0.04}],
+        ["17%", {unit: "%", value: 0.17}],
+        ["-27%", {unit: "%", value: -0.27}],
+    ]);
+}
+
+export function test_PercentLength_parse_throws_given_string_input_it_cannot_parse() {
+    const inputs: any[] = [
+        "-l??%",
+        "qre%",
+        "undefinedpx",
+        "undefined",
+        "-frog%"
+    ];
+    inputs.forEach((input) => {
+        TKUnit.assertThrows(() => {
+            PercentLength.parse(input);
+        }, `PercentLength.parse('${input}') should throw.`);
+    });
+}
+
+export function test_PercentLength_returns_unsupported_types_untouched() {
+    const inputs: any[] = [
+        null,
+        undefined,
+        {baz: true}
+    ];
+    inputs.forEach((input) => {
+        const result = PercentLength.parse(input);
+        TKUnit.assertEqual(input, result, `PercentLength.parse(${input}) should return input value`);
+    });
+}