Image tests

This commit is contained in:
vakrilov
2017-01-06 11:15:53 +02:00
parent 899ce1adc8
commit 6eb1aee4d1
3 changed files with 148 additions and 149 deletions

View File

@ -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");

View File

@ -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 () {
var image = new ImageModule.Image();
export const test_Image_Members = function () {
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>) {
var testImage = <ImageModule.Image> views[0];
const testFunc = function (views: Array<ViewModule.View>) {
const testImage = <ImageModule.Image> views[0];
var desiredSize = testImage._measureNativeView(new geometry.Size(100, 100));
var width = desiredSize.width;
var height = desiredSize.height;
const desiredSize = testImage._measureNativeView(new geometry.Size(100, 100));
const width = desiredSize.width;
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();
testModel.set("imageIsLoading", false);
const page = helper.getCurrentPage();
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(imageIsLoaded, "imageSource should be set.");
if (done) {
TKUnit.assertTrue(imageSourceAvailable, "imageSource should be set.");
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);
if (done) {
image.on(IMAGE_LOADED_EVENT, handler);
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) {
var image = new ImageModule.Image();
(<any>image).useCache = false;
image.loadMode = "async";
image.src = "~/logo.png";
runImageTest(done, image, image.src)
}
export const test_SettingImageSrcToDataURI_async = function (done) {
// >> img-create-datauri
const image = new ImageModule.Image();
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAAXNSR0IArs4c6QAAABxpRE9UAAAAAgAAAAAAAAACAAAAKAAAAAIAAAACAAAARiS4uJEAAAASSURBVBgZYvjPwABHSMz/DAAAAAD//0GWpK0AAAAOSURBVGNgYPiPhBgQAACEvQv1D5y/pAAAAABJRU5ErkJggg==";
// << img-create-datauri
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) {
var image = new Image();
export const __test_SettingImageSrcTwiceMustNotMismatch = function (done) {
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>) {
var testImage = <ImageModule.Image>views[0];
const testFunc = function (views: Array<ViewModule.View>) {
const testImage = <ImageModule.Image>views[0];
if (image.android) {
var actualScaleType = testImage.android.getScaleType();
var expectedScaleType = android.widget.ImageView.ScaleType.FIT_CENTER;
const actualScaleType = testImage.android.getScaleType();
const expectedScaleType = android.widget.ImageView.ScaleType.FIT_CENTER;
TKUnit.assertEqual(actualScaleType, expectedScaleType, "actualScaleType");
}
else if (image.ios) {
var actualContentMode = testImage.ios.contentMode;
var expectedContentMode = UIViewContentMode.ScaleAspectFit;
const actualContentMode = testImage.ios.contentMode;
const expectedContentMode = UIViewContentMode.ScaleAspectFit;
TKUnit.assertEqual(actualContentMode, expectedContentMode, "actualContentMode");
}
}
};
helper.buildUIAndRunTest(image, testFunc);
}
};
export var test_SettingStretch_Default = function () {
var image = new ImageModule.Image();
export const test_SettingStretch_Default = function () {
const image = new ImageModule.Image();
image.imageSource = ImageSourceModule.fromFile(imagePath);
var testFunc = function (views: Array<ViewModule.View>) {
var testImage = <ImageModule.Image>views[0];
const testFunc = function (views: Array<ViewModule.View>) {
const testImage = <ImageModule.Image>views[0];
if (image.android) {
var actualScaleType = testImage.android.getScaleType();
var expectedScaleType = android.widget.ImageView.ScaleType.FIT_CENTER;
const actualScaleType = testImage.android.getScaleType();
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;
var expectedContentMode = UIViewContentMode.ScaleAspectFit;
const actualContentMode = testImage.ios.contentMode;
const expectedContentMode = UIViewContentMode.ScaleAspectFit;
TKUnit.assert(actualContentMode === expectedContentMode, "Expected: " + expectedContentMode + ", Actual: " + actualContentMode);
}
}
};
helper.buildUIAndRunTest(image, testFunc);
}
};
export var test_SettingStretch_AspectFill = function () {
var image = new ImageModule.Image();
export const test_SettingStretch_AspectFill = function () {
const image = new ImageModule.Image();
image.imageSource = ImageSourceModule.fromFile(imagePath);
image.stretch = "aspectFill";
var testFunc = function (views: Array<ViewModule.View>) {
var testImage = <ImageModule.Image>views[0];
const testFunc = function (views: Array<ViewModule.View>) {
const testImage = <ImageModule.Image>views[0];
if (image.android) {
var actualScaleType = testImage.android.getScaleType();
var expectedScaleType = android.widget.ImageView.ScaleType.CENTER_CROP;
const actualScaleType = testImage.android.getScaleType();
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;
var expectedContentMode = UIViewContentMode.ScaleAspectFill;
const actualContentMode = testImage.ios.contentMode;
const expectedContentMode = UIViewContentMode.ScaleAspectFill;
TKUnit.assert(actualContentMode === expectedContentMode, "Expected: " + expectedContentMode + ", Actual: " + actualContentMode);
}
}
};
helper.buildUIAndRunTest(image, testFunc);
}
};
export var test_SettingStretch_Fill = function () {
var image = new ImageModule.Image();
export const test_SettingStretch_Fill = function () {
const image = new ImageModule.Image();
image.imageSource = ImageSourceModule.fromFile(imagePath);
image.stretch = "fill";
var testFunc = function (views: Array<ViewModule.View>) {
var testImage = <ImageModule.Image>views[0];
const testFunc = function (views: Array<ViewModule.View>) {
const testImage = <ImageModule.Image>views[0];
if (image.android) {
var actualScaleType = testImage.android.getScaleType();
var expectedScaleType = android.widget.ImageView.ScaleType.FIT_XY;
const actualScaleType = testImage.android.getScaleType();
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;
var expectedContentMode = UIViewContentMode.ScaleToFill;
const actualContentMode = testImage.ios.contentMode;
const expectedContentMode = UIViewContentMode.ScaleToFill;
TKUnit.assert(actualContentMode === expectedContentMode, "Expected: " + expectedContentMode + ", Actual: " + actualContentMode);
}
}
};
helper.buildUIAndRunTest(image, testFunc);
}
};
export var test_SettingStretch_none = function () {
var image = new ImageModule.Image();
export const test_SettingStretch_none = function () {
const image = new ImageModule.Image();
image.imageSource = ImageSourceModule.fromFile(imagePath);
image.stretch = "none";
var testFunc = function (views: Array<ViewModule.View>) {
var testImage = <ImageModule.Image>views[0];
const testFunc = function (views: Array<ViewModule.View>) {
const testImage = <ImageModule.Image>views[0];
if (image.android) {
var actualScaleType = testImage.android.getScaleType();
var expectedScaleType = android.widget.ImageView.ScaleType.MATRIX;
const actualScaleType = testImage.android.getScaleType();
const expectedScaleType = android.widget.ImageView.ScaleType.MATRIX;
TKUnit.assert(actualScaleType === expectedScaleType, "Expected: " + expectedScaleType + ", Actual: " + actualScaleType);
}
else if (image.ios) {
var actualContentMode = testImage.ios.contentMode;
var expectedContentMode = UIViewContentMode.TopLeft;
const actualContentMode = testImage.ios.contentMode;
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 () {
var colorRed = new color.Color("red");
var image = new ImageModule.Image();
export const test_tintColor = function () {
const colorRed = new color.Color("red");
const image = new ImageModule.Image();
image.imageSource = ImageSourceModule.fromFile(imagePath);
var testFunc = function (views: Array<ViewModule.View>) {
var testImage = <ImageModule.Image>views[0];
const testFunc = function (views: Array<ViewModule.View>) {
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;
var imageColor = utils.ios.getColor(testImage.ios.tintColor);
const 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);
}
};

View File

@ -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) });