Merge pull request #2280 from NativeScript/cankov/async-image-race-fail

Fix setting src on async image mismatching imageSource

expect.exp

@@ -16,5 +16,5 @@ set timeout 600
 #spawn (adb logcat | tee ./__TESTRESULT__.txt)
 log_file -noappend $outfile
 eval spawn $cmd
-expect "=== ALL TESTS COMPLETE ==="
+expect "Tests EOF!"
 send \003

tests/app/testRunner.ts

@@ -153,17 +153,20 @@ function printRunTestStats() {
 
     testFileContent = testFileContent.concat(testCases);
 
-// DO NOT CHANGE THE FIRST ROW! Used as an indicator for test run pass detection.
-    let finalMessage = `=== ALL TESTS COMPLETE ===\n` +
+    let finalMessage = `\n=== ALL TESTS COMPLETE ===\n` +
         `${(allTests.length - failedTestCount)} OK, ${failedTestCount} failed\n` + 
-        `DURATION: ${totalTime} ms`;
-    TKUnit.write(finalMessage, messageType.info);
+        `DURATION: ${totalTime} ms\n`;
+    TKUnit.write(finalMessage, messageType.info);  
+
     for (j = 0; j < failedTestInfo.length; j++) {
         let failureMessage = failedTestInfo[j];
         TKUnit.write(failureMessage, messageType.error);
         finalMessage += "\n" + failureMessage;
     }
 
+    // DO NOT CHANGE THE FIRST ROW! Used as an indicator for test run pass detection.
+    TKUnit.write(`Tests EOF!`, messageType.info);
+
     testFileContent.push("</testsuite>");
     testFileContent.push("</testsuites>");
 

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

@@ -2,6 +2,8 @@
 import {StackLayout} from "ui/layouts/stack-layout";
 import {GridLayout} from "ui/layouts/grid-layout";
 import {isIOS} from "platform";
+import {PropertyChangeData} from "data/observable";
+
 // import {target} from "../../TKUnit";
 
 import TKUnit = require("../../TKUnit");
@@ -133,6 +135,28 @@ export var test_SettingImageSrcToDataURIAsync = function (done) {
     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) {
+    var image = new Image();
+    image.on("propertyChange", (args: PropertyChangeData) => {
+        if (args.propertyName === "isLoading" && args.value === false) {
+            setTimeout(() => {
+                if (image.imageSource) {
+                    done(new Error("Images source set from previous async src setting"));
+                } else {
+                    done();
+                }
+            }, 50); /* Slow! */
+        }
+    });
+    image.loadMode = "async";
+    image.src = "~/logo.png";
+    image.src = null;
+    // At somepoint image.imageSource was set to "~/logo.png";
+}
+
 export var test_SettingStretch_AspectFit = function () {
     // >> img-set-stretch
     var image = new ImageModule.Image();

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

@@ -97,6 +97,10 @@ export class Image extends view.View implements definition.Image {
 
             var source = new imageSource.ImageSource();
             var imageLoaded = () => {
+                let currentValue = this.src;
+                if (!types.isString(this.src) || value !== currentValue.trim()) {
+                    return;
+                }
                 this.imageSource = source;
                 this._setValue(Image.isLoadingProperty, false);
             }
@@ -143,9 +147,11 @@ export class Image extends view.View implements definition.Image {
         else if (value instanceof imageSource.ImageSource) {
             // Support binding the imageSource trough the src property
             this.imageSource = value;
+            this._setValue(Image.isLoadingProperty, false);
         }
         else {
             this.imageSource = imageSource.fromNativeSource(value);
+            this._setValue(Image.isLoadingProperty, false);
         }
     }
 }