Image tests

tests/app/testRunner.ts

@@ -76,7 +76,7 @@ allTests["BUTTON"] = require("./ui/button/button-tests");
 allTests["LABEL"] = require("./ui/label/label-tests");
 allTests["TAB-VIEW"] = require("./ui/tab-view/tab-view-tests");
 // allTests["TAB-VIEW-NAVIGATION"] = require("./ui/tab-view/tab-view-navigation-tests");
-// allTests["IMAGE"] = require("./ui/image/image-tests");
+allTests["IMAGE"] = require("./ui/image/image-tests");
 allTests["SLIDER"] = require("./ui/slider/slider-tests");
 allTests["SWITCH"] = require("./ui/switch/switch-tests");
 allTests["PROGRESS"] = require("./ui/progress/progress-tests");

tests/app/ui/image/image-tests.ts

@@ -4,9 +4,6 @@ import { GridLayout } from "ui/layouts/grid-layout";
 import { isIOS, isAndroid } from "platform";
 import { PropertyChangeData } from "data/observable";
 import * as utils from "utils/utils";
-
-// import {target} from "../../TKUnit";
-
 import * as TKUnit from "../../TKUnit";
 
 // >> img-require
@@ -21,33 +18,33 @@ import * as ObservableModule from "data/observable";
 import * as fs from "file-system";
 import * as color from "color";
 
-var imagePath = fs.path.join(__dirname, "../../logo.png");
+const imagePath = fs.path.join(__dirname, "../../logo.png");
 
 if (isAndroid) {
-    var imageModule = require("ui/image");
+    const imageModule = require("ui/image");
     imageModule.currentMode = imageModule.CacheMode.memory; // use memory cache only.
 }
 
-export var test_Image_Members = function () {
+export const test_Image_Members = function () {
-    var image = new ImageModule.Image();
+    const image = new ImageModule.Image();
     TKUnit.assert(types.isUndefined(image.src), "Image.src is defined");
     TKUnit.assert(types.isDefined(image.isLoading), "Image.isLoading is not defined");
     TKUnit.assert(image.isLoading === false, "Image.isLoading is default value should be false.");
-}
+};
 
 /* TODO: We need a way to programmatically add an image to resources and then load it from, otherwise we do not know if there is such resource in the target native app.
-export var test_settingImageSource = function () {
+export const test_settingImageSource = function () {
     // >> img-create
-    var image = new ImageModule.Image();
+    const image = new ImageModule.Image();
     image.imageSource = ImageSourceModule.fromResource("logo");
     // << img-create
     
-    var testFunc = function (views: Array<ViewModule.View>) {
+    const testFunc = function (views: Array<ViewModule.View>) {
-        var testImage = <ImageModule.Image> views[0];
+        const testImage = <ImageModule.Image> views[0];
 
-        var desiredSize = testImage._measureNativeView(new geometry.Size(100, 100));
+        const desiredSize = testImage._measureNativeView(new geometry.Size(100, 100));
-        var width = desiredSize.width;
+        const width = desiredSize.width;
-        var height = desiredSize.height;
+        const height = desiredSize.height;
 
         TKUnit.assert(width > 0, "Width should be greater than 0.");
         TKUnit.assert(height > 0, "Height should be greater than 0.");
@@ -57,86 +54,89 @@ export var test_settingImageSource = function () {
 }
 */
 
