Test logouts and approves after commenting

client/coral-admin/src/components/Comment.js

@@ -30,7 +30,7 @@ export default props => {
         <div>
           {links ?
           <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
-          <div className={styles.actions}>
+          <div className={`actions ${styles.actions}`}>
             {props.actions.map((action, i) => getActionButton(action, i, props))}
           </div>
         </div>
@@ -63,19 +63,21 @@ const getActionButton = (action, i, props) => {
   if (action === 'ban') {
     return (
       <Button
-        disabled={banned ? 'disabled' : ''}
+        className='ban'
         cStyle='black'
+        disabled={banned ? 'disabled' : ''}
         onClick={() => props.onClickShowBanDialog(author.id, author.displayName, comment.id)}
-        key={i} >
+        key={i}
+      >
         {lang.t('comment.ban_user')}
       </Button>
     );
   }
   return (
     <FabButton
-      className={styles.actionButton}
-      icon={props.actionsMap[action].icon}
+      className={`${action} ${styles.actionButton}`}
       cStyle={action}
+      icon={props.actionsMap[action].icon}
       key={i}
       onClick={() => props.onClickAction(props.actionsMap[action].status, comment.id)}
     />

client/coral-admin/src/components/CommentList.js

@@ -126,7 +126,10 @@ export default class CommentList extends React.Component {
     const {active} = this.state;
 
     return (
-      <ul className={`${styles.list} ${singleView ? styles.singleView : ''}`} {...key}>
+      <ul
+        className={`${styles.list} ${singleView ? styles.singleView : ''}`} {...key}
+        id='commentList'
+      >
         {commentIds.map((commentId, index) => {
           const comment = comments[commentId];
           const author = users[comment.author_id];

client/coral-sign-in/components/UserBox.js

@@ -9,7 +9,9 @@ const UserBox = ({className, user, logout, ...props}) => (
     className={`${styles.userBox} ${className ? className : ''}`}
     {...props}
   >
-    {lang.t('signIn.loggedInAs')} <a>{user.displayName}</a>. {lang.t('signIn.notYou')} <a onClick={logout}>{lang.t('signIn.logout')}</a>
+    {lang.t('signIn.loggedInAs')}
+    <a>{user.displayName}</a>. {lang.t('signIn.notYou')}
+    <a onClick={logout} id='logout'>{lang.t('signIn.logout')}</a>
   </div>
 );
 

client/coral-sign-in/components/styles.css

@@ -113,6 +113,7 @@ input.error{
     font-weight: bold;
     cursor: pointer;
     margin: 0px;
+    margin-left: 4px;
     padding-bottom: 2px;
     border-bottom: solid 1px black;
 }

tests/e2e/pages/adminPage.js

@@ -0,0 +1,34 @@
+const embedStreamCommands = {
+  url: function () {
+    return this
+      .api.launchUrl + '/admin';
+  },
+  ready() {
+    return this
+      .waitForElementVisible('body', 2000);
+  },
+  approveComment() {
+    return this
+      .waitForElementVisible('@commentList')
+      .waitForElementVisible('@approveButton')
+      .click('@approveButton');
+  }
+};
+
+export default {
+  commands: [embedStreamCommands],
+  elements: {
+    commentList: {
+      selector: '#commentList'
+    },
+    banButton: {
+      selector: '#commentList .actions:first-child .ban'
+    },
+    rejectButton: {
+      selector: '#commentList .actions:first-child .reject'
+    },
+    approveButton: {
+      selector: '#commentList .actions:first-child .approve'
+    }
+  }
+};

tests/e2e/pages/embedStreamPage.js

@@ -19,7 +19,14 @@ const embedStreamCommands = {
       .setValue('@signInDialogEmail', user.email)
       .setValue('@signInDialogPassword', user.pass)
       .waitForElementVisible('@logInButton')
-      .click('@logInButton');
+      .click('@logInButton')
+      .waitForElementVisible('@logoutButton', 5000);
+  },
+  logout() {
+    return this
+      .waitForElementVisible('@logoutButton')
+      .click('@logoutButton')
+      .waitForElementVisible('@signInButton', 2000);
   },
   postComment(comment = 'Test Comment') {
     return this
@@ -47,6 +54,9 @@ export default {
     logInButton: {
       selector: '#coralLogInButton'
     },
+    logoutButton: {
+      selector: '.commentStream #logout'
+    },
     commentBox: {
       selector: '.coral-plugin-commentbox-textarea'
     },

tests/e2e/tests/Commenter/PostComment.js

@@ -18,6 +18,21 @@ module.exports = {
       .postComment('I read the comments');
   },
   after: client => {
+    const adminPage = client.page.adminPage();
+    const embedStreamPage = client.page.embedStreamPage();
+    const {users} = client.globals;
+
+    embedStreamPage
+      .logout()
+      .login(users.admin);
+
+    adminPage
+      .navigate()
+      .ready();
+
+    adminPage
+      .approveComment();
+
     client.end();
   }
 };