(feat) channel flow

e2e/channel.spec.js

+import { waitForElement, waitForAndType, tapElement, waitForAndTap } from './helpers/waitFor';
+import { deletePost } from './actions/capturePoster';
+import login from './actions/login';
+
+/**
+ * Uses process.env.userDisplayName:
+ * export userDisplayName="Something Something"
+ */
+describe('Channel Flow', () => {
+  beforeEach(async () => {
+    await device.launchApp({
+      newInstance: true,
+      permissions: {
+        notifications: 'YES',
+        camera: 'YES',
+        medialibrary: 'YES',
+        photos: 'YES',
+      },
+    });
+    await waitForElement(by.id('usernameInput'));
+    await login(process.env.loginUser, process.env.loginPass);
+    await waitForAndTap(by.id('AvatarButton'));
+  });
+
+  it('channel header should be render correctly', async () => {
+    const beVisible = true;
+    await waitForElement(by.id('SubscribersView'));
+    await waitForElement(by.id('ViewsView'));
+    await waitForElement(by.id('ChannelNameView'));
+    await waitForElement(by.id('SubscribeButton'), !beVisible);
+    await waitForElement(by.id('SendMessageButton'), !beVisible);
+    await waitForElement(by.id('EditButton'));
+    await waitForElement(by.id('WireButton'), !beVisible);
+    await waitForElement(by.id('MoreButton'), !beVisible);
+  });
+
+  it('should be able to change display name', async () => {
+    const displayNameTest = "New Display Name";
+    const replaceText = true;
+
+    // new display name
+    await waitForAndTap(by.id('EditButton'));
+    await waitForAndType(by.id('ChannelNameTextInput'), displayNameTest, replaceText);
+    await tapElement(by.id('EditButton'));
+    await waitForElement(by.id('ChannelNameView'));
+
+    // display name back to normal
+    await waitForAndTap(by.id('EditButton'));
+    await waitForAndType(by.id('ChannelNameTextInput'), process.env.userDisplayName, replaceText);
+    await tapElement(by.id('EditButton'));
+    await waitForElement(by.id('ChannelNameView'));
+  });
+
+  it('should be able to create a post', async () => {
+    const text = 'e2eTest';
+
+    await waitForAndTap(by.id('captureFab'));
+
+    // create post
+    await waitForAndType(by.id('PostInput'), text);
+    await tapElement(by.id('CapturePostButton'));
+
+    // wait for channelscreen
+    await waitForElement(by.id('ChannelScreen'));
+    
+    await deletePost();
+
+  });
+
+  it('should be move between tabs', async () => {
+    // wait for channelscreen
+    await waitForElement(by.id('ChannelScreen'));
+
+    await tapElement(by.id('ImagesButton'));
+
+    await tapElement(by.id('VideosButton'));
+
+    await tapElement(by.id('BlogsButton'));
+
+    await tapElement(by.id('FeedButton'));
+
+  });
+
+});

e2e/helpers/waitFor.js

 export const TIME = 10000;
 