-function runImageTest(done, image: ImageModule.Image, src: string) {
+const IMAGE_LOADED_EVENT = "isLoadingChange";
+
+function runImageTestSync(image: ImageModule.Image, src: string) {
+    image.loadMode = "sync";
     image.src = null;
 
-    var testModel = new ObservableModule.Observable();
+    const page = helper.getCurrentPage();
-    testModel.set("imageIsLoading", false);
+    page.content = image;
+
+    image.src = src;
+
+    let imageSourceAvailable = isIOS ? !!image.imageSource : true;
+    TKUnit.assertFalse(image.isLoading, "Image.isLoading should be false.");
+    TKUnit.assertTrue(imageSourceAvailable, "imageSource should be set.");
+}
+
+function runImageTestAsync(image: ImageModule.Image, src: string, done: (e: any) => void) {
+    image.loadMode = "async";
+    image.src = null;
 
     let handler = function (data: ObservableModule.PropertyChangeData) {
-        testModel.off(ObservableModule.Observable.propertyChangeEvent, handler);
+        image.off(IMAGE_LOADED_EVENT, handler);
 
         try {
-            let imageIsLoaded = isIOS ? !!image.imageSource : true;
+            let imageSourceAvailable = isIOS ? !!image.imageSource : true;
             TKUnit.assertFalse(image.isLoading, "Image.isLoading should be false.");
-            TKUnit.assertFalse(testModel.get("imageIsLoading"), "imageIsLoading on viewModel should be false.");
+            TKUnit.assertTrue(imageSourceAvailable, "imageSource should be set.");
-            TKUnit.assertTrue(imageIsLoaded, "imageSource should be set.");
-            if (done) {
             done(null);
         }
-        }
         catch (e) {
-            if (done) {
             done(e);
-            } else {
-                throw e;
-            }
         }
     };
 
-    image.bind({
-        sourceProperty: "imageIsLoading",
-        targetProperty: "isLoading",
-        twoWay: true
-    }, testModel);
-
     let page = helper.getCurrentPage();
     page.content = image;
     image.src = src;
-    testModel.on(ObservableModule.Observable.propertyChangeEvent, handler);
+    image.on(IMAGE_LOADED_EVENT, handler);
-    if (done) {
     TKUnit.assertTrue(image.isLoading, "Image.isLoading should be true.");
-        TKUnit.assertTrue(testModel.get("imageIsLoading"), "model.isLoading should be true.");
-    } else {
-        // Since it is synchronous check immediately.
-        handler(null);
-    }
 }
 
-export var test_SettingImageSrc = function (done) {
+export const test_SettingImageSrcToURL_async = function (done) {
     // >> img-create-src
-    var image = new ImageModule.Image();
+    const image = new ImageModule.Image();
     image.src = "https://www.google.com/images/errors/logo_sm_2.png";
     // << img-create-src
     (<any>image).useCache = false;
-    runImageTest(done, image, image.src)
+    runImageTestAsync(image, image.src, done);
-}
+};
 
-export var test_SettingImageSrcToFileWithinApp = function () {
+export const test_SettingImageSrcToFileWithinApp_sync  = function () {
     // >> img-create-local
-    var image = new ImageModule.Image();
+    const image = new ImageModule.Image();
     image.src = "~/logo.png";
     // << img-create-local
 
-    runImageTest(null, image, image.src)
+    runImageTestSync(image, image.src);
-}
+};
 
-export var test_SettingImageSrcToDataURI = function () {
+export const test_SettingImageSrcToFileWithinApp_async = function (done) {
+    const image = new ImageModule.Image();
+    (<any>image).useCache = false;
+    image.src = "~/logo.png";
+    runImageTestAsync(image, image.src, done);
+};
+
+export const test_SettingImageSrcToDataURI_sync = function () {
     // >> img-create-datauri
-    var image = new ImageModule.Image();
+    const image = new ImageModule.Image();
     image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAAXNSR0IArs4c6QAAABxpRE9UAAAAAgAAAAAAAAACAAAAKAAAAAIAAAACAAAARiS4uJEAAAASSURBVBgZYvjPwABHSMz/DAAAAAD//0GWpK0AAAAOSURBVGNgYPiPhBgQAACEvQv1D5y/pAAAAABJRU5ErkJggg==";
     // << img-create-datauri
 
-    runImageTest(null, image, image.src)
+    runImageTestSync(image, image.src);
-}
+};
 
-export var test_SettingImageSrcToFileWithinAppAsync = function (done) {
+export const test_SettingImageSrcToDataURI_async = function (done) {
-    var image = new ImageModule.Image();
+    // >> img-create-datauri
-    (<any>image).useCache = false;
+    const image = new ImageModule.Image();
-    image.loadMode = "async";
+    image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAAXNSR0IArs4c6QAAABxpRE9UAAAAAgAAAAAAAAACAAAAKAAAAAIAAAACAAAARiS4uJEAAAASSURBVBgZYvjPwABHSMz/DAAAAAD//0GWpK0AAAAOSURBVGNgYPiPhBgQAACEvQv1D5y/pAAAAABJRU5ErkJggg==";
-    image.src = "~/logo.png";
+    // << img-create-datauri
-    runImageTest(done, image, image.src)
+
-}
+    runImageTestAsync(image, image.src, done);
+};
 
 export function test_imageSourceNotResetAfterCreateUI() {
     let image = new ImageModule.Image();
@@ -148,18 +148,11 @@ export function test_imageSourceNotResetAfterCreateUI() {
     });
 }
 
