NativeScript · SvetoslavTsenov · Jul 19, 2019 · Jul 7, 2019 · Jul 8, 2019 · Jul 9, 2019
diff --git a/e2e/ui-tests-app/.gitignore b/e2e/ui-tests-app/.gitignore
@@ -27,7 +27,7 @@ typings/
 
 # Visual Studio Code
 .vscode/*
-!.vscode/settings.json
+.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json

diff --git a/e2e/ui-tests-app/.vscode/launch.json b/e2e/ui-tests-app/.vscode/launch.json
@@ -4,20 +4,51 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
+        {
+            "name": "Launch on iOS",
+            "type": "nativescript",
+            "request": "launch",
+            "platform": "ios",
+            "appRoot": "${workspaceRoot}",
+            "sourceMaps": true,
+            "watch": true,
+            "tnsArgs": [
+                "--debug-brk"
+            ]
+        },
         {
             "type": "node",
             "request": "launch",
-            "name": "Mocha Tests",
+            "name": "debug-tests",
             "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
             "args": [
                 "-u",
                 "tdd",
                 "--colors",
                 "--opts",
                 "../config/mocha.opts",
-                "--grep=tab-view",
+                "--grep=bottom-navigation",
                 "-a",
-
+            ],
+            "internalConsoleOptions": "openOnSessionStart",
+            // "preLaunchTask": "e2e-tsc"
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "run-tests",
+            "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
+            "args": [
+                "-u",
+                "tdd",
+                "--colors",
+                "--opts",
+                "../config/mocha.opts",
+                "--grep=bottom-navigation",
+                "android",
+                "--grep=bottom-navigation",
+                "--port",
+                "8889",
             ],
             "internalConsoleOptions": "openOnSessionStart"
         }

diff --git a/e2e/ui-tests-app/.vscode/tasks.json b/e2e/ui-tests-app/.vscode/tasks.json
@@ -0,0 +1,12 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558 
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "e2e-tsc",
+			"command": "npm",
+			"args": ["run", "e2e-tsc"]
+        }
+    ]
+}
diff --git a/...p_Resources/Android/src/main/res/drawable-hdpi/baseline_motorcycle_black_18.png b/...p_Resources/Android/src/main/res/drawable-hdpi/baseline_motorcycle_black_18.png
diff --git a/...p_Resources/Android/src/main/res/drawable-hdpi/baseline_motorcycle_black_24.png b/...p_Resources/Android/src/main/res/drawable-hdpi/baseline_motorcycle_black_24.png
diff --git a/...p_Resources/Android/src/main/res/drawable-hdpi/baseline_motorcycle_black_36.png b/...p_Resources/Android/src/main/res/drawable-hdpi/baseline_motorcycle_black_36.png
diff --git a/...p_Resources/Android/src/main/res/drawable-hdpi/baseline_motorcycle_black_48.png b/...p_Resources/Android/src/main/res/drawable-hdpi/baseline_motorcycle_black_48.png
diff --git a/...p_Resources/Android/src/main/res/drawable-mdpi/baseline_motorcycle_black_18.png b/...p_Resources/Android/src/main/res/drawable-mdpi/baseline_motorcycle_black_18.png
diff --git a/...p_Resources/Android/src/main/res/drawable-mdpi/baseline_motorcycle_black_24.png b/...p_Resources/Android/src/main/res/drawable-mdpi/baseline_motorcycle_black_24.png
diff --git a/...p_Resources/Android/src/main/res/drawable-mdpi/baseline_motorcycle_black_36.png b/...p_Resources/Android/src/main/res/drawable-mdpi/baseline_motorcycle_black_36.png
diff --git a/...p_Resources/Android/src/main/res/drawable-mdpi/baseline_motorcycle_black_48.png b/...p_Resources/Android/src/main/res/drawable-mdpi/baseline_motorcycle_black_48.png
diff --git a/..._Resources/Android/src/main/res/drawable-xhdpi/baseline_motorcycle_black_18.png b/..._Resources/Android/src/main/res/drawable-xhdpi/baseline_motorcycle_black_18.png
diff --git a/..._Resources/Android/src/main/res/drawable-xhdpi/baseline_motorcycle_black_24.png b/..._Resources/Android/src/main/res/drawable-xhdpi/baseline_motorcycle_black_24.png
diff --git a/..._Resources/Android/src/main/res/drawable-xhdpi/baseline_motorcycle_black_36.png b/..._Resources/Android/src/main/res/drawable-xhdpi/baseline_motorcycle_black_36.png
diff --git a/..._Resources/Android/src/main/res/drawable-xhdpi/baseline_motorcycle_black_48.png b/..._Resources/Android/src/main/res/drawable-xhdpi/baseline_motorcycle_black_48.png
diff --git a/...Resources/Android/src/main/res/drawable-xxhdpi/baseline_motorcycle_black_18.png b/...Resources/Android/src/main/res/drawable-xxhdpi/baseline_motorcycle_black_18.png
diff --git a/...Resources/Android/src/main/res/drawable-xxhdpi/baseline_motorcycle_black_24.png b/...Resources/Android/src/main/res/drawable-xxhdpi/baseline_motorcycle_black_24.png
diff --git a/...Resources/Android/src/main/res/drawable-xxhdpi/baseline_motorcycle_black_36.png b/...Resources/Android/src/main/res/drawable-xxhdpi/baseline_motorcycle_black_36.png
diff --git a/...Resources/Android/src/main/res/drawable-xxhdpi/baseline_motorcycle_black_48.png b/...Resources/Android/src/main/res/drawable-xxhdpi/baseline_motorcycle_black_48.png
diff --git a/...esources/Android/src/main/res/drawable-xxxhdpi/baseline_motorcycle_black_18.png b/...esources/Android/src/main/res/drawable-xxxhdpi/baseline_motorcycle_black_18.png
diff --git a/...esources/Android/src/main/res/drawable-xxxhdpi/baseline_motorcycle_black_24.png b/...esources/Android/src/main/res/drawable-xxxhdpi/baseline_motorcycle_black_24.png
diff --git a/...esources/Android/src/main/res/drawable-xxxhdpi/baseline_motorcycle_black_36.png b/...esources/Android/src/main/res/drawable-xxxhdpi/baseline_motorcycle_black_36.png
diff --git a/...esources/Android/src/main/res/drawable-xxxhdpi/baseline_motorcycle_black_48.png b/...esources/Android/src/main/res/drawable-xxxhdpi/baseline_motorcycle_black_48.png
diff --git a/e2e/ui-tests-app/app/App_Resources/Android/src/main/res/drawable/baseline_motorcycle_24.xml b/e2e/ui-tests-app/app/App_Resources/Android/src/main/res/drawable/baseline_motorcycle_24.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="24dp"
+        android:height="24dp"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0"
+        android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M17.5,10c-0.03,0 -0.05,0.01 -0.08,0.01L13.41,6L9,6v2h3.59l2,2h-8.1C4.01,10 2,12.02 2,14.5 2,16.99 4.01,19 6.5,19c2.22,0 4.06,-1.62 4.42,-3.73L13.04,14c-0.02,0.17 -0.04,0.33 -0.04,0.5 0,2.49 2.01,4.5 4.5,4.5s4.5,-2.01 4.5,-4.5 -2.01,-4.5 -4.5,-4.5zM8.84,15.26C8.52,16.27 7.58,17 6.47,17c-1.38,0 -2.5,-1.12 -2.5,-2.5S5.09,12 6.47,12c1.12,0 2.05,0.74 2.37,1.75L6,13.75v1.5l2.84,0.01zM17.47,17c-1.38,0 -2.5,-1.12 -2.5,-2.5s1.12,-2.5 2.5,-2.5 2.5,1.12 2.5,2.5 -1.12,2.5 -2.5,2.5z"/>
+</vector>
diff --git a/e2e/ui-tests-app/app/App_Resources/iOS/baseline_motorcycle_black_24@1x.png b/e2e/ui-tests-app/app/App_Resources/iOS/baseline_motorcycle_black_24@1x.png
diff --git a/e2e/ui-tests-app/app/App_Resources/iOS/baseline_motorcycle_black_24@2x.png b/e2e/ui-tests-app/app/App_Resources/iOS/baseline_motorcycle_black_24@2x.png
diff --git a/e2e/ui-tests-app/app/App_Resources/iOS/baseline_motorcycle_black_24@3x.png b/e2e/ui-tests-app/app/App_Resources/iOS/baseline_motorcycle_black_24@3x.png
diff --git a/e2e/ui-tests-app/app/bottom-navigation/background-color-page.xml b/e2e/ui-tests-app/app/bottom-navigation/background-color-page.xml
@@ -3,7 +3,7 @@
   <ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
   </ActionBar>
 
-  <BottomNavigation>
+  <BottomNavigation automationText="tabNavigation"  >
     <TabStrip>
         <TabStripItem title="First" class="special"></TabStripItem>
         <TabStripItem title="Second"></TabStripItem>

diff --git a/e2e/ui-tests-app/app/bottom-navigation/binding-page.ts b/e2e/ui-tests-app/app/bottom-navigation/binding-page.ts
@@ -1,12 +1,6 @@
-import * as vmModule from "./bottom-navigation-view-model";
-
-var viewModel = vmModule.bottomNavigationViewModel;
+import { BottomNavigationViewModel } from "./bottom-navigation-view-model";
 
 export function bottomNavigaitonLoaded(args) {
-    let bottomNav = args.object;
-    bottomNav.bindingContext = viewModel;
-}
-
-export function addTabs(args) {
-    viewModel.createItems();
+    const bottomNav = args.object.page;
+    bottomNav.bindingContext = new BottomNavigationViewModel();
 }
diff --git a/e2e/ui-tests-app/app/bottom-navigation/binding-page.xml b/e2e/ui-tests-app/app/bottom-navigation/binding-page.xml
@@ -1,12 +1,16 @@
-<Page class="page">
+<Page class="page" navigatingTo="navigatingTo">
 
-  <ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
+  <ActionBar title="BottomNavigation binding" icon="" class="action-bar">
   </ActionBar>
 
     <GridLayout rows="auto,*">
-        <Button row="0" text="Add Tab" tap="addTabs"/>
+    <StackLayout row="0" >
+        <Button automationText="add-tab" text="add-tab" tap="{{ createItems }}"/>
+        <Button automationText="remove-last-tab" text="remove-last-tab" tap="{{ removeLastItem }}"/>
+
+    </StackLayout>
         <GridLayout row="1">
-            <BottomNavigation loaded="bottomNavigaitonLoaded" items="{{ tabContentItems }}">
+            <BottomNavigation automationText="tabNavigation"  loaded="bottomNavigaitonLoaded" items="{{ tabContentItems }}">
                 <TabStrip items="{{ tabStripItems }}">
                 </TabStrip>
             </BottomNavigation> 

diff --git a/e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-css-page.ts b/e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-css-page.ts
@@ -0,0 +1,19 @@
+import { View } from "tns-core-modules/ui/core/view";
+import { Page } from "tns-core-modules/ui/page";
+
+export function loaded(args) {
+    const page = <Page>(<View>args.object).page;
+    const view = page.getViewById("bottomNavigation");
+    (<any>view).textTransform = "capitalize";
+}
+
+export function applyTap(args) {
+    const page = <Page>(<View>args.object).page;
+    const css = "#bottomNavigation { " + args.object.tag + " }";
+    page.css = css;
+}
+
+export function resetTap(args) {
+    const page = <Page>(<View>args.object).page;
+    page.css = "";
+}
diff --git a/e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-css-page.xml b/e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-css-page.xml
@@ -0,0 +1,35 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="loaded">
+  <BottomNavigation automationText="tabNavigation"  id="bottomNavigation" >
+    <TabStrip>
+      <TabStripItem title="IteM onE"></TabStripItem>
+      <TabStripItem title="IteM twO"></TabStripItem>
+      <TabStripItem title="IteM threE"></TabStripItem>
+    </TabStrip>
+
+    <TabContentItem>
+      <GridLayout>
+          <ScrollView>
+            <StackLayout>
+              <Button text="text-transform: uppercase;" tap="applyTap" tag="text-transform: uppercase;" style.fontSize="8"/>
+              <Button text="text-transform: lowercase;" tap="applyTap" tag="text-transform: lowercase;" style.fontSize="8"/>
+              <Button text="text-transform: capitalize;" tap="applyTap" tag="text-transform: capitalize;" style.fontSize="8"/>
+              <Button text="text-transform: none;" tap="applyTap" tag="text-transform: none;" style.fontSize="8"/>
+              <Button text="reset" tap="resetTap" style.fontSize="8"/>
+            </StackLayout>
+          </ScrollView>
+      </GridLayout>
+    </TabContentItem>
+
+    <TabContentItem>
+      <GridLayout>
+          <Label text="Item 2"/>
+      </GridLayout>
+    </TabContentItem>
+
+        <TabContentItem>
+      <GridLayout>
+       <Label text="Item 3"/>
+      </GridLayout>
+    </TabContentItem>
+  </BottomNavigation>
+</Page>
diff --git a/e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-page.xml b/e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-page.xml
@@ -18,7 +18,7 @@
   </BottomNavigation> -->
 
   <!-- w/ TabStrip -->
-  <BottomNavigation id="bottomNav">
+  <BottomNavigation id="bottomNav"  automationText="tabNavigation" >
     <TabStrip>
       <TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
       <TabStripItem>
@@ -37,37 +37,37 @@
     <TabContentItem>
       <StackLayout>
         <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" />
+        <Button tap="goToSecond" text="go to second" automationText="goToSecond" />
       </StackLayout>
     </TabContentItem>
     <TabContentItem>
       <StackLayout>
         <Label text="Second View"/>
-        <Button tap="goToFirst" text="go to first" />
+        <Button tap="goToFirst" text="go to first" automationText="goToFirst" />
       </StackLayout>
     </TabContentItem>
     <TabContentItem>
       <StackLayout>
         <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" />
+        <Button tap="goToSecond" text="go to second" automationText="goToSecond" />
       </StackLayout>
     </TabContentItem>
     <TabContentItem>
       <StackLayout>
         <Label text="Second View"/>
-        <Button tap="goToFirst" text="go to first" />
+        <Button tap="goToFirst" text="go to first" automationText="goToFirst" />
       </StackLayout>
     </TabContentItem>
     <TabContentItem>
       <StackLayout>
         <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" />
+        <Button tap="goToSecond" text="go to second" automationText="goToSecond" />
       </StackLayout>
     </TabContentItem>
         <TabContentItem>
       <StackLayout>
         <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" />
+        <Button tap="goToSecond" text="go to second" automationText="goToSecond" />
       </StackLayout>
     </TabContentItem>
   </BottomNavigation>

diff --git a/e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-view-model.ts b/e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-view-model.ts
@@ -2,7 +2,6 @@
 import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
 import { Label } from "tns-core-modules/ui/label";
 import { Observable } from "tns-core-modules/data/observable";
-import { ObservableArray } from "tns-core-modules/data/observable-array";
 import { TabStripItem } from "tns-core-modules/ui/tab-navigation-base/tab-strip-item";
 import { TabContentItem } from "tns-core-modules/ui/tab-navigation-base/tab-content-item";
 
@@ -17,7 +16,9 @@ export class BottomNavigationViewModel extends Observable {
         this.createItems();
     }
 
-    createItems() {
+    public createItems() {
+        console.log("Create item");
+
         const _tabStripItems = new Array<TabStripItem>();
         const _tabContentItems = new Array<TabContentItem>();
 
@@ -31,6 +32,12 @@ export class BottomNavigationViewModel extends Observable {
         this.itemsCount++;
     }
 
+    public removeLastItem() {
+        console.log("Remove item");
+        this.tabStripItems.pop();
+        this.tabContentItems.pop();
+    }
+
     private createTabStripItem(index: number): TabStripItem {
         const item = new TabStripItem();
         item.title = "Item " + index;
@@ -50,4 +57,3 @@ export class BottomNavigationViewModel extends Observable {
         return contentItem;
     }
 }
-export var bottomNavigationViewModel = new BottomNavigationViewModel();
diff --git a/e2e/ui-tests-app/app/bottom-navigation/color-page.xml b/e2e/ui-tests-app/app/bottom-navigation/color-page.xml
@@ -3,7 +3,7 @@
   <ActionBar title="BottomNavigation color" icon="" class="action-bar">
   </ActionBar>
 
-  <BottomNavigation>
+  <BottomNavigation style="color: green;"  automationText="tabNavigation"  >
     <TabStrip>
         <TabStripItem title="First" class="special"></TabStripItem>
         <TabStripItem title="Second"></TabStripItem>

diff --git a/e2e/ui-tests-app/app/bottom-navigation/fancy-fonts-page.css b/e2e/ui-tests-app/app/bottom-navigation/fancy-fonts-page.css
@@ -0,0 +1,44 @@
+.font-awesome {
+    font-family: "FontAwesome";
+}
+
+Page {
+    background-color: tomato;
+}
+
+ActionBar {
+    background-color: aquamarine;
+}
+
+Button {
+    background-color: lightskyblue;
+}
+
+BottomNavigation {
+    background-color: lightgreen;
+}
+
+#lastStripItem {
+    color: greenyellow;
+    background-color: black;
+}
+
+TabStripItem:active, #lastStripItem:active {
+    background-color:coral;
+}
+
+#second-tab-content-item {
+    background-color: blueviolet;
+}
+
+#third-tab-content-item {
+    background-color: blue;
+}
+
+#fourth-tab-content-item {
+    background-color: gray;
+}
+
+#fifth-tab-content-item {
+    background-color: brown;
+}
diff --git a/e2e/ui-tests-app/app/bottom-navigation/fancy-fonts-page.ts b/e2e/ui-tests-app/app/bottom-navigation/fancy-fonts-page.ts
@@ -0,0 +1,10 @@
+import { EventData, Page } from "tns-core-modules/ui/page/page";
+import { BottomNavigation } from "tns-core-modules/ui/bottom-navigation/bottom-navigation";
+
+export const selectTab = (args: EventData) => {
+    const page = <Page>(<any>args.object).page;
+    const bottomNav = <BottomNavigation>page.getViewById("bottomNavigation");
+
+    const index = (<any>args.object).tag;
+    bottomNav.selectedIndex = index;
+};