Added perf category in the tests suite and the synthetic properties perf app from HHristov

apps/app/ui-tests-app/mainPage.ts

@@ -38,6 +38,8 @@ export function pageLoaded(args: EventData) {
     examples.set("issues", "issues/main-page");
     examples.set("page", "page/main-page");
 
+    examples.set("perf", "perf/main-page");
+
     //examples.set("listview_binding", "pages/listview_binding");
     //examples.set("textfield", "text-field/text-field");
 

apps/app/ui-tests-app/perf/main-page.ts

@@ -0,0 +1,23 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { MainPageViewModel } from "../mainPage";
+import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
+import { Page } from "tns-core-modules/ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+    examples.set("properties", "perf/properties/main-page");
+
+    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMainPageViewModel extends MainPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}

apps/app/ui-tests-app/perf/main-page.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView orientation="vertical" row="1">
+        <WrapLayout id="wrapLayoutWithExamples"/>
+    </ScrollView>
+</Page>

apps/app/ui-tests-app/perf/properties/main-page.ts

@@ -0,0 +1,86 @@
+import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
+import { Label } from "tns-core-modules/ui/label";
+import { TextView } from "tns-core-modules/ui/text-view";
+import { Button } from "tns-core-modules/ui/button";
+import { Page } from "tns-core-modules/ui/page";
+import { Color } from "tns-core-modules/color";
+import { isIOS } from "tns-core-modules/platform";
+
+import * as knownColors from "tns-core-modules/color/known-colors";
+
+import * as tests from "./tests";
+
+let red = new Color(knownColors.Red);
+let green = new Color(knownColors.Green);
+let blue = new Color(knownColors.Blue);
+let purple = new Color(knownColors.Purple);
+
+const c = [10, 100, 1000, 10000, 100000];
+
+function getStack(stack: StackLayout): StackLayout {
+    let p = new StackLayout();
+    stack.removeChildren();
+    stack.addChild(p);
+    return p;
+}
+
+let runner;
+
+export function onNavigatingFrom() {
+    clearInterval(runner);
+}
+
+export function onTap3(args) {
+    let btn = <Button>args.object;
+    const p = btn.page.getViewById<StackLayout>("placeholder");
+    btn.text = "Start tests...";
+
+    let result = btn.page.getViewById<TextView>("result");
+
+    result.text = "";
+
+    function track(line: string) {
+        console.log(line);
+        result.text += line + "\n";
+    }
+
+    let text = "Count";
+    c.forEach(e => {
+        text += `\t${e}`;
+    });
+    track(text);
+
+    let tasks = [
+        () => track(tests.setBackgroundColor(c)),
+        () => track(tests.setBackgroundColor(c, getStack(p))),
+        () => track(tests.setBindingContext(c)),
+        () => track(tests.setBindingContext(c, getStack(p))),
+        () => track(tests.setBindingContextWithParents(c, getStack(p))),
+        () => track(tests.setBindingContextWithParentsBound(c, getStack(p))),
+        () => track(tests.setBorderWidths(c)),
+        () => track(tests.setBorderWidths(c, getStack(p))),
+        () => track(tests.setFontSize(c)),
+        () => track(tests.setFontSize(c, getStack(p))),
+        () => track(tests.setFontSizeWithParents(c, getStack(p))),
+        () => track(tests.setFontWeight(c)),
+        () => track(tests.setFontWeight(c, getStack(p))),
+        () => track(tests.setFontWeightWithParents(c, getStack(p))),
+        () => track(tests.setColor(c)),
+        () => track(tests.setColor(c, getStack(p))),
+        () => track(tests.setColorWithParents(c, getStack(p))),
+        () => track(tests.setText(c)),
+        () => track(tests.setText(c, getStack(p))),
+        () => track(tests.addRemove(c, getStack(p))),
+        () => track("Complete!")
+    ];
+    let i = 0;
+    runner = setInterval(nextTask, 1);
+    function nextTask() {
+        if (i < tasks.length) {
+            tasks[i]();
+            i++;
+        } else {
+            clearInterval(runner);
+        }
+    }
+}

