diff --git a/e2e/renderer/app/app-routing.module.ts b/e2e/renderer/app/app-routing.module.ts index 5cb2f79eb..6e89eca70 100644 --- a/e2e/renderer/app/app-routing.module.ts +++ b/e2e/renderer/app/app-routing.module.ts @@ -4,6 +4,11 @@ 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 { ActionBarVisibilityAlwaysComponent } from "./page-router-outlet/action-bar-visibility-always.component"; +import { ActionBarVisibilityAutoComponent } from "./page-router-outlet/action-bar-visibility-auto.component" +import { ActionBarVisibilityNeverComponent } from "./page-router-outlet/action-bar-visibility-never.component" +import { NestedPageComponent } from "./page-router-outlet/nested-page.component" + import { TabItemBindingComponent } from "./tab-view/tab-item-binding.component"; import { ListComponent } from "./list.component"; @@ -22,6 +27,33 @@ export const routes = [ redirectTo: "/list", pathMatch: "full" }, + { + path: "action-bar-visibility-always", + component: ActionBarVisibilityAlwaysComponent, + children: [{ + path: "nested", + outlet: "nested", + component: NestedPageComponent + }] + }, + { + path: "action-bar-visibility-never", + component: ActionBarVisibilityNeverComponent, + children: [{ + path: "nested", + outlet: "nested", + component: NestedPageComponent + }] + }, + { + path: "action-bar-visibility-auto", + component: ActionBarVisibilityAutoComponent, + children: [{ + path: "nested", + outlet: "nested", + component: NestedPageComponent + }] + }, { path: "action-bar-dynamic", component: ActionBarDynamicItemsComponent, @@ -76,6 +108,11 @@ export const navigatableComponents = [ ActionBarDynamicItemsComponent, ActionBarExtensionComponent, + ActionBarVisibilityAlwaysComponent, + ActionBarVisibilityNeverComponent, + ActionBarVisibilityAutoComponent, + NestedPageComponent, + TabItemBindingComponent, ListComponent, diff --git a/e2e/renderer/app/list.component.ts b/e2e/renderer/app/list.component.ts index d7e06f14c..e486262f5 100644 --- a/e2e/renderer/app/list.component.ts +++ b/e2e/renderer/app/list.component.ts @@ -5,6 +5,9 @@ import { Component } from "@angular/core"; + + + diff --git a/e2e/renderer/app/page-router-outlet/action-bar-visibility-always.component.ts b/e2e/renderer/app/page-router-outlet/action-bar-visibility-always.component.ts new file mode 100644 index 000000000..35f95e923 --- /dev/null +++ b/e2e/renderer/app/page-router-outlet/action-bar-visibility-always.component.ts @@ -0,0 +1,26 @@ +import { Component, OnInit } from "@angular/core"; +import { RouterExtensions } from "nativescript-angular/router"; +import { ActivatedRoute } from "@angular/router"; + +@Component({ + template: ` + + + + + + + + + ` +}) +export class ActionBarVisibilityAlwaysComponent implements OnInit { + constructor( + private routerExtension: RouterExtensions, + private activeRoute: ActivatedRoute) { + } + + ngOnInit(): void { + this.routerExtension.navigate([{outlets: { nested: ["nested"]}}], { relativeTo: this.activeRoute }); + } +} diff --git a/e2e/renderer/app/page-router-outlet/action-bar-visibility-auto.component.ts b/e2e/renderer/app/page-router-outlet/action-bar-visibility-auto.component.ts new file mode 100644 index 000000000..2e7955479 --- /dev/null +++ b/e2e/renderer/app/page-router-outlet/action-bar-visibility-auto.component.ts @@ -0,0 +1,26 @@ +import { Component, OnInit } from "@angular/core"; +import { RouterExtensions } from "nativescript-angular/router"; +import { ActivatedRoute } from "@angular/router"; + +@Component({ + template: ` + + + + + + + + + ` +}) +export class ActionBarVisibilityAutoComponent implements OnInit { + constructor( + private routerExtension: RouterExtensions, + private activeRoute: ActivatedRoute) { + } + + ngOnInit(): void { + this.routerExtension.navigate([{ outlets: { nested: ["nested"] } }], { relativeTo: this.activeRoute }); + } +} diff --git a/e2e/renderer/app/page-router-outlet/action-bar-visibility-never.component.ts b/e2e/renderer/app/page-router-outlet/action-bar-visibility-never.component.ts new file mode 100644 index 000000000..cd3a9258a --- /dev/null +++ b/e2e/renderer/app/page-router-outlet/action-bar-visibility-never.component.ts @@ -0,0 +1,26 @@ +import { Component, OnInit } from "@angular/core"; +import { RouterExtensions } from "nativescript-angular/router"; +import { ActivatedRoute } from "@angular/router"; + +@Component({ + template: ` + + + + + + + + + ` +}) +export class ActionBarVisibilityNeverComponent implements OnInit { + constructor( + private routerExtension: RouterExtensions, + private activeRoute: ActivatedRoute) { + } + + ngOnInit(): void { + this.routerExtension.navigate([{ outlets: { nested: ["nested"] } }], { relativeTo: this.activeRoute }); + } +} diff --git a/e2e/renderer/app/page-router-outlet/nested-page.component.ts b/e2e/renderer/app/page-router-outlet/nested-page.component.ts new file mode 100644 index 000000000..fa7f81761 --- /dev/null +++ b/e2e/renderer/app/page-router-outlet/nested-page.component.ts @@ -0,0 +1,24 @@ +import { Component } from "@angular/core"; + +@Component({ + template: ` + + + + + + + + + + ` +}) +export class NestedPageComponent { + showActionBar(args): void { + args.object.page.actionBarHidden = false; + } + + hideActionBar(args): void { + args.object.page.actionBarHidden = true; + } +} diff --git a/e2e/renderer/e2e/page-router-outlet.e2e-spec.ts b/e2e/renderer/e2e/page-router-outlet.e2e-spec.ts new file mode 100644 index 000000000..2553cd67b --- /dev/null +++ b/e2e/renderer/e2e/page-router-outlet.e2e-spec.ts @@ -0,0 +1,119 @@ +import { + AppiumDriver, + createDriver, + SearchOptions, + UIElement +} from "nativescript-dev-appium"; +import { assert } from "chai"; + +describe("page-router-outlet-scenario", () => { + let driver: AppiumDriver; + + describe("actionBarVisibility 'always' shows action bars", async () => { + before(async () => { + driver = await createDriver(); + await driver.driver.resetApp(); + }); + + it("should navigate to page", async () => { + const navigationButton = + await driver.findElementByText("ActionBarVisibility Always", SearchOptions.exact); + await navigationButton.click(); + + await driver.findElementByText("ShowActionBar", SearchOptions.exact); + }); + + it("should not hide action bar by default", async () => { + const screenMatches = await driver.compareScreen("actionBarVisibility-always-default", 5); + assert(screenMatches); + }); + + it("should not hide action bar when hidden by page", async () => { + const hideActionBarButton = await driver.findElementByText("HideActionBar"); + hideActionBarButton.click(); + + const screenMatches = await driver.compareScreen("actionBarVisibility-always-hidden", 5); + assert(screenMatches); + }); + + it("should not do anything when shown action bar by page", async () => { + const showActionBarButton = await driver.findElementByText("ShowActionBar"); + showActionBarButton.click(); + + const screenMatches = await driver.compareScreen("actionBarVisibility-always-shown", 5); + assert(screenMatches); + }); + }); + + describe("actionBarVisibility 'never' doesn't show action bars", async () => { + before(async () => { + driver = await createDriver(); + await driver.driver.resetApp(); + }); + + it("should navigate to page", async () => { + const navigationButton = + await driver.findElementByText("ActionBarVisibility Never", SearchOptions.exact); + await navigationButton.click(); + + await driver.findElementByText("ShowActionBar", SearchOptions.exact); + }); + + it("should hide action bar by default", async () => { + const screenMatches = await driver.compareScreen("actionBarVisibility-never-default", 5); + assert(screenMatches); + }); + + it("should not show action bar when shown by page", async () => { + const showActionBarButton = await driver.findElementByText("ShowActionBar"); + showActionBarButton.click(); + + const screenMatches = await driver.compareScreen("actionBarVisibility-never-shown", 5); + assert(screenMatches); + }); + + it("should not do anything when hidden action bar by page", async () => { + const hideActionBarButton = await driver.findElementByText("HideActionBar"); + hideActionBarButton.click(); + + const screenMatches = await driver.compareScreen("actionBarVisibility-never-hidden", 5); + assert(screenMatches); + }); + }); + + describe("actionBarVisibility 'auto' shows action bars based on page", async () => { + before(async () => { + driver = await createDriver(); + await driver.driver.resetApp(); + }); + + it("should navigate to page", async () => { + const navigationButton = + await driver.findElementByText("ActionBarVisibility Auto", SearchOptions.exact); + await navigationButton.click(); + + await driver.findElementByText("ShowActionBar", SearchOptions.exact); + }); + + it("should show action bar by default", async () => { + const screenMatches = await driver.compareScreen("actionBarVisibility-auto-default", 5); + assert(screenMatches); + }); + + it("should hide action bar when hidden by page", async () => { + const hideActionBarButton = await driver.findElementByText("HideActionBar"); + hideActionBarButton.click(); + + const screenMatches = await driver.compareScreen("actionBarVisibility-auto-hidden", 5); + assert(screenMatches); + }); + + it("should show action bar when shown by page", async () => { + const showActionBarButton = await driver.findElementByText("ShowActionBar"); + showActionBarButton.click(); + + const screenMatches = await driver.compareScreen("actionBarVisibility-auto-shown", 5); + assert(screenMatches); + }); + }); +}); diff --git a/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-always-default.png b/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-always-default.png new file mode 100644 index 000000000..c25401fb3 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-always-default.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-always-hidden.png b/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-always-hidden.png new file mode 100644 index 000000000..c25401fb3 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-always-hidden.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-always-shown.png b/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-always-shown.png new file mode 100644 index 000000000..c25401fb3 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-always-shown.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-auto-default.png b/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-auto-default.png new file mode 100644 index 000000000..3bd8a4d64 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-auto-default.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-auto-hidden.png b/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-auto-hidden.png new file mode 100644 index 000000000..3bd8a4d64 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-auto-hidden.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-auto-shown.png b/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-auto-shown.png new file mode 100644 index 000000000..b3a3ad9fd Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-auto-shown.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-never-default.png b/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-never-default.png new file mode 100644 index 000000000..6bb8876e8 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-never-default.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-never-hidden.png b/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-never-hidden.png new file mode 100644 index 000000000..6bb8876e8 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-never-hidden.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-never-shown.png b/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-never-shown.png new file mode 100644 index 000000000..6bb8876e8 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-never-shown.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-always-default.png b/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-always-default.png new file mode 100644 index 000000000..f7cad6d50 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-always-default.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-always-hidden.png b/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-always-hidden.png new file mode 100644 index 000000000..f7cad6d50 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-always-hidden.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-always-shown.png b/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-always-shown.png new file mode 100644 index 000000000..f7cad6d50 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-always-shown.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-auto-default.png b/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-auto-default.png new file mode 100644 index 000000000..c8509ceab Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-auto-default.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-auto-hidden.png b/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-auto-hidden.png new file mode 100644 index 000000000..c8509ceab Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-auto-hidden.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-auto-shown.png b/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-auto-shown.png new file mode 100644 index 000000000..e72aaa9ed Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-auto-shown.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-never-default.png b/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-never-default.png new file mode 100644 index 000000000..ea4509395 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-never-default.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-never-hidden.png b/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-never-hidden.png new file mode 100644 index 000000000..ea4509395 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-never-hidden.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-never-shown.png b/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-never-shown.png new file mode 100644 index 000000000..ea4509395 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-never-shown.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-always-default_actual.png b/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-always-default_actual.png new file mode 100644 index 000000000..8eb8f1870 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-always-default_actual.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-always-hidden_actual.png b/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-always-hidden_actual.png new file mode 100644 index 000000000..8eb8f1870 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-always-hidden_actual.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-always-shown_actual.png b/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-always-shown_actual.png new file mode 100644 index 000000000..8eb8f1870 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-always-shown_actual.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-auto-default_actual.png b/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-auto-default_actual.png new file mode 100644 index 000000000..44c48ceb9 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-auto-default_actual.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-auto-hidden_actual.png b/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-auto-hidden_actual.png new file mode 100644 index 000000000..5e06beb38 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-auto-hidden_actual.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-auto-shown_actual.png b/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-auto-shown_actual.png new file mode 100644 index 000000000..44c48ceb9 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-auto-shown_actual.png differ diff --git a/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-never-shown_actual.png b/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-never-shown_actual.png new file mode 100644 index 000000000..e434e2d18 Binary files /dev/null and b/e2e/renderer/e2e/resources/images/renderer/iPhone X 110/actionBarVisibility-never-shown_actual.png differ diff --git a/nativescript-angular/router/page-router-outlet.ts b/nativescript-angular/router/page-router-outlet.ts index 79ca5098f..a2a3e818e 100644 --- a/nativescript-angular/router/page-router-outlet.ts +++ b/nativescript-angular/router/page-router-outlet.ts @@ -150,6 +150,7 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire private parentContexts: ChildrenOutletContexts, private location: ViewContainerRef, @Attribute("name") name: string, + @Attribute("actionBarVisibility") actionBarVisibility: string, @Attribute("isEmptyOutlet") isEmptyOutlet: boolean, private locationStrategy: NSLocationStrategy, private componentFactoryResolver: ComponentFactoryResolver, @@ -162,6 +163,7 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire ) { this.isEmptyOutlet = isEmptyOutlet; this.frame = elRef.nativeElement; + this.setActionBarVisibility(actionBarVisibility); if (isLogEnabled()) { log(`PageRouterOutlet.constructor frame: ${this.frame}`); } @@ -173,6 +175,18 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire this.detachedLoaderFactory = resolver.resolveComponentFactory(DetachedLoader); } + setActionBarVisibility(actionBarVisibility: string): void { + switch (actionBarVisibility) { + case "always": + case "never": + this.frame.actionBarVisibility = actionBarVisibility; + return; + + default: + this.frame.actionBarVisibility = "auto"; + } + } + ngOnDestroy(): void { // Clear accumulated modal view page cache when page-router-outlet // destroyed on modal view closing