Merge pull request #24 from saucelabs/feat/webview

Feat/webview

android/app/src/main/java/com/swaglabsmobileapp/MainApplication.java

@@ -14,6 +14,8 @@
 import java.util.Arrays;
 import java.util.List;
 
+import android.webkit.WebView;
+
 public class MainApplication extends Application implements ReactApplication {
 
   private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@@ -47,5 +49,6 @@ public ReactNativeHost getReactNativeHost() {
   public void onCreate() {
     super.onCreate();
     SoLoader.init(this, /* native exopackage */ false);
+    WebView.setWebContentsDebuggingEnabled(true);
   }
 }

docs/AUTOMATION.md

@@ -192,3 +192,13 @@ Check [this](https://gist.github.com/wswebcreation/6ac27598718eb001cd208dd691db2
 
 ### Tests are extremely slow / fail very often
 It could be that the debugger is still on. Run tests without the debugger
+
+### Appium ChromeDriver error
+This app also uses a Webview. To be able to automate the Webview on Android you need to have the right version of ChromeDriver installed together with Appium.
+If you don't have the proper version of ChromeDriver on your machine (Appium will by default install the latest version on your machine during the installation of Appium) you might get an error like this.
+
+```shell
+[Pixel_8.1 Android 8.1 #0-0] unknown error: An unknown server-side error occurred while processing the command. Original error: No Chromedriver found that can automate Chrome '61.0.3163'. See https://github.com/appium/appium/blob/master/docs/en/writing-running-appium/web/chromedriver.md for more details.
+```
+
+Please following the instructions [here](https://github.com/appium/appium/blob/master/docs/en/writing-running-appium/web/chromedriver.md) to know how to solve this issue.

package.json

@@ -21,7 +21,6 @@
     "i18n-js": "^3.1.0",
     "react": "16.6.0-alpha.8af6728",
     "react-native": "0.57.4",
-    "react-native-drawer": "2.5.1",
     "react-native-elements": "1.0.0-beta7",
     "react-native-languages": "^3.0.1",
     "react-native-modal-selector": "1.0.0",

src/js/Router.js

@@ -1,26 +1,59 @@
 import React, { Component } from 'react';
-import { createStackNavigator } from 'react-navigation';
+import { createDrawerNavigator, createStackNavigator } from 'react-navigation';
+import AppHeader from './components/AppHeader';
+import { WINDOW_WIDTH } from './config/Constants';
+
+// The screens
 import Login from './screens/Login';
 import InventoryList from './screens/InventoryList';
 import InventoryItem from './screens/InventoryItem';
 import CartContents from './screens/CartContents';
 import CheckoutScreenOne from './screens/CheckoutScreenOne';
 import CheckoutScreenTwo from './screens/CheckoutScreenTwo';
 import CheckoutComplete from './screens/CheckoutComplete';
+import WebviewSelection from './screens/WebviewSelection';
+import WebviewScreen from './screens/Webview';
+import DrawerLinks from './components/DrawerLinks';
+
+export const SCREENS = {
+  LOGIN: 'Login',
+  INVENTORY_LIST: 'InventoryList',
+  INVENTORY_ITEM: 'InventoryItem',
+  CART_CONTENTS: 'CartContents',
+  CHECKOUT_SCREEN_ONE: 'CheckoutScreenOne',
+  CHECKOUT_SCREEN_TWO: 'CheckoutScreenTwo',
+  CHECKOUT_COMPLETE: 'CheckoutComplete',
+  WEBVIEW_SELECTION: 'WebviewSelection',
+  WEBVIEW_SCREEN: 'WebviewScreen',
+};
 
-const Router = createStackNavigator({
-    Login: { screen: Login },
-    InventoryList: { screen: InventoryList },
-    InventoryItem: { screen: InventoryItem },
-    CartContents: { screen: CartContents },
-    CheckoutScreenOne: { screen: CheckoutScreenOne },
-    CheckoutScreenTwo: { screen: CheckoutScreenTwo },
-    CheckoutComplete: { screen: CheckoutComplete },
+const StackNavigator = createStackNavigator({
+    [SCREENS.LOGIN]: { screen: Login },
+    [SCREENS.INVENTORY_LIST]: { screen: InventoryList },
+    [SCREENS.INVENTORY_ITEM]: { screen: InventoryItem },
+    [SCREENS.CART_CONTENTS]: { screen: CartContents },
+    [SCREENS.CHECKOUT_SCREEN_ONE]: { screen: CheckoutScreenOne },
+    [SCREENS.CHECKOUT_SCREEN_TWO]: { screen: CheckoutScreenTwo },
+    [SCREENS.CHECKOUT_COMPLETE]: { screen: CheckoutComplete },
+    [SCREENS.WEBVIEW_SELECTION]: { screen: WebviewSelection },
+    [SCREENS.WEBVIEW_SCREEN]: { screen: WebviewScreen },
   },
   {
-    headerMode: 'none',
+    initialRouteName: SCREENS.LOGIN,
+    navigationOptions: ({ navigate, navigation }) => ({
+      header: (<AppHeader navigation={ navigation }/>),
+      gesturesEnabled: false,
+    }),
   });
 
+const Router = createDrawerNavigator({
+  StackNavigator: { screen: StackNavigator },
+}, {
+  contentComponent: DrawerLinks,
+  drawerWidth: WINDOW_WIDTH,
+  gesturesEnabled: false,
+});
+
 export default class NavigationContainer extends Component {
   render() {
     return (

src/js/components/AppHeader.js

@@ -1,73 +1,31 @@
 import React, { Component } from 'react';
-import { View, StyleSheet, Text } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { Header } from 'react-native-elements';
 import CartButton from './HeaderCartButton.js';
 import MenuButton from './MenuButton.js';
-import Drawer from 'react-native-drawer';
 import HeaderSwagLogo from './HeaderSwagLogo';
 import { IS_IOS, MUSEO_SANS_BOLD } from '../config/Constants';
-import DrawerLinks from './DrawerLinks';
 import { colors } from '../utils/colors';
 import { STATUS_BAR_HEIGHT } from './StatusBar';
 
 export default class AppHeader extends Component {
   constructor(props) {
     super(props);
-
-    this.state = {
-      menuOpen: false,
-    };
-
-    this.openMenu = this.openMenu.bind(this);
-    this.closeMenu = this.closeMenu.bind(this);
-  }
-
-  openMenu() {
-    this.setState({
-      menuOpen: true,
-    });
-  }
-
-  closeMenu() {
-    this.setState({
-      menuOpen: false,
-    });
   }
 
   render() {
-    const headerText = this.props.header ? <Text style={ styles.header_title }>{ this.props.header }</Text> : null;
-    const component = this.props.component || null;
-
     return (
-      <Drawer
-        open={ this.state.menuOpen }
-        type="overlay"
-        tapToClose={ true }
-        closedDrawerOffset={ 0 }
-        content={ <DrawerLinks navigation={ this.props.navigation } closeMenu={ this.closeMenu }/> }
-        styles={ styles.container }
-        onClose={ this.closeMenu }
-      >
-        <Header
-          containerStyle={ styles.header_container }
-          leftComponent={ <MenuButton openMenuHandler={ this.openMenu }/> }
-          centerComponent={ <HeaderSwagLogo/> }
-          rightComponent={ <CartButton navigation={ this.props.navigation }/> }
-        />
-        <View style={ styles.secondary_header }>
-          { headerText }
-          { component }
-        </View>
-        { this.props.children }
-      </Drawer>
+      <Header
+        containerStyle={ styles.header_container }
+        leftComponent={ <MenuButton navigation={ this.props.navigation }/> }
+        centerComponent={ <HeaderSwagLogo/> }
+        rightComponent={ <CartButton navigation={ this.props.navigation }/> }
+      />
     );
   }
 }
 
 const styles = StyleSheet.create({
-  container: {
-    backgroundColor: colors.white,
-  },
   header_container: {
     backgroundColor: colors.white,
     // Add the height if the statusbar for iOS to the height of the header container
@@ -85,6 +43,11 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
   },
+  bottom_border: {
+    height: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.gray,
+  },
   header_title: {
     fontSize: 22,
     fontFamily: MUSEO_SANS_BOLD,

src/js/components/DrawerLinks.js

@@ -7,47 +7,50 @@ import { testProperties } from '../config/TestProperties';
 import { colors } from '../utils/colors';
 import { STATUS_BAR_HEIGHT } from './StatusBar';
 import { MUSEO_SANS_BOLD } from '../config/Constants';
+import { SCREENS } from '../Router';
 
 export default class DrawerLinks extends Component {
 
   constructor(props) {
     super(props);
 
     this.handleAllItemsLink = this.handleAllItemsLink.bind(this);
+    this.handleWebviewLink = this.handleWebviewLink.bind(this);
     this.handleAboutLink = this.handleAboutLink.bind(this);
     this.handleLogoutLink = this.handleLogoutLink.bind(this);
     this.handleResetLink = this.handleResetLink.bind(this);
     this.handleCloseMenu = this.handleCloseMenu.bind(this);
   }
 
   handleAllItemsLink() {
-    this.handleCloseMenu();
-    this.props.navigation.navigate('InventoryList');
+    this.props.navigation.closeDrawer();
+    this.props.navigation.navigate(SCREENS.INVENTORY_LIST);
   }
 
-  handleAboutLink() {
+  handleWebviewLink() {
+    this.props.navigation.closeDrawer();
+    this.props.navigation.navigate(SCREENS.WEBVIEW_SELECTION);
+  }
 
-    var aboutUrl = i18n.t('appHeader.url');
-    if (Credentials.isProblemUser()) {
-      aboutUrl = i18n.t('appHeader.404Url');
-    }
+  handleAboutLink() {
+    const aboutUrl =  i18n.t(Credentials.isProblemUser() ? 'appHeader.404Url' : 'appHeader.url');
 
     this.handleCloseMenu();
     Linking.openURL(aboutUrl);
   }
 
   handleLogoutLink() {
-    this.handleCloseMenu();
-    this.props.navigation.navigate('Login');
+    this.props.navigation.closeDrawer();
+    this.props.navigation.navigate(SCREENS.LOGIN);
   }
 
   handleResetLink() {
-    this.handleCloseMenu();
+    this.props.navigation.closeDrawer();
     ShoppingCart.resetCart();
   }
 
   handleCloseMenu() {
-    this.props.closeMenu();
+    this.props.navigation.closeDrawer();
   }
 
   render() {
@@ -68,6 +71,13 @@ export default class DrawerLinks extends Component {
         >
           <Text style={ styles.menu_item_text }>{ i18n.t('menu.allItems') }</Text>
         </TouchableOpacity>
+        <TouchableOpacity
+          style={ styles.menu_button }
+          onPress={ this.handleWebviewLink }
+          { ...testProperties(i18n.t('menu.webview')) }
+        >
+          <Text style={ styles.menu_item_text }>{ i18n.t('menu.webview') }</Text>
+        </TouchableOpacity>
         <TouchableOpacity
           style={ styles.menu_button }
           onPress={ this.handleAboutLink }

src/js/components/HeaderCartButton.js

@@ -5,20 +5,12 @@ import { IS_IOS, MUSEO_SANS_NORMAL } from '../config/Constants';
 import { testProperties } from '../config/TestProperties';
 import i18n from '../config/i18n';
 import { colors } from '../utils/colors';
+import { SCREENS } from '../Router';
 
 export default class CartButton extends Component {
   constructor(props) {
     super(props);
     ShoppingCart.registerCartListener(this);
-
-    // Need to pass this in explicitly since it's a subcomponent
-    this.navigation = props.navigation;
-
-    this.navigateToShoppingCart = this.navigateToShoppingCart.bind(this);
-  }
-
-  navigateToShoppingCart() {
-    this.navigation.navigate('CartContents');
   }
 
   render() {
@@ -37,7 +29,7 @@ export default class CartButton extends Component {
 
     return (
       <View { ...testProperties(i18n.t('cart.label')) }>
-        <TouchableOpacity onPress={ this.navigateToShoppingCart }>
+        <TouchableOpacity onPress={ ()=> this.props.navigation.navigate(SCREENS.CART_CONTENTS) }>
           <Image
             style={ styles.cart_image }
             resizeMode="contain"

src/js/components/InventoryListItem.js

@@ -3,6 +3,7 @@ import { ShoppingCart } from '../shopping-cart';
 import { Credentials } from '../credentials';
 import SwagGridItem from './SwagGridItem';
 import SwagRowItem from './SwagRowItem';
+import { SCREENS } from '../Router';
 
 export default class InventoryListItem extends Component {
   constructor(props) {
@@ -63,7 +64,7 @@ export default class InventoryListItem extends Component {
       itemId += 1;
     }
 
-    this.navigation.navigate('InventoryItem', { id: itemId });
+    this.navigation.navigate(SCREENS.INVENTORY_ITEM, { id: itemId });
   }
 
   render() {