test(e2e): add modal-navigation app tests (#5445)

* test(e2e): modal-navigation app webpack support

* test(e2e): add modal-navigation app smoke test

* chore(e2e): tslint disable next line

* chore(e2e): modal-navigation app compilation

* refactor(e2e): modal-nabivation app pages

* test(e2e): add app root modal frame tests

* test(e2e): add app root modal frame background tests

* refactor(e2e): app root modal frame tests

* test(e2e): add tab root modal frame tests

* refactor(e2e): modal frame tests

* test(e2e): add modal page tests

* docs(e2e): add scenarios

* refactor(e2e): modal-navigation app tests

* test(e2e): turn on/off "Don't keep activities"

* test(e2e): delete no background tests

* test(e2e): add modal tab tests

* refactor(e2e): quit driver after all tests

* refactor(e2e): config files

* fix(e2e): tab root tests

* refactor(e2e): skip tab root tests until fix app

* chore(e2e): config files

e2e/modal-navigation/app/app.ts

@@ -1,3 +1,4 @@
+import "./bundle-config";
 import * as application from "tns-core-modules/application";
 
 application.run({ moduleName: "app-root" });

e2e/modal-navigation/app/bundle-config.ts

@@ -0,0 +1,9 @@
+if ((<any>global).TNS_WEBPACK) {
+    // Register tns-core-modules UI framework modules
+    require("bundle-entry-points");
+
+    // Register application modules
+    // This will register each `root`, `page`, `fragment` postfixed xml, css, js, ts, scss file in the app/ folder
+    const context = (<any>require).context("~/", true, /(root|page|fragment)\.(xml|css|js|ts|scss|less|sass)$/);
+    global.registerWebpackModules(context);
+}

e2e/modal-navigation/app/home/home-page.ts

@@ -56,6 +56,6 @@ export function onNavigate(args: EventData) {
 }
 
 export function onRootViewChange() {
-    let rootView: View = application.getRootView();
-    rootView.typeName === "Frame" ? application._resetRootView({moduleName: "tab-root"}) : application._resetRootView({moduleName: "app-root"});
+    let rootView = application.getRootView();
+    rootView instanceof Frame ? application._resetRootView({moduleName: "tab-root"}) : application._resetRootView({moduleName: "app-root"});
 }

e2e/modal-navigation/app/modal-nested/modal-nested-page.xml

@@ -5,10 +5,10 @@
     navigatedFrom="onNavigatedFrom">
     
     <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="Nested Modal"></Label>
+        <Label class="action-bar-title" text="Modal Nested"></Label>
     </ActionBar>
 
     <StackLayout backgroundColor="darkBlue">
-        <Button text="Close Modal" tap="closeModal" />
+        <Button text="Close Modal Nested" tap="closeModal" />
     </StackLayout>
 </Page>

e2e/modal-navigation/app/modal/modal-page.ts

@@ -39,15 +39,6 @@ export function closeModal(args: EventData) {
     (args.object as View).closeModal();
 }
 
-export function showNestedModalPage(args: EventData) {
-    const view = args.object as View;
-
-    view.showModal("modal-nested/modal-nested-page",
-        "nested-context",
-        () => console.log("modal page nested closed"),
-        false);
-}
-
 export function showNestedModalFrame(args: EventData) {
     const view = args.object as View;
 
@@ -60,6 +51,15 @@ export function showNestedModalFrame(args: EventData) {
         false);
 }
 
+export function showNestedModalPage(args: EventData) {
+    const view = args.object as View;
+
+    view.showModal("modal-nested/modal-nested-page",
+        "nested-context",
+        () => console.log("modal page nested closed"),
+        false);
+}
+
 export function onNavigate(args: EventData) {
     const view = args.object as View;
     const page = view.page as Page;

e2e/modal-navigation/app/modal/modal-page.xml

@@ -10,8 +10,8 @@
 
     <StackLayout backgroundColor="maroon">
         <Button text="Navigate To Second Page" tap="onNavigate" visibility="{{ navigationVisibility }}" />
-        <Button text="Show Nested Modal Page" tap="showNestedModalPage" />
         <Button text="Show Nested Modal Page With Frame" tap="showNestedModalFrame" />
+        <Button text="Show Nested Modal Page" tap="showNestedModalPage" />
         <Button text="Close Modal" tap="closeModal" />
     </StackLayout>
 </Page>

e2e/modal-navigation/app/vendor-platform.android.ts

@@ -0,0 +1,9 @@
+require("application");
+if (!global["__snapshot"]) {
+    // In case snapshot generation is enabled these modules will get into the bundle
+    // but will not be required/evaluated.
+    // The snapshot webpack plugin will add them to the tns-java-classes.js bundle file.
+    // This way, they will be evaluated on app start as early as possible.
+    require("ui/frame");
+    require("ui/frame/activity");
+}

e2e/modal-navigation/app/vendor-platform.ios.ts

@@ -0,0 +1,4 @@
+// There is a bug in angular: https://github.com/angular/angular-cli/pull/8589/files
+// Legendary stuff, its webpack plugin pretty much doesn't work with empty TypeScript files in v1.8.3
+// tslint:disable-next-line:no-unused-expression
+void 0;

e2e/modal-navigation/app/vendor.ts

@@ -0,0 +1,10 @@
+// Snapshot the ~/app.css and the theme
+const application = require("application");
+require("ui/styling/style-scope");
+const appCssContext = require.context("~/", false, /^\.\/app\.(css|scss|less|sass)$/);
+global.registerWebpackModules(appCssContext);
+application.loadAppCss();
+
+require("./vendor-platform");
+
+require("bundle-entry-points");