chore(listview-tests): add tests for width property with percentages (#6047)

apps/app/ui-tests-app/list-view/main-page.ts

@@ -18,6 +18,7 @@ export function loadExamples() {
     examples.set("csslv", "list-view/csslv");
     examples.set("scrolling-and-sizing", "list-view/scrolling-and-sizing");
     examples.set("row-height", "list-view/row-height");
+    examples.set("width-percent", "list-view/width-percent");
 
     return examples;
 }

apps/app/ui-tests-app/list-view/width-percent.ts

@@ -0,0 +1,18 @@
+import { View } from "tns-core-modules/ui/core/view";
+import { ListView } from "tns-core-modules/ui/list-view";
+import { EventData } from "tns-core-modules/data/observable";
+
+export function onNavigatingTo(args) {
+    const page = args.object;
+    page.bindingContext = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"];
+}
+
+let scrollToBottom = true;
+export function onScroll(args: EventData) {
+    let page = (<View>args.object).page;
+
+    let listView = page.getViewById<ListView>("listView");
+    listView.scrollToIndex(scrollToBottom ? listView.items.length - 1 : 0);
+
+    scrollToBottom = !scrollToBottom;
+}

apps/app/ui-tests-app/list-view/width-percent.xml

@@ -0,0 +1,20 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
+
+    <Page.actionBar>
+        <ActionBar title="My App" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <StackLayout>
+        <StackLayout class="p-10" row="0">
+            <ListView id="listView" items="{{ $value }}" height="300">
+                <ListView.itemTemplate>
+                    <StackLayout>
+                        <Label width="50%" height="150" text="{{ $value }}" backgroundColor="green"/>
+                    </StackLayout>
+                </ListView.itemTemplate>
+            </ListView>
+        </StackLayout>
+        <Button text="SCROLL" tap="onScroll" height="60"/>
+    </StackLayout>
+</Page>