Merge pull request #5 from NativeScript/svetoslavtsenov/e2e

tests: include smoke e2e tests

Author: SvetoslavTsenov

.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

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: [

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 {

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 {

app/app.android.css

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

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",
                     },
                 })
             ]),

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>
     `,

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">

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: [