test(renderer): tabview binding tests

Author: MartoYankov

Diff for: e2e/renderer/app/App_Resources/Android/drawable-xxxhdpi/browse.png

@@ -4,6 +4,8 @@ import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { ActionBarDynamicItemsComponent } from "./action-bar/action-bar-dynamic-items.component";
 import { ActionBarExtensionComponent } from "./action-bar/action-bar-extension.component";
 
+import { TabItemBindingComponent } from "./tab-view/tab-item-binding.component";
+
 import { ListComponent } from "./list.component";
 import { NgForComponent } from "./ngfor.component";
 import { NgForOfComponent } from "./ngforof.component";
@@ -28,6 +30,10 @@ export const routes = [
         path: "action-bar-extension",
         component: ActionBarExtensionComponent,
     },
+    {
+        path: "tab-item-binding",
+        component: TabItemBindingComponent,
+    },
     {
         path: "list",
         component: ListComponent,
@@ -70,6 +76,8 @@ export const navigatableComponents = [
     ActionBarDynamicItemsComponent,
     ActionBarExtensionComponent,
 
+    TabItemBindingComponent,
+
     ListComponent,
     NgForComponent,
     NgForOfComponent,

Diff for: e2e/renderer/app/App_Resources/Android/drawable-xxxhdpi/home.png

@@ -5,6 +5,7 @@ import { Component } from "@angular/core";
         <FlexboxLayout flexDirection="column">
             <Button text="ActionBar dynamic" [nsRouterLink]="['/action-bar-dynamic']"></Button>
             <Button text="ActionBarExtension" [nsRouterLink]="['/action-bar-extension']"></Button>
+            <Button text="TabItem Binding" [nsRouterLink]="['/tab-item-binding']"></Button>
             <Button text="NgFor" [nsRouterLink]="['/ngfor']"></Button>
             <Button text="NgForOf" [nsRouterLink]="['/ngforof']"></Button>
             <Button text="NgIf no layout" [nsRouterLink]="['/ngif-no-layout']"></Button>

Diff for: e2e/renderer/app/App_Resources/iOS/tabIcons/browse.png

@@ -0,0 +1,56 @@
+import { Component } from "@angular/core";
+import { isAndroid } from "platform";
+
+function getIconSource(icon: string): string {
+    const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";
+
+    return iconPrefix + icon;
+}
+
+const notSelected = {
+    title:  "Not Selected",
+    textTransform: "lowercase",
+    iconSource: getIconSource("home")
+};
+
+const selected = {
+    title: "Selected",
+    textTransform: "uppercase",
+    iconSource: getIconSource("browse")
+};
+
+@Component({
+  template: `
+    <ActionBar title="Tab Item Binding"></ActionBar>
+
+    <TabView (selectedIndexChange)="onIndexChange($event)">
+        <GridLayout *tabItem="items[0]">
+            <Label text="First Tab"></Label>
+        </GridLayout>
+        <GridLayout *tabItem="items[1]">
+            <Label text="Second Tab"></Label>
+        </GridLayout>
+        <GridLayout *tabItem="items[2]">
+            <Label text="Third Tab"></Label>
+        </GridLayout>
+    </TabView>
+  `
+})
+export class TabItemBindingComponent {
+    public items = [
+        notSelected,
+        notSelected,
+        notSelected
+    ];
+
+    onIndexChange(args): void {
+        const selectedIndex = args.object.selectedIndex;
+
+        for (let i = 0; i < this.items.length; i++) { 
+            this.items[i] = notSelected;
+        }
+
+        this.items[selectedIndex] = selected;
+    }
+}
+

Diff for: e2e/renderer/app/App_Resources/iOS/tabIcons/[email protected]

@@ -0,0 +1,73 @@
+import {
+    AppiumDriver,
+    createDriver,
+    SearchOptions,
+    UIElement
+} from "nativescript-dev-appium";
+import { assert } from "chai";
+
+describe("TabView-scenario", () => {
+    let driver: AppiumDriver;
+
+    describe("dynamically change TabView item title, icon and textTransform", async () => {
+        let firstTabItem: UIElement;
+        let secondTabItem: UIElement;
+        let thirdTabItem: UIElement;
+
+        before(async () => {
+            driver = await createDriver();
+            await driver.driver.resetApp();
+        });
+
+        it("should navigate to page", async () => {
+            const navigationButton =
+                await driver.findElementByText("TabItem Binding", SearchOptions.exact);
+            await navigationButton.click();
+
+            await driver.findElementByText("Tab Item Binding", SearchOptions.exact);
+        });
+
+        it("should find elements", async () => {
+            await driver.findElementByText("First Tab");
+
+            const notSelectedTabItems = await driver.findElementsByText("not selected");
+
+            firstTabItem = await driver.findElementByText("SELECTED");
+            secondTabItem = notSelectedTabItems[0];
+            thirdTabItem = notSelectedTabItems[1];
+
+            const screenMatches =  await driver.compareScreen("tab-view-binding-first-tab", 5);
+            assert(screenMatches);
+        });
+
+        it("should navigate to second tab item", async () => {
+            await secondTabItem.click();
+
+            await driver.findElementByText("Second Tab");
+
+            const notSelectedTabItems = await driver.findElementsByText("not selected");
+
+            firstTabItem = notSelectedTabItems[0];
+            secondTabItem = await driver.findElementByText("SELECTED");
+            thirdTabItem = notSelectedTabItems[1];
+
+            const screenMatches =  await driver.compareScreen("tab-view-binding-second-tab", 5);
+            assert(screenMatches);
+        });
+
+        it("should navigate to third tab item", async () => {
+            await thirdTabItem.click();
+
+            await driver.findElementByText("Third Tab");
+
+            const notSelectedTabItems = await driver.findElementsByText("not selected");
+
+            firstTabItem = notSelectedTabItems[0];
+            secondTabItem = notSelectedTabItems[1];
+            thirdTabItem = await driver.findElementByText("SELECTED");
+
+            const screenMatches =  await driver.compareScreen("tab-view-binding-third-tab", 5);
+            assert(screenMatches);
+        });
+    });
+});