Merge pull request #38 from NativeScript/zbranzov/ui-tests

ui tests

Author: Zdravko

.gitignore

@@ -12,4 +12,5 @@ demo/*.d.ts
 demo/platforms/
 demo-angular/app/*.js
 demo-angular/*.d.ts
-demo-angular/platforms/
+demo-angular/platforms/
+!demo/e2e-tests/*

CONTRIBUTING.md

@@ -0,0 +1,38 @@
+# Contributing
+
+Third-party patches are essential for keeping nativescript-facebook plugin great so we welcome all pull requests from everyone.
+
+## Making Changes
+
+* Fork the repository on GitHub
+* Clone the repo:
+
+        git clone git@github.com:<your-username>/nativescript-facebook.git
+
+* Make commits of logical units.
+* Make sure your commit messages are in the proper format.
+* Add tests for your changes and make them pass. How to run tests you can find in [Testing section](#Testing)
+* Push your changes to a topic branch in your fork of the repository.
+* Submit a pull request to the **nativescript-facebook** repository.
+
+## <a name='Testing'> Testing </a>
+
+There are three main points in order to get nativescript-facebook e2e UI tests running locally on iOS 10 Simulator and Android api 23 Emulator. Before that if you want to take a look at the tests and make some changes find them located in `demo/e2e-tests` folder.
+
+Note, that all commands below assume you have installed npm packages in /src and /demo folders (`$ npm i`) and you are using OS X in order to use both iOS Simulator and Android emulator.
+
+* Install Appium. Test execution depends on [nativescript-dev-appium](https://github.com/NativeScript/nativescript-dev-appium) plugin which is added as dev dependency in `demo` app folder and first command satisfies its requirement to have appium installed.
+
+        $ npm install -g appium@1.6.3
+
+* Run Android emulator or/and iOS Simulator. For iOS appium will run simulator if such is not running. It is a requirement for appium that Android emulator has device name 'Android Emulator' and uses Android '6.0' version. For iOS Simulator you will need similator with device name 'iPhone 7 100' which is using iOS '10.0' version. These requirements come from the nativescript-dev-appium plugin and are still hardcoded in it, but notice that plugin itself is in development and the future plans are to become the ultimate testing tool for NativeScript plugins.
+
+* Navigate to /src folder and execute:
+
+        $ npm run ci.uitest.android
+
+    or
+
+        $ npm run ci.uitest.ios
+
+That's it. You should have running UI tests in your Simulator/Emulator.

demo/app/app.css

@@ -2,7 +2,7 @@
 .login-buttons {
     margin-left: 30;
     margin-right: 30;
-    margin-top: 80%;
+    margin-top: 70%;
 }
 
 .label {
@@ -14,7 +14,7 @@
 .home {
     margin-left: 30;
     margin-right: 30;
-    margin-top: 20%;
+    margin-top: 10%;
 }
 
 .home .buttons {

demo/app/home-page.xml

@@ -11,7 +11,7 @@
     </StackLayout>
     <StackLayout class="buttons">
       <Facebook:LoginButton logout="{{ onLogout }}"></Facebook:LoginButton>
-      <Button tap="{{ logout }}" text="Log out (custom)"></Button>
+      <Button automationText="customLogOut" tap="{{ logout }}" text="Log out (custom)"></Button>
     </StackLayout>
   </StackLayout>
 </Page>

demo/app/login-page.xml

@@ -2,7 +2,7 @@
       xmlns:Facebook="nativescript-facebook"
   loaded="pageLoaded" class="page">
   <StackLayout class="login-buttons">
-    <Facebook:LoginButton login="{{ onLogin }}"></Facebook:LoginButton>
+    <Facebook:LoginButton automationText="fbLogin" login="{{ onLogin }}"></Facebook:LoginButton>
     <Button tap="{{ login }}" text="Continue with Facebook (custom)"></Button>
   </StackLayout>
 </Page>

demo/e2e-tests/tests.js

@@ -0,0 +1,69 @@
+"use strict";
+var nsAppium = require("nativescript-dev-appium");
+var isAndroid = process.env.npm_config_runtype.includes("android");
+describe("facebook tests", function () {
+    this.timeout(100000);
+    var driver;
+    const FACEBOOK_BUTTON = "fbLogin";
+    const USERNAME = "nativescript_gctpjih_user@tfbnw.net";
+    const PASSWORD = "P@ssw0rd";
+    const CUSTOM_LOGOUT_BUTTON = "customLogOut";
+    const USER_NAME = "Nativescript User";
+    var timeout = 10000;
+
+    before(function () {
+        driver = nsAppium.createDriver();
+    });
+
+    after(function () {
+        return driver
+        .quit()
+        .finally(function () {
+            console.log("Driver quit successfully");
+        });
+    });
+
+    it("should log in via original button", function () {
+        if(isAndroid){
+            var usernameFieldElement = "//" + nsAppium.getXPathElement("textfield") + "[@content-desc='Email or Phone']";
+            var passwordFieldElement = "//" + nsAppium.getXPathElement("textfield") + "[@NAF='true']";
+            var loginButtonElement = "//" + nsAppium.getXPathElement("button") + "[@text='']";
+            var okButtonElement = "//" + nsAppium.getXPathElement("button") + "[@text='' and @instance='1']";
+            var userNameLabelElement = "//" + nsAppium.getXPathElement("label") + "[@text='Nativescript User']";
+        } else {
+            var usernameFieldElement = "//" + nsAppium.getXPathElement("textfield") + "[@value='Email or Phone']";
+            var passwordFieldElement = "//" + nsAppium.getXPathElement("securetextfield") + "[@value='Facebook Password']";
+            var loginButtonElement = "//" + nsAppium.getXPathElement("button") + "[@name='Log In']";
+            var okButtonElement = "//" + nsAppium.getXPathElement("button") + "[@name='OK']";
+            var userNameLabelElement = "//" + nsAppium.getXPathElement("label") + "[@name='Nativescript User']";
+        }
+
+        var step1 = driver
+            .waitForElementByAccessibilityId(FACEBOOK_BUTTON, timeout)
+                .should.eventually.exist
+            .click()
+            .waitForElementByXPath(usernameFieldElement, timeout)
+            .sendKeys(USERNAME)
+            .waitForElementByXPath(passwordFieldElement, timeout)  //Password field
+            .sendKeys(PASSWORD)
+            .waitForElementByXPath(loginButtonElement, timeout) //Log in button
+            .click();
+        var step2 = isAndroid ? step1.sleep(6000) : step1.sleep(2000);
+        step2
+            .waitForElementByXPath(okButtonElement, timeout) // OK button
+            .click();
+        var step3 = isAndroid ? step2 : step2.sleep(5000);
+        return step3
+            .waitForElementByXPath(userNameLabelElement, timeout) //TODO use wait for element by text USER_ID
+                .text().should.eventually.equal(USER_NAME);
+    });
+
+    it("should log out via custom button", function () {
+        return driver
+            .waitForElementByAccessibilityId(CUSTOM_LOGOUT_BUTTON, timeout)
+                .should.eventually.exist
+            .click()
+            .waitForElementByAccessibilityId(FACEBOOK_BUTTON, timeout)
+                .should.eventually.exist
+    });
+});

demo/package.json

@@ -2,10 +2,10 @@
   "nativescript": {
     "id": "org.nativescript.demo",
     "tns-android": {
-      "version": "3.0.0"
+      "version": "3.0.1"
     },
     "tns-ios": {
-      "version": "3.0.0"
+      "version": "3.0.1"
     }
   },
   "dependencies": {
@@ -19,6 +19,8 @@
     "babel-traverse": "6.12.0",
     "babel-types": "6.11.1",
     "babylon": "6.8.4",
+    "chai": "~3.5.0",
+    "chai-as-promised": "~5.3.0",
     "copy-webpack-plugin": "~4.0.1",
     "extract-text-webpack-plugin": "~2.1.0",
     "filewalker": "0.1.2",
@@ -28,19 +30,22 @@
     "karma-nativescript-launcher": "^0.4.0",
     "lazy": "1.0.11",
     "nativescript-css-loader": "~0.26.0",
+    "nativescript-dev-appium": "~0",
     "nativescript-dev-typescript": "^0.4.0",
     "nativescript-dev-webpack": "^0.4.0",
     "raw-loader": "~0.5.1",
     "resolve-url-loader": "~2.0.2",
     "typescript": "~2.2.2",
+    "wd": "~1.1.1",
     "webpack": "~2.3.3",
     "webpack-sources": "~0.2.3"
   },
   "scripts": {
     "ns-bundle": "ns-bundle",
+    "appium": "nativescript-dev-appium",
     "start-android-bundle": "npm run ns-bundle --android --start-app",
     "start-ios-bundle": "npm run ns-bundle --ios --start-app",
     "build-android-bundle": "npm run ns-bundle --android --build-app",
     "build-ios-bundle": "npm run ns-bundle --ios --build-app"
   }
-}
+}

src/package.json

@@ -17,6 +17,8 @@
         "ci.test.android": "cd ../demo && tns platform remove android && tns test android",
         "ci.test.ios.angular": "cd ../demo-angular && tns platform remove ios && tns test ios",
         "ci.test.android.angular": "cd ../demo-angular && tns platform remove android",
+        "ci.uitest.ios": "cd ../demo && npm run appium --runtype=ios-simulator10",
+        "ci.uitest.android": "cd ../demo && npm run appium --runtype=android23",
         "prepublish": "npm run build"
     },
     "repository": {