chore(e2e): add tabs & bottom nav test scenarios (#7434)

e2e/nested-frame-navigation/app/bottom-navigation-page/bottom-navigation-page.xml

@@ -0,0 +1,36 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
+
+    <ActionBar class="action-bar">
+        <NavigationButton text="tabBottomBack" tap="onBackButtonTap" android.systemIcon="ic_menu_back" />
+        <Label class="action-bar-title" text="bottom navigation page" horizontalAlignment="center" />
+    </ActionBar>
+    
+    <GridLayout rows="auto, *">
+        <StackLayout>
+            <Button text="navigate to some page (default transition)" tap="onNavigate" />
+            <Button text="navigate to some page (no transition)" tap="onNavigateNone" />
+            <Button text="navigate to some page (slide transition)" tap="onNavigateSlide" />
+            <Button text="navigate to some page (flip transition)" tap="onNavigateFlip" />
+        </StackLayout>
+
+        <GridLayout row="1">
+            <BottomNavigation>
+                <TabStrip>
+                    <TabStripItem title="Players"></TabStripItem>
+                    <TabStripItem title="Dummy"></TabStripItem>
+                    <TabStripItem title="Teams"></TabStripItem>
+                </TabStrip>
+
+                <TabContentItem>
+                    <Frame defaultPage="players/players-items-page" />
+                </TabContentItem>
+                <TabContentItem>
+                    <Label text="this is a tab" />
+                </TabContentItem>
+                <TabContentItem>
+                    <Frame defaultPage="teams/teams-items-page" />
+                </TabContentItem>
+            </BottomNavigation>
+        </GridLayout>
+    </GridLayout>
+</Page>

e2e/nested-frame-navigation/app/bottom-navigation-root/bottom-navigation-root.ts

@@ -0,0 +1,5 @@
+import * as application from "tns-core-modules/application";
+
+export function onReset() {
+    application._resetRootView({ moduleName: "app-root" });
+}

e2e/nested-frame-navigation/app/bottom-navigation-root/bottom-navigation-root.xml

@@ -0,0 +1,27 @@
+<BottomNavigation>
+    <TabStrip>
+        <TabStripItem title="Players"></TabStripItem>
+        <!-- this tab serves as dummy so the actual teams tab is not loaded by default  -->
+        <TabStripItem title="Dummy"></TabStripItem>
+        <TabStripItem title="Teams"></TabStripItem>
+    </TabStrip>
+
+    <TabContentItem>
+        <GridLayout rows="auto, auto, *">
+            <Label text="tabs root top home" />
+            <Button row="1" text="reset app" tap="onReset" />
+            <GridLayout row="2">
+                <Frame defaultPage="players/players-items-page" />
+            </GridLayout>
+        </GridLayout>
+    </TabContentItem>
+    <TabContentItem>
+        <Label text="this is a tab" />
+    </TabContentItem>
+    <TabContentItem>
+        <GridLayout rows="auto, *">
+            <Button text="reset app" tap="onReset" />
+            <Frame row="1" defaultPage="teams/teams-items-page" />
+        </GridLayout>
+    </TabContentItem>
+</BottomNavigation>

e2e/nested-frame-navigation/app/home/home-page.ts

@@ -20,22 +20,49 @@ export function onNavigateToPageMultiFrame(args: EventData) {
     button.page.frame.navigate("frame-root/frame-multi-home-page");
 }
 
+export function onNavigateToTabViewTopPage(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate("tab-page/tab-top-page");
+}
+
+export function onNavigateToTabViewBottomPage(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate("tab-page/tab-bottom-page");
+}
+
+export function onNavigateToTabViewTopRoot(args: EventData) {
+    application._resetRootView({ moduleName: "tab-root/tab-top-root" });
+}
+
+export function onNavigateToTabViewBottomRoot(args: EventData) {
+    application._resetRootView({ moduleName: "tab-root/tab-bottom-root" });
+}
+
+export function onNavigateToBottomNavigationPage(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate("bottom-navigation-page/bottom-navigation-page");
+}
+
+export function onNavigateToBottomNavigationRoot(args: EventData) {
+    application._resetRootView({ moduleName: "bottom-navigation-root/bottom-navigation-root" });
+}
+
 export function onNavigateToTabsTopPage(args: EventData) {
     const button = <Button>args.object;
-    button.page.frame.navigate("tab-page/tabs-top-page");
+    button.page.frame.navigate("tabs-page/tabs-top-page");
 }
 
 export function onNavigateToTabsBottomPage(args: EventData) {
     const button = <Button>args.object;
-    button.page.frame.navigate("tab-page/tabs-bottom-page");
+    button.page.frame.navigate("tabs-page/tabs-bottom-page");
 }
 
 export function onNavigateToTabsTopRoot(args: EventData) {
-    application._resetRootView({ moduleName: "tab-root/tab-top-root" });
+    application._resetRootView({ moduleName: "tabs-root/tabs-top-root" });
 }
 
 export function onNavigateToTabsBottomRoot(args: EventData) {
-    application._resetRootView({ moduleName: "tab-root/tab-bottom-root" });
+    application._resetRootView({ moduleName: "tabs-root/tabs-bottom-root" });
 }
 
 export function onNavigateToSomePage(args: EventData) {

e2e/nested-frame-navigation/app/home/home-page.xml

@@ -10,6 +10,12 @@
             <Button text="Layout w/ multi frame" tap="onNavigateToLayoutMultiFrame" />
             <Button text="Page w/ frame" tap="onNavigateToPageFrame" />
             <Button text="Page w/ multi frame" tap="onNavigateToPageMultiFrame" />
+            <Button text="Page w/ tabview (top)" tap="onNavigateToTabViewTopPage" />
+            <Button text="Page w/ tabview (bottom)" tap="onNavigateToTabViewBottomPage" />
+            <Button text="Root tabview (top)" tap="onNavigateToTabViewTopRoot" />
+            <Button text="Root tabview (bottom)" tap="onNavigateToTabViewBottomRoot" />
+            <Button text="Page w/ bottom navigation" tap="onNavigateToBottomNavigationPage" />
+            <Button text="Root bottom navigation" tap="onNavigateToBottomNavigationRoot" />
             <Button text="Page w/ tabs (top)" tap="onNavigateToTabsTopPage" />
             <Button text="Page w/ tabs (bottom)" tap="onNavigateToTabsBottomPage" />
             <Button text="Root tabs (top)" tap="onNavigateToTabsTopRoot" />

e2e/nested-frame-navigation/app/tab-page/tab-bottom-page.xml

@@ -2,7 +2,7 @@
 
     <ActionBar class="action-bar">
         <NavigationButton text="tabBottomBack" tap="onBackButtonTap" android.systemIcon="ic_menu_back" />
-        <Label class="action-bar-title" text="tab bottom page" horizontalAlignment="center" />
+        <Label class="action-bar-title" text="tabview bottom page" horizontalAlignment="center" />
     </ActionBar>
     
     <GridLayout rows="auto, *">

e2e/nested-frame-navigation/app/tab-page/tab-top-page.ts

@@ -0,0 +1,46 @@
+import { EventData } from "tns-core-modules/ui/page";
+import { Button } from "tns-core-modules/ui/button";
+
+export function onNavigate(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate("some-page/some-page");
+}
+
+export function onNavigateNone(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "some-page/some-page",
+        animated: false
+    });
+}
+
+export function onNavigateSlide(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "some-page/some-page",
+        animated: true,
+        transition: {
+            name: "slide",
+            duration: 300,
+            curve: "easeIn"
+        }
+    });
+}
+
+export function onNavigateFlip(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "some-page/some-page",
+        animated: true,
+        transition: {
+            name: "flip",
+            duration: 300,
+            curve: "easeIn"
+        }
+    });
+}
+
+export function onBackButtonTap(args: EventData): void {
+    const button = <Button>args.object;
+    button.page.frame.goBack();
+}

