Merge pull request #5 from NativeScript/svetoslavtsenov/e2e

tests: include smoke e2e tests

Author: SvetoslavTsenov

Diff for: .gitignore

@@ -4,8 +4,14 @@ hooks
 .vscode
 
 app/**/*.js
+app/**/*.map
+
+e2e/**/*.js
+e2e/**/*.map
 
 # Webpack files
 tsconfig.esm.json
 webpack.config.js
-
+instruments*
+e2e/reports
+test-results.xml

Diff for: app/animate-child.component.ts

@@ -10,8 +10,8 @@ import { Component } from "@angular/core";
 
 @Component({
     template: `
-        <StackLayout class="parent" width="500" height="500" [@parent]="parentVal">
-          <StackLayout class="child" [@child]="childVal"></StackLayout>>
+        <StackLayout class="parent" width="500" height="500" [@parent]="parentVal" automationText="parent">
+          <StackLayout class="child" [@child]="childVal" automationText="child"></StackLayout>>
         </StackLayout>
     `,
     animations: [

Diff for: app/animation-builder.component.ts

@@ -3,7 +3,7 @@ import { Component, ViewChild } from '@angular/core';
 
 @Component({
     template: `
-        <Button #button (tap)="makeAnimation()" class="btn btn-primary" text="Tap to disappear!"></Button>
+        <Button #button (tap)="makeAnimation()" class="btn btn-primary" automationText="tapToDisappear" text="Tap to disappear!"></Button>
     `
 })
 export class AnimationBuilderComponent {

Diff for: app/animations-list.component.ts

@@ -1,19 +1,21 @@
 import { Component } from '@angular/core';
 
 class Link {
-    constructor(public title: string, public link: string) {}
+    constructor(public title: string, public link: string, public id?: string) {
+        this.id = this.id || this.link.replace("/", "");
+    }
 }
 
 @Component({
     template: `
-        <ListView [items]="links">
-            <ng-template let-item="item">
-                <Button
-                    [text]="item.title"
-                    [nsRouterLink]="item.link"
-                ></Button>
-            </ng-template>
-        </ListView>
+        <WrapLayout [items]="links">
+            <Button
+                *ngFor="let item of links"
+                [text]="item.title"
+                [nsRouterLink]="item.link"
+                [automationText]="item.link.replace('/', '')">
+            </Button>
+        </WrapLayout>
     `
 })
 export class AnimationsListComponent {

Diff for: app/app.android.css

@@ -0,0 +1,9 @@
+Button {
+    font-size: 8px;
+    padding: 0px;
+    margin: 0px;
+}
+
+Label{
+    font-size: 8px;
+}

Diff for: app/app.css

@@ -9,19 +9,20 @@ import { fadeAnimation } from "./animations";
            <Button
                 [@coolAnimation]="isVisible"
                 text="Nice button."
+                automationText="animatedBtn"
             ></Button>
 
             <Button
                 (tap)="toggle()"
                 text="Toggle"
+                automationText="toggleAnimation"
                 backgroundColor="green"
                 color="white"
             ></Button>
         </StackLayout>
     `,
     animations: [
         trigger("coolAnimation", [
-
             transition("invisible => visible", [
                 useAnimation(fadeAnimation, {
                     params: {
@@ -37,7 +38,7 @@ import { fadeAnimation } from "./animations";
                     params: {
                         from: 1,
                         to: 0,
-                        time: "0.4s",
+                        time: "1.0s",
                     },
                 })
             ]),

Diff for: app/external-animation.component.ts

@@ -9,13 +9,15 @@ import { trigger, transition, style, animate } from "@angular/animations";
                 [@someCoolAnimation]="bindingVar"
                 (tap)="hide()"
                 backgroundColor="hotpink"
+                automationText="animatedBtn"
                 height="200"
             ></Button>
 
             <Button
                 text="Toggle!"
                 (tap)="toggle()"
                 backgroundColor="red"
+                automationText="toggleAnimation"
             ></Button>
         </StackLayout>
     `,

Diff for: app/fade-in-out.component.ts

@@ -1,9 +1,9 @@
 <FlexboxLayout flexDirection="column">
     <FlexboxLayout>
-        <Button (tap)="heroes.addInactive()" text="Add inactive" ></Button>
-        <Button (tap)="heroes.addActive()" text="Add active"></Button>
-        <Button (tap)="heroes.remove()" text="Remove"></Button>
-        <Button (tap)="heroes.reset()" text="Reset"></Button>
+        <Button (tap)="heroes.addInactive()" text="Add inactive" automationText="addInactive" ></Button>
+        <Button (tap)="heroes.addActive()" text="Add active" automationText="addActive" ></Button>
+        <Button (tap)="heroes.remove()" text="Remove" automationText="remove" ></Button>
+        <Button (tap)="heroes.reset()" text="Reset" automationText="reset" ></Button>
     </FlexboxLayout>
 
     <FlexboxLayout flexDirection="column">

Diff for: app/hero/hero-team-builder.component.html

@@ -9,24 +9,26 @@ import {
 
 @Component({
     template: `
-        <StackLayout>
+        <StackLayout automationText="itemsContainer">
             <Button
                 text="Add hero"
                 (tap)="addNew()"
                 [isEnabled]="extraHeroes.length > 0"
                 [ngClass]="extraHeroes.length > 0 ? 'enabled' : 'disabled'"
+                automationText="add"
             ></Button>
 
 
             <Button
                 *ngFor="let hero of heroes"
-                [text]="hero"
+                [text]="hero" 
                 [@flyInOut]="'in'"
                 (tap)="flyOut(hero)"
                 backgroundColor="hotpink"
+                [automationText]="hero"
                 height="75"
             ></Button>
-
+ 
         </StackLayout>
     `,
     styles: [

Diff for: app/options-default.component.ts

@@ -7,13 +7,15 @@ import { Component } from "@angular/core";
            <Button
                 *ngIf="animationData.value === 'active'"
                 [@someCoolAnimation]="animationData"
+                automationText="animatedBtn"
                 text="hello there"
             ></Button>
 
             <Button
                 (tap)="fadeOut()"
                 text="Remove above button"
                 backgroundColor="green"
+                automationText="toggleAnimation"
                 color="white"
             ></Button>
         </StackLayout>

Diff for: app/options.component.ts

@@ -27,7 +27,7 @@ import { Component } from "@angular/core";
         <StackLayout>		
             <Button (tap)="add()" text="ADD" backgroundColor="hotpink"></Button>		
  		
-            <StackLayout [@listAnimation]="items.length"> 		
+            <StackLayout [@listAnimation]="items.length" automationText="container" > 		
                 <Button *ngFor="let item of items" [text]="item" class="ani-button"></Button>		
             </StackLayout>		
         </StackLayout>		

Diff for: app/query-stagger.component.ts

@@ -29,8 +29,9 @@ import { Component } from "@angular/core";
         ]),
     ],
     template: `
-        <FlexboxLayout flexDirection="column">
-            <Button text="add" (tap)="items.push('random')"></Button>
+        <FlexboxLayout flexDirection="column"
+            automationText="itemsContainer">
+            <Button text="add" automationText="add" (tap)="items.push('random')"></Button>
 
             <FlexboxLayout
                 flexDirection="column"

Diff for: app/selector-all.component.ts

@@ -0,0 +1,111 @@
+{
+    "android19": {
+        "platformName": "Android",
+        "platformVersion": "4.4",
+        "deviceName": "Emulator-Api19-Default",
+        "avd": "Emulator-Api19-Default",
+        "lt": 60000,
+        "newCommandTimeout": 720,
+        "noReset": true,
+        "fullReset": false,
+        "app": ""
+    },
+    "android21": {
+        "platformName": "Android",
+        "platformVersion": "5.0",
+        "deviceName": "Emulator-Api21-Default",
+        "avd": "Emulator-Api21-Default",
+        "lt": 60000,
+        "newCommandTimeout": 720,
+        "noReset": true,
+        "fullReset": false,
+        "app": ""
+    },
+    "android23": {
+        "platformName": "Android",
+        "platformVersion": "6.0",
+        "deviceName": "Emulator-Api23-Default",
+        "avd": "Emulator-Api23-Default",
+        "lt": 60000,
+        "newCommandTimeout": 720,
+        "noReset": true,
+        "fullReset": false,
+        "app": ""
+    },
+    "android24": {
+        "platformName": "Android",
+        "platformVersion": "7.0",
+        "deviceName": "Emulator-Api24-Default",
+        "avd": "Emulator-Api24-Default",
+        "lt": 60000,
+        "newCommandTimeout": 720,
+        "noReset": true,
+        "fullReset": false,
+        "app": ""
+    },
+    "android25": {
+        "platformName": "Android",
+        "platformVersion": "7.1",
+        "deviceName": "Emulator-Api25-Google",
+        "avd": "Emulator-Api25-Google",
+        "lt": 60000,
+        "newCommandTimeout": 720,
+        "noReset": true,
+        "fullReset": false,
+        "app": ""
+    },
+    "android26": {
+        "platformName": "Android",
+        "platformVersion": "8.0",
+        "deviceName": "Emulator-Api26-Google",
+        "avd": "Emulator-Api26-Google",
+        "lt": 60000,
+        "newCommandTimeout": 720,
+        "noReset": true,
+        "fullReset": false,
+        "app": ""
+    },
+    "android27": {
+        "platformName": "Android",
+        "platformVersion": "27",
+        "deviceName": "Emulator-Api27-Google",
+        "avd": "Emulator-Api27-Google",
+        "lt": 60000,
+        "newCommandTimeout": 720,
+        "noReset": true,
+        "fullReset": false,
+        "app": ""
+    },
+    "sim.iPhone7.100": {
+        "platformName": "iOS",
+        "platformVersion": "10.0",
+        "deviceName": "iPhone 7",
+        "noReset": true,
+        "fullReset": false,
+        "app": ""
+    },
+    "sim.iPhone7.110": {
+        "platformName": "iOS",
+        "platformVersion": "11.0",
+        "deviceName": "iPhone 7 110",
+        "noReset": true,
+        "fullReset": false,
+        "app": ""
+    },
+    "sim.iPhone8": {
+        "platformName": "iOS",
+        "platformVersion": "11.3",
+        "deviceName": "iPhone 8",
+        "noReset": true,
+        "fullReset": false,
+        "app": ""
+    },
+    "sim.iPhoneX": {
+        "platformName": "iOS",
+        "platformVersion": "11.3",
+        "deviceName": "iPhone X",
+        "noReset": true,
+        "fullReset": false,
+        "app": ""
+    }
+}

Diff for: e2e/config/appium.capabilities.json

@@ -0,0 +1,5 @@
+--timeout 999999
+--recursive e2e
+--reporter mocha-multi 
+--reporter-options spec=-,mocha-junit-reporter=test-results.xml
+--exit

Diff for: e2e/config/mocha.opts

@@ -0,0 +1,18 @@
+import { UIElement } from "nativescript-dev-appium";
+
+export const sort = async (array: Array<UIElement>) => {
+    var done = false;
+    while (!done) {
+        done = true;
+        for (var i = 1; i < array.length; i++) {
+            if ((await (await array[i - 1]).location()).y > (await (await array[i]).location()).y) {
+                done = false;
+                var tmp = array[i - 1];
+                array[i - 1] = array[i];
+                array[i] = tmp;
+            }
+        }
+    }
+
+    return array;
+}

Diff for: e2e/helper/utils.ts

@@ -0,0 +1,44 @@
+import { AppiumDriver, UIElement } from "nativescript-dev-appium";
+import { assert } from "chai";
+import { BasePage } from "./base-page";
+
+export class AnimateChildPage extends BasePage {
+    private _parent: UIElement;
+    private _child: UIElement;
+    constructor(_driver: AppiumDriver) {
+        super(_driver)
+    }
+
+    async enterExample() {
+        const exampleBtn = await this._driver.findElementByAccessibilityId("animate-child");
+        await exampleBtn.click();
+    }
+
+    async waitParentToAppear() {
+        this._parent = await this.awaitItemToAppear("parent");
+        const startTime = Date.now();
+        while ((await this._parent.location()).x !== 0 && Date.now() - startTime < 3000) { }
+    }
+
+    async waitChildToAppear() {
+        this._child = await this.awaitItemToAppear("child");
+        const startTime = Date.now();
+        while ((await this._child.location()).y !== (await this._parent.location()).y && Date.now() - startTime < 3000) { }
+    }
+
+    async assertContainersPosition() {
+        assert.isTrue((await this._parent.location()).x === 0);
+        assert.isTrue((await this._parent.location()).y === (await this._child.location()).y);
+    }
+
+    private async awaitItemToAppear(item: string, wait: number = 3000): Promise<UIElement> {
+        const startTime = Date.now();
+        const findBtn = async () => { return await this._driver.findElementByXPathIfExists(this._elementHelper.findByTextLocator("*", item, true)); };
+        let btn = await findBtn();
+        while (!btn || !(await btn.isDisplayed()) && Date.now() - startTime <= wait) {
+            btn = await findBtn();
+        }
+
+        return btn;
+    }
+}