Custom text and binary attachments in test apps #179

bmourat · 2017-12-05T13:32:28Z

Please do not merge this yet, as there are some changes that need to be discussed.
This PR adds support to set text and binary attachments to test app. There is one major change in Crashes module, I've made getErrorAttachments function async so we could wait for attachments to be read from disk.

async getErrorAttachments(report)

This caused this change in Crashes module:

filteredReports.forEach(async (report) => {
  const attachments = await getErrorAttachmentsMethod(report);
  AppCenterReactNativeCrashes.sendErrorAttachments(attachments, report.id);
});

If this solution is ok, I'll change other test apps too.

bmourat · 2017-12-06T08:07:08Z

Replaced async and await with promise for getErrorAttachments function in Crashes module as they are incompatible with Node 6

dhei

see my comments

dhei · 2017-12-06T22:55:44Z

TestApp/CrashesScreen.js

@@ -93,14 +105,91 @@ export default class CrashesScreen extends Component {
              Crash native code
            </Text>
          </TouchableOpacity>
+          <TouchableOpacity onPress={() => {this.dialogComponent.show()}}>
+          <Text style={styles.button}>
+              Set text attachmet


=> "Set text error attachment"

dhei · 2017-12-06T22:56:43Z

TestApp/CrashesScreen.js

+          <Text style={SharedStyles.enabledText}>{'Current value:'}{this.state.textAttachment}</Text>
+          <TouchableOpacity onPress={this.showFilePicker}>
+          <Text style={styles.button}>
+              Set file attachmet


=> "Select image as binary error attachment"

dhei · 2017-12-06T22:59:40Z

TestApp/ios/TestApp/Info.plist

+    <string>$(PRODUCT_NAME) would like to use your camera</string>
+    <key>NSPhotoLibraryAddUsageDescription</key>
+    <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
+    <key>NSMicrophoneUsageDescription</key>


Is microphone permission necessary?

dhei · 2017-12-06T23:04:35Z

appcenter-crashes/Crashes.js

-            const attachments = getErrorAttachmentsMethod(report);
-            AppCenterReactNativeCrashes.sendErrorAttachments(attachments, report.id);
+            getErrorAttachmentsMethod(report)
+            .then(attachments => {


styling issue - you don't need curly brackets for one-line arrow function body. You can do something like this:

.then(attachments => AppCenterReactNativeCrashes.sendErrorAttachments(attachments, report.id)) .catch(error => AppCenterLog.error(LOG_TAG, 'Crashes.getErrorAttachments: ' + error));

dhei · 2017-12-06T23:08:36Z

appcenter-crashes/Crashes.js

+                AppCenterReactNativeCrashes.sendErrorAttachments(attachments, report.id);
+            })
+            .catch(error => {
+                AppCenterLog.error(LOG_TAG, 'Crashes.getErrorAttachments: ' + error);


Please run eslint TestApp/*.js. I see ~80 eslint errors in the TestApp alone, we should fix or suppress them.

Please follow eslint getting started guide (https://eslint.org/docs/user-guide/getting-started) if you haven't installed eslint globally on your machine.

I recommend installing ESLint plugin for VS Code if you're using VS Code.

dhei · 2017-12-06T23:17:05Z

TestApp/ios/Podfile

@@ -14,4 +14,8 @@ target 'TestApp' do
  pod 'AppCenterReactNativeShared', :path => '../../AppCenterReactNativeShared/Products/'

  platform :ios, '8.0'
+  pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker'


Because you installed react-native-image-picker and RNFS from package.json, hence it's unnecessary to install them from Podfile. You only need one of npm and cocoapod to install your dependencies.

I verified this by removing these two lines and npm install && react-native link still works as expected.

dhei · 2017-12-06T23:23:35Z

TestApp/CrashesScreen.js

      </View>
    );
  }
+
+  getTextAttachmentDialog() {


I recommend check-in two large image files as part of the TestApp to make testing easier. Due to the error attachment size limit of 1.4 MB on android and 10 MB on ios, I recommend a image < 1.4 MB and another image < 10 MB.

Or create two base64 strings instead of check-in binary image files. We can't assume testing devices have such large binary files for testing.

dhei · 2017-12-07T01:34:16Z

TestApp/MainScreen.js

-      ErrorAttachmentLog.attachmentWithText('hello', 'hello.txt'),
-      ErrorAttachmentLog.attachmentWithBinary(testIcon, 'icon.png', 'image/png')
-    ];
+    return new Promise(async (resolve, reject) => {


It is an anti-pattern to use async inside Promise. Because ES2017 async function returns a Promise and you don't care about reject here, this code can be simplified with the following:

return (async () => { const textAttachment = await AttachmentsProvider.getTextAttachment(); const binaryAttachment = await AttachmentsProvider.getBinaryAttachment(); const binaryName = await AttachmentsProvider.getBinaryName(); const binaryType = await AttachmentsProvider.getBinaryType(); return [ErrorAttachmentLog.attachmentWithText(textAttachment, 'hello.txt'), ErrorAttachmentLog.attachmentWithBinary(binaryAttachment, binaryName, binaryType)]; })();

OR use Promise.all() to run in parallel:

return (async () => { const [textAttachment, binaryAttachment, binaryName, binaryType] = await Promise.all([ AttachmentsProvider.getTextAttachment(), AttachmentsProvider.getBinaryAttachment(), AttachmentsProvider.getBinaryName(), AttachmentsProvider.getBinaryType(), ]); return [ErrorAttachmentLog.attachmentWithText(textAttachment, 'hello.txt'), ErrorAttachmentLog.attachmentWithBinary(binaryAttachment, binaryName, binaryType)]; })();

dhei · 2017-12-07T01:39:38Z

TestApp/AttachmentsProvider.js

+            console.log('Binary attachment saved');
+        })
+        .catch((err) => {
+            console.log(err.message);


console.error(err.message)

bmourat · 2017-12-07T09:33:37Z

Addressed feedback and fixed eslint errors

dhei · 2017-12-07T20:37:00Z

appcenter-crashes/Crashes.js

-            AppCenterReactNativeCrashes.sendErrorAttachments(attachments, report.id);
+            getErrorAttachmentsMethod(report)
+            .then(attachments => AppCenterReactNativeCrashes.sendErrorAttachments(attachments, report.id))
+            .catch(error => AppCenterLog.error(LOG_TAG, 'Crashes.getErrorAttachments: ' + error));


.catch() will catch any error thrown from the Promise chain. In other words, it can be error from getErrorAttachmentsMethod() or sendErrorAttachments(). You need to improve this error message.

dhei · 2017-12-08T17:47:16Z

TestApp/android/app/src/main/java/com/testapp/MainApplication.java

@@ -4,6 +4,8 @@
 import android.util.Log;

 import com.facebook.react.ReactApplication;
+import com.rnfs.RNFSPackage;


styling: sort imports

dhei · 2017-12-08T17:56:52Z

TestApp/ios/TestApp.xcodeproj/project.pbxproj

+			remoteGlobalIDString = F12AFB9B1ADAF8F800E0535D;
+			remoteInfo = RNFS;
+		};
+		8037A3C81FD68F570006BF65 /* PBXContainerItemProxy */ = {


We should remove RNFS-tvOS ios build target as RN SDK doesn't need tvOS now.

dhei · 2017-12-08T18:11:39Z

TestApp/AttachmentsProvider.js

@@ -0,0 +1,69 @@
+import { AsyncStorage } from 'react-native';


styling: use 2 space indentation instead of 4 space

dhei · 2017-12-08T18:22:56Z

TestApp/CrashesScreen.js

+      let u = -1;
+      do {
+        fileSize /= thresh;
+          ++u;


styling: indentation

dhei · 2017-12-11T17:42:40Z

appcenter-crashes/Crashes.js

-            AppCenterReactNativeCrashes.sendErrorAttachments(attachments, report.id);
+            Promise.resolve(getErrorAttachmentsMethod(report))
+            .then(attachments => AppCenterReactNativeCrashes.sendErrorAttachments(attachments, report.id))
+            .catch(error => AppCenterLog.error(LOG_TAG, `Crashes.sendErrorAttachments:${error}`));


.sendErrorAttachments is not a method of Crashes class. It is an internal helper method of Helper class.

I suggest change the log message to Could not send error attachments. Error: ${error}

dhei · 2017-12-11T17:54:38Z

TestApp/CrashesScreen.js

+    });
+
+    function getFileName(response) {
+      return response.fileName != null ? response.fileName : 'binary.jpeg';


use !== instead of !=.

fileName != null will false when fileName is null or undefined.

dhei · 2017-12-11T17:55:06Z

TestApp/CrashesScreen.js

+    }
+
+    function getFileType(response) {
+      return response.type != null ? response.type : 'image/jpeg';


same here, see my other comment.

dhei · 2017-12-11T17:59:27Z

TestApp/CrashesScreen.js

+      >
+        <View>
+          <TextInput
+            style={{


Please refactor all UI styles in this class into SharedStyles.js so that we keep all StyleSheet in one place.

dhei · 2017-12-11T18:03:36Z

TestApp/CrashesScreen.js

+                    AttachmentsProvider.saveTextAttachment(this.state.textAttachment);
+                    this.dialogComponent.dismiss();
+              }}
+            >


~~[styling]: please use html tag </TouchableOpacity> instead of > to be consistent with other JSX files in this repo.~~

Murat Baysangurov added 5 commits December 4, 2017 17:51

Added dialog component dependency to TestApp

270aa08

Custom text attachment implemented

aa6ff68

Image picker module integrated to TestApp

6125289

File system component added to TestApp

f43a4fd

Binary attachment implemented

01e74b3

dhei added the do not merge label Dec 5, 2017

guperrot closed this Dec 6, 2017

guperrot reopened this Dec 6, 2017

Murat Baysangurov added 2 commits December 6, 2017 11:04

getErrorAttachments now expects Promise to be returned instead of array

bb32f6d

Reimplemented getErrorAttachments method in TestApp to return Promise

7522022

dhei suggested changes Dec 7, 2017

View reviewed changes

Fixed eslint errors and code style

d230b62

dhei reviewed Dec 7, 2017

View reviewed changes

getErrorAttachments can return array or promise

520105f

dhei reviewed Dec 8, 2017

View reviewed changes

TestApp/CrashesScreen.js Outdated

let u = -1;

do {

fileSize /= thresh;

++u;

Copy link

Member

dhei Dec 8, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

styling: indentation

Murat Baysangurov added 3 commits December 11, 2017 10:48

Imports sorted.

1a3c6f5

Indentation fixed

b3c68e3

Removed rnfs tvOS target

3ef0766

dhei reviewed Dec 11, 2017

View reviewed changes

dhei closed this Dec 11, 2017

dhei reopened this Dec 11, 2017

Minor code style issues

88280f9

dhei closed this Dec 11, 2017

dhei reopened this Dec 11, 2017

dhei approved these changes Dec 11, 2017

View reviewed changes

dhei removed the do not merge label Dec 11, 2017

dhei merged commit ff6032f into microsoft:develop Dec 11, 2017

This was referenced Dec 12, 2017

[TestApp] fix undefined bug in getFileType of ImagePicker #182

Merged

[TestApp] fix a push listener bug #183

Merged

bmourat deleted the text-binary-attachments-in-test-apps branch February 12, 2018 13:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom text and binary attachments in test apps #179

Custom text and binary attachments in test apps #179

bmourat commented Dec 5, 2017

bmourat commented Dec 6, 2017

dhei left a comment

dhei Dec 6, 2017

dhei Dec 6, 2017

dhei Dec 6, 2017

dhei Dec 6, 2017

dhei Dec 6, 2017

dhei Dec 6, 2017

dhei Dec 6, 2017

dhei Dec 6, 2017

dhei Dec 6, 2017

dhei Dec 7, 2017

dhei Dec 7, 2017 •

edited

Loading

dhei Dec 7, 2017

bmourat commented Dec 7, 2017

dhei Dec 7, 2017

dhei Dec 8, 2017

dhei Dec 8, 2017

dhei Dec 8, 2017

dhei Dec 8, 2017

dhei Dec 11, 2017

dhei Dec 11, 2017

dhei Dec 11, 2017

dhei Dec 11, 2017 •

edited

Loading

dhei Dec 11, 2017 •

edited

Loading

		@@ -0,0 +1,69 @@
		import { AsyncStorage } from 'react-native';

Custom text and binary attachments in test apps #179

Custom text and binary attachments in test apps #179

Conversation

bmourat commented Dec 5, 2017

bmourat commented Dec 6, 2017

dhei left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dhei Dec 7, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bmourat commented Dec 7, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dhei Dec 11, 2017 • edited Loading

Choose a reason for hiding this comment

dhei Dec 11, 2017 • edited Loading

Choose a reason for hiding this comment

dhei Dec 7, 2017 •

edited

Loading

dhei Dec 11, 2017 •

edited

Loading

dhei Dec 11, 2017 •

edited

Loading