e2e/nested-frame-navigation/app/tab-page/tab-top-page.xml

@@ -2,7 +2,7 @@
 
     <ActionBar class="action-bar">
         <NavigationButton text="tabTopBack" tap="onBackButtonTap" android.systemIcon="ic_menu_back" />
-        <Label class="action-bar-title" text="tab top page" horizontalAlignment="center" />
+        <Label class="action-bar-title" text="tabview top page" horizontalAlignment="center" />
     </ActionBar>
 
     <GridLayout rows="auto, *">

e2e/nested-frame-navigation/app/tab-root/tab-bottom-root.xml

@@ -1,7 +1,7 @@
 <TabView androidTabsPosition="bottom">
     <TabViewItem title="Players">
         <GridLayout rows="auto, auto, *">
-            <Label text="tab root bottom home" />
+            <Label text="tabview root bottom home" />
             <Button row="1" text="reset app" tap="onReset" />
             <GridLayout row="2">
                 <Frame defaultPage="players/players-items-page" />

e2e/nested-frame-navigation/app/tab-root/tab-top-root.xml

@@ -1,7 +1,7 @@
 <TabView androidTabsPosition="top">
     <TabViewItem title="Players">
         <GridLayout rows="auto, auto, *">
-            <Label text="tab root top home" />
+            <Label text="tabview root top home" />
             <Button row="1" text="reset app" tap="onReset" />
             <GridLayout row="2">
                 <Frame defaultPage="players/players-items-page" />

e2e/nested-frame-navigation/app/tabs-page/tabs-bottom-page.ts

