From e782776ab5f0290946c71235f68c13e72f693e00 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 22 Nov 2017 02:37:58 -0300 Subject: [PATCH] refactor changeUsername - Product question, --- .../src/components/BannedAccount.js | 17 ++ .../src/components/ChangeUsername.js | 59 ++--- .../src/components/Stream.js | 13 +- .../client/components/ChangeUsername.js | 14 +- test/e2e/page_objects/embedStream.js | 4 +- test/e2e/specs/04_userStatus.js | 224 +++++++++--------- 6 files changed, 167 insertions(+), 164 deletions(-) create mode 100644 client/coral-embed-stream/src/components/BannedAccount.js diff --git a/client/coral-embed-stream/src/components/BannedAccount.js b/client/coral-embed-stream/src/components/BannedAccount.js new file mode 100644 index 000000000..639ba78ef --- /dev/null +++ b/client/coral-embed-stream/src/components/BannedAccount.js @@ -0,0 +1,17 @@ +import React, {Component} from 'react'; +import t from 'coral-framework/services/i18n'; +import RestrictedMessageBox from 'coral-framework/components/RestrictedMessageBox'; + +class BannedAccount extends Component { + render () { + return ( + + + {t('framework.banned_account_header')}
{t('framework.banned_account_body')} + + + ); + } +} + +export default BannedAccount; diff --git a/client/coral-embed-stream/src/components/ChangeUsername.js b/client/coral-embed-stream/src/components/ChangeUsername.js index 3d2847ced..00fd5679e 100644 --- a/client/coral-embed-stream/src/components/ChangeUsername.js +++ b/client/coral-embed-stream/src/components/ChangeUsername.js @@ -37,7 +37,6 @@ class ChangeUsername extends Component { } else { this.setState({alert: t('framework.edit_name.error')}); } - } render () { @@ -45,40 +44,34 @@ class ChangeUsername extends Component { const {username, alert} = this.state; return - { - canEditName ? - t('framework.edit_name.msg') - : + {canEditName && +
- {t('framework.banned_account_header')}
{t('framework.banned_account_body')} + {t('framework.edit_name.msg')} - } - { - canEditName ? -
-
- {alert} -
- - this.setState({username: e.target.value})} - rows={3}/>
- -
: null +
+ {alert} +
+ + this.setState({username: e.target.value})} + rows={3}/>
+ +
} ; } diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js index bf9ed351b..32c5b9f72 100644 --- a/client/coral-embed-stream/src/components/Stream.js +++ b/client/coral-embed-stream/src/components/Stream.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {StreamError} from './StreamError'; import Comment from '../containers/Comment'; +import BannedAccount from './BannedAccount'; import ChangeUsername from '../containers/ChangeUsername'; import Slot from 'coral-framework/components/Slot'; import InfoBox from 'talk-plugin-infobox/InfoBox'; @@ -208,7 +209,6 @@ class Stream extends React.Component { updateItem, viewAllComments, auth: {loggedIn, user}, - editName, } = this.props; const {keepCommentBox} = this.state; const open = !asset.isClosed; @@ -263,11 +263,12 @@ class Stream extends React.Component { timeago(suspensionUntil) )} } - {rejectedUsername && - } + {!banned && rejectedUsername && + } + {banned && } {showCommentBox && { e.preventDefault(); - const {errors} = this.state; + const {errors, formData: {username}} = this.state; const {validForm, invalidForm} = this.props; this.displayErrors(); if (this.isCompleted() && !Object.keys(errors).length) { - this.props.createUsername(this.props.auth.user.id, this.state.formData); + this.props.changeUsername(this.props.auth.user.id, username); validForm(); } else { invalidForm(t('createdisplay.check_the_form')); @@ -125,7 +127,6 @@ class ChangeUsernameContainer extends React.Component { ChangeUsernameContainer.propTypes = { auth: PropTypes.object, hideCreateUsernameDialog: PropTypes.func, - createUsername: PropTypes.func, validForm: PropTypes.func, invalidForm: PropTypes.func, loggedIn: PropTypes.bool, @@ -148,6 +149,7 @@ const mapDispatchToProps = (dispatch) => dispatch ); -export default connect(mapStateToProps, mapDispatchToProps)( - ChangeUsernameContainer -); +export default compose( + withChangeUsername, + connect(mapStateToProps, mapDispatchToProps) +)(ChangeUsernameContainer); diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js index 1cecad2a3..4177f5925 100644 --- a/test/e2e/page_objects/embedStream.js +++ b/test/e2e/page_objects/embedStream.js @@ -108,8 +108,8 @@ module.exports = { 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', restrictedMessageBox: '.talk-restricted-message-box', - suspendedAccountInput: '.talk-suspended-account-username-input', - suspendedAccountSubmitButton: '.talk-suspended-account-submit-button', + changeUsernameInput: '.talk-change-username-username-input', + changeUsernameSubmitButton: '.talk-change-username-submit-button', }, sections: { flag: { diff --git a/test/e2e/specs/04_userStatus.js b/test/e2e/specs/04_userStatus.js index cf1d5208e..7f387a061 100644 --- a/test/e2e/specs/04_userStatus.js +++ b/test/e2e/specs/04_userStatus.js @@ -1,118 +1,108 @@ module.exports = { - - before: (client) => { - client.resizeWindow(1600, 1200); - }, - - afterEach: (client, done) => { - if (client.currentTest.results.failed) { - throw new Error('Test Case failed, skipping all the rest'); - } - done(); - }, - - after: (client) => { - client.end(); - }, - - 'admin logs in': (client) => { - const adminPage = client.page.admin(); - const {testData: {admin}} = client.globals; - - adminPage.navigateAndLogin(admin); - }, - 'admin flags user\'s username as offensive': (client) => { - const embedStream = client.page.embedStream(); - - const comments = embedStream - .navigate() - .ready(); - - comments - .waitForElementVisible('@firstComment') - .waitForElementVisible('@flagButton') - .click('@flagButton'); - - comments.section.flag - .waitForElementVisible('@flagUsernameRadio') - .click('@flagUsernameRadio') - .waitForElementVisible('@continueButton') - .click('@continueButton') - .waitForElementVisible('@offensiveUsernameRadio') - .click('@offensiveUsernameRadio') - .click('@continueButton') - .waitForElementVisible('@popUpText') - .click('@continueButton'); - }, - 'admin goes to Reported Usernames': (client) => { - const adminPage = client.page.admin(); - - const community = adminPage - .navigate() - .ready() - .goToCommunity(); - - community - .waitForElementVisible('@flaggedAccountsContainer') - .waitForElementVisible('@flaggedUser'); - }, - 'admin rejects the user flag': (client) => { - const community = client.page.admin().section.community; - - community - .waitForElementVisible('@flaggedUserRejectButton') - .click('@flaggedUserRejectButton'); - }, - 'admin suspends the user': (client) => { - const community = client.page.admin().section.community; - - community - .waitForElementVisible('@usernameDialog') - .waitForElementVisible('@usernameDialogButtons') - .waitForElementVisible('@usernameDialogSuspend') - .click('@usernameDialogSuspend') - .waitForElementVisible('@usernameDialogSuspensionMessage') - .click('@usernameDialogSuspend') - .waitForElementNotPresent('@flaggedUser'); - }, - 'admin logs out': (client) => { - client.page.admin().logout(); - }, - 'user logs in': (client) => { - const {testData: {user}} = client.globals; - const embedStream = client.page.embedStream(); - - embedStream - .navigate() - .ready() - .openLoginPopup((popup) => popup.login(user)); - }, - 'user account is suspended, should see restricted message box': (client) => { - const embedStream = client.page.embedStream(); - const comments = embedStream.section.comments; - - comments - .waitForElementVisible('@restrictedMessageBox'); - }, - 'user picks another username': (client) => { - const embedStream = client.page.embedStream(); - const comments = embedStream.section.comments; - const {testData: {user}} = client.globals; - - comments - .waitForElementVisible('@suspendedAccountInput') - .setValue('@suspendedAccountInput', `${user.username}_alternative`) - .waitForElementVisible('@suspendedAccountSubmitButton') - .click('@suspendedAccountSubmitButton') - .waitForElementNotPresent('@suspendedAccountInput'); - }, - 'user should not be able to comment': (client) => { - const embedStream = client.page.embedStream(); - const comments = embedStream.section.comments; - - comments - .waitForElementNotPresent('@commentBoxTextarea') - .waitForElementNotPresent('@commentBoxPostButton'); - }, - }; - \ No newline at end of file + before: (client) => { + client.resizeWindow(1600, 1200); + }, + + afterEach: (client, done) => { + if (client.currentTest.results.failed) { + throw new Error('Test Case failed, skipping all the rest'); + } + done(); + }, + + after: (client) => { + client.end(); + }, + + 'admin logs in': (client) => { + const adminPage = client.page.admin(); + const {testData: {admin}} = client.globals; + + adminPage.navigateAndLogin(admin); + }, + 'admin flags user\'s username as offensive': (client) => { + const embedStream = client.page.embedStream(); + + const comments = embedStream + .navigate() + .ready(); + + comments + .waitForElementVisible('@firstComment') + .waitForElementVisible('@flagButton') + .click('@flagButton'); + + comments.section.flag + .waitForElementVisible('@flagUsernameRadio') + .click('@flagUsernameRadio') + .waitForElementVisible('@continueButton') + .click('@continueButton') + .waitForElementVisible('@offensiveUsernameRadio') + .click('@offensiveUsernameRadio') + .click('@continueButton') + .waitForElementVisible('@popUpText') + .click('@continueButton'); + }, + 'admin goes to Reported Usernames': (client) => { + const adminPage = client.page.admin(); + + const community = adminPage + .navigate() + .ready() + .goToCommunity(); + + community + .waitForElementVisible('@flaggedAccountsContainer') + .waitForElementVisible('@flaggedUser'); + }, + 'admin rejects the user flag': (client) => { + const community = client.page.admin().section.community; + + community + .waitForElementVisible('@flaggedUserRejectButton') + .click('@flaggedUserRejectButton'); + }, + 'admin suspends the user': (client) => { + const community = client.page.admin().section.community; + + community + .waitForElementVisible('@usernameDialog') + .waitForElementVisible('@usernameDialogButtons') + .waitForElementVisible('@usernameDialogSuspend') + .click('@usernameDialogSuspend') + .waitForElementVisible('@usernameDialogSuspensionMessage') + .click('@usernameDialogSuspend') + .waitForElementNotPresent('@flaggedUser'); + }, + 'admin logs out': (client) => { + client.page.admin().logout(); + }, + 'user logs in': (client) => { + const {testData: {user}} = client.globals; + const embedStream = client.page.embedStream(); + + embedStream + .navigate() + .ready() + .openLoginPopup((popup) => popup.login(user)); + }, + 'user account is suspended, should see restricted message box': (client) => { + const embedStream = client.page.embedStream(); + const comments = embedStream.section.comments; + + comments + .waitForElementVisible('@restrictedMessageBox'); + }, + 'user picks another username': (client) => { + const embedStream = client.page.embedStream(); + const comments = embedStream.section.comments; + const {testData: {user}} = client.globals; + + comments + .waitForElementVisible('@changeUsernameInput') + .setValue('@changeUsernameInput', `${user.username}_alternative`) + .waitForElementVisible('@changeUsernameSubmitButton') + .click('@changeUsernameSubmitButton') + .waitForElementNotPresent('@changeUsernameInput'); + } +};