Merge pull request #58 from saucelabs/feat/gestures

Feat/gestures

README.md

@@ -20,6 +20,10 @@ The latest version of the iOS and Android app can be found [here](https://github
     1. [3D Touch / Force touch](#3d-touch---force-touch)
     1. [Different languages](#different-languages)
     1. [QR code scanner](#qr-code-scanner)
+    1. [Gestures](#gestures)
+        1. [Drag and Drop](#drag-and-drop)
+        1. [Pinch and Zoom](#pinch-zoom)
+        1. [Swiping](#swiping)
 1. [Contributing to the app](#contributing-to-the-app)
 1. [Test-automation](#test-automation)
 1. [FAQ](#faq)
@@ -153,6 +157,26 @@ If the QR code holds an URL it will automatically open it in a browser. The foll
 
 ![QR Code](./docs/assets/qr-code.png)
 
+### Gestures
+This app also support different Gestures which can be found below.
+
+#### Drag and Drop
+The swag overview page supports to drag and drop swag items to the cart. All *Add to cart*-buttons have a drag handle which you can use
+to drag the items into the cart. When you press the handle and start dragging it a *drop zone* will appear. When you release the swag item into
+the *drop zone* the swag item will be added to the cart. 
+
+![saucelabs.ios](./docs/assets/drag-and-drop.gif)
+
+#### Pinch and Zoom
+The swag details page supports to pinch and zoom the swag item image. Check the gif on how to use it.
+
+![saucelabs.ios](./docs/assets/pinch-zoom.gif)
+
+#### Swiping
+The cart contents page supports to remove an item from the cart by swiping it to the left. Check the gif on how to use it.
+
+![saucelabs.ios](./docs/assets/swipe-left.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 7
-        versionName "2.3.0"
+        versionCode 8
+        versionName "2.4.0"
         missingDimensionStrategy 'react-native-camera', 'general'
     }
     splits {

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

@@ -1,7 +1,9 @@
 package com.swaglabsmobileapp;
 
 import com.facebook.react.ReactActivity;
-
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.ReactRootView;
+import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
 public class MainActivity extends ReactActivity {
 
     /**
@@ -12,4 +14,13 @@ public class MainActivity extends ReactActivity {
     protected String getMainComponentName() {
         return "SwagLabsMobileApp";
     }
+    @Override
+    protected ReactActivityDelegate createReactActivityDelegate() {
+      return new ReactActivityDelegate(this, getMainComponentName()) {
+        @Override
+        protected ReactRootView createRootView() {
+         return new RNGestureHandlerEnabledRootView(MainActivity.this);
+        }
+      };
+    }
 }

docs/AUTOMATION.md

@@ -38,7 +38,7 @@ For installation instructions check [here](#setup-appium-on-a-local-machine).
 
 By default the following emulators and simulators are used:
 
-- Pixel One
+- Pixel Three
 - iPhone X
 
 > **Please check [tests/e2e/config/wdio.android.local.dev.conf.js](../tests/e2e/config/wdio.android.local.dev.conf.js) and [tests/e2e/config/wdio.ios.local.dev.conf.js](../tests/e2e/config/wdio.ios.local.dev.conf.js) for the correct names and OS versions of the emulators / simulators. They need to be equal for test execution.**
@@ -170,9 +170,9 @@ You first need to upload your app to the Sauce Labs storage, this can be found [
 > **NOTE: Adjust the name of the downloaded app in the script to upload the correct app.**
 
 ### The setup for EMUSIM
-This setup uses the WebdriverIO basics from the [`wdio.shared.conf.js`](../tests/e2e/config/wdio.shared.conf.js) where all the basics (like the test framework and so on) are defined. On top of that a [`wdio.emusim.shared.js`](../tests/e2e/config/wdio.emusim.shared.js) is created that holds the EMUSIM specific configuration for both iOS and Android.
+This setup uses the WebdriverIO basics from the [`wdio.shared.conf.js`](../tests/e2e/config/wdio.shared.conf.js) where all the basics (like the test framework and so on) are defined. On top of that a [`wdio.sauce.shared.js`](../tests/e2e/config/wdio.sauce.shared.js) is created that holds the EMUSIM specific configuration for both iOS and Android.
 
-Depending on where the tests need to be run (US/EU-cloud), the correct region of the cloud need to be selected. Change this piece of code in the [`wdio.emusim.shared.js`](../tests/e2e/config/wdio.emusim.shared.js)-file to select or the US or the EU cloud.
+Depending on where the tests need to be run (US/EU-cloud), the correct region of the cloud need to be selected. Change this piece of code in the [`wdio.sauce.shared.js`](../tests/e2e/config/wdio.sauce.shared.js)-file to select or the US or the EU cloud.
 
 ```js
 // For using the EU RDC cloud, just use `eu` like below
@@ -207,9 +207,9 @@ yarn ios.sauce.sim
 This project setup also has a setup for running the tests on the Real Device Cloud of Sauce Labs. To be able to do this there first needs to be a build of the app that can run on real devices, see [Building the app](./BUILDING.md) for more information on how to do that or download a version from the [versions](https://github.com/saucelabs/sample-app-mobile/releases) page.
 
 ### The setup
-This setup uses the WebdriverIO basics from the [`wdio.shared.conf.js`](../tests/e2e/config/wdio.shared.conf.js) where all the basics (like the test framework and so on) are defined. On top of that a [`wdio.rdc.shared.js`](../tests/e2e/config/wdio.rdc.shared.js) is created that holds the RDC specific configuration for both iOS and Android.
+This setup uses the WebdriverIO basics from the [`wdio.shared.conf.js`](../tests/e2e/config/wdio.shared.conf.js) where all the basics (like the test framework and so on) are defined. On top of that a [`wdio.sauce.shared.js`](../tests/e2e/config/wdio.sauce.shared.js) is created that holds the RDC specific configuration for both iOS and Android.
 
-Depending on where the tests need to be run (US/EU-cloud), the correct region of the cloud need to be selected. Change this piece of code in the [`wdio.rdc.shared.js`](../tests/e2e/config/wdio.rdc.shared.js)-file to select or the US or the EU cloud.
+Depending on where the tests need to be run (US/EU-cloud), the correct region of the cloud need to be selected. Change this piece of code in the [`wdio.sauce.shared.js`](../tests/e2e/config/wdio.sauce.shared.js)-file to select or the US or the EU cloud.
 
 ```js
 // For using the EU RDC cloud, just use `eu` like below

ios/Podfile.lock

@@ -243,7 +243,9 @@ PODS:
     - React
   - RNQuickAction (0.3.13):
     - React
-  - RNVectorIcons (6.6.0):
+  - RNReanimated (1.13.1):
+    - React
+  - RNVectorIcons (7.1.0):
     - React
   - Yoga (1.14.0)
 
@@ -285,6 +287,7 @@ DEPENDENCIES:
   - RNLocalize (from `../node_modules/react-native-localize`)
   - RNPermissions (from `../node_modules/react-native-permissions`)
   - RNQuickAction (from `../node_modules/react-native-quick-actions`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -361,6 +364,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-permissions"
   RNQuickAction:
     :path: "../node_modules/react-native-quick-actions"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
   RNVectorIcons:
     :path: "../node_modules/react-native-vector-icons"
   Yoga:
@@ -402,9 +407,10 @@ SPEC CHECKSUMS:
   RNLocalize: 07eb7a91d10021cdf59d80061ebf3adb8a5b5688
   RNPermissions: 2f74237e97b08beda01e914301e12524ddddf5b8
   RNQuickAction: 6d404a869dc872cde841ad3147416a670d13fa93
-  RNVectorIcons: 0bb4def82230be1333ddaeee9fcba45f0b288ed4
+  RNReanimated: dd8c286ab5dd4ba36d3a7fef8bff7e08711b5476
+  RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59
   Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
 
 PODFILE CHECKSUM: 3a25b58a53c04c09cbaa5aa156a21d7415f2f614
 
-COCOAPODS: 1.8.4
+COCOAPODS: 1.9.3

ios/SwagLabsMobileApp.xcodeproj/project.pbxproj

@@ -790,7 +790,7 @@
 			baseConfigurationReference = 0C5BDB74CFDBF4E80A7C5913 /* Pods-SwagLabsMobileApp.debug.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
-				CURRENT_PROJECT_VERSION = 7;
+				CURRENT_PROJECT_VERSION = 8;
 				DEAD_CODE_STRIPPING = NO;
 				DEVELOPMENT_TEAM = 2ZQ6NMUD9U;
 				INFOPLIST_FILE = SwagLabsMobileApp/Info.plist;
@@ -812,7 +812,7 @@
 			baseConfigurationReference = EE4945281AA2278ED763F2A4 /* Pods-SwagLabsMobileApp.release.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
-				CURRENT_PROJECT_VERSION = 7;
+				CURRENT_PROJECT_VERSION = 8;
 				DEAD_CODE_STRIPPING = NO;
 				DEVELOPMENT_TEAM = 2ZQ6NMUD9U;
 				INFOPLIST_FILE = SwagLabsMobileApp/Info.plist;

ios/SwagLabsMobileApp/Base.lproj/LaunchScreen.xib

@@ -1,11 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="14490.70" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES">
-    <device id="retina5_9" orientation="portrait">
-        <adaptation id="fullscreen"/>
-    </device>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="16097.3" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES">
+    <device id="retina5_9" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14490.49"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="16087"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>

ios/SwagLabsMobileApp/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>2.3.0</string>
+	<string>2.4.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "SwagLabsMobileApp",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "private": true,
   "scripts": {
     "start": "react-native start",
@@ -21,11 +21,13 @@
     "ios.clear.build": "yarn clear.cache && rm -rf ./ios/build/Build/Products/Release-iphonesimulator",
     "ios.release": "react-native run-ios --configuration Release",
     "ios.sim.build": "yarn ios.clear.build && npm run ios.release",
-    "postinstall": "npx jetify"
+    "postinstall": "npx jetify & patch-package"
   },
   "dependencies": {
     "@react-native-community/async-storage": "^1.7.1",
     "i18n-js": "^3.5.1",
+    "patch-package": "^6.2.2",
+    "postinstall-postinstall": "^2.1.0",
     "react": "16.9.0",
     "react-native": "0.61.5",
     "react-native-biometrics": "^2.1.2",
@@ -37,8 +39,9 @@
     "react-native-permissions": "^2.0.9",
     "react-native-qrcode-scanner": "^1.3.1",
     "react-native-quick-actions": "^0.3.13",
+    "react-native-reanimated": "^1.13.1",
     "react-native-splash-screen": "^3.2.0",
-    "react-native-vector-icons": "^6.6.0",
+    "react-native-vector-icons": "^7.1.0",
     "react-native-webview": "^8.0.2",
     "react-navigation": "^3.11.1",
     "sync-storage": "^0.4.2"
@@ -49,13 +52,13 @@
     "@babel/preset-env": "^7.7.7",
     "@babel/register": "^7.7.7",
     "@babel/runtime": "^7.6.2",
-    "@wdio/appium-service": "^6.4.0",
-    "@wdio/cli": "^6.4.0",
-    "@wdio/jasmine-framework": "^6.4.0",
-    "@wdio/local-runner": "^6.4.0",
-    "@wdio/sauce-service": "^6.4.0",
-    "@wdio/spec-reporter": "^6.4.0",
-    "@wdio/sync": "^6.4.0",
+    "@wdio/appium-service": "^6.4.7",
+    "@wdio/cli": "^6.5.2",
+    "@wdio/jasmine-framework": "^6.5.0",
+    "@wdio/local-runner": "^6.5.2",
+    "@wdio/sauce-service": "^6.5.0",
+    "@wdio/spec-reporter": "^6.4.7",
+    "@wdio/sync": "^6.5.0",
     "babel-eslint": "^10.0.2",
     "babel-jest": "^24.9.0",
     "eslint": "^6.5.1",

patches/react-native+0.63.0.patch

@@ -0,0 +1,21 @@
+diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+index 21f1a06..2444713 100644
+--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
++++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink
+
+ - (void)displayLayer:(CALayer *)layer
+ {
++  if (!_currentFrame) {
++    _currentFrame = self.image;
++  }
+   if (_currentFrame) {
+     layer.contentsScale = self.animatedImageScale;
+     layer.contents = (__bridge id)_currentFrame.CGImage;
+diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
+new file mode 100644
+index 0000000..361f5fb
+--- /dev/null
++++ b/node_modules/react-native/scripts/.packager.env
+@@ -0,0 +1 @@
++export RCT_METRO_PORT=8081

scripts/push_apps_to_storage.sh

@@ -3,27 +3,37 @@
 ## US
 # Android
 curl \
-  -F 'payload=@../apps/Android.SauceLabs.Mobile.Sample.app.2.3.0.apk' \
+  -F 'payload=@../apps/Android.SauceLabs.Mobile.Sample.app.2.4.0.apk' \
   -F name=sample-app-android.apk \
   -u "$SAUCE_USERNAME:$SAUCE_ACCESS_KEY"  \
   'https://api.us-west-1.saucelabs.com/v1/storage/upload'
 # iOS
 curl \
-  -F 'payload=@../apps/iOS.Simulator.SauceLabs.Mobile.Sample.app.2.3.0.zip' \
+  -F 'payload=@../apps/iOS.Simulator.SauceLabs.Mobile.Sample.app.2.4.0.zip' \
   -F name=sample-app-ios.zip \
   -u "$SAUCE_USERNAME:$SAUCE_ACCESS_KEY"  \
   'https://api.us-west-1.saucelabs.com/v1/storage/upload'
+curl \
+  -F 'payload=@../apps/iOS.Simulator.SauceLabs.Mobile.Sample.app.2.4.0.ipa' \
+  -F name=sample-app-ios.ipa \
+  -u "$SAUCE_USERNAME:$SAUCE_ACCESS_KEY"  \
+  'https://api.us-west-1.saucelabs.com/v1/storage/upload'
 
 ## EU
 # Android
 curl \
-  -F 'payload=@../apps/Android.SauceLabs.Mobile.Sample.app.2.3.0.apk' \
+  -F 'payload=@../apps/Android.SauceLabs.Mobile.Sample.app.2.4.0.apk' \
   -F name=sample-app-android.apk \
   -u "$SAUCE_USERNAME:$SAUCE_ACCESS_KEY"  \
   'https://api.eu-central-1.saucelabs.com/v1/storage/upload'
 # iOS
 curl \
-  -F 'payload=@../apps/iOS.Simulator.SauceLabs.Mobile.Sample.app.2.3.0.zip' \
+  -F 'payload=@../apps/iOS.Simulator.SauceLabs.Mobile.Sample.app.2.4.0.zip' \
   -F name=sample-app-ios.zip \
   -u "$SAUCE_USERNAME:$SAUCE_ACCESS_KEY"  \
   'https://api.eu-central-1.saucelabs.com/v1/storage/upload'
+curl \
+  -F 'payload=@../apps/iOS.Simulator.SauceLabs.Mobile.Sample.app.2.4.0.ipa' \
+  -F name=sample-app-ios.ipa \
+  -u "$SAUCE_USERNAME:$SAUCE_ACCESS_KEY"  \
+  'https://api.eu-central-1.saucelabs.com/v1/storage/upload'