@@ -0,0 +1,46 @@
+import { EventData } from "tns-core-modules/ui/page";
+import { Button } from "tns-core-modules/ui/button";
+
+export function onNavigate(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate("some-page/some-page");
+}
+
+export function onNavigateNone(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "some-page/some-page",
+        animated: false
+    });
+}
+
+export function onNavigateSlide(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "some-page/some-page",
+        animated: true,
+        transition: {
+            name: "slide",
+            duration: 300,
+            curve: "easeIn"
+        }
+    });
+}
+
+export function onNavigateFlip(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "some-page/some-page",
+        animated: true,
+        transition: {
+            name: "flip",
+            duration: 300,
+            curve: "easeIn"
+        }
+    });
+}
+
+export function onBackButtonTap(args: EventData): void {
+    const button = <Button>args.object;
+    button.page.frame.goBack();
+}

e2e/nested-frame-navigation/app/tabs-page/tabs-bottom-page.xml

@@ -0,0 +1,36 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
+
+    <ActionBar class="action-bar">
+        <NavigationButton text="tabBottomBack" tap="onBackButtonTap" android.systemIcon="ic_menu_back" />
+        <Label class="action-bar-title" text="tabs bottom page" horizontalAlignment="center" />
+    </ActionBar>
+    
+    <GridLayout rows="auto, *">
+        <StackLayout>
+            <Button text="navigate to some page (default transition)" tap="onNavigate" />
+            <Button text="navigate to some page (no transition)" tap="onNavigateNone" />
+            <Button text="navigate to some page (slide transition)" tap="onNavigateSlide" />
+            <Button text="navigate to some page (flip transition)" tap="onNavigateFlip" />
+        </StackLayout>
+
+        <GridLayout row="1">
+            <Tabs tabsPosition="bottom">
+                <TabStrip>
+                    <TabStripItem title="Players"></TabStripItem>
+                    <TabStripItem title="Dummy"></TabStripItem>
+                    <TabStripItem title="Teams"></TabStripItem>
+                </TabStrip>
+
+                <TabContentItem>
+                    <Frame defaultPage="players/players-items-page" />
+                </TabContentItem>
+                <TabContentItem>
+                    <Label text="this is a tab" />
+                </TabContentItem>
+                <TabContentItem>
+                    <Frame defaultPage="teams/teams-items-page" />
+                </TabContentItem>
+            </Tabs>
+        </GridLayout>
+    </GridLayout>
+</Page>

e2e/nested-frame-navigation/app/tabs-page/tabs-top-page.ts

@@ -0,0 +1,46 @@
+import { EventData } from "tns-core-modules/ui/page";
+import { Button } from "tns-core-modules/ui/button";
+
+export function onNavigate(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate("some-page/some-page");
+}
+
+export function onNavigateNone(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "some-page/some-page",
+        animated: false
+    });
+}
+
+export function onNavigateSlide(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "some-page/some-page",
+        animated: true,
+        transition: {
+            name: "slide",
+            duration: 300,
+            curve: "easeIn"
+        }
+    });
+}
+
+export function onNavigateFlip(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "some-page/some-page",
+        animated: true,
+        transition: {
+            name: "flip",
+            duration: 300,
+            curve: "easeIn"
+        }
+    });
+}
+
+export function onBackButtonTap(args: EventData): void {
+    const button = <Button>args.object;
+    button.page.frame.goBack();
+}

e2e/nested-frame-navigation/app/tabs-page/tabs-top-page.xml

@@ -0,0 +1,36 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
+
+    <ActionBar class="action-bar">
+        <NavigationButton text="tabTopBack" tap="onBackButtonTap" android.systemIcon="ic_menu_back" />
+        <Label class="action-bar-title" text="tabs top page" horizontalAlignment="center" />
+    </ActionBar>
+
+    <GridLayout rows="auto, *">
+        <StackLayout>
+            <Button text="navigate to some page (default transition)" tap="onNavigate" />
+            <Button text="navigate to some page (no transition)" tap="onNavigateNone" />
+            <Button text="navigate to some page (slide transition)" tap="onNavigateSlide" />
+            <Button text="navigate to some page (flip transition)" tap="onNavigateFlip" />
+        </StackLayout>
+
+        <GridLayout row="1">
+            <Tabs tabsPosition="top">
+                <TabStrip>
+                    <TabStripItem title="Players"></TabStripItem>
+                    <TabStripItem title="Dummy"></TabStripItem>
+                    <TabStripItem title="Teams"></TabStripItem>
+                </TabStrip>
+
+                <TabContentItem>
+                    <Frame defaultPage="players/players-items-page" />
+                </TabContentItem>
+                <TabContentItem>
+                    <Label text="this is a tab" />
+                </TabContentItem>
+                <TabContentItem>
+                    <Frame defaultPage="teams/teams-items-page" />
+                </TabContentItem>
+            </Tabs>
+        </GridLayout>
+    </GridLayout>
+</Page>

