refactor: template-hello-world-ng test to use page object pattern (#1)

* chore: bump angular to 5.2

* refactor(tests): expose HomePage and DetailsPage

* chore: update template-hello-world-ng to latest

* refactor: template-hello-world-ng test to use page object pattern

* chore: update template-hello-world-ng capabilities

* chore: update template-hello-world-ng iPhone X image

* refactor(e2e): update template-hello-world-ng test

* refactor(e2e): update template-hello-world-ng test

Author: Vasil Chimev

template-hello-world-ng/.gitignore

@@ -1,11 +1,13 @@
+.DS_Store
+
+hooks
 node_modules
 platforms
-*-results.xml
-e2e/reports
-node_modules
-*.tgz
-**/**/*.js
+
 *.js
-**/**/*.map
-report.html
-instruments*
+*.map
+
+e2e/reports
+
+package-lock.json
+

template-hello-world-ng/.vscode/launch.json

@@ -4,39 +4,39 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
-
         {
             "type": "node",
             "request": "launch",
             "name": "iOS110",
             "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
             "args": [
+                "${workspaceRoot}/e2e",
                 "-u",
                 "tdd",
                 "--timeout",
                 "999999",
                 "--colors",
                 "--runType",
-                "sim.iPhoneX",
-                "${workspaceRoot}/e2e",
+                "sim.iPhoneX.iOS110",
                 "--reuseDevice"
             ],
             "internalConsoleOptions": "openOnSessionStart"
         },
         {
             "type": "node",
             "request": "launch",
-            "name": "android24",
+            "name": "android23",
             "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
             "args": [
+                "${workspaceRoot}/e2e",
                 "-u",
                 "tdd",
                 "--timeout",
                 "999999",
-                "--colors",              
+                "--colors",
                 "--runType",
-                "android24",
-                "${workspaceRoot}/e2e"
+                "android23",
+                "--reuseDevice"
             ],
             "internalConsoleOptions": "openOnSessionStart"
         }

template-hello-world-ng/app/app.css

@@ -9,4 +9,5 @@ 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';
+
+@import '~nativescript-theme-core/css/core.light.css';

template-hello-world-ng/app/app.module.ngfactory.d.ts

@@ -0,0 +1,4 @@
+/**
+ * A dynamically generated module when compiled with AoT.
+ */
+export const AppModuleNgFactory: any;

template-hello-world-ng/app/item/item.js

@@ -1,6 +1,7 @@
 // this import should be first in order to load some required settings (like globals and reflect-metadata)
 import { platformNativeScript } from "nativescript-angular/platform-static";
 
+// "./app.module.ngfactory" is a dynamically generated module when compiled with AoT.
 import { AppModuleNgFactory } from "./app.module.ngfactory";
 
 platformNativeScript().bootstrapModuleFactory(AppModuleNgFactory);

template-hello-world-ng/app/main.aot.ts

@@ -0,0 +1,3 @@
+// 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
+void 0;

template-hello-world-ng/app/vendor-platform.ios.ts

@@ -1,3 +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("reflect-metadata");

template-hello-world-ng/app/vendor.ts

@@ -7,8 +7,8 @@
         "lt": 60000,
         "appActivity": "com.tns.NativeScriptActivity",
         "newCommandTimeout": 720,
-        "noReset": false,
-        "fullReset": true,
+        "noReset": true,
+        "fullReset": false,
         "app": ""
     },
     "android21": {
@@ -19,8 +19,8 @@
         "lt": 60000,
         "appActivity": "com.tns.NativeScriptActivity",
         "newCommandTimeout": 720,
-        "noReset": false,
-        "fullReset": true,
+        "noReset": true,
+        "fullReset": false,
         "app": ""
     },
     "android23": {
@@ -31,8 +31,8 @@
         "lt": 60000,
         "appActivity": "com.tns.NativeScriptActivity",
         "newCommandTimeout": 720,
-        "noReset": false,
-        "fullReset": true,
+        "noReset": true,
+        "fullReset": false,
         "app": ""
     },
     "android24": {
@@ -62,17 +62,31 @@
     "android26": {
         "platformName": "Android",
         "platformVersion": "8.0",
-        "deviceName": "Emulator_Api26_Google",
-        "avd": "Emulator_Api26_Google",
+        "deviceName": "Emulator-Api26-Google",
+        "avd": "Emulator-Api26-Google",
+        "lt": 60000,
+        "appActivity": "com.tns.NativeScriptActivity",
+        "newCommandTimeout": 720,
+        "noReset": true,
+        "fullReset": false,
+        "app": ""
+    },
+    "android27": {
+        "platformName": "Android",
+        "platformVersion": "8.1",
+        "deviceName": "Emulator-Api27-Google",
+        "avd": "Emulator-Api27-Google",
         "lt": 60000,
         "appActivity": "com.tns.NativeScriptActivity",
         "newCommandTimeout": 720,
+        "noReset": true,
+        "fullReset": false,
         "app": ""
     },
-    "sim.iPhone7.iOS100": {
+    "sim.iPhone7.iOS110": {
         "platformName": "iOS",
-        "platformVersion": "10.0",
-        "deviceName": "iPhone 7 100",
+        "platformVersion": "11.2",
+        "deviceName": "iPhone 7 110",
         "noReset": true,
         "fullReset": false,
         "app": ""
@@ -85,12 +99,20 @@
         "fullReset": false,
         "app": ""
     },
-    "sim.iPhoneX": {
+    "sim.iPhoneX.iOS110": {
         "platformName": "iOS",
         "platformVersion": "11.0",
         "deviceName": "iPhone X",
         "noReset": true,
         "fullReset": false,
         "app": ""
+    },
+    "sim.iPhoneX.iOS112": {
+        "platformName": "iOS",
+        "platformVersion": "11.2",
+        "deviceName": "iPhone X",
+        "noReset": true,
+        "fullReset": false,
+        "app": ""
     }
-}
+}

template-hello-world-ng/e2e/config/appium.capabilities.json

@@ -0,0 +1,28 @@
+import { AppiumDriver } from "nativescript-dev-appium";
+import { ImageOptions } from "nativescript-dev-appium/lib/image-options";
+import { Players } from "./players";
+import { assert } from "chai";
+
+const title = "Details";
+
+export class Details {
+
+    constructor(private _driver: AppiumDriver) { }
+
+    loaded = async () => {
+        const lblTitle = await this._driver.findElementByText(title);
+        assert.isTrue(await lblTitle.isDisplayed());
+        console.log(title + " loaded!");
+    }
+
+    assertPlayerIsDisplayed = async (playerName: Players) => {
+        const player = await this._driver.findElementByText(playerName);
+        assert.isTrue(await player.isDisplayed(), `${playerName} is NOT displayed!`);
+    }
+
+    assertPlayerScreen = async (playerName: Players) => {
+        const imageName = playerName.toLowerCase() + "PlayerDetails";
+        const areDetailsCorrect = await this._driver.compareScreen(imageName, 3, 10, ImageOptions.pixel);
+        assert.isTrue(areDetailsCorrect, `Image does NOT match! Please, refer to ${imageName} image.`);
+    }
+}

template-hello-world-ng/e2e/details.ts

@@ -0,0 +1,32 @@
+import { AppiumDriver, Direction, SearchOptions } from "nativescript-dev-appium";
+import { Players } from "./players";
+import { assert } from "chai";
+
+const title = "My App";
+
+export class Home {
+
+    constructor(private _driver: AppiumDriver) { }
+
+    get players() {
+        return this._driver.findElementByClassName(this._driver.locators.listView);
+    }
+
+    loaded = async () => {
+        const lblTitle = await this._driver.findElementByText(title);
+        assert.isTrue(await lblTitle.isDisplayed());
+        console.log(title + " loaded!");
+    }
+
+    findPlayer = async (playerName: Players, scrollDirection: Direction = Direction.down, searchOptions: SearchOptions = SearchOptions.contains) => {
+        const player = await (await this.players).scrollTo(
+            scrollDirection,
+            () => this._driver.findElementByText(playerName, searchOptions));
+        return player;
+    }
+
+    tapOnPlayer = async (playerName: Players) => {
+        const player = await this.findPlayer(playerName);
+        await player.tap();
+    }
+}

template-hello-world-ng/e2e/home.ts

@@ -0,0 +1,5 @@
+export enum Players {
+    umtiti = "Umtiti",
+    mathieu = "Mathieu",
+    masip = "Masip"
+}

template-hello-world-ng/e2e/players.ts

@@ -0,0 +1,38 @@
+import { AppiumDriver, createDriver, SearchOptions, Direction } from "nativescript-dev-appium";
+import { assert } from "chai";
+import { Home } from "./home";
+import { Details } from "./details";
+import { Players } from "./players";
+
+describe("template-hello-world-ng scenario", () => {
+    let driver: AppiumDriver,
+        details: Details,
+        home: Home;
+
+    before(async () => {
+        driver = await createDriver();
+        details = new Details(driver);
+        home = new Home(driver);
+    });
+
+    afterEach(async function () {
+        if (this.currentTest.state === "failed") {
+            await driver.logPageSource(this.currentTest.title);
+            await driver.logScreenshot(this.currentTest.title);
+        }
+        await driver.navBack();
+    });
+
+    after(async () => {
+        await driver.quit();
+    });
+
+    it("should swipe to the last player and verify his details", async () => {
+        await home.loaded();
+        await home.tapOnPlayer(Players.masip);
+
+        await details.loaded();
+        await details.assertPlayerIsDisplayed(Players.masip);
+        await details.assertPlayerScreen(Players.masip);
+    });
+});