apps/app/ui-tests-app/perf/properties/main-page.xml

@@ -0,0 +1,7 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingFrom="onNavigatingFrom">
+    <GridLayout rows="auto, *">
+        <StackLayout id="placeholder" rowSpan="2" opacity="0.2" />
+        <Button text="Start test..." tap="onTap3"/>
+        <TextView id="result" row="1" />
+    </GridLayout>
+</Page>

apps/app/ui-tests-app/perf/properties/tests.ts

@@ -0,0 +1,289 @@
+import { LayoutBase } from "tns-core-modules/ui/layouts/layout-base";
+import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
+import { Label } from "tns-core-modules/ui/label";
+
+const average = 3;
+
+const colors = ['red', 'green'];
+
+export function addRemove(counts: Array<number>, parent: LayoutBase): string {
+    let result = `addRemove`;
+    counts.forEach((count) => {
+        if (count > 10000)
+            return;
+
+        const lbl = new Label();
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                parent.addChild(lbl);
+                parent.removeChild(lbl);
+            }
+        });
+
+        result += `\t${time}`;
+    });
+
+    return result;
+}
+
+export function setText(counts: Array<number>, parent?: LayoutBase): string {
+    let result = `setText ${parent ? 'with nativeView' : ''}`;
+    counts.forEach((count) => {
+        const lbl = setup(parent);
+        const style = lbl.style;
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                lbl.text = colors[i % 2];
+            }
+        });
+        result += `\t${time}`;
+    });
+
+    return result;
+}
+
+export function setBackgroundColor(counts: Array<number>, parent?: LayoutBase): string {
+    let result = `setBackgroundColor ${parent ? 'with nativeView' : ''}`;
+    counts.forEach((count) => {
+        if (parent && count > 10000)
+            return;
+        const lbl = setup(parent);
+        const style = lbl.style;
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                style.backgroundColor = <any>colors[i % 2];
+            }
+        });
+        result += `\t${time}`;
+    });
+
+    return result;
+}
+
+const borders = [1, 2, 3];
+export function setBorderWidths(counts: Array<number>, parent?: LayoutBase): string {
+    let result = `setBorderWidths ${parent ? 'with nativeView' : ''}`;
+    counts.forEach((count) => {
+        if (count > 10000 && parent)
+            return;
+
+        const lbl = setup(parent);
+        const style = lbl.style;
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                style.borderLeftWidth = borders[i % 3];
+                style.borderTopWidth = borders[i % 3];
+                style.borderRightWidth = borders[i % 3];
+                style.borderBottomWidth = borders[i % 3];
+            }
+        });
+        result += `\t${time}`;
+    });
+
+    return result;
+}
+
+export function setColor(counts: Array<number>, parent?: LayoutBase): string {
+    let result = `setColor ${parent ? 'with nativeView' : ''}`;
+    counts.forEach((count) => {
+        const lbl = setup(parent);
+        const style = lbl.style;
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                style.color = <any>colors[i % 2];
+            }
+        });
+        result += `\t${time}`;
+    });
+
+    return result;
+}
+
+export function setColorWithParents(counts: Array<number>, parent: LayoutBase): string {
+    let result = `setColorWithParents`;
+    const style = parent.style;
+    counts.forEach((count) => {
+        if (count > 10000)
+            return;
+        setupParents(parent);
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                style.color = <any>colors[i % 2];
+            }
+        });
+        result += `\t${time}`;
+    });
+
+    return result;
+}
+
+const fontSizes = [10, 20];
+export function setFontSize(counts: Array<number>, parent?: LayoutBase): string {
+    let result = `setFontSize ${parent ? 'with nativeView' : ''}`;
+    counts.forEach((count) => {
+        const lbl = setup(parent);
+        const style = lbl.style;
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                style.fontSize = fontSizes[i % 2];
+            }
+        });
+        result += `\t${time}`;
+    });
+
+    return result;
+}
+
+export function setFontSizeWithParents(counts: Array<number>, parent: LayoutBase): string {
+    let result = `setFontSizeWithParents`;
+    const style = parent.style;
+    counts.forEach((count) => {
+        if (count > 1000)
+            return;
+        setupParents(parent);
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                style.fontSize = fontSizes[i % 2];
+            }
+        });
+        result += `\t${time}`;
+    });
+
+    return result;
+}
+
+export function setFontWeight(counts: Array<number>, parent?: LayoutBase): string {
+    let result = `setFontWeight ${parent ? 'with nativeView' : ''}`;
+    counts.forEach((count) => {
+        const lbl = setup(parent);
+        const style = lbl.style;
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                style.fontWeight = i % 2 === 0 ? 'bold' : 'normal';
+            }
+        });
+        result += `\t${time}`;
+    });
+
+    return result;
+}
+
+export function setFontWeightWithParents(counts: Array<number>, parent: LayoutBase): string {
+    let result = `setFontWeightWithParents`;
+    const style = parent.style;
+    counts.forEach((count) => {
+        if (count > 1000)
+            return;
+        setupParents(parent);
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                style.fontWeight = i % 2 === 0 ? 'bold' : 'normal'
+            }
+        });
+        result += `\t${time}`;
+    });
+
+    return result;
+}
+
+export function setBindingContext(counts: Array<number>, parent?: LayoutBase): string {
+    let result = `setBindingContext ${parent ? 'with nativeView' : ''}`;
+    counts.forEach((count) => {
+        const lbl = setup(parent);
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                lbl.bindingContext = colors[i % 2];
+            }
+        });
+        result += `\t${time}`;
+    });
+
+    return result;
+}
+
+export function setBindingContextWithParents(counts: Array<number>, parent: LayoutBase): string {
+    let result = `setBindingContextWithParents`;
+    counts.forEach((count) => {
+        if (count > 10000)
+            return;
+        setupParents(parent);
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                parent.bindingContext = colors[i % 2];
+            }
+        });
+        result += `\t${time}`;
+    });
+
+    return result;
+}
+
+export function setBindingContextWithParentsBound(counts: Array<number>, parent: LayoutBase): string {
+    let result = `setBindingContextWithParentsBound`;
+    counts.forEach((count) => {
+        if (count > 1000)
+            return;
+        setupParents(parent, true);
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                parent.bindingContext = colors[i % 2];
+            }
+        });
+        result += `\t${time}`;
+    });
+
+    return result;
+}
+
+function setupParents(parent: LayoutBase, bindToContext: boolean = false): void {
+    for (let i = 0; i < 3; i++) {
+        let stack = new StackLayout();
+        parent.addChild(stack)
+        for (let j = 0; j < 3; j++) {
+            let innerStack = new StackLayout();
+            stack.addChild(innerStack);
+            for (let k = 0; k < 3; k++) {
+                const lbl = new Label();
+                if (bindToContext) {
+                    lbl.bind({ sourceProperty: "$value", targetProperty: "text" });
+                }
+
+                innerStack.addChild(lbl);
+            }
+        }
+    }
+}
+
+function setup(parent?: LayoutBase): Label {
+    let lbl = new Label();
+    if (parent) {
+        parent.addChild(lbl);
+    } else {
+        (<any>lbl)._ios = (<any>lbl).nativeView = undefined;
+    }
+
+    return lbl;
+}
+
+function time(): number {
+    if (global.android) {
+        return (<any>global).java.lang.System.nanoTime() / 1000000;
+    } else {
+        return (<any>global).CACurrentMediaTime() * 1000;
+    }
+}
+
+function executeTest(func: Function): string {
+    let total = 0;
+    for (let i = 0; i < average; i++) {
+        const start = time();
+        func();
+        const end = time();
+        const duration = end - start;
+        total += duration;
+    }
+
+    const avg = total / average;
+    const res = `${avg.toFixed(2)}`;
+    return res;
+}