e2e/nested-frame-navigation/app/tabs-root/tabs-bottom-root.ts

@@ -0,0 +1,5 @@
+import * as application from "tns-core-modules/application";
+
+export function onReset() {
+    application._resetRootView({ moduleName: "app-root" });
+}

e2e/nested-frame-navigation/app/tabs-root/tabs-bottom-root.xml

@@ -0,0 +1,27 @@
+<Tabs tabsPosition="bottom">
+    <TabStrip>
+        <TabStripItem title="Players"></TabStripItem>
+        <!-- this tab serves as dummy so the actual teams tab is not loaded by default  -->
+        <TabStripItem title="Dummy"></TabStripItem>
+        <TabStripItem title="Teams"></TabStripItem>
+    </TabStrip>
+
+    <TabContentItem>
+        <GridLayout rows="auto, auto, *">
+            <Label text="tabs root top home" />
+            <Button row="1" text="reset app" tap="onReset" />
+            <GridLayout row="2">
+                <Frame defaultPage="players/players-items-page" />
+            </GridLayout>
+        </GridLayout>
+    </TabContentItem>
+    <TabContentItem>
+        <Label text="this is a tab" />
+    </TabContentItem>
+    <TabContentItem>
+        <GridLayout rows="auto, *">
+            <Button text="reset app" tap="onReset" />
+            <Frame row="1" defaultPage="teams/teams-items-page" />
+        </GridLayout>
+    </TabContentItem>
+</Tabs>

e2e/nested-frame-navigation/app/tabs-root/tabs-top-root.ts

@@ -0,0 +1,5 @@
+import * as application from "tns-core-modules/application";
+
+export function onReset() {
+    application._resetRootView({ moduleName: "app-root" });
+}

e2e/nested-frame-navigation/app/tabs-root/tabs-top-root.xml

@@ -0,0 +1,27 @@
+<Tabs tabsPosition="top">
+    <TabStrip>
+        <TabStripItem title="Players"></TabStripItem>
+        <!-- this tab serves as dummy so the actual teams tab is not loaded by default  -->
+        <TabStripItem title="Dummy"></TabStripItem>
+        <TabStripItem title="Teams"></TabStripItem>
+    </TabStrip>
+
+    <TabContentItem>
+        <GridLayout rows="auto, auto, *">
+            <Label text="tabs root top home" />
+            <Button row="1" text="reset app" tap="onReset" />
+            <GridLayout row="2">
+                <Frame defaultPage="players/players-items-page" />
+            </GridLayout>
+        </GridLayout>
+    </TabContentItem>
+    <TabContentItem>
+        <Label text="this is a tab" />
+    </TabContentItem>
+    <TabContentItem>
+        <GridLayout rows="auto, *">
+            <Button text="reset app" tap="onReset" />
+            <Frame row="1" defaultPage="teams/teams-items-page" />
+        </GridLayout>
+    </TabContentItem>
+</Tabs>

e2e/nested-frame-navigation/e2e/screen.ts

@@ -14,10 +14,10 @@ const layoutHome = "layout home page";
 const layoutHomeSecondary = "layout home secondary page";
 const frameHome = "frame home page";
 const frameHomeSecondary = "multi frame home page";
-const tabTopHome = "tab top page";
+const tabViewTopHome = "tabview top page";
-const tabBottomHome = "tab bottom page";
+const tabViewBottomHome = "tabview bottom page";
-const tabRootTopHome = "tab root top home";
+const tabViewRootTopHome = "tabview root top home";
-const tabRootBottomHome = "tab root bottom home";
+const tabViewRootBottomHome = "tabview root bottom home";
 const navigateToStillOtherPageSlide = "navigate to still other page (slide transition)";
 const navigateToSomePageDefault = "navigate to some page (default transition)";
 const navigateToSomePageNone = "navigate to some page (no transition)";
@@ -300,19 +300,19 @@ export class Screen {
     }
 
     loadedPageTabTopWithFrames = async () => {
-        await this.loadedPage(tabTopHome);
+        await this.loadedPage(tabViewTopHome);
     }
 
     loadedPageTabBottomWithFrames = async () => {
-        await this.loadedPage(tabBottomHome);
+        await this.loadedPage(tabViewBottomHome);
     }
 
     loadedTabTopRootWithFrames = async () => {
-        await this.loadedPage(tabRootTopHome);
+        await this.loadedPage(tabViewRootTopHome);
     }
 
     loadedTabBottomRootWithFrames = async () => {
-        await this.loadedPage(tabRootBottomHome);
+        await this.loadedPage(tabViewRootBottomHome);
     }
     
     loadedStillOtherPage = async () => {