-export var test_SettingImageSrcToDataURIAsync = function (done) {
-    var image = new ImageModule.Image();
-    image.loadMode = "async";
-    image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAAXNSR0IArs4c6QAAABxpRE9UAAAAAgAAAAAAAAACAAAAKAAAAAIAAAACAAAARiS4uJEAAAASSURBVBgZYvjPwABHSMz/DAAAAAD//0GWpK0AAAAOSURBVGNgYPiPhBgQAACEvQv1D5y/pAAAAABJRU5ErkJggg==";
-    runImageTest(done, image, image.src)
-}
-
 // NOTE: This tests that setting multiple times src will not show the imageSource of a previous src value.
 // It however will never be reliable as to properly detect failure we need to use somewhat large timeout
 // waiting for imageSource to be set to the wrong value.
-export var __test_SettingImageSrcTwiceMustNotMismatch = function (done) {
+export const __test_SettingImageSrcTwiceMustNotMismatch = function (done) {
-    var image = new Image();
+    const image = new Image();
     image.on("propertyChange", (args: PropertyChangeData) => {
         if (args.propertyName === "isLoading" && args.value === false) {
             setTimeout(() => {
@@ -175,11 +168,11 @@ export var __test_SettingImageSrcTwiceMustNotMismatch = function (done) {
     image.src = "~/logo.png";
     image.src = null;
     // At somepoint image.imageSource was set to "~/logo.png";
-}
+};
 
-export var test_SettingStretch_AspectFit = function () {
+export const test_SettingStretch_AspectFit = function () {
     // >> img-set-stretch
-    var image = new ImageModule.Image();
+    const image = new ImageModule.Image();
     image.imageSource = ImageSourceModule.fromFile(imagePath);
     // There are 4 modes of stretching none, fill, aspectFill, aspectFit
     // The default value is aspectFit.
@@ -187,120 +180,120 @@ export var test_SettingStretch_AspectFit = function () {
     image.stretch = "aspectFit";
     // << img-set-stretch
 
-    var testFunc = function (views: Array<ViewModule.View>) {
+    const testFunc = function (views: Array<ViewModule.View>) {
-        var testImage = <ImageModule.Image>views[0];
+        const testImage = <ImageModule.Image>views[0];
 
         if (image.android) {
-            var actualScaleType = testImage.android.getScaleType();
+            const actualScaleType = testImage.android.getScaleType();
-            var expectedScaleType = android.widget.ImageView.ScaleType.FIT_CENTER;
+            const expectedScaleType = android.widget.ImageView.ScaleType.FIT_CENTER;
             TKUnit.assertEqual(actualScaleType, expectedScaleType, "actualScaleType");
         }
         else if (image.ios) {
-            var actualContentMode = testImage.ios.contentMode;
+            const actualContentMode = testImage.ios.contentMode;
-            var expectedContentMode = UIViewContentMode.ScaleAspectFit;
+            const expectedContentMode = UIViewContentMode.ScaleAspectFit;
             TKUnit.assertEqual(actualContentMode, expectedContentMode, "actualContentMode");
         }
-    }
+    };
 
     helper.buildUIAndRunTest(image, testFunc);
-}
+};
 
-export var test_SettingStretch_Default = function () {
+export const test_SettingStretch_Default = function () {
-    var image = new ImageModule.Image();
+    const image = new ImageModule.Image();
     image.imageSource = ImageSourceModule.fromFile(imagePath);
 
-    var testFunc = function (views: Array<ViewModule.View>) {
+    const testFunc = function (views: Array<ViewModule.View>) {
-        var testImage = <ImageModule.Image>views[0];
+        const testImage = <ImageModule.Image>views[0];
 
         if (image.android) {
-            var actualScaleType = testImage.android.getScaleType();
+            const actualScaleType = testImage.android.getScaleType();
-            var expectedScaleType = android.widget.ImageView.ScaleType.FIT_CENTER;
+            const expectedScaleType = android.widget.ImageView.ScaleType.FIT_CENTER;
             TKUnit.assert(actualScaleType === expectedScaleType, "Expected: " + expectedScaleType + ", Actual: " + actualScaleType);
         }
         else if (image.ios) {
-            var actualContentMode = testImage.ios.contentMode;
+            const actualContentMode = testImage.ios.contentMode;
-            var expectedContentMode = UIViewContentMode.ScaleAspectFit;
+            const expectedContentMode = UIViewContentMode.ScaleAspectFit;
             TKUnit.assert(actualContentMode === expectedContentMode, "Expected: " + expectedContentMode + ", Actual: " + actualContentMode);
         }
-    }
+    };
 
     helper.buildUIAndRunTest(image, testFunc);
-}
+};
 
-export var test_SettingStretch_AspectFill = function () {
+export const test_SettingStretch_AspectFill = function () {
-    var image = new ImageModule.Image();
+    const image = new ImageModule.Image();
     image.imageSource = ImageSourceModule.fromFile(imagePath);
     image.stretch = "aspectFill";
 
-    var testFunc = function (views: Array<ViewModule.View>) {
+    const testFunc = function (views: Array<ViewModule.View>) {
-        var testImage = <ImageModule.Image>views[0];
+        const testImage = <ImageModule.Image>views[0];
 
         if (image.android) {
-            var actualScaleType = testImage.android.getScaleType();
+            const actualScaleType = testImage.android.getScaleType();
-            var expectedScaleType = android.widget.ImageView.ScaleType.CENTER_CROP;
+            const expectedScaleType = android.widget.ImageView.ScaleType.CENTER_CROP;
             TKUnit.assert(actualScaleType === expectedScaleType, "Expected: " + expectedScaleType + ", Actual: " + actualScaleType);
         }
         else if (image.ios) {
-            var actualContentMode = testImage.ios.contentMode;
+            const actualContentMode = testImage.ios.contentMode;
-            var expectedContentMode = UIViewContentMode.ScaleAspectFill;
+            const expectedContentMode = UIViewContentMode.ScaleAspectFill;
             TKUnit.assert(actualContentMode === expectedContentMode, "Expected: " + expectedContentMode + ", Actual: " + actualContentMode);
         }
-    }
+    };
 
     helper.buildUIAndRunTest(image, testFunc);
-}
+};
 
-export var test_SettingStretch_Fill = function () {
+export const test_SettingStretch_Fill = function () {
-    var image = new ImageModule.Image();
+    const image = new ImageModule.Image();
     image.imageSource = ImageSourceModule.fromFile(imagePath);
     image.stretch = "fill";
 
-    var testFunc = function (views: Array<ViewModule.View>) {
+    const testFunc = function (views: Array<ViewModule.View>) {
-        var testImage = <ImageModule.Image>views[0];
+        const testImage = <ImageModule.Image>views[0];
 
         if (image.android) {
-            var actualScaleType = testImage.android.getScaleType();
+            const actualScaleType = testImage.android.getScaleType();
-            var expectedScaleType = android.widget.ImageView.ScaleType.FIT_XY;
+            const expectedScaleType = android.widget.ImageView.ScaleType.FIT_XY;
             TKUnit.assert(actualScaleType === expectedScaleType, "Expected: " + expectedScaleType + ", Actual: " + actualScaleType);
         }
         else if (image.ios) {
-            var actualContentMode = testImage.ios.contentMode;
+            const actualContentMode = testImage.ios.contentMode;
-            var expectedContentMode = UIViewContentMode.ScaleToFill;
+            const expectedContentMode = UIViewContentMode.ScaleToFill;
             TKUnit.assert(actualContentMode === expectedContentMode, "Expected: " + expectedContentMode + ", Actual: " + actualContentMode);
         }
-    }
+    };
 
     helper.buildUIAndRunTest(image, testFunc);
-}
+};
 
-export var test_SettingStretch_none = function () {
+export const test_SettingStretch_none = function () {
-    var image = new ImageModule.Image();
+    const image = new ImageModule.Image();
     image.imageSource = ImageSourceModule.fromFile(imagePath);
     image.stretch = "none";
 
-    var testFunc = function (views: Array<ViewModule.View>) {
+    const testFunc = function (views: Array<ViewModule.View>) {
-        var testImage = <ImageModule.Image>views[0];
+        const testImage = <ImageModule.Image>views[0];
 
         if (image.android) {
-            var actualScaleType = testImage.android.getScaleType();
+            const actualScaleType = testImage.android.getScaleType();
-            var expectedScaleType = android.widget.ImageView.ScaleType.MATRIX;
+            const expectedScaleType = android.widget.ImageView.ScaleType.MATRIX;
             TKUnit.assert(actualScaleType === expectedScaleType, "Expected: " + expectedScaleType + ", Actual: " + actualScaleType);
         }
         else if (image.ios) {
-            var actualContentMode = testImage.ios.contentMode;
+            const actualContentMode = testImage.ios.contentMode;
-            var expectedContentMode = UIViewContentMode.TopLeft;
+            const expectedContentMode = UIViewContentMode.TopLeft;
             TKUnit.assert(actualContentMode === expectedContentMode, "Expected: " + expectedContentMode + ", Actual: " + actualContentMode);
         }
-    }
+    };
 
     helper.buildUIAndRunTest(image, testFunc);
-}
+};
 
 function ios<T>(func: T): T {
     return isIOS ? func : undefined;
 }
 
-export var test_SettingImageSourceWhenSizedToParentDoesNotRequestLayout = ios(() => {
+export const test_SettingImageSourceWhenSizedToParentDoesNotRequestLayout = ios(() => {
     let host = new GridLayout();
 
     let image = new Image();
@@ -320,7 +313,7 @@ export var test_SettingImageSourceWhenSizedToParentDoesNotRequestLayout = ios(()
     TKUnit.assertFalse(called, "image.requestLayout should not be called.");
 });
 
-export var test_SettingImageSourceWhenFixedWidthAndHeightDoesNotRequestLayout = ios(() => {
+export const test_SettingImageSourceWhenFixedWidthAndHeightDoesNotRequestLayout = ios(() => {
     let host = new StackLayout();
     let image = new Image();
     image.width = { value: 100, unit: "dip" };
@@ -338,7 +331,7 @@ export var test_SettingImageSourceWhenFixedWidthAndHeightDoesNotRequestLayout =
     TKUnit.assertFalse(called, "image.requestLayout should not be called.");
 });
 
-export var test_SettingImageSourceWhenSizedToContentShouldInvalidate = ios(() => {
+export const test_SettingImageSourceWhenSizedToContentShouldInvalidate = ios(() => {
     let host = new StackLayout();
     let image = new Image();
     host.addChild(image);
@@ -354,10 +347,11 @@ export var test_SettingImageSourceWhenSizedToContentShouldInvalidate = ios(() =>
     TKUnit.assertTrue(called, "image.requestLayout should be called.");
 });
 
-export var test_DimensionsAreRoundedAfterScale = function () {
+export const test_DimensionsAreRoundedAfterScale = function () {
     let host = new StackLayout();
     let image = new Image();
     (<any>image).useCache = false;
+    image.loadMode = "sync";
     image.src = "~/ui/image/700x50.png";
     let imageWidth = 700;
     let imageHeight = 50;
@@ -377,21 +371,20 @@ export var test_DimensionsAreRoundedAfterScale = function () {
     TKUnit.assertEqual(image.getMeasuredHeight(), expectedHeight, "Actual height is different from expected height.");
 };
 
-export var test_tintColor = function () {
+export const test_tintColor = function () {
-    var colorRed = new color.Color("red");
+    const colorRed = new color.Color("red");
-    var image = new ImageModule.Image();
+    const image = new ImageModule.Image();
     image.imageSource = ImageSourceModule.fromFile(imagePath);
 
-    var testFunc = function (views: Array<ViewModule.View>) {
+    const testFunc = function (views: Array<ViewModule.View>) {
-        var testImage = <ImageModule.Image>views[0];
+        const testImage = <ImageModule.Image>views[0];
 
         if (image.android) {
-            var tintColor = testImage.android.getColorFilter();
+            const tintColor = testImage.android.getColorFilter();
             TKUnit.assert(tintColor === null, "tintColor expected to be set to null");
         }
         else if (image.ios) {
-            var tintColor = testImage.ios.tintColor;
+            const imageColor = utils.ios.getColor(testImage.ios.tintColor);
-            var imageColor = utils.ios.getColor(testImage.ios.tintColor);
             TKUnit.assert(!imageColor.equals(colorRed), "imageColor expected to be different than tintColor");
         }
         image.tintColor = colorRed;
@@ -400,10 +393,10 @@ export var test_tintColor = function () {
             TKUnit.assert(testImage.android.getColorFilter() !== null, "tintColor expected to be set to a nonnull value");
         }
         else if (image.ios) {
-            var imageColor = utils.ios.getColor(testImage.ios.tintColor);
+            const imageColor = utils.ios.getColor(testImage.ios.tintColor);
             TKUnit.assert(imageColor.equals(colorRed), "tintColor expected to be set to: " + colorRed);
         }
-    }
+    };
 
     helper.buildUIAndRunTest(image, testFunc);
-}
+};

tns-core-modules/ui/image/image-common.ts

@@ -47,7 +47,8 @@ export abstract class ImageBase extends View implements ImageDefinition {
                 }
                 this.imageSource = source;
                 this.isLoading = false;
-            }
+            };
+
             if (isDataURI(value)) {
                 let base64Data = value.split(",")[1];
                 if (base64Data !== undefined) {
@@ -107,8 +108,13 @@ export abstract class ImageBase extends View implements ImageDefinition {
 }
 
 export const imageSourceProperty = new Property<ImageBase, ImageSource>({ name: "imageSource" });
+imageSourceProperty.register(ImageBase);
 
-export const srcProperty = new Property<ImageBase, any>({ name: "src" });
+function onSrcPropertyChanged(image: ImageBase, oldValue: string, newValue: string) {
+    image._createImageSourceFromSrc();
+};
+
+export const srcProperty = new Property<ImageBase, any>({ name: "src", valueChanged: onSrcPropertyChanged });
 srcProperty.register(ImageBase);
 
 export const loadModeProperty = new Property<ImageBase, "sync" | "async">({ name: "loadMode", defaultValue: "async" });
@@ -117,7 +123,7 @@ loadModeProperty.register(ImageBase);
 export const isLoadingProperty = new Property<ImageBase, boolean>({ name: "isLoading", defaultValue: false, valueConverter: booleanConverter });
 isLoadingProperty.register(ImageBase);
 
-export const stretchProperty = new Property<ImageBase, "none" | "aspectFill" | "aspectFit" | "fill">({ name: "stretch", defaultValue: "aspectFit", affectsLayout: isIOS })
+export const stretchProperty = new Property<ImageBase, "none" | "aspectFill" | "aspectFit" | "fill">({ name: "stretch", defaultValue: "aspectFit", affectsLayout: isIOS });
 stretchProperty.register(ImageBase);
 
 export const tintColorProperty = new InheritedCssProperty<Style, Color>({ name: "tintColor", cssName: "tint-color", equalityComparer: Color.equals, valueConverter: (value) => new Color(value) });