javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 11:01:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Manol Donev
2019-07-01 16:48:33 +03:00
committed by GitHub
parent 726a4d133a
commit ad54445083
21 changed files with 391 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
e2e/nested-frame-navigation/app/tab-page/tabs-bottom-page.ts → e2e/nested-frame-navigation/app/bottom-navigation-page/bottom-navigation-page.ts
View File

36
e2e/nested-frame-navigation/app/bottom-navigation-page/bottom-navigation-page.xml Normal file
View File

@ -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>

5
e2e/nested-frame-navigation/app/bottom-navigation-root/bottom-navigation-root.ts Normal file
View File

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

27
e2e/nested-frame-navigation/app/bottom-navigation-root/bottom-navigation-root.xml Normal file
View File

@ -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>

35
e2e/nested-frame-navigation/app/home/home-page.ts
View File

@ -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) {

6
e2e/nested-frame-navigation/app/home/home-page.xml
View File

@ -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" />

0
e2e/nested-frame-navigation/app/tab-page/tabs-top-page.ts → e2e/nested-frame-navigation/app/tab-page/tab-bottom-page.ts
View File

2
e2e/nested-frame-navigation/app/tab-page/tabs-bottom-page.xml → e2e/nested-frame-navigation/app/tab-page/tab-bottom-page.xml
View File

@ -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, *">

46
e2e/nested-frame-navigation/app/tab-page/tab-top-page.ts Normal file
View File

@ -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();
}

2
e2e/nested-frame-navigation/app/tab-page/tabs-top-page.xml → e2e/nested-frame-navigation/app/tab-page/tab-top-page.xml
View File

@ -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, *">

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

@ -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" />

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

@ -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" />

46
e2e/nested-frame-navigation/app/tabs-page/tabs-bottom-page.ts Normal file
View File

@ -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();
}

36
e2e/nested-frame-navigation/app/tabs-page/tabs-bottom-page.xml Normal file
View File

@ -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>

46
e2e/nested-frame-navigation/app/tabs-page/tabs-top-page.ts Normal file
View File

@ -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();
}

36
e2e/nested-frame-navigation/app/tabs-page/tabs-top-page.xml Normal file
View File

@ -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>

5
e2e/nested-frame-navigation/app/tabs-root/tabs-bottom-root.ts Normal file
View File

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

27
e2e/nested-frame-navigation/app/tabs-root/tabs-bottom-root.xml Normal file
View File

@ -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>

5
e2e/nested-frame-navigation/app/tabs-root/tabs-top-root.ts Normal file
View File

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

27
e2e/nested-frame-navigation/app/tabs-root/tabs-top-root.xml Normal file
View File

@ -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>

16
e2e/nested-frame-navigation/e2e/screen.ts
View File

@ -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 tabBottomHome = "tab bottom page";
const tabRootTopHome = "tab root top home";
const tabRootBottomHome = "tab root bottom home";
const tabViewTopHome = "tabview top page";
const tabViewBottomHome = "tabview bottom page";
const tabViewRootTopHome = "tabview root top 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 () => {