(feat) comment flow

e2e/comment.spec.js

+import sleep from '../src/common/helpers/sleep';
+import capturePoster from './actions/capturePoster';
+import { waitForElement, waitForAndType, tapElement, waitForAndTap } from './helpers/waitFor';
+
+const deletePost = async () => {
+  await waitForAndTap(by.id, 'ActivityMoreButton');
+  await waitForAndTap(by.id, 'deleteOption');
+  await waitForAndTap(by.text, 'Ok');
+  await waitForAndTap(by.text, 'Ok');
+}
+
+describe('Comment Flow', () => {
+  beforeEach(async () => {
+    await device.launchApp({
+      newInstance: true,
+      permissions: {
+        notifications: 'YES',
+        camera: 'YES',
+        medialibrary: 'YES',
+        photos: 'YES',
+      },
+    });
+    await capturePoster();
+  });
+
+  it('should be able to create post and comment', async () => {
+    const text = 'e2eTest';
+    const commentText = 'commentE2ETest';
+    const replyText = 'replyE2ETest';
+
+    // create post
+    await waitForAndType(by.id, 'PostInput', text);
+    await tapElement(by.id, 'CapturePostButton');
+
+    // wait for newsfeed
+    await waitForElement(by.id, 'NewsfeedScreen');
+
+    // add comment
+    await waitForAndTap(by.id, 'ActivityCommentButton');
+    await waitForAndType(by.id, 'CommentText', commentText);
+    await tapElement(by.id, 'PostCommentButton');
+
+    // add reply
+    await waitForAndTap(by.id, 'ReplyCommentButton');
+    await waitFor(element(by.id('CommentText').withAncestor(by.id('CommentParentView')))).toBeVisible().withTimeout(10000);
+    await element(by.id('CommentText').withAncestor(by.id('CommentParentView'))).typeText(replyText);
+    await element(by.id('PostCommentButton').withAncestor(by.id('CommentParentView'))).tap();
+
+    // check reply
+    await waitFor(element(by.label(`@${process.env.loginUser} ${replyText}`))).toBeVisible().withTimeout(10000);
+    
+    // finish
+    await deletePost();
+    
+  });
+
+});

src/comments/CommentList.js

@@ -337,7 +337,7 @@ class CommentList extends React.Component<PropsType, StateType> {
 
     return (
       <View>
-        <View style={[CS.rowJustifyCenter, CS.margin, CS.padding, CS.backgroundWhite, CS.borderRadius12x, CS.borderGreyed, CS.borderHair]}>
+        <View style={[CS.rowJustifyCenter, CS.margin, CS.padding, CS.backgroundWhite, CS.borderRadius12x, CS.borderGreyed, CS.borderHair]} testID={this.props.parent ? 'CommentParentView' : ''}>
           <Image source={avatarImg} style={CmpStyle.posterAvatar} />
           <TextInput
             style={[CS.flexContainer, CS.marginLeft, inputStyle, {paddingVertical: 2}]}
@@ -352,6 +352,7 @@ class CommentList extends React.Component<PropsType, StateType> {
             maxHeight={110}
             value={comments.text}
             onSelectionChange={this.onSelectionChanges}
+            testID='CommentText'
           />
           { attachment.uploading ?
             <Progress.Pie progress={attachment.progress} size={36} /> :
@@ -359,7 +360,7 @@ class CommentList extends React.Component<PropsType, StateType> {
               <ActivityIndicator size={'large'} /> :
               <View style={[CS.rowJustifyEnd, CS.centered]}>
                 <TouchableOpacity onPress={this.showAttachment} style={CS.paddingRight2x}><Icon name="md-attach" size={24} style={CS.paddingRight2x} /></TouchableOpacity>
-                <TouchableOpacity onPress={this.postComment} style={CS.paddingRight2x}><Icon name="md-send" size={24} /></TouchableOpacity>
+                <TouchableOpacity onPress={this.postComment} style={CS.paddingRight2x} testID='PostCommentButton'><Icon name="md-send" size={24} /></TouchableOpacity>
               </View>
           }
         </View>

src/comments/ReplyAction.js

@@ -49,7 +49,7 @@ export default class ReplyAction extends Component {
     const textStyle = {color};
 
     return (
-      <TouchableOpacityCustom style={[CommonStyle.flexContainer, CommonStyle.centered, CommonStyle.paddingRight2x, this.props.orientation == 'column' ? CommonStyle.columnAlignCenter : CommonStyle.rowJustifyCenter ]} onPress={this.toggleExpand}>
+      <TouchableOpacityCustom style={[CommonStyle.flexContainer, CommonStyle.centered, CommonStyle.paddingRight2x, this.props.orientation == 'column' ? CommonStyle.columnAlignCenter : CommonStyle.rowJustifyCenter ]} onPress={this.toggleExpand} testID='ReplyCommentButton'>
         <Icon color={color} name={this.iconName} size={this.props.size} />
         <Text style={textStyle}>{i18n.t('reply')}</Text>
         <Counter size={this.props.size * 0.75} count={entity.replies_count} orientation={this.props.orientation}/>

src/newsfeed/activity/Actions.js

@@ -37,7 +37,7 @@ export default class Actions extends PureComponent {
           <ThumbUpAction entity={entity} me={this.props.user.me}/>
           <ThumbDownAction entity={entity} me={this.props.user.me}/>
           {!isOwner && hasCrypto && <WireAction owner={entity.ownerObj} navigation={this.props.navigation}/>}
-          <CommentsAction entity={entity} navigation={this.props.navigation}/>
+          <CommentsAction entity={entity} navigation={this.props.navigation} testID={this.props.entity.text==='e2eTest' ? 'ActivityCommentButton' : ''}/>
           <RemindAction entity={entity} navigation={this.props.navigation}/>
           {isOwner && hasCrypto && !isScheduled && <BoostAction entity={entity} navigation={this.props.navigation}/>}
         </View> }

src/newsfeed/activity/actions/CommentsAction.js

@@ -39,7 +39,7 @@ class CommentsAction extends Component {
     const color = canComment ? (this.props.entity['comments:count'] > 0 ? CS.colorPrimary : CS.colorAction) : CS.colorLightGreyed;
 
     return (
-      <TouchableOpacityCustom style={[CS.flexContainer, CS.centered, CS.rowJustifyCenter]} onPress={this.openComments}>
+      <TouchableOpacityCustom style={[CS.flexContainer, CS.centered, CS.rowJustifyCenter]} onPress={this.openComments} testID={this.props.testID}>
         <Icon style={[color, CS.marginRight]} name={icon} size={this.props.size} />
         <Counter size={this.props.size * 0.70} count={this.props.entity['comments:count']} />
       </TouchableOpacityCustom>