Merge pull request #62 from saucelabs/feat/drawing

Add drawing option

README.md

@@ -27,6 +27,7 @@ If you tap on them they will auto fill the login data.
         1. [Pinch and Zoom](#pinch-zoom)
         1. [Swiping](#swiping)
     1. [Geo Location](#geo-location)
+    1. [Drawing](#drawing)
 1. [Contributing to the app](#contributing-to-the-app)
 1. [Test-automation](#test-automation)
 1. [FAQ](#faq)
@@ -181,11 +182,17 @@ The cart contents page supports to remove an item from the cart by swiping it to
 ![saucelabs.ios](./docs/assets/swipe-left.gif)
 
 ### Geo Location
-This app now also support testing changing the Geo Location. The app will pick up changes when the location is mocked, see this [test](./tests/e2e/spec/default/geo.location.spec.js)
+This app now also supports testing changing the Geo Location. The app will pick up changes when the location is mocked, see this [test](./tests/e2e/spec/default/geo.location.spec.js)
 for more information. 
 
 ![saucelabs.ios](./docs/assets/geo-location.gif)
 
+### Drawing
+Drawing your favorite Sauce Bolt can now been done in this app, you can even save it to your camera roll. If you want to do this with Appium then take a peak [here](./tests/e2e/spec/extra/drawing.spec.js)
+for more information. 
+
+![saucelabs.ios](./docs/assets/drawing.gif)
+
 ## Contributing to the app
 If you want to contribute to the app and add new functionalities, please check the documentation [here](./docs/CONTRIBUTING.md).
 

android/app/build.gradle

@@ -131,8 +131,8 @@ android {
         applicationId "com.swaglabsmobileapp"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 10
-        versionName "2.6.0"
+        versionCode 11
+        versionName "2.7.0"
         missingDimensionStrategy 'react-native-camera', 'general'
     }
     splits {
@@ -194,6 +194,7 @@ dependencies {
     implementation project(':react-native-webview')
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation "com.facebook.react:react-native:+"  // From node_modules
+    implementation project(':react-native-fs')
 
     if (enableHermes) {
         def hermesPath = "../../node_modules/hermes-engine/android/";

android/app/src/main/AndroidManifest.xml

@@ -6,6 +6,7 @@
     <uses-permission android:name="android.permission.VIBRATE" />
     <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 
     <application
             android:name=".MainApplication"

android/settings.gradle

@@ -1,6 +1,8 @@
 rootProject.name = 'SwagLabsMobileApp'
 include ':react-native-quick-actions'
 project(':react-native-quick-actions').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-quick-actions/android')
+include ':react-native-fs'
+project(':react-native-fs').projectDir = new File(settingsDir, '../node_modules/react-native-fs/android')
 include ':react-native-webview'
 project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

ios/Podfile

@@ -21,6 +21,7 @@ target 'SwagLabsMobileApp' do
   pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
   pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
   pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'
+  pod 'rn-fetch-blob', :path => '../node_modules/rn-fetch-blob'
 
   pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
   pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'

ios/Podfile.lock

@@ -194,12 +194,14 @@ PODS:
     - React
   - react-native-camera/RN (3.15.1):
     - React
+  - react-native-cameraroll (4.0.1):
+    - React
   - react-native-geolocation-service (5.0.0):
     - React
   - react-native-splash-screen (3.2.0):
     - React
-  - react-native-webview (8.0.2):
-    - React
+  - react-native-webview (10.9.2):
+    - React-Core
   - React-RCTActionSheet (0.61.5):
     - React-Core/RCTActionSheetHeaders (= 0.61.5)
   - React-RCTAnimation (0.61.5):
@@ -235,8 +237,12 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
     - ReactCommon/jscallinvoker (= 0.61.5)
+  - rn-fetch-blob (0.12.0):
+    - React-Core
   - RNCAsyncStorage (1.7.1):
     - React
+  - RNFS (2.16.6):
+    - React
   - RNGestureHandler (1.8.0):
     - React
   - RNLocalize (1.3.1):
@@ -271,6 +277,7 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - react-native-biometrics (from `../node_modules/react-native-biometrics`)
   - react-native-camera (from `../node_modules/react-native-camera`)
+  - "react-native-cameraroll (from `../node_modules/@react-native-community/cameraroll`)"
   - react-native-geolocation-service (from `../node_modules/react-native-geolocation-service`)
   - react-native-splash-screen (from `../node_modules/react-native-splash-screen`)
   - react-native-webview (from `../node_modules/react-native-webview`)
@@ -285,7 +292,9 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/jscallinvoker (from `../node_modules/react-native/ReactCommon`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - rn-fetch-blob (from `../node_modules/rn-fetch-blob`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
+  - RNFS (from `../node_modules/react-native-fs`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNLocalize (from `../node_modules/react-native-localize`)
   - RNPermissions (from `../node_modules/react-native-permissions`)
@@ -333,6 +342,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-biometrics"
   react-native-camera:
     :path: "../node_modules/react-native-camera"
+  react-native-cameraroll:
+    :path: "../node_modules/@react-native-community/cameraroll"
   react-native-geolocation-service:
     :path: "../node_modules/react-native-geolocation-service"
   react-native-splash-screen:
@@ -359,8 +370,12 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/Vibration"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  rn-fetch-blob:
+    :path: "../node_modules/rn-fetch-blob"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-community/async-storage"
+  RNFS:
+    :path: "../node_modules/react-native-fs"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNLocalize:
@@ -395,9 +410,10 @@ SPEC CHECKSUMS:
   React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
   react-native-biometrics: e092e67ab766de7ad97f572fa4973e226a0e4c6b
   react-native-camera: 1ba3e7f2375a6b44ae09ce9be70268e0b225bc10
+  react-native-cameraroll: 60ba0068826eab1c8d43146191bafd4363ea58a7
   react-native-geolocation-service: 141e33bdb179bcba10b216ee13962611e21f2be4
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
-  react-native-webview: 99bdfd6c189772b0f15494f728430c23b18b93e4
+  react-native-webview: 4e96d493f9f90ba4f03b28933f30b2964df07e39
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
   React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
   React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72
@@ -408,7 +424,9 @@ SPEC CHECKSUMS:
   React-RCTText: 9ccc88273e9a3aacff5094d2175a605efa854dbe
   React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
   ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
+  rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba
   RNCAsyncStorage: 44395cb9c7c1523104c2b499eb426ef7aff82bca
+  RNFS: 2bd9eb49dc82fa9676382f0585b992c424cd59df
   RNGestureHandler: 7a5833d0f788dbd107fbb913e09aa0c1ff333c39
   RNLocalize: 07eb7a91d10021cdf59d80061ebf3adb8a5b5688
   RNPermissions: 2f74237e97b08beda01e914301e12524ddddf5b8
@@ -417,6 +435,6 @@ SPEC CHECKSUMS:
   RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59
   Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
 
-PODFILE CHECKSUM: 6ee34b6ab72003464a92d0b7e7bd1bc32e856ab7
+PODFILE CHECKSUM: 4c88b0a1441e5e3614d157b785ff3db1458dbdc8
 
 COCOAPODS: 1.9.3

ios/SwagLabsMobileApp.xcodeproj/project.pbxproj

@@ -467,7 +467,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
-				CURRENT_PROJECT_VERSION = 9;
+				CURRENT_PROJECT_VERSION = 11;
 				DEAD_CODE_STRIPPING = NO;
 				DEVELOPMENT_TEAM = 2ZQ6NMUD9U;
 				INFOPLIST_FILE = SwagLabsMobileApp/Info.plist;
@@ -493,7 +493,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
-				CURRENT_PROJECT_VERSION = 8;
+				CURRENT_PROJECT_VERSION = 11;
 				DEAD_CODE_STRIPPING = NO;
 				DEVELOPMENT_TEAM = 2ZQ6NMUD9U;
 				INFOPLIST_FILE = SwagLabsMobileApp/Info.plist;

ios/SwagLabsMobileApp/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>2.6.0</string>
+	<string>2.7.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -34,7 +34,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>10</string>
+	<string>11</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>
@@ -50,6 +50,10 @@
 			</dict>
 		</dict>
 	</dict>
+	<key>NSPhotoLibraryAddUsageDescription</key>
+    <string>$(PRODUCT_NAME) would like to save images to your device.</string>
+    <key>NSPhotoLibraryUsageDescription</key>
+    <string>$(PRODUCT_NAME) would like to save images to your device.</string>
 	<key>NSCameraUsageDescription</key>
 	<string>$(PRODUCT_NAME) requires camera access to use the QR-code scanner.</string>
 	<key>NSFaceIDUsageDescription</key>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "SwagLabsMobileApp",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "private": true,
   "scripts": {
     "start": "react-native start",
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@react-native-community/async-storage": "^1.7.1",
+    "@react-native-community/cameraroll": "^4.0.1",
     "i18n-js": "^3.5.1",
     "patch-package": "^6.2.2",
     "postinstall-postinstall": "^2.1.0",
@@ -33,6 +34,7 @@
     "react-native-biometrics": "^2.1.2",
     "react-native-camera": "^3.15.1",
     "react-native-elements": "^1.2.7",
+    "react-native-fs": "^2.16.6",
     "react-native-geolocation-service": "^5.0.0",
     "react-native-gesture-handler": "^1.5.3",
     "react-native-localize": "^1.3.1",
@@ -41,10 +43,12 @@
     "react-native-qrcode-scanner": "^1.3.1",
     "react-native-quick-actions": "^0.3.13",
     "react-native-reanimated": "^1.13.1",
+    "react-native-signature-canvas": "^3.2.0",
     "react-native-splash-screen": "^3.2.0",
     "react-native-vector-icons": "^7.1.0",
-    "react-native-webview": "^8.0.2",
+    "react-native-webview": "^10.9.2",
     "react-navigation": "^3.11.1",
+    "rn-fetch-blob": "^0.12.0",
     "sync-storage": "^0.4.2"
   },
   "devDependencies": {

src/js/Router.js

@@ -15,6 +15,7 @@ import WebviewScreen from './screens/Webview';
 import QrCodeScanner from './screens/QrCodeScanner';
 import DrawerLinks from './components/DrawerLinks';
 import GeoLocation from './screens/GeoLocation';
+import Drawing from './screens/Drawing';
 
 const StackNavigator = createStackNavigator({
 		[ SCREENS.LOGIN ]: { screen: Login },
@@ -57,6 +58,10 @@ const StackNavigator = createStackNavigator({
 			screen: GeoLocation,
 			path: 'geo-location',
 		},
+		[ SCREENS.DRAWING ]: {
+			screen: Drawing,
+			path: 'drawing',
+		},
 	},
 	{
 		initialRouteName: SCREENS.LOGIN,

src/js/components/ActionButton.js

@@ -11,12 +11,12 @@ export default class ActionButton extends Component {
   }
 
   render() {
-    const { onPress, title } = this.props;
+    const { containerStyle, onPress, title } = this.props;
 
     return (
       <Button
         buttonStyle={ styles.button_style }
-        containerStyle={ styles.button_container_style }
+        containerStyle={ containerStyle || styles.button_container_style }
         titleStyle={ styles.button_title_style }
         onPress={ onPress }
         title={ title }

src/js/components/DrawerLinks.js

@@ -21,6 +21,7 @@ export default class DrawerLinks extends Component {
 		this.handleCloseMenu = this.handleCloseMenu.bind(this);
 		this.handleQrCodeLink = this.handleQrCodeLink.bind(this);
 		this.handleGeoLocationLink = this.handleGeoLocationLink.bind(this);
+		this.handleDrawingLink = this.handleDrawingLink.bind(this);
 	}
 
 	handleAllItemsLink() {
@@ -43,6 +44,11 @@ export default class DrawerLinks extends Component {
 		this.props.navigation.navigate(SCREENS.GEO_LOCATION_SCREEN);
 	}
 
+	handleDrawingLink() {
+		this.props.navigation.closeDrawer();
+		this.props.navigation.navigate(SCREENS.DRAWING);
+	}
+
 	handleAboutLink() {
 		const aboutUrl = I18n.t(Credentials.isProblemUser() ? 'appHeader.404Url' : 'appHeader.url');
 
@@ -106,6 +112,13 @@ export default class DrawerLinks extends Component {
 				>
 					<Text style={ styles.menu_item_text }>{ I18n.t('menu.geoLocation') }</Text>
 				</TouchableOpacity>
+				<TouchableOpacity
+					style={ styles.menu_button }
+					onPress={ this.handleDrawingLink }
+					{ ...testProperties(I18n.t('menu.drawing')) }
+				>
+					<Text style={ styles.menu_item_text }>{ I18n.t('menu.drawing') }</Text>
+				</TouchableOpacity>
 				<TouchableOpacity
 					style={ styles.menu_button }
 					onPress={ this.handleAboutLink }

src/js/config/Constants.js

@@ -30,4 +30,5 @@ export const SCREENS = {
 	WEBVIEW_SCREEN: 'WebviewScreen',
 	QR_CODE_SCANNER_SCREEN: 'QrCodeScanner',
 	GEO_LOCATION_SCREEN: 'GeoLocation',
+	DRAWING: 'Drawing',
 };

src/js/config/translations/en.js

@@ -146,6 +146,7 @@ export default {
 		'logout': 'LOGOUT',
 		'reset': 'RESET APP STATE',
 		'qrCode': 'QR CODE SCANNER',
+		'drawing': 'DRAWING',
 		'geoLocation': 'GEO LOCATION',
 		'webview': 'WEBVIEW',
 	},
@@ -161,12 +162,28 @@ export default {
 		'locationPermission': 'Location permission denied',
 		'enableLocation': 'Turn on Location Services to determine your location.',
 		'toSettings': 'Go to Settings.',
-		'dontUse':'Don\'t use the Location.',
+		'dontUse': 'Don\'t use the Location.',
 		'deniedByUser': 'Location permission denied by user.',
 		'position': 'Determining position...',
 		'latitude': 'latitude',
 		'longitude': 'longitude',
 	},
+	'drawing': {
+		'header': 'DRAWING',
+		'screen': 'DRAWING-SCREEN',
+		'clear': 'CLEAR',
+		'save': 'SAVE',
+		'ok': 'OK',
+		'cancel': 'CANCEL',
+		'saveDrawing': 'Save drawing',
+		'savedGallery': 'Drawing saved successfully to gallery',
+		'failedSave': 'Failed to save drawing',
+		'grantPermissionsMessage': 'Grant me permission to save the drawing',
+		'downloadPermissionsTitle': 'Drawing download permission',
+		'downloadPermissionsRequiredMessage': 'Your permission is required to save the drawing to your device',
+		'androidPermissions': 'Android permissions',
+		'androidPermissionsFailed': 'Android permissions failed',
+	},
 	'appHeader': {
 		'label': 'Swag Labs',
 		'url': 'https://saucelabs.com/',

src/js/config/translations/es.js

@@ -146,6 +146,7 @@ export default {
 		'logout': 'CERRAR SESION',
 		'qrCode': 'QR CODE ESCÁNER',
 		'geoLocation': 'UBICACIÓN GEOGRÁFICA',
+		'drawing': 'DIBUJO',
 		'reset': 'RESET APP STATE',
 		'webview': 'WEBVIEW',
 	},
@@ -167,6 +168,22 @@ export default {
 		'latitude': 'latitud',
 		'longitude': 'longitud',
 	},
+	'drawing': {
+		'header': 'DIBUJO',
+		'screen': 'DIBUJO-SCREEN',
+		'clear':'ELIMINAR',
+		'save':'GUARDAR',
+		'ok': 'OK',
+		'cancel': 'CANCEL',
+		'saveDrawing': 'Guardar dibujo',
+		'savedGallery': 'Dibujo ha sido guardado en la galería',
+		'failedSave': 'No se ha podido guardar el dibujo',
+		'grantPermissionsMessage': 'Permiso para guardar en almacenamiento es requerido para guardar dibujo',
+		'downloadPermissionsTitle': 'Permiso para guardar dibujo',
+		'downloadPermissionsRequiredMessage': 'Su permiso es requerido para guardar el dibujo en este dispositivo',
+		'androidPermissions': 'Permisos de Android',
+		'androidPermissionsFailed': 'No se ha podido obtener permiso de Android',
+	},
 	'appHeader': {
 		'label': 'Swag Labs',
 		'url': 'https://saucelabs.com/',