Feature - Repro Steps (#411)

* Adding navigation listener

* repro steps apis

* iOS APIs

* changed to avoid duplicate screens

* Add initial screen

* Chaning repro steps state api to new implementation

* Adds unit tests

* danger changelog

* updates Readme

* Adds RN tests

* Update build.gradle

* Update RNInstabugReactnativeModule.java

* Revert "Update RNInstabugReactnativeModule.java"

This reverts commit 323a8cf.

* Revert "Update build.gradle"

This reverts commit a179528.

* Update build.gradle

* Call setCrossPlatform

Also remove the repro steps disabling statement

* Update build.gradle

* Fix android repro steps issues

* Add iOS spanshot

* Adds new iOS platform API

* remove old platform API

* Revert "Add iOS spanshot"

This reverts commit 4eaa2f0.

* Revert "Adds new iOS platform API"

This reverts commit b1e57d0.

* Revert "remove old platform API"

This reverts commit dd47150.

* Adds new iOS snapshot

* Adds new iOS APIs

* Adds duplicate initial screen fix

* Adding android snapshot

* Add native snapshots

* rename variable to be more descriptive

* Adjusting tests

Co-authored-by: Ali Abdelfattah <[email protected]>
Co-authored-by: Ali Abdelfattah <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -50,6 +50,7 @@
 * Updates native iOS SDK to v8.7.2
 * Fixes `Warning: Require cycle` warnings.
 
+
 ## v8.7.0 (2019-09-19)
 
 * Updates native SDKs to v8.7

README.md

@@ -197,8 +197,36 @@ import { NetworkLogger } from 'instabug-reactnative';
 NetworkLogger.setEnabled(false);
 ```
 
+## Repro Steps
+
+Instabug Repro Steps are enabled by default. It captures a screenshot of each screen the user navigates to. These screens are attached to the BugReport when sent.
+
+We support the 2 most popular React Native navigation libraries:
+
+* **react-navigation**
+1) Set the `onNavigationStateChange` to `Instabug.onNavigationStateChange` in your App wrapper as follows:
+
+    ```javascript
+    export default () => (
+      <App
+        onNavigationStateChange={ Instabug.onNavigationStateChange } />
+    );
+    ```
+
+* **react-native-navigation**
+1) Register `Instabug.componentDidAppearListener` listener using: 
+
+    ```javascript
+    Navigation.events().registerComponentDidAppearListener( Instabug.componentDidAppearListener );
+    ```
+
+You can disable Repro Steps using the following API:
+```javascript
+Instabug.setReproStepsMode(Instabug.reproStepsMode.disabled);
+```
+
 ## Features that are not supported yet
-- Repro Steps
+
 - Push Notification Support for In-App Messaging
 
 ## Documentation

__tests__/index.spec.js

@@ -67,6 +67,7 @@ describe('Instabug Module', () => {
   const callPrivateApi = sinon.spy(NativeModules.Instabug, 'callPrivateApi');
   const sendHandledJSCrash = sinon.spy(NativeModules.Instabug, 'sendHandledJSCrash');
   const sendJSCrash = sinon.spy(NativeModules.Instabug, 'sendJSCrash');
+  const reportScreenChange = sinon.spy(NativeModules.Instabug, 'reportScreenChange');
 
   beforeEach(() => {
     startWithToken.resetHistory();
@@ -86,6 +87,22 @@ describe('Instabug Module', () => {
 
   });
 
+  it('componentDidAppearListener should call the native method reportScreenChange', () => {
+    const screenName = "some-screen";
+    var obj = {componentId: "1",
+              componentName: screenName,
+              "passProps": "screenName"};
+    Instabug.componentDidAppearListener(obj);
+    expect(reportScreenChange.calledOnceWithExactly(screenName)).toBe(true);
+  });
+
+  it('onNavigationStateChange should call the native method reportScreenChange', () => {
+    const screenName = "some-screen";
+    InstabugUtils.getActiveRouteName.mockImplementation((screenName) => screenName);
+    Instabug.onNavigationStateChange(screenName, screenName, screenName);
+    expect(reportScreenChange.calledOnceWithExactly(screenName)).toBe(true);
+  });
+
   it('should call the native method startWithToken', () => {
 
     Platform.OS = 'ios';

android/build.gradle

@@ -29,7 +29,7 @@ android {
 dependencies {
     implementation 'com.android.support:multidex:1.0.3'
     implementation 'com.facebook.react:react-native:+'
-    api('com.instabug.library:instabug:9.1.0.0') {
+    api('com.instabug.library:instabug:9.1.6.0') {
         exclude group: 'com.android.support:appcompat-v7'
     }
     testImplementation 'org.mockito:mockito-core:1.10.19'

android/src/main/java/com/instabug/reactlibrary/RNInstabugReactnativeModule.java

@@ -2,6 +2,7 @@
 
 import android.annotation.SuppressLint;
 import android.app.Application;
+import android.graphics.Bitmap;
 import android.net.Uri;
 import android.os.Handler;
 import android.os.Looper;
@@ -1682,7 +1683,7 @@ public void run() {
         });
     }
 
-    /**
+ /**
      * Sets whether user steps tracking is visual, non visual or disabled.
      *
      * @param reproStepsMode A string to set user steps tracking to be
@@ -1694,17 +1695,7 @@ public void setReproStepsMode(final String reproStepsMode) {
             @Override
             public void run() {
                 try {
-                    switch (reproStepsMode) {
-                        case ENABLED_WITH_NO_SCREENSHOTS:
-                            Instabug.setReproStepsState(State.ENABLED_WITH_NO_SCREENSHOTS);
-                            break;
-                        case DISABLED:
-                            Instabug.setReproStepsState(State.DISABLED);
-                            break;
-                        default:
-                            Instabug.setReproStepsState(State.ENABLED);
-                    }
-
+                    Instabug.setReproStepsState( ArgsRegistry.getDeserializedValue(reproStepsMode, State.class));
                 } catch (Exception e) {
                     e.printStackTrace();
                 }
@@ -2247,6 +2238,29 @@ public void execute(NativeViewHierarchyManager nativeViewHierarchyManager) {
         });
     }
 
+    /**
+     * Reports that the screen has been changed (Repro Steps) the screen sent to this method will be the 'current view' on the dashboard
+     *
+     * @param screenName string containing the screen name
+     *
+     */
+    @ReactMethod
+    public void reportScreenChange(final String screenName) {
+        MainThreadHandler.runOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                try {
+                    Method method = getMethod(Class.forName("com.instabug.library.Instabug"), "reportScreenChange", Bitmap.class, String.class);
+                    if (method != null) {
+                        method.invoke(null , null, screenName);
+                    }
+                } catch (Exception e) {
+                    e.printStackTrace();
+                }
+            }
+        });
+    }
+
     private InstabugCustomTextPlaceHolder.Key getStringToKeyConstant(String key) {
         switch (key) {
             case SHAKE_HINT:

android/src/main/java/com/instabug/reactlibrary/RNInstabugReactnativePackage.java

@@ -1,20 +1,23 @@
 package com.instabug.reactlibrary;
 
 import android.app.Application;
+import android.util.Log;
 
 import com.facebook.react.ReactPackage;
 import com.facebook.react.bridge.NativeModule;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.uimanager.ViewManager;
 import com.instabug.bug.BugReporting;
 import com.instabug.crash.CrashReporting;
+import com.instabug.library.Platform;
 import com.instabug.library.Feature;
 import com.instabug.library.Instabug;
 import com.instabug.library.InstabugColorTheme;
 import com.instabug.library.invocation.InstabugInvocationEvent;
 import com.instabug.library.invocation.util.InstabugFloatingButtonEdge;
 import com.instabug.library.visualusersteps.State;
 import com.instabug.reactlibrary.utils.InstabugUtil;
+import com.instabug.reactlibrary.utils.MainThreadHandler;
 
 import android.graphics.Color;
 
@@ -47,10 +50,10 @@ public RNInstabugReactnativePackage(String androidApplicationToken, Application
         this.parseInvocationEvent(invocationEventValues);
 
         setBaseUrlForDeprecationLogs();
-        
+        setCrossPlatform();
+
         new Instabug.Builder(this.androidApplication, this.mAndroidApplicationToken)
                 .setInvocationEvents(this.invocationEvents.toArray(new InstabugInvocationEvent[0]))
-                .setReproStepsState(State.DISABLED)
                 .build();
         if (crashReportingEnabled)
             CrashReporting.setState(Feature.State.ENABLED);
@@ -96,6 +99,20 @@ private void parseInvocationEvent(String[] invocationEventValues) {
         }
     }
 
+    private void setCrossPlatform() {
+        try {
+            Method method = InstabugUtil.getMethod(Class.forName("com.instabug.library.Instabug"), "setCrossPlatform", int.class);
+            if (method != null) {
+                Log.i("IB-CP-Bridge", "invoking setCrossPlatform with platform: " + Platform.RN);
+                method.invoke(null, Platform.RN);
+            } else {
+                Log.e("IB-CP-Bridge", "setCrossPlatform was not found by reflection");
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+    }
+
     private void setBaseUrlForDeprecationLogs() {
         try {
             Method method = InstabugUtil.getMethod(Class.forName("com.instabug.library.util.InstabugDeprecationLogger"), "setBaseUrl", String.class);

android/src/test/java/com/instabug/reactlibrary/RNInstabugReactnativeModuleTest.java

@@ -339,7 +339,7 @@ public Boolean answer(InvocationOnMock invocation) throws Throwable {
     }
 
     @Test
-    public void givenArg$setReproStepsMode_whenQuery_thenShouldCallNativeApiWithArg() {
+    public void givenArg$setReproStepsMode_whenQuery_thenShouldCallNativeApiWithArg() throws Exception {
         // given
         PowerMockito.mockStatic(Instabug.class);
         Map<String, Object> args = new HashMap<>();
@@ -350,9 +350,9 @@ public Boolean answer(InvocationOnMock invocation) throws Throwable {
             rnModule.setReproStepsMode(key);
         }
         // then
-        PowerMockito.verifyStatic(VerificationModeFactory.times(1));
         for (String key : keysArray) {
             State mode = (State) args.get(key);
+            PowerMockito.verifyStatic(VerificationModeFactory.times(1));
             Instabug.setReproStepsState(mode);
         }
 
@@ -547,4 +547,15 @@ public Boolean answer(InvocationOnMock invocation) throws Throwable {
         }
     }
 
+    @Test
+    public void givenString$reportScreenChange_whenQuery_thenShouldCallNativeApiWithString() throws Exception {
+        // given
+        PowerMockito.mockStatic(Instabug.class);
+        rnModule.reportScreenChange("screen");
+
+        // then
+        PowerMockito.verifyPrivate(Instabug.class, VerificationModeFactory.times(1)).invoke("reportScreenChange", null,"screen");
+
+    }
+
 }

index.js

@@ -20,6 +20,10 @@ import NetworkLogger from './modules/NetworkLogger';
 InstabugUtils.captureJsErrors();
 NetworkLogger.setEnabled(true);
 
+var _currentScreen = null;
+var _lastScreen = null;
+var _isFirstScreen = false;
+const firstScreen = "Initial Screen";
 /**
  * Instabug
  * @exports Instabug
@@ -53,7 +57,17 @@ const InstabugModule = {
    * the SDK's UI.
    */
   start: function(token, invocationEvent) {
-    if (Platform.OS === 'ios') Instabug.startWithToken(token, invocationEvent);
+    if (Platform.OS === 'ios') {
+      Instabug.startWithToken(token, invocationEvent);
+    }
+    _isFirstScreen = true;
+    _currentScreen = firstScreen;
+    setTimeout(function() {
+      if (_currentScreen == firstScreen) {
+        Instabug.reportScreenChange(firstScreen);
+        _currentScreen = null;
+      }
+    }, 1000); 
   },
 
   /**
@@ -774,6 +788,38 @@ const InstabugModule = {
     Instabug.callPrivateApi(apiName, param);
   },
 
+  onNavigationStateChange(prevState, currentState, action) {
+      const currentScreen = InstabugUtils.getActiveRouteName(currentState);
+      const prevScreen = InstabugUtils.getActiveRouteName(prevState);
+
+      if (prevScreen !== currentScreen) {
+        if (_currentScreen != null && _currentScreen != firstScreen) {
+          Instabug.reportScreenChange(_currentScreen);
+          _currentScreen = null;
+        }
+        _currentScreen = currentScreen;
+        setTimeout(function() { 
+          if (_currentScreen == currentScreen) {
+            Instabug.reportScreenChange(currentScreen);
+            _currentScreen = null;
+          }
+        }, 1000);
+      }
+  },
+
+  componentDidAppearListener({componentId, componentName, passProps}) {
+    if (_isFirstScreen) {
+      _lastScreen = componentName;
+      _isFirstScreen = false;
+      return;
+    }
+    if (_lastScreen != componentName) {
+      Instabug.reportScreenChange(componentName);
+      _lastScreen = componentName;
+    }
+},
+
+  
   /**
    * The event used to invoke the feedback form
    * @readonly

ios/Instabug.framework/Headers/IBGBugReporting.h

@@ -5,7 +5,7 @@
  
  Copyright:  (c) 2013-2019 by Instabug, Inc., all rights reserved.
  
- Version:    9.1
+ Version:    9.1.6
  */
 
 #import <Foundation/Foundation.h>

ios/Instabug.framework/Headers/IBGChats.h

@@ -5,7 +5,7 @@
  
  Copyright:  (c) 2013-2019 by Instabug, Inc., all rights reserved.
  
- Version:    9.1
+ Version:    9.1.6
  */
 
 #import <Foundation/Foundation.h>