Updated tests and Drawer component

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

@@ -138,7 +138,7 @@ class UserDetail extends React.Component {
 
     return (
       <ClickOutside onClickOutside={hideUserDetail}>
-        <Drawer onClose={hideUserDetail}>
+        <Drawer className="talk-admin-user-detail-drawer" onClose={hideUserDetail}>
           <h3 className={cn(styles.username, 'talk-admin-user-detail-username')}>
             {user.username}
           </h3>

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

@@ -56,13 +56,13 @@ class Comment extends React.Component {
         <div className={styles.container}>
           <div className={styles.itemHeader}>
             <div className={styles.author}>
-              {
-                (
-                  <span className={styles.username} onClick={this.viewUserDetail}>
-                    {comment.user.username}
-                  </span>
-                )
-              }
+
+              <span
+                className={cn(styles.username, 'talk-admin-moderate-comment-username')}
+                onClick={this.viewUserDetail}>
+                {comment.user.username}
+              </span>
+
               <span className={styles.created}>
                 {timeago(comment.created_at)}
               </span>

client/coral-ui/components/Drawer.js

@@ -1,10 +1,11 @@
 import React from 'react';
+import cn from 'classnames';
 import PropTypes from 'prop-types';
 import styles from './Drawer.css';
 
-const Drawer = ({children, onClose}) => {
+const Drawer = ({children, onClose, className = ''}) => {
   return (
-    <div className={styles.drawer}>
+    <div className={cn(styles.drawer, className)}>
       <div className={styles.closeButton} onClick={onClose}>×</div>
       <div className={styles.content}>
         {children}
@@ -15,7 +16,9 @@ const Drawer = ({children, onClose}) => {
 
 Drawer.propTypes = {
   active: PropTypes.bool,
-  onClose: PropTypes.func.isRequired
+  onClose: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  className: PropTypes.string,
 };
 
 export default Drawer;

test/e2e/page_objects/admin.js

@@ -65,9 +65,7 @@ module.exports = {
       selector: '.talk-admin-moderation-container',
       elements: {
         comment: '.talk-admin-moderate-comment',
-        commentActionMenu: '.talk-admin-moderate-comment-actions-menu',
-        actionItemSuspendUser: '.action-menu-item#suspendUser',
-        actionMenuButton: '.talk-admin-moderate-comment-actions-menu #actions-dropdown-0'
+        commentUsername: '.talk-admin-moderate-comment-username',
       }
     },
     stories: {
@@ -116,6 +114,14 @@ module.exports = {
         }
       }
     },
+    userDetailDrawer: {
+      selector: '.talk-admin-user-detail-drawer',
+      elements: {
+        'actionsMenu': '.talk-admin-user-detail-actions-button',
+        'actionItemSuspendUser': '.action-menu-item#suspendUser',
+        'actionMenuButton': '.talk-admin-user-detail-actions-menu #actions-dropdown-0',
+      }
+    },
     drawer: {
       selector: '.talk-admin-drawer-nav',
       commands: [{

test/e2e/specs/06_suspendUser.js

@@ -82,7 +82,7 @@ module.exports = {
   },
   'admin suspends user': (client) => {
     const adminPage = client.page.admin();
-    const moderate = adminPage.section.moderate;
+    const {moderate, userDetailDrawer} = adminPage.section;
     
     adminPage
       .navigate()
@@ -91,8 +91,11 @@ module.exports = {
 
     moderate
       .waitForElementVisible('@comment')
-      .waitForElementVisible('@commentActionMenu')
-      .waitForElementVisible('@actionMenuButton')
+      .waitForElementVisible('@commentUsername')
+      .click('@commentUsername');
+
+    userDetailDrawer
+      .waitForElementVisible('@actionsMenu')
       .click('@actionMenuButton')
       .waitForElementVisible('@actionItemSuspendUser')
       .click('@actionItemSuspendUser');