-export const waitForElement = async (e) => {
-  await waitFor(element(e)).toBeVisible().withTimeout(TIME);
+export const waitForElement = async (e, visible = true) => {
+  if (visible) {
+    await waitFor(element(e)).toBeVisible().withTimeout(TIME);
+  } else {
+    await waitFor(element(e)).toBeNotVisible().withTimeout(TIME);
+  }
 }
 
 export const tapElement = async (e) => {
   await element(e).tap();
 }
 
-export const typeText = async (e, text) => {
-  await element(e).typeText(text);
+export const typeText = async (e, text, replaceText = false) => {
+  if (!replaceText) {
+    await element(e).typeText(text);
+  } else {
+    await element(e).replaceText(text);
+  }
 }
 
 export const waitForAndTap = async (e) => {
@@ -17,7 +25,7 @@ export const waitForAndTap = async (e) => {
   await tapElement(e);
 }
 
-export const waitForAndType = async (e, text) => {
+export const waitForAndType = async (e, text, replaceText = false) => {
   await waitForElement(e);
-  await typeText(e, text);
+  await typeText(e, text, replaceText);
 }
\ No newline at end of file

src/channel/ChannelActions.js

@@ -160,6 +160,7 @@ class ChannelActions extends Component {
             containerStyle={[CS.rowJustifyCenter, CS.marginLeft0x]}
             accessibilityLabel={i18n.t('channel.subscribeMessage')}
             text={i18n.t('channel.subscribe')}
+            testID="SubscribeButton"
           />
         }
         { showMessage &&
@@ -168,6 +169,7 @@ class ChannelActions extends Component {
             containerStyle={[CS.rowJustifyCenter, CS.marginLeft0x]}
             accessibilityLabel={i18n.t('channel.sendMessage')}
             text={i18n.t('channel.message')}
+            testID="SendMessageButton"
           />
         }
         { showEdit &&
@@ -177,6 +179,7 @@ class ChannelActions extends Component {
             accessibilityLabel={this.props.editing ? i18n.t('channel.saveChanges') : i18n.t('channel.editChannel')}
             text={this.props.editing ? i18n.t('save') : i18n.t('edit')}
             loading={this.props.saving}
+            testID="EditButton"
           />
         }
         { showMode &&
@@ -190,6 +193,7 @@ class ChannelActions extends Component {
             textStyle={[CS.marginLeft, CS.marginRight]}
             icon="ios-flash"
             text="Wire"
+            testID="WireButton"
           >
             <Icon name='ios-flash' size={18} style={[CS.marginLeft, CS.colorPrimary]} />
           </ButtonCustom>
@@ -202,6 +206,7 @@ class ChannelActions extends Component {
             textStyle={[CS.marginLeft, CS.marginRight]}
             icon="ios-flash"
             text={i18n.t('more')}
+            testID="MoreButton"
           />
         }
         <ActionSheet

src/channel/ChannelScreen.js

@@ -329,12 +329,12 @@ class ChannelScreen extends Component {
       />
 
     return (
-      <View style={CommonStyle.flexContainer}>
+      <View style={CommonStyle.flexContainer} testID="ChannelScreen">
         { (!channel.blocked && !isClosed) ? body : header }
         <SafeAreaView style={styles.gobackicon}>
           <Icon raised color={colors.primary} size={22} name='arrow-back' onPress={this.goBack}/>
         </SafeAreaView>
-        <CaptureFab navigation={this.props.navigation} />
+        <CaptureFab navigation={this.props.navigation} testID="captureFab"/>
       </View>
     );
   }

src/channel/header/ChannelHeader.js

@@ -217,12 +217,12 @@ export default class ChannelHeader extends Component {
         <View style={styles.headertextcontainer}>
           <View style={styles.countercontainer}>
             <TouchableHighlightCustom underlayColor="transparent" style={[styles.counter]} onPress={() => { this._navToSubscribers() }}>
-              <View style={styles.counter}>
+              <View style={styles.counter} testID="SubscribersView">
                 <Text style={styles.countertitle}>{i18n.t('subscribers').toUpperCase()}</Text>
                 <Text style={styles.countervalue}>{abbrev(channel.subscribers_count, 0)}</Text>
               </View>
             </TouchableHighlightCustom>
-            <View style={styles.counter}>
+            <View style={styles.counter} testID="ViewsView">
               <Text style={styles.countertitle}>{i18n.t('views').toUpperCase()}</Text>
               <Text style={styles.countervalue}>{abbrev(channel.impressions, 0)}</Text>
             </View>
@@ -235,9 +235,10 @@ export default class ChannelHeader extends Component {
                 style={styles.nameTextInput}
                 value={this.state.name}
                 onChangeText={this.setName}
+                testID="ChannelNameTextInput"
               />}
               {!isEditable &&
-                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <View style={{ flexDirection: 'row', alignItems: 'center' }} testID="ChannelNameView">
                   <Text
                     style={styles.name}
                     ellipsizeMode='tail'

src/channel/toolbar/Toolbar.js

@@ -77,19 +77,19 @@ class Toolbar extends Component {
     return (
       <View style={styles.container}>
         <View style={styles.topbar}>
-          <TouchableOpacity style={styles.button} onPress={this.filterFeed}>
+          <TouchableOpacity style={styles.button} onPress={this.filterFeed} testID="FeedButton">
             <Icon name="list" size={ICON_SIZE} color={filter == 'feed' ? colors.primary : color} style={styles.icon} />
             <Text style={[styles.buttontext, filter == 'feed' ? styles.buttontextSelected : null]}>{i18n.t('feed').toUpperCase()}</Text>
           </TouchableOpacity>
-          <TouchableOpacity style={styles.button} onPress={this.filterImages} >
+          <TouchableOpacity style={styles.button} onPress={this.filterImages} testID="ImagesButton">
             <IonIcon name="md-image" size={ICON_SIZE} color={filter == 'images' ? colors.primary : color} style={styles.icon} />
             <Text style={[styles.buttontext, filter == 'images' ? styles.buttontextSelected : null]}>{i18n.t('images').toUpperCase()}</Text>
           </TouchableOpacity>
-          <TouchableOpacity style={styles.button} onPress={this.filterVideos} >
+          <TouchableOpacity style={styles.button} onPress={this.filterVideos} testID="VideosButton">
             <IonIcon name="md-videocam" size={ICON_SIZE} color={filter == 'videos' ? colors.primary : color} style={styles.icon} />
             <Text style={[styles.buttontext, filter == 'videos' ? styles.buttontextSelected : null]}>{i18n.t('videos').toUpperCase()}</Text>
           </TouchableOpacity>
-          <TouchableOpacity style={styles.button} onPress={this.filterBlogs}>
+          <TouchableOpacity style={styles.button} onPress={this.filterBlogs} testID="BlogsButton">
             <Icon name="subject" size={ICON_SIZE} color={filter == 'blogs' ? colors.primary : color} style={styles.icon} />
             <Text style={[styles.buttontext, filter == 'blogs' ? styles.buttontextSelected : null]}>{i18n.t('blogs.blogs').toUpperCase()}</Text>
           </TouchableOpacity>

src/common/components/FeedList.js

@@ -144,7 +144,7 @@ export default class FeedList extends Component {
 
     if (this.props.feedStore.loading && !this.props.feedStore.refreshing){
       return (
-        <View style={[CS.centered, CS.padding3x]}>
+        <View style={[CS.centered, CS.padding3x]} testID="ActivityIndicatorView">
           <ActivityIndicator size={'large'} />
         </View>
       );

src/newsfeed/activity/Activity.js

@@ -98,7 +98,7 @@ export default class Activity extends Component {
 
 
     return (
-        <View style={[styles.container, this.props.isReminded ? null : CommonStyle.hairLineBottom]} onLayout={this.props.onLayout}>
+        <View style={[styles.container, this.props.isReminded ? null : CommonStyle.hairLineBottom]} onLayout={this.props.onLayout} testID="ActivityView">
           <Pinned entity={this.props.entity}/>
           { this.showOwner() }
             { lock }

src/topbar/Topbar.js

@@ -54,7 +54,7 @@ export default class Topbar extends Component {
               width={38}
               height={38}
               onPress={() => this.props.navigation.push('Channel', { guid: this.props.user.me.guid })}
-              {...testID('topbar avatar button')} 
+              testID="AvatarButton"
             /> }
           </View>