From 767b19655fb708a23401c0b0e86fb853f51e1ea7 Mon Sep 17 00:00:00 2001 From: ADjenkov Date: Tue, 13 Nov 2018 10:28:07 +0200 Subject: [PATCH 1/2] chore(e2e-tests): enable shared modal tests with tab root --- e2e/modal-navigation-ng/app/app.css | 3 +- e2e/modal-navigation-ng/app/app.ios.css | 12 + e2e/modal-navigation-ng/app/app.routing.ts | 7 +- .../app/home/home.component.html | 35 ++- .../app/layout.component.html | 29 +- .../app/layout.component.ts | 4 +- e2e/modal-navigation-ng/app/tab.component.ts | 21 +- .../e2e/modal.shared.e2e-spec.ts | 254 +++++++++--------- .../e2e/shared.e2e-spec.ts | 1 - 9 files changed, 212 insertions(+), 154 deletions(-) create mode 100644 e2e/modal-navigation-ng/app/app.ios.css diff --git a/e2e/modal-navigation-ng/app/app.css b/e2e/modal-navigation-ng/app/app.css index 5e41a4552..d132e79b9 100644 --- a/e2e/modal-navigation-ng/app/app.css +++ b/e2e/modal-navigation-ng/app/app.css @@ -9,7 +9,6 @@ In many cases you may want to use the NativeScript core theme instead of writing your own CSS rules. For a full list of class names in the theme refer to http://docs.nativescript.org/ui/theme. */ -@import '~nativescript-theme-core/css/core.light.css'; Button { font-size: 10px; -} +} \ No newline at end of file diff --git a/e2e/modal-navigation-ng/app/app.ios.css b/e2e/modal-navigation-ng/app/app.ios.css new file mode 100644 index 000000000..16f77c1ba --- /dev/null +++ b/e2e/modal-navigation-ng/app/app.ios.css @@ -0,0 +1,12 @@ +#home-page { + font-size: 10; + margin: 0px; + padding: 0px; +} +#home-page Button { + margin-bottom: 20px; + padding: 20px; + border-color: gray; + border-width: 2px; + border-radius: 8px; +} \ No newline at end of file diff --git a/e2e/modal-navigation-ng/app/app.routing.ts b/e2e/modal-navigation-ng/app/app.routing.ts index 0a49e8251..6875f591f 100644 --- a/e2e/modal-navigation-ng/app/app.routing.ts +++ b/e2e/modal-navigation-ng/app/app.routing.ts @@ -102,6 +102,12 @@ const routesTab: Routes = [ path: "modal-second", component: ModalSecondComponent } ] + }, + { + path: "modal-shared", component: ModalViewContentComponent, outlet: "modalOutlet" + }, + { + path: "modal-shared-second-host", component: ModalSharedSecondComponent } ]; @@ -113,7 +119,6 @@ const routesLayout: Routes = [ { path: "modal-second", component: ModalSecondComponent } ] - @NgModule({ imports: [NativeScriptRouterModule.forRoot(routes)], exports: [NativeScriptRouterModule] diff --git a/e2e/modal-navigation-ng/app/home/home.component.html b/e2e/modal-navigation-ng/app/home/home.component.html index a632c3a92..b5b3ba939 100644 --- a/e2e/modal-navigation-ng/app/home/home.component.html +++ b/e2e/modal-navigation-ng/app/home/home.component.html @@ -1,17 +1,24 @@ - - + + - - - - - - - - - + + + + + + + + + + - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/e2e/modal-navigation-ng/app/layout.component.html b/e2e/modal-navigation-ng/app/layout.component.html index 3d50caa77..8b638f619 100644 --- a/e2e/modal-navigation-ng/app/layout.component.html +++ b/e2e/modal-navigation-ng/app/layout.component.html @@ -1,10 +1,19 @@ - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/e2e/modal-navigation-ng/app/layout.component.ts b/e2e/modal-navigation-ng/app/layout.component.ts index 223e4dcdd..c973bb40e 100644 --- a/e2e/modal-navigation-ng/app/layout.component.ts +++ b/e2e/modal-navigation-ng/app/layout.component.ts @@ -22,7 +22,7 @@ export class LayoutComponent { private router: Router, private location: NSLocationStrategy, private vcRef: ViewContainerRef, - private _viewContainerRefService: ViewContainerRefService) { + private viewContainerRefService: ViewContainerRefService) { router.events.subscribe(e => { if (e instanceof NavigationEnd) { console.log("[ROUTER]: " + e.toString()); @@ -30,7 +30,7 @@ export class LayoutComponent { } }); - this._viewContainerRefService.root = this.vcRef; + this.viewContainerRefService.root = this.vcRef; } onModalNoFrame() { diff --git a/e2e/modal-navigation-ng/app/tab.component.ts b/e2e/modal-navigation-ng/app/tab.component.ts index 04d081d4f..397dc32a0 100644 --- a/e2e/modal-navigation-ng/app/tab.component.ts +++ b/e2e/modal-navigation-ng/app/tab.component.ts @@ -1,6 +1,8 @@ -import { Component, OnInit } from "@angular/core"; +import { Component, ViewContainerRef } from "@angular/core"; import { Router, NavigationEnd } from "@angular/router"; -import { RouterExtensions } from "nativescript-angular/router"; +import { NSLocationStrategy } from "nativescript-angular/router/ns-location-strategy"; + +import { ViewContainerRefService } from "./shared/ViewContainerRefService"; @Component({ selector: "ns-tab", @@ -8,5 +10,18 @@ import { RouterExtensions } from "nativescript-angular/router"; }) export class TabComponent { - constructor(private routerExtension: RouterExtensions) { } + constructor( + router: Router, + location: NSLocationStrategy, + private _vcRef: ViewContainerRef, + private _viewContainerRefService: ViewContainerRefService) { + router.events.subscribe(e => { + if (e instanceof NavigationEnd) { + console.log("[ROUTER]: " + e.toString()); + console.log(location.toString()); + } + }); + + this._viewContainerRefService.root = this._vcRef; + } } diff --git a/e2e/modal-navigation-ng/e2e/modal.shared.e2e-spec.ts b/e2e/modal-navigation-ng/e2e/modal.shared.e2e-spec.ts index cbeafec35..6c4895328 100644 --- a/e2e/modal-navigation-ng/e2e/modal.shared.e2e-spec.ts +++ b/e2e/modal-navigation-ng/e2e/modal.shared.e2e-spec.ts @@ -1,139 +1,151 @@ import { AppiumDriver, createDriver, SearchOptions } from "nativescript-dev-appium"; import { assert } from "chai"; +import { Screen } from "./screen" const homeComponent = "Home Component"; +const roots = ["setFrameRootView", "setTabRootView"]; -describe("Shared modal from home and back", () => { +describe("modal-shared:", () => { let driver: AppiumDriver; + let screen: Screen; before(async () => { driver = await createDriver(); - await driver.resetApp(); - }); - - afterEach(async function () { - if (this.currentTest.state === "failed") { - await driver.logTestArtifacts(this.currentTest.title); - } - }); - - it ("should find home component", async () => { - await assertComponent(driver, homeComponent); - }); - - it("should open/close shared modal from home component", async () => { - await openModal(driver); - await closeModal(driver); - }); - - it ("should find home component again", async () => { - await assertComponent(driver, homeComponent); - }); -}); - -describe("Shared modal from second and back", () => { - let driver: AppiumDriver; - - before(async () => { - driver = await createDriver(); - await driver.resetApp(); - }); - - after(async () => { - await driver.quit(); - console.log("Quit driver!"); - }); - - afterEach(async function () { - if (this.currentTest.state === "failed") { - await driver.logPageSource(this.currentTest.title); - await driver.logScreenshot(this.currentTest.title); - } - }); - - it ("should find home component", async () => { - await assertComponent(driver, homeComponent); - }); - - it ("should navigate to second component", async() => { - await navigateToSecondComponent(driver); - }); - - it ("should find second component", async () => { - await assertComponent(driver, "second component"); - }); - - it("should open/close shared modal from second component", async () => { - await openModal(driver); - await closeModal(driver); - }); - - it ("should find second component again", async () => { - await assertComponent(driver, "second component"); - }); + screen = new Screen(driver); + }); + + roots.forEach(root => { + describe("Shared modal from second and back", () => { + + before(async () => { + await screen[root](); + }); + + beforeEach(async function () { + }); + + afterEach(async function () { + if (this.currentTest.state === "failed") { + await driver.logTestArtifacts(this.currentTest.title); + await driver.resetApp(); + await screen[root](); + } + }); + + it("should find home component", async () => { + await assertComponent(driver, homeComponent); + }); + + it("should open/close shared modal from home component", async () => { + await openModal(driver); + await closeModal(driver); + }); + + it("should open/close shared modal from home component again", async () => { + await openModal(driver); + await closeModal(driver); + }); + + it("should find home component again", async () => { + await assertComponent(driver, homeComponent); + }); + + it("should navigate to second component", async () => { + await navigateToSecondComponent(driver); + }); + + it("should find second component", async () => { + await assertComponent(driver, "second component"); + }); + + it("should open/close shared modal from second component", async () => { + await openModal(driver); + await closeModal(driver); + }); + + it("should find second component again", async () => { + await assertComponent(driver, "second component"); + }); + + it("should navigate back to home component", async () => { + await goBack(driver); + await assertComponent(driver, homeComponent); + }); + }); + }) }); -describe("Shared modal from different components", () => { +describe("modal-shared-different-component:", () => { let driver: AppiumDriver; + let screen: Screen; before(async () => { driver = await createDriver(); - await driver.resetApp(); - }); - - after(async () => { - await driver.quit(); - console.log("Quit driver!"); - }); - - afterEach(async function () { - if (this.currentTest.state === "failed") { - await driver.logTestArtifacts(this.currentTest.title); - } - }); - - it ("should find home component", async () => { - await assertComponent(driver, homeComponent); - }); - - it("should open/close shared modal from home component", async () => { - await openModal(driver); - await closeModal(driver); - }); - - it ("should find home component again", async () => { - await assertComponent(driver, homeComponent); - }); - - it ("should navigate to second component", async() => { - await navigateToSecondComponent(driver); - }); - - it ("should find second component", async () => { - await assertComponent(driver, "second component"); - }); - - it("should open/close shared modal from second component", async () => { - await openModal(driver); - await closeModal(driver); - }); - - it ("should find second component again", async () => { - await assertComponent(driver, "second component"); - }); - - it ("should navigate back to home component", async () => { - await goBack(driver); - await assertComponent(driver, homeComponent); - }); - - it("should open/close shared modal from home component after manipulations with second", async () => { - await openModal(driver); - await closeModal(driver); - }); - - it ("should find home component again", async () => { - await assertComponent(driver, homeComponent); + screen = new Screen(driver); + }); + + roots.forEach(root => { + describe("Shared modal from different components", () => { + before(async () => { + driver = await createDriver(); + await driver.resetApp(); + }); + + after(async () => { + await driver.quit(); + console.log("Quit driver!"); + }); + + afterEach(async function () { + if (this.currentTest.state === "failed") { + await driver.logTestArtifacts(this.currentTest.title); + } + }); + + it("should find home component", async () => { + await assertComponent(driver, homeComponent); + }); + + it("should open/close shared modal from home component", async () => { + await openModal(driver); + await closeModal(driver); + }); + + it("should find home component again", async () => { + await assertComponent(driver, homeComponent); + }); + + it("should navigate to second component", async () => { + await navigateToSecondComponent(driver); + }); + + it("should find second component", async () => { + await assertComponent(driver, "second component"); + }); + + it("should open/close shared modal from second component", async () => { + await openModal(driver); + await closeModal(driver); + }); + + it("should find second component again", async () => { + await assertComponent(driver, "second component"); + }); + + it("should navigate back to home component", async () => { + await goBack(driver); + await assertComponent(driver, homeComponent); + }); + + it("should open/close shared modal from home component after manipulations with second", async () => { + await openModal(driver); + await closeModal(driver); + }); + + it("should find home component again", async () => { + await assertComponent(driver, homeComponent); + }); + }); }); }); diff --git a/e2e/modal-navigation-ng/e2e/shared.e2e-spec.ts b/e2e/modal-navigation-ng/e2e/shared.e2e-spec.ts index 54e9f6a90..5f4e384d8 100644 --- a/e2e/modal-navigation-ng/e2e/shared.e2e-spec.ts +++ b/e2e/modal-navigation-ng/e2e/shared.e2e-spec.ts @@ -4,7 +4,6 @@ import { Screen } from "./screen" const time = 1; export const roots = ["setFrameRootView", "setLayoutRootView", "setTabRootView", "setNamedFrameRootView"]; -// export const roots = ["setTabRootView", "setNamedFrameRootView"]; export async function modalFrameBackground(driver: AppiumDriver, screen: Screen) { await driver.backgroundApp(time); From 199c24547589c9d373dfa822dc240a6fb8ae0fda Mon Sep 17 00:00:00 2001 From: ADjenkov Date: Tue, 13 Nov 2018 10:56:33 +0200 Subject: [PATCH 2/2] fix(dialogs): unable to reopen shared modal view when tab as root Use topmost frame to show modal view when using tabview as a root --- nativescript-angular/directives/dialogs.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/nativescript-angular/directives/dialogs.ts b/nativescript-angular/directives/dialogs.ts index 7670320c5..899c54097 100644 --- a/nativescript-angular/directives/dialogs.ts +++ b/nativescript-angular/directives/dialogs.ts @@ -17,7 +17,7 @@ import { AppHostView } from "../app-host-view"; import { DetachedLoader } from "../common/detached-loader"; import { PageFactory, PAGE_FACTORY } from "../platform-providers"; import { once } from "../common/utils"; -import { Frame } from "tns-core-modules/ui/frame/frame"; +import { topmost, Frame } from "tns-core-modules/ui/frame"; export interface ModalDialogOptions { context?: any; @@ -84,7 +84,7 @@ export class ModalDialogService { let frame = parentView; if (!(parentView instanceof Frame)) { - frame = parentView.page && parentView.page.frame; + frame = (parentView.page && parentView.page.frame) || topmost(); } if (frame) {