From 302d30cde1fe39412756686018b444370eec2c68 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Oct 2017 08:54:32 -0300
Subject: [PATCH] Adding missing classnames and proptypes, plus e2e testing
 covering userstatus

---
 .../coral-admin/src/components/ui/Header.js   |   6 +-
 .../Community/components/FlaggedUser.js       |   8 +-
 .../components/RejectUsernameDialog.js        |  27 +++--
 .../src/components/SuspendedAccount.js        |  10 +-
 .../components/RestrictedContent.js           |  15 ++-
 .../components/RestrictedMessageBox.js        |  11 +-
 test/e2e/page_objects/admin.js                |   2 +
 test/e2e/page_objects/adminCommunity.js       |   8 ++
 test/e2e/page_objects/embedStream.js          |   9 +-
 test/e2e/specs/02_admin.js                    |   1 +
 test/e2e/specs/04_userStatus.js               | 103 +++++++++++++++++-
 11 files changed, 168 insertions(+), 32 deletions(-)

diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index c5af63786..bd7fbcf0c 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -76,9 +76,9 @@ const CoralHeader = ({
           }
           <div className={styles.rightPanel}>
             <ul>
-              <li className={styles.settings}>
+              <li className={cn(styles.settings, 'talk-admin-header-settings')}>
                 <div>
-                  <IconButton name="settings" id="menu-settings"/>
+                  <IconButton name="settings" id="menu-settings" className="talk-admin-header-settings-button"/>
                   <Menu target="menu-settings" align="right">
                     <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
                     <MenuItem>
@@ -91,7 +91,7 @@ const CoralHeader = ({
                           Report a bug or give feedback
                       </a>
                     </MenuItem>
-                    <MenuItem onClick={handleLogout}>
+                    <MenuItem onClick={handleLogout} className="talk-admin-header-sign-out">
                       {t('configure.sign_out')}
                     </MenuItem>
                   </Menu>
diff --git a/client/coral-admin/src/routes/Community/components/FlaggedUser.js b/client/coral-admin/src/routes/Community/components/FlaggedUser.js
index 69f94179d..b2156f479 100644
--- a/client/coral-admin/src/routes/Community/components/FlaggedUser.js
+++ b/client/coral-admin/src/routes/Community/components/FlaggedUser.js
@@ -45,10 +45,8 @@ class User extends React.Component {
     } = this.props;
 
     return (
-      <li
-        tabIndex={0}
-        className={cn(className, styles.root, {[styles.rootSelected]: selected})}
-      >
+      <li tabIndex={0}
+        className={cn(className, styles.root, {[styles.rootSelected]: selected})} >
         <div className={cn('talk-admin-community-flagged-user', styles.container)}>
           <div className={cn('talk-admin-community-flagged-user-header', styles.header)}>
             <div className={styles.author}>
@@ -140,7 +138,7 @@ class User extends React.Component {
 User.propTypes = {
   showSuspendUserDialog: PropTypes.func,
   showBanUserDialog: PropTypes.func,
-  viewUserDetail: PropTypes.object,
+  viewUserDetail: PropTypes.func,
   showRejectUsernameDialog: PropTypes.func,
   approveUser: PropTypes.func,
   user: PropTypes.object,
diff --git a/client/coral-admin/src/routes/Community/components/RejectUsernameDialog.js b/client/coral-admin/src/routes/Community/components/RejectUsernameDialog.js
index 20c411e52..18e9394a5 100644
--- a/client/coral-admin/src/routes/Community/components/RejectUsernameDialog.js
+++ b/client/coral-admin/src/routes/Community/components/RejectUsernameDialog.js
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-
+import cn from 'classnames';
 import {Dialog, Button} from 'coral-ui';
 import styles from './RejectUsernameDialog.css';
 
@@ -29,12 +29,6 @@ class RejectUsernameDialog extends Component  {
 
   state = {email: '', stage: 0}
 
-  static propTypes = {
-    stage: PropTypes.number,
-    handleClose: PropTypes.func.isRequired,
-    rejectUsername: PropTypes.func.isRequired
-  }
-
   componentDidMount() {
     this.setState({email: t('reject_username.email_message_reject'), about: t('reject_username.username')});
   }
@@ -76,7 +70,7 @@ class RejectUsernameDialog extends Component  {
     const {stage} = this.state;
 
     return <Dialog
-      className={styles.suspendDialog}
+      className={cn(styles.suspendDialog, 'talk-reject-username-dialog')}
       id="rejectUsernameDialog"
       open={open}
       onClose={handleClose}
@@ -96,15 +90,18 @@ class RejectUsernameDialog extends Component  {
                   <div className={styles.emailContainer}>
                     <textarea
                       rows={5}
-                      className={styles.emailInput}
+                      className={cn(styles.emailInput, 'talk-reject-username-dialog-suspension-message')}
                       value={this.state.email}
                       onChange={this.onEmailChange}/>
                   </div>
                 </div>
         }
-        <div className={styles.modalButtons}>
+        <div className={cn(styles.modalButtons, 'talk-reject-username-dialog-buttons')}>
           {Object.keys(stages[stage].options).map((key, i) => (
-            <Button key={i} onClick={this.onActionClick(stage, i)}>
+            <Button
+              key={i}
+              className={cn('talk-reject-username-dialog-button', `talk-reject-username-dialog-button-${key}`)}
+              onClick={this.onActionClick(stage, i)} >
               {t(stages[stage].options[key], t('reject_username.username'))}
             </Button>
           ))}
@@ -114,4 +111,12 @@ class RejectUsernameDialog extends Component  {
   }
 }
 
+RejectUsernameDialog.propTypes = {
+  stage: PropTypes.number,
+  handleClose: PropTypes.func.isRequired,
+  rejectUsername: PropTypes.func.isRequired,
+  user: PropTypes.object,
+  open: PropTypes.bool,
+};
+
 export default RejectUsernameDialog;
diff --git a/client/coral-embed-stream/src/components/SuspendedAccount.js b/client/coral-embed-stream/src/components/SuspendedAccount.js
index 903b1bcf4..ce9a1c23c 100644
--- a/client/coral-embed-stream/src/components/SuspendedAccount.js
+++ b/client/coral-embed-stream/src/components/SuspendedAccount.js
@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 import styles from './SuspendAccount.css';
 import {Button} from 'coral-ui';
@@ -66,17 +67,16 @@ class SuspendedAccount extends Component {
             </label>
             <input
               type='text'
-              className={styles.editNameInput}
+              className={cn(styles.editNameInput, 'talk-suspended-account-username-input')}
               value={username}
               placeholder={t('framework.edit_name.label')}
               id='username'
               onChange={(e) => this.setState({username: e.target.value})}
               rows={3}/><br/>
             <Button
-              onClick={this.onSubmitClick}>
-              {
-                t('framework.edit_name.button')
-              }
+              className="talk-suspended-account-submit-button"
+              onClick={this.onSubmitClick} >
+              {t('framework.edit_name.button')}
             </Button>
           </div> : null
       }
diff --git a/client/coral-framework/components/RestrictedContent.js b/client/coral-framework/components/RestrictedContent.js
index 01c5ddd93..02df566a4 100644
--- a/client/coral-framework/components/RestrictedContent.js
+++ b/client/coral-framework/components/RestrictedContent.js
@@ -1,16 +1,25 @@
 import React from 'react';
-
+import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
 import RestrictedMessageBox from './RestrictedMessageBox';
 
-export default ({children, restricted, message = t('framework.content_not_available'), restrictedComp}) => {
+const RestrictedContent = ({children, restricted, message = t('framework.content_not_available'), restrictedComp}) => {
   if (restricted) {
     return restrictedComp ? restrictedComp : <RestrictedMessageBox message={message} />;
   } else {
     return (
-      <div>
+      <div className="talk-restricted-content">
         {children}
       </div>
     );
   }
 };
+
+RestrictedContent.propTypes = {
+  children: PropTypes.node,
+  restricted: PropTypes.bool,
+  message: PropTypes.string,
+  restrictedComp: PropTypes.node,
+};
+
+export default RestrictedContent;
diff --git a/client/coral-framework/components/RestrictedMessageBox.js b/client/coral-framework/components/RestrictedMessageBox.js
index c579a4731..05c8c89aa 100644
--- a/client/coral-framework/components/RestrictedMessageBox.js
+++ b/client/coral-framework/components/RestrictedMessageBox.js
@@ -1,4 +1,13 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
 import styles from './RestrictedMessageBox.css';
 
-export default ({children}) => <div className={styles.message}>{children}</div>;
+const RestrictedMessageBox = ({children}) => 
+  <div className={cn(styles.message, 'talk-restricted-message-box')}>{children}</div>;
+
+RestrictedMessageBox.propTypes = {
+  children: PropTypes.node,
+};
+
+export default RestrictedMessageBox;
diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index 92f2ac0e1..94ce82826 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -23,5 +23,7 @@ module.exports = {
     'moderationContainer': '.talk-admin-moderation-container',
     'drawerButton': '.mdl-layout__drawer-button',
     'drawerOverlay': 'div.mdl-layout__obfuscator.is-visible',
+    'settingsButton': '.talk-admin-header-settings-button',
+    'signOutButton': '.talk-admin-header-sign-out',
   }
 };
diff --git a/test/e2e/page_objects/adminCommunity.js b/test/e2e/page_objects/adminCommunity.js
index 6eca507a6..ef3ccbb4c 100644
--- a/test/e2e/page_objects/adminCommunity.js
+++ b/test/e2e/page_objects/adminCommunity.js
@@ -10,5 +10,13 @@ module.exports = {
   }],
   elements: {
     container: '.talk-admin-community',
+    flaggedAccountsContainer: '.talk-adnin-community-flagged-accounts',
+    flaggedUser:'.talk-admin-community-flagged-user',
+    flaggedUserApproveButton: '.talk-admin-flagged-user-approve-button',
+    flaggedUserRejectButton: '.talk-admin-flagged-user-reject-button',
+    usernameDialog: '.talk-reject-username-dialog',
+    usernameDialogButtons: '.talk-reject-username-dialog-buttons',
+    usernameDialogSuspend: '.talk-reject-username-dialog-button-k',
+    usernameDialogSuspensionMessage: '.talk-reject-username-dialog-suspension-message'
   }
 };
diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index dd90f66b0..85a0480da 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -44,7 +44,10 @@ module.exports = {
         firstComment: '.talk-stream-comment.talk-stream-comment-level-0',
         firstCommentContent: '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-content',
         flagButton: '.talk-stream-comment.talk-stream-comment-level-0 .talk-plugin-flags-button',
-        respectButton: '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-footer .talk-plugin-respect-button'
+        respectButton: '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-footer .talk-plugin-respect-button',
+        restrictedMessageBox: '.talk-restricted-message-box',
+        suspendedAccountInput: '.talk-suspended-account-username-input',
+        suspendedAccountSubmitButton: '.talk-suspended-account-submit-button',
       },
       sections: {
         flag: {
@@ -53,7 +56,7 @@ module.exports = {
             offensiveUsernameRadio: '.talk-plugin-flags-popup-radio#USERNAME_OFFENSIVE',
             flagUsernameRadio: '.talk-plugin-flags-popup-radio#USERS',
             continueButton: '.talk-plugin-flags-popup-button',
-            popUpText: '.talk-plugin-flags-popup-text'
+            popUpText: '.talk-plugin-flags-popup-text',
           }
         },
         profile: {
@@ -63,7 +66,7 @@ module.exports = {
             myCommentHistory: '.talk-my-profile-comment-history',
             myCommentHistoryReactions: '.talk-my-profile-comment-history .comment-summary .comment-summary-reactions',
             myCommentHistoryReactionCount: '.talk-my-profile-comment-history .comment-summary .comment-summary-reactions .comment-summary-reaction-count',
-            myCommentHistoryComment: '.talk-my-profile-comment-history .my-comment-body'
+            myCommentHistoryComment: '.talk-my-profile-comment-history .my-comment-body',
           },
         },
         comments: {
diff --git a/test/e2e/specs/02_admin.js b/test/e2e/specs/02_admin.js
index 4a60780bb..432666a38 100644
--- a/test/e2e/specs/02_admin.js
+++ b/test/e2e/specs/02_admin.js
@@ -51,6 +51,7 @@ module.exports = {
       .click('@drawerOverlay')
       .waitForElementVisible('@communitySection');
   },
+
   after: (client) => {
     client.end();
   }
diff --git a/test/e2e/specs/04_userStatus.js b/test/e2e/specs/04_userStatus.js
index f3eaee0c6..32bf6b72a 100644
--- a/test/e2e/specs/04_userStatus.js
+++ b/test/e2e/specs/04_userStatus.js
@@ -48,7 +48,108 @@ module.exports = {
       .navigate();
 
     community
-      .waitForElementVisible('@container');
+      .waitForElementVisible('@container')
+      .waitForElementVisible('@flaggedAccountsContainer')
+      .waitForElementVisible('@flaggedUser');
+  },
+  'admin rejects the user flag': (client) => {
+    const community = client.page.adminCommunity();
+    
+    community
+      .waitForElementVisible('@flaggedUserRejectButton')
+      .click('@flaggedUserRejectButton');
+  },
+  'admin suspends the user': (client) => {
+    const community = client.page.adminCommunity();
+    
+    community
+      .waitForElementVisible('@usernameDialog')
+      .waitForElementVisible('@usernameDialogButtons')
+      .waitForElementVisible('@usernameDialogSuspend')
+      .click('@usernameDialogSuspend')
+      .waitForElementVisible('@usernameDialogSuspensionMessage')
+      .click('@usernameDialogSuspend')
+      .waitForElementNotPresent('@flaggedUser');
+  },
+  'admin logs out': (client) => {
+    const admin = client.page.admin();
+
+    admin
+      .waitForElementVisible('@settingsButton')
+      .click('@settingsButton')
+      .waitForElementVisible('@signOutButton')
+      .click('@signOutButton');
+  },
+  'user logs in': (client) => {
+    const {testData: {user}} = client.globals;
+    const embedStream = client.page.embedStream();
+
+    const embed = embedStream
+      .navigate()
+      .getEmbedSection();
+
+    embed
+      .waitForElementVisible('@signInButton')
+      .click('@signInButton');
+
+    client.pause(3000);
+
+    // Focusing on the Login PopUp
+    client.windowHandles((result) => {
+      const handle = result.value[1];
+      client.switchWindow(handle);
+    });
+
+    const login = client.page.login();
+
+    login
+      .setValue('@emailInput', user.email)
+      .setValue('@passwordInput', user.password)
+      .waitForElementVisible('@signIn')
+      .waitForElementVisible('@loginButton')
+      .click('@loginButton');
+
+    // Focusing on the Embed Window
+    client.windowHandles((result) => {
+      const handle = result.value[0];
+      client.switchWindow(handle);
+    });
+  },
+  'user account is suspended, should see restricted message box': (client) => {
+    const embedStream = client.page.embedStream();
+
+    const embed = embedStream
+      .navigate()
+      .getEmbedSection();
+
+    embed
+      .waitForElementVisible('@restrictedMessageBox');
+  },
+
+  'user picks another username': (client) => {
+    const {testData: {user}} = client.globals;
+    const embedStream = client.page.embedStream();
+    
+    const embed = embedStream
+      .navigate()
+      .getEmbedSection();
+
+    embed
+      .waitForElementVisible('@suspendedAccountInput')
+      .setValue('@suspendedAccountInput', `${user.username}-alternative`)
+      .waitForElementVisible('@suspendedAccountSubmitButton')
+      .click('@suspendedAccountSubmitButton');
+  },
+  'user should not be able to comment': (client) => {
+    const embedStream = client.page.embedStream();
+    
+    const embed = embedStream
+      .navigate()
+      .getEmbedSection();
+
+    embed
+      .waitForElementNotPresent('@commentBoxTextarea')
+      .waitForElementNotPresent('@commentBoxPostButton');
   },
   after: (client) => {
     client.end();