Merge pull request #9 from Roma-JS/feature/detox

Implement detox as e2e test runner on iOS

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 .expo/
 npm-debug.*
+bin

e2e/drawer.spec.js

@@ -0,0 +1,23 @@
+const {reloadApp} = require('detox-expo-helpers');
+
+describe('Drawer', () => {
+    before(async () => {
+        await reloadApp();
+    });
+
+    it('should show drawer component after profile tap', async () => {
+        await element(by.id('login-spid')).tap();
+        await waitFor(element(by.id('home-screen')))
+            .toBeVisible()
+            .withTimeout(2000);
+        await element(by.id('header-profile-button'))
+            .atIndex(0)
+            .tap();
+
+        await waitFor(element(by.id('drawer')))
+            .toBeVisible()
+            .withTimeout(2000);
+
+        await expect(element(by.id('drawer'))).toBeVisible();
+    });
+});

e2e/init.js

@@ -0,0 +1,11 @@
+require('babel-polyfill');
+const detox = require('detox');
+const config = require('../package.json').detox;
+
+before(async () => {
+    await detox.init(config);
+});
+
+after(async () => {
+    await detox.cleanup();
+});

e2e/login.spec.js

@@ -0,0 +1,25 @@
+const {reloadApp} = require('detox-expo-helpers');
+
+describe('Login screen', () => {
+    before(async () => {
+        await reloadApp();
+    });
+
+    it('should be shown as first screen', async () => {
+        await expect(element(by.id('login-screen'))).toBeVisible();
+    });
+
+    it('should have a login-spid button', async () => {
+        await expect(element(by.id('login-spid'))).toBeVisible();
+    });
+
+    it('should be replaced by home-screen when login-spid is tapped', async () => {
+        await element(by.id('login-spid')).tap();
+        await waitFor(element(by.id('home-screen')))
+            .toBeVisible()
+            .withTimeout(2000);
+
+        await expect(element(by.id('home-screen')).atIndex(0)).toBeVisible();
+        await expect(element(by.id('drawer'))).toBeNotVisible();
+    });
+});

e2e/mocha.opts

@@ -0,0 +1 @@
+--recursive --timeout 1200000 --bail

package.json

@@ -6,6 +6,8 @@
     "@improntaadvance/eslint-config": "^0.8.2",
     "babel-eslint": "^7.2.3",
     "babel-preset-expo": "^4.0.0",
+    "detox": "^5.9.2",
+    "detox-expo-helpers": "^0.2.0",
     "eslint": ">=4.3.0",
     "eslint-config-prettier": "^2.3.0",
     "eslint-plugin-flowtype": "^2.35.0",
@@ -14,6 +16,7 @@
     "eslint-plugin-prettier": "^2.2.0",
     "eslint-plugin-react": "^7.1.0",
     "jest-expo": "^21.0.2",
+    "mocha": "^4.0.1",
     "prettier": "^1.5.3",
     "react-native-scripts": "1.5.0",
     "react-test-renderer": "16.0.0-alpha.12"
@@ -24,7 +27,9 @@
     "eject": "react-native-scripts eject",
     "android": "react-native-scripts android",
     "ios": "react-native-scripts ios",
-    "test": "node node_modules/jest/bin/jest.js --watch"
+    "test": "node node_modules/jest/bin/jest.js --watch",
+    "e2e": "detox test --configuration ios.sim -d",
+    "postinstall": "mkdir -p bin/expo.app && curl https://dpq5q02fu5f55.cloudfront.net/Exponent-2.0.1.tar.gz | tar -C bin/expo.app/ -xz"
   },
   "jest": {
     "preset": "jest-expo"
@@ -42,5 +47,14 @@
     "redux-define": "^1.1.1",
     "redux-promise-middleware": "^4.4.1",
     "redux-thunk": "^2.2.0"
+  },
+  "detox": {
+    "configurations": {
+      "ios.sim": {
+        "binaryPath": "bin/expo.app",
+        "type": "ios.simulator",
+        "name": "iPhone 5s"
+      }
+    }
   }
 }

src/component/HeaderProfileButton.js

@@ -8,7 +8,9 @@ import * as Constants from '../common/constants';
 class HeaderProfileButton extends PureComponent {
     render() {
         return (
-            <TouchableOpacity onPress={this.props.onPress}>
+            <TouchableOpacity
+                onPress={this.props.onPress}
+                testID="header-profile-button">
                 <View style={styles.container}>
                     <View style={styles.textContainer}>
                         <Text style={styles.credit}>Credito</Text>

src/container/Drawer.js

@@ -7,7 +7,7 @@ import * as Constants from '../common/constants';
 class Drawer extends Component {
     render() {
         return (
-            <View style={{flex: 1}}>
+            <View style={{flex: 1}} testID="drawer">
                 <View style={styles.headerContainer}>
                     <View style={styles.heading}>
                         <Text style={styles.userText}>

src/screen/Home.js

@@ -12,7 +12,7 @@ class Home extends Component {
     };
     render() {
         return (
-            <View style={styles.container}>
+            <View style={styles.container} testID="home-screen">
                 <View style={{alignItems: 'center'}}>
                     <Text style={styles.welcomeText}>
                         Benvenuto {this.props.user.name}, ti restano

src/screen/Login.js

@@ -7,7 +7,7 @@ import * as Constants from '../common/constants';
 export default class Login extends Component {
     render() {
         return (
-            <View style={styles.container}>
+            <View style={styles.container} testID="login-screen">
                 <View style={styles.header}>
                     <Text style={styles.loginText}>18app</Text>
                 </View>
@@ -49,7 +49,9 @@ export default class Login extends Component {
                         </TouchableOpacity>
                     </View>
                 </Image>
-                <TouchableOpacity onPress={this.props.onLogin}>
+                <TouchableOpacity
+                    onPress={this.props.onLogin}
+                    testID="login-spid">
                     <View style={styles.login}>
                         <Text style={styles.loginText}>ENTRA CON SPID</Text>
                     </View>