wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-06-28 23:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master'

Browse Source 
Conflicts:
	client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
This commit is contained in:
Riley Davis
2016-12-20 14:51:36 -07:00
parent 8849dcbf5c 9d22dcd0d4
commit 652a41971b
38 changed files with 8018 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.babelrc
+7 -8
View File
@@ -1,16 +1,15 @@
{
"sourceMaps": true,
"presets": [
"stage-0",
"es2015"
],
"plugins": [
["transform-decorators-legacy"],
["transform-react-jsx"],
["transform-object-assign"],
["transform-class-properties"],
["transform-async-to-generator"],
["transform-object-rest-spread"],
["transform-class-properties"]
"add-module-exports",
"transform-async-to-generator",
"transform-class-properties",
"transform-decorators-legacy",
"transform-object-assign",
"transform-object-rest-spread",
"transform-react-jsx"
]
}
client/coral-admin/src/actions/comments.js
+53 -14
View File
@@ -1,30 +1,69 @@
import coralApi from '../../../coral-framework/helpers/response';
import * as commentActions from '../constants/comments';
// Get comments to fill each of the three lists on the mod queue
export const fetchModerationQueueComments = () => {
return dispatch => {
dispatch({type: commentActions.COMMENTS_MODERATION_QUEUE_FETCH});
return Promise.all([
coralApi('/queue/comments/pending'),
coralApi('/comments?status=rejected'),
coralApi('/comments?action_type=flag')
])
.then(([pending, rejected, flagged]) => {
/* Combine seperate calls into a single object */
flagged.comments.forEach(comment => comment.flagged = true);
return {
comments: [...pending.comments, ...rejected.comments, ...flagged.comments],
users: [...pending.users, ...rejected.users, ...flagged.users],
actions: [...pending.actions, ...rejected.actions, ...flagged.actions]
};
})
.then(({comments, users}) => {
/* Post comments and users to redux store. Actions will be posted when they are needed. */
dispatch({type: commentActions.USERS_MODERATION_QUEUE_FETCH_SUCCESS, users});
dispatch({type: commentActions.COMMENTS_MODERATION_QUEUE_FETCH_SUCCESS, comments});
});
};
};
// Create a new comment
export const createComment = (name, body) => {
return dispatch => {
const comment = {body, name};
return coralApi('/comments', {method: 'POST', comment})
.then(res => dispatch({type: commentActions.COMMENT_CREATE_SUCCESS, comment: res}))
.catch(error => dispatch({type: commentActions.COMMENT_CREATE_FAILED, error}));
};
};
/**
* Action disptacher related to comments
*/
export const updateStatus = (status, id) => (dispatch, getState) => {
dispatch({type: 'COMMENT_STATUS_UPDATE', id, status});
dispatch({type: 'COMMENT_UPDATE', comment: getState().comments.get('byId').get(id)});
// Update a comment. Now to update a comment we need to send back the whole object
export const updateStatus = (status, comment) => {
return dispatch => {
dispatch({type: commentActions.COMMENT_STATUS_UPDATE, id: comment.id, status});
return coralApi(`/comments/${comment.id}/status`, {method: 'PUT', body: {status}})
.then(res => dispatch({type: commentActions.COMMENT_UPDATE_SUCCESS, res}))
.catch(error => dispatch({type: commentActions.COMMENT_UPDATE_FAILED, error}));
};
};
export const flagComment = id => (dispatch, getState) => {
dispatch({type: 'COMMENT_FLAG', id});
dispatch({type: commentActions.COMMENT_FLAG, id});
dispatch({type: 'COMMENT_UPDATE', comment: getState().comments.get('byId').get(id)});
};
export const createComment = (name, body) => dispatch => {
dispatch({type: 'COMMENT_CREATE', name, body});
};
// Dialog Actions
export const showBanUserDialog = (userId, userName, commentId) => {
return dispatch => {
dispatch({type: 'SHOW_BANUSER_DIALOG', userId, userName, commentId});
};
return {type: commentActions.SHOW_BANUSER_DIALOG, userId, userName, commentId};
};
export const hideBanUserDialog = (showDialog) => {
return dispatch => {
dispatch({type: 'HIDE_BANUSER_DIALOG', showDialog});
};
return {type: commentActions.HIDE_BANUSER_DIALOG, showDialog};
};
client/coral-admin/src/actions/users.js
+8 -7
View File
@@ -1,14 +1,15 @@
import coralApi from '../../../coral-framework/helpers/response';
import * as actions from '../constants/user';
/**
* Action disptacher related to users
*/
//
// export const banUser = (status, author_id) => (dispatch) => {
// dispatch({type: 'USER_STATUS_UPDATE', author_id, status});
// };
export const banUser = (status, userId, commentId) => {
// change status of a user
export const userStatusUpdate = (status, userId, commentId) => {
return dispatch => {
dispatch({type: 'USER_BAN', status, userId, commentId});
dispatch({type: 'COMMENTS_MODERATION_QUEUE_FETCH'});
dispatch({type: actions.UPDATE_STATUS_REQUEST});
return coralApi(`/users/${userId}/status`, {method: 'POST', body: {status: status, comment_id: commentId}})
.then(res => dispatch({type: actions.UPDATE_STATUS_SUCCESS, res}))
.catch(error => dispatch({type: actions.UPDATE_STATUS_FAILURE, error}));
};
};
client/coral-admin/src/components/Comment.js
+8 -6
View File
@@ -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,21 +63,23 @@ 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)}
onClick={() => props.onClickAction(props.actionsMap[action].status, comment)}
/>
);
};
client/coral-admin/src/components/CommentList.js
+4 -1
View File
@@ -147,7 +147,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-admin/src/constants/comments.js
+10
View File
@@ -1,3 +1,13 @@
export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
export const USER_BAN_SUCESS = 'USER_BAN_SUCESS';
export const USERS_MODERATION_QUEUE_FETCH_SUCCESS = 'USERS_MODERATION_QUEUE_FETCH_SUCCESS';
export const COMMENTS_MODERATION_QUEUE_FETCH = 'COMMENTS_MODERATION_QUEUE_FETCH';
export const COMMENTS_MODERATION_QUEUE_FETCH_SUCCESS = 'COMMENTS_MODERATION_QUEUE_FETCH_SUCCESS';
export const COMMENT_CREATE_SUCCESS = 'COMMENT_CREATE_SUCCESS';
export const COMMENT_CREATE_FAILED = 'COMMENT_CREATE_FAILED';
export const COMMENT_STREAM_FETCH_SUCCESS = 'COMMENT_STREAM_FETCH_SUCCESS';
export const COMMENT_UPDATE_SUCCESS = 'COMMENT_UPDATE_SUCCESS';
export const COMMENT_UPDATE_FAILED = 'COMMENT_UPDATE_FAILED';
export const COMMENT_STATUS_UPDATE = 'COMMENT_STATUS_UPDATE';
export const COMMENT_FLAG = 'COMMENT_FLAG';
client/coral-admin/src/constants/user.js
+3
View File
@@ -0,0 +1,3 @@
export const UPDATE_STATUS_REQUEST = 'UPDATE_STATUS_REQUEST';
export const UPDATE_STATUS_SUCCESS = 'UPDATE_STATUS_SUCCESS';
export const UPDATE_STATUS_FAILURE = 'UPDATE_STATUS_FAILURE';
client/coral-admin/src/containers/Configure/CommentSettings.js
+1
View File
@@ -71,6 +71,7 @@ const updateClosedTimeout = (updateSettings, ts, isMeasure) => (event) => {
const CommentSettings = ({fetchingSettings, title, updateSettings, settingsError, settings, errors}) => {
if (fetchingSettings) {
/* maybe a spinner here at some point */
return <p>Loading settings...</p>;
}
client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
+21 -26
View File
@@ -1,14 +1,18 @@
import React from 'react';
import {connect} from 'react-redux';
import {Icon} from 'react-mdl';
import key from 'keymaster';
import ModerationKeysModal from 'components/ModerationKeysModal';
import CommentList from 'components/CommentList';
import BanUserDialog from 'components/BanUserDialog';
import {updateStatus, showBanUserDialog, hideBanUserDialog} from 'actions/comments';
import {banUser} from 'actions/users';
import {
updateStatus,
showBanUserDialog,
hideBanUserDialog,
fetchModerationQueueComments
} from 'actions/comments';
import {userStatusUpdate} from 'actions/users';
import styles from './ModerationQueue.css';
import I18n from 'coral-framework/modules/i18n/i18n';
@@ -32,7 +36,7 @@ class ModerationQueue extends React.Component {
// Fetch comments and bind singleView key before render
componentWillMount () {
this.props.dispatch({type: 'COMMENTS_MODERATION_QUEUE_FETCH'});
this.props.dispatch(fetchModerationQueueComments());
key('s', () => this.setState({singleView: !this.state.singleView}));
key('shift+/', () => this.setState({modalOpen: true}));
key('esc', () => this.setState({modalOpen: false}));
@@ -55,10 +59,10 @@ class ModerationQueue extends React.Component {
}
// Dispatch the update status action
onCommentAction (action, id) {
onCommentAction (action, comment) {
// If not banning then change the status to approved or flagged as action = status
this.props.dispatch(updateStatus(action, id));
this.props.dispatch(updateStatus(action, comment));
}
showBanUserDialog (userId, userName, commentId) {
@@ -70,11 +74,10 @@ class ModerationQueue extends React.Component {
}
banUser (userId, commentId) {
this.props.dispatch(banUser('banned', userId, commentId));
}
showShortcuts = () => {
this.setState({modalOpen: true});
this.props.dispatch(userStatusUpdate('banned', userId, commentId))
.then(() => {
this.props.dispatch(fetchModerationQueueComments());
});
}
onTabClick (activeTab) {
@@ -102,11 +105,6 @@ class ModerationQueue extends React.Component {
className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.rejected')}</a>
<a href='#flagged' onClick={() => this.onTabClick('flagged')}
className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.flagged')}</a>
<a href='#shortcuts' onClick={this.showShortcuts}
className={`mdl-tabs__tab ${styles.tab} ${styles.showShortcuts}`}>
<Icon name='keyboard' />
<span>{lang.t('modqueue.showshortcuts')}</span>
</a>
</div>
<div className={`mdl-tabs__panel is-active ${styles.listContainer}`} id='pending'>
<CommentList
@@ -117,7 +115,7 @@ class ModerationQueue extends React.Component {
commentIds={premodIds}
comments={comments.byId}
users={users.byId}
onClickAction={(action, commentId) => this.onCommentAction(action, commentId)}
onClickAction={(action, comment) => this.onCommentAction(action, comment)}
onClickShowBanDialog={(userId, userName, commentId) => this.showBanUserDialog(userId, userName, commentId)}
actions={['reject', 'approve', 'ban']}
loading={comments.loading} />
@@ -126,7 +124,7 @@ class ModerationQueue extends React.Component {
handleClose={() => this.hideBanUserDialog()}
onClickBanUser={(userId, commentId) => this.banUser(userId, commentId)}
user={comments.banUser}/>
</div>
</div>
<div className={`mdl-tabs__panel ${styles.listContainer}`} id='rejected'>
<CommentList
commentActions={[]}
@@ -135,30 +133,27 @@ class ModerationQueue extends React.Component {
commentIds={rejectedIds}
comments={comments.byId}
users={users.byId}
onClickAction={(action, id) => this.onCommentAction(action, id)}
onClickAction={(action, comment) => this.onCommentAction(action, comment)}
actions={['approve']}
loading={comments.loading} />
</div>
<div className={`mdl-tabs__panel ${styles.listContainer}`} id='flagged'>
<CommentList
isActive={activeTab === 'rejected'}
commentActions={[]}
isActive={activeTab === 'flagged'}
singleView={singleView}
commentIds={flaggedIds}
comments={comments.byId}
users={users.byId}
onClickAction={(action, id) => this.onCommentAction(action, id)}
onClickAction={(action, comment) => this.onCommentAction(action, comment)}
actions={['reject', 'approve']}
loading={comments.loading} />
</div>
<div className={`mdl-tabs__panel ${styles.listContainer}`} id='shortcuts'>
<ModerationKeysModal open={modalOpen}
onClose={() => this.setState({modalOpen: false})} />
</div>
<ModerationKeysModal open={modalOpen}
onClose={() => this.setState({modalOpen: false})} />
</div>
</div>
);
}
}
client/coral-admin/src/reducers/comments.js
+9 -8
View File
@@ -1,4 +1,5 @@
import * as actions from '../constants/comments';
import * as userActions from '../constants/user';
import {Map, List, fromJS} from 'immutable';
/**
@@ -23,16 +24,16 @@ const initialState = Map({
// Handle the comment actions
export default (state = initialState, action) => {
switch (action.type) {
case 'COMMENTS_MODERATION_QUEUE_FETCH': return state.set('loading', true);
case 'COMMENTS_MODERATION_QUEUE_FETCH_SUCCESS': return replaceComments(action, state);
case 'COMMENTS_MODERATION_QUEUE_FAILED': return state.set('loading', false);
case 'COMMENT_STATUS_UPDATE': return updateStatus(state, action);
case 'COMMENT_FLAG': return flag(state, action);
case 'COMMENT_CREATE_SUCCESS': return addComment(state, action);
case 'COMMENT_STREAM_FETCH_SUCCESS': return replaceComments(action, state);
case actions.COMMENTS_MODERATION_QUEUE_FETCH: return state.set('loading', true);
case actions.COMMENTS_MODERATION_QUEUE_FETCH_SUCCESS: return replaceComments(action, state);
case actions.COMMENTS_MODERATION_QUEUE_FAILED: return state.set('loading', false);
case actions.COMMENT_STATUS_UPDATE: return updateStatus(state, action);
case actions.COMMENT_FLAG: return flag(state, action);
case actions.COMMENT_CREATE_SUCCESS: return addComment(state, action);
case actions.COMMENT_STREAM_FETCH_SUCCESS: return replaceComments(action, state);
case actions.SHOW_BANUSER_DIALOG: return setBanUser(state, true, action);
case actions.HIDE_BANUSER_DIALOG: return setBanUser(state, false, action);
case actions.USER_BAN_SUCESS: return setBanUser(state, false, action);
case userActions.UPDATE_STATUS_SUCCESS: return setBanUser(state, false, action);
default: return state;
}
};
client/coral-admin/src/services/store.js
+1 -2
View File
@@ -2,7 +2,6 @@
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import mainReducer from 'reducers';
import talkAdapter from 'services/talk-adapter';
/**
* Create the store by merging the app reducers with
@@ -14,5 +13,5 @@ import talkAdapter from 'services/talk-adapter';
export default createStore(
mainReducer,
window.devToolsExtension && window.devToolsExtension(),
applyMiddleware(thunk, talkAdapter)
applyMiddleware(thunk)
);
client/coral-admin/src/services/talk-adapter.js
-96
View File
@@ -1,96 +0,0 @@
import coralApi from '../../../coral-framework/helpers/response';
/**
* The adapter is a redux middleware that interecepts the actions that need
* to interface with the backend, do the job and return the results.
* The idea is that if we expose the required actions to handle to devs, the
* moderation app can be platform agnostic. This same client could work not only
* for the coral but also for wordpress comments, disqus and many more.
*/
// Intercept redux actions and act over the ones we are interested
export default store => next => action => {
switch (action.type) {
case 'COMMENTS_MODERATION_QUEUE_FETCH':
fetchModerationQueueComments(store);
break;
case 'COMMENT_UPDATE':
updateComment(store, action.comment);
break;
case 'COMMENT_CREATE':
createComment(store, action.name, action.body);
break;
case 'USER_BAN':
userStatusUpdate(store, action.status, action.userId, action.commentId);
break;
}
next(action);
};
// Get comments to fill each of the three lists on the mod queue
const fetchModerationQueueComments = store =>
Promise.all([
coralApi('/queue/comments/pending'),
coralApi('/comments?status=rejected'),
coralApi('/comments?action_type=flag')
])
.then(([pending, rejected, flagged]) => {
/* Combine seperate calls into a single object */
let all = {};
all.comments = pending.comments
.concat(rejected.comments)
.concat(flagged.comments.map(comment => {
comment.flagged = true;
return comment;
}));
all.users = pending.users
.concat(rejected.users)
.concat(flagged.users);
all.actions = pending.actions
.concat(rejected.actions)
.concat(flagged.actions);
return all;
})
.then(all => {
/* Post comments and users to redux store. Actions will be posted when they are needed. */
store.dispatch({type: 'USERS_MODERATION_QUEUE_FETCH_SUCCESS',
users: all.users});
store.dispatch({type: 'COMMENTS_MODERATION_QUEUE_FETCH_SUCCESS',
comments: all.comments});
});
// .catch(error => store.dispatch({type: 'COMMENTS_MODERATION_QUEUE_FETCH_FAILED', error}));
// Update a comment. Now to update a comment we need to send back the whole object
const updateComment = (store, comment) => {
coralApi(`/comments/${comment.get('id')}/status`, {method: 'PUT', body: {status: comment.get('status')}})
.then(res => store.dispatch({type: 'COMMENT_UPDATE_SUCCESS', res}))
.catch(error => store.dispatch({type: 'COMMENT_UPDATE_FAILED', error}));
};
// Create a new comment
const createComment = (store, name, comment) => {
const body = {
status: 'Untouched',
body: comment,
name: name,
createdAt: Date.now()
};
return coralApi('/comments', {method: 'POST', body})
.then(res => store.dispatch({type: 'COMMENT_CREATE_SUCCESS', comment: res}))
.catch(error => store.dispatch({type: 'COMMENT_CREATE_FAILED', error}));
};
// Ban a user
const userStatusUpdate = (store, status, userId, commentId) => {
return coralApi(`/users/${userId}/status`, {method: 'POST', body: {status: status, comment_id: commentId}})
.then(res => store.dispatch({type: 'USER_BAN_SUCESS', res}))
.catch(error => store.dispatch({type: 'USER_BAN_FAILED', error}));
};
client/coral-plugin-likes/LikeButton.js
+1 -1
View File
@@ -2,7 +2,7 @@ import React from 'react';
import {I18n} from '../coral-framework';
import translations from './translations.json';
const name = 'coral-plugin-flags';
const name = 'coral-plugin-likes';
const LikeButton = ({like, id, postAction, deleteAction, addItem, showSignInDialog, updateItem, currentUser, banned}) => {
const liked = like && like.current_user;
client/coral-sign-in/components/SignDialog.js
+2 -1
View File
@@ -9,10 +9,11 @@ import ForgotContent from './ForgotContent';
const SignDialog = ({open, view, handleClose, offset, ...props}) => (
<Dialog
className={styles.dialog}
id="signInDialog"
open={open}
style={{
position: 'relative',
top: offset !== 0 && offset
top: offset !== 0 && offset
}}>
<span className={styles.close} onClick={handleClose}>×</span>
{view === 'SIGNIN' && <SignInContent {...props} />}
client/coral-sign-in/components/UserBox.js
+3 -1
View File
@@ -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
+1
View File
@@ -113,6 +113,7 @@ input.error{
font-weight: bold;
cursor: pointer;
margin: 0px;
margin-left: 4px;
padding-bottom: 2px;
border-bottom: solid 1px black;
}
nightwatch.conf.js
+17 -8
View File
@@ -19,6 +19,7 @@ module.exports = {
},
'test_settings': {
'default': {
'launch_url' : 'http://localhost:3000',
'selenium_port': 6666,
'selenium_host': 'localhost',
'silent': true,
@@ -26,19 +27,27 @@ module.exports = {
'browserName': 'chrome',
'javascriptEnabled': true,
'acceptSslCerts': true,
'webStorageEnabled' : true,
'databaseEnabled' : true,
'applicationCacheEnabled' : false,
'nativeEvents' : true
'webStorageEnabled': true,
'databaseEnabled': true,
'applicationCacheEnabled': false,
'nativeEvents': true
},
'screenshots' : {
'enabled' : true,
'on_failure' : true,
'on_error' : true,
'path' : './tests/e2e/reports'
'enabled': true,
'on_failure': true,
'on_error': true,
'path': './tests/e2e/reports'
},
'exclude': [
'./tests/e2e/tests/EmbedStreamTests.js'
]
},
'integration': {
'launch_url': 'http://localhost:3000'
}
}
};
// "chromeOptions" : {
// "args" : ["start-fullscreen"]
// }
package.json
+6 -5
View File
@@ -11,8 +11,8 @@
"lint-fix": "./node_modules/.bin/eslint bin/* . --fix",
"test": "NODE_ENV=test ./node_modules/.bin/mocha --compilers js:babel-core/register tests/helpers/*.js --require ignore-styles --recursive tests",
"test-watch": "NODE_ENV=test ./node_modules/.bin/mocha --compilers js:babel-core/register --recursive -w tests",
"pree2e": "NODE_ENV=test ./scripts/pree2e.sh",
"e2e": "NODE_ENV=test ./node_modules/.bin/nightwatch",
"pree2e": "NODE_ENV=test scripts/pree2e.sh",
"e2e": "NODE_ENV=test nightwatch",
"embed-start": "NODE_ENV=development npm run build && ./bin/cli serve --jobs"
},
"config": {
@@ -74,10 +74,11 @@
},
"devDependencies": {
"autoprefixer": "^6.5.2",
"babel-core": "^6.18.2",
"babel-core": "^6.21.0",
"babel-eslint": "^7.1.0",
"babel-jest": "^15.0.0",
"babel-loader": "^6.2.7",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-async-to-generator": "^6.16.0",
"babel-plugin-transform-class-properties": "^6.18.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
@@ -115,7 +116,7 @@
"material-design-lite": "^1.2.1",
"mocha": "^3.1.2",
"mocha-junit-reporter": "^1.12.1",
"nightwatch": "^0.9.9",
"nightwatch": "^0.9.11",
"node-fetch": "^1.6.3",
"postcss-loader": "^1.1.0",
"postcss-modules": "^0.5.2",
@@ -137,7 +138,7 @@
"redux-mock-store": "^1.2.1",
"redux-thunk": "^2.1.0",
"regenerator": "^0.8.46",
"selenium-standalone": "^5.8.0",
"selenium-standalone": "latest",
"style-loader": "^0.13.1",
"supertest": "^2.0.1",
"timeago.js": "^2.0.3",
scripts/pree2e.sh
+11 -3
View File
@@ -1,7 +1,15 @@
#!/bin/bash
# install selenium
../node_modules/selenium-standalone/bin/selenium-standalone install
selenium-standalone install
# start the app server
npm start &
# Creating Admin Test User
{ echo admin@test.com; echo test; echo test; echo Admin Test User; echo admin;} | dotenv ./bin/cli-users create
# Creating Moderator Test User
{ echo moderator@test.com; echo test; echo test; echo Moderator Test User; echo moderator;} | dotenv ./bin/cli-users create
# Creating Commenter Test User
{ echo commenter@test.com; echo test; echo test; echo Commenter Test User; echo ;} | dotenv ./bin/cli-users create
npm start
tests/e2e/globals.js
+16 -2
View File
@@ -1,4 +1,18 @@
module.exports = {
waitForConditionTimeout: 20000,
baseUrl: 'localhost:3011/'
waitForConditionTimeout: 8000,
baseUrl: 'http://localhost:3000',
users: {
admin: {
email: 'admin@test.com',
pass: 'test'
},
moderator: {
email: 'moderator@test.com',
pass: 'test'
},
commenter: {
email: 'commenter@test.com',
pass: 'test'
}
},
};
tests/e2e/pages/adminPage.js
+33
View File
@@ -0,0 +1,33 @@
const embedStreamCommands = {
url: function () {
return `${this.api.launchUrl}/admin`;
},
ready() {
return this
.waitForElementVisible('body', 2000);
},
approveComment() {
return this
.waitForElementVisible('@commentList')
.waitForElementVisible('@approveButton')
.click('@approveButton');
}
};
module.exports = {
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/embedStream.js
-45
View File
@@ -1,45 +0,0 @@
const fetch = require('node-fetch');
const embedCommands = {
ready() {
return this.resizeWindow(1200, 800)
.url(client.globals.baseUrl)
.waitForElementVisible('body', 2000)
.frame('coralStreamIframe');
},
setConfig(config, baseUrl) {
return fetch(`${baseUrl}/api/v1/settings`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(config)
});
},
enterComment() {
const comment = 'This is a test comment';
return this
.waitForElementVisible('@commentBox')
.setValue('@commentBox', comment)
.click('@postButton')
.waitForElementVisible('.comment', 1000);
},
validateComment(comment) {
return this
.assert.equal(comment, '.comment');
}
};
module.exports = {
commands: [embedCommands],
elements: {
commentBox: {
selector: '#commentBox'
},
postButton: {
selector: '#commentBox .coral-plugin-commentbox-button'
}
}
};
tests/e2e/pages/embedStreamPage.js
+160
View File
@@ -0,0 +1,160 @@
const embedStreamCommands = {
url: function () {
return this
.api.launchUrl;
},
ready() {
return this
.waitForElementVisible('body', 4000)
.waitForElementVisible('iframe#coralStreamIframe')
.api.frame('coralStreamIframe');
},
signUp(user) {
return this
.waitForElementVisible('@signInButton', 2000)
.click('@signInButton')
.waitForElementVisible('@signInDialog')
.waitForElementVisible('@registerButton')
.click('@registerButton')
.setValue('@signInDialogEmail', user.email)
.setValue('@signInDialogPassword', user.pass)
.setValue('@signUpDialogConfirmPassword', user.pass)
.setValue('@signUpDialogDisplayName', user.displayName)
.waitForElementVisible('@signUpButton')
.click('@signUpButton')
.waitForElementVisible('@logInButton')
.click('@logInButton')
.waitForElementVisible('@logoutButton', 5000);
},
login(user) {
return this
.waitForElementVisible('@signInButton', 2000)
.click('@signInButton')
.waitForElementVisible('@signInDialog')
.waitForElementVisible('@signInDialogEmail')
.waitForElementVisible('@signInDialogPassword')
.setValue('@signInDialogEmail', user.email)
.setValue('@signInDialogPassword', user.pass)
.waitForElementVisible('@logInButton')
.click('@logInButton')
.waitForElementVisible('@logoutButton', 5000);
},
logout() {
return this
.waitForElementVisible('@logoutButton')
.click('@logoutButton')
.waitForElementVisible('@signInButton', 2000);
},
postComment(comment = 'Test Comment') {
return this
.waitForElementVisible('@commentBox', 2000)
.setValue('@commentBox', comment)
.click('@postButton');
},
likeComment() {
return this
.waitForElementVisible('@likeButton')
.click('@likeButton');
},
flagComment() {
return this
.waitForElementVisible('@flagButton')
.click('@flagButton');
},
flagUsername() {
return this
.waitForElementVisible('@flagButton')
.click('@flagButton');
},
getPermalink(fn) {
return this
.waitForElementVisible('@permalinkButton')
.click('@permalinkButton')
.waitForElementVisible('@permalinkPopUp')
.getValue('@permalinkInput', result => fn(result.value));
}
};
module.exports = {
commands: [embedStreamCommands],
elements: {
signInButton: {
selector: '#coralSignInButton'
},
signInDialog:{
selector: '#signInDialog'
},
signInDialogEmail: {
selector: '#signInDialog #email'
},
signInDialogPassword: {
selector: '#signInDialog #password'
},
signUpDialogConfirmPassword: {
selector: '#signInDialog #confirmPassword'
},
signUpDialogDisplayName: {
selector: '#signInDialog #displayName'
},
logInButton: {
selector: '#coralLogInButton'
},
signUpButton: {
selector: '#coralSignUpButton'
},
logoutButton: {
selector: '.commentStream #logout'
},
commentBox: {
selector: '.coral-plugin-commentbox-textarea'
},
postButton: {
selector: '#commentBox .coral-plugin-commentbox-button'
},
likeButton: {
selector: '.comment .coral-plugin-likes-container .coral-plugin-likes-button'
},
likeText: {
selector: '.comment .coral-plugin-likes-container .coral-plugin-likes-button .coral-plugin-likes-button-text'
},
likesCount: {
selector: '.comment .coral-plugin-likes-container .coral-plugin-likes-button .coral-plugin-likes-like-count'
},
flagButton: {
selector: '.comment .coral-plugin-flags-container .coral-plugin-flags-button'
},
flagPopUp: {
selector: '.comment .coral-plugin-flags-popup'
},
flagCommentOption: {
selector: '.comment .coral-plugin-flags-popup .coral-plugin-flags-popup-radio-label[for="comments"]'
},
flagUsernameOption: {
selector: '.comment .coral-plugin-flags-popup .coral-plugin-flags-popup-radio-label[for="user"]'
},
flagOtherOption: {
selector: '.comment .coral-plugin-flags-popup .coral-plugin-flags-popup-radio-label[for="other"]'
},
flagHeaderMessage: {
selector: '.comment .coral-plugin-flags-popup .coral-plugin-flags-popup-header'
},
flagButtonText: {
selector: '.comment .coral-plugin-flags-button-text'
},
flagDoneButton: {
selector: '.comment .coral-plugin-flags-popup .coral-plugin-flags-popup-button'
},
permalinkButton: {
selector: '.comment .coral-plugin-permalinks-button'
},
permalinkPopUp: {
selector: '.comment .coral-plugin-permalinks-popover.active'
},
permalinkInput: {
selector: '.comment .coral-plugin-permalinks-popover.active input'
},
registerButton: {
selector: '#signInDialog #coralRegister'
}
}
};
tests/e2e/tests/AppTest.js → tests/e2e/tests/00_AppTest.js
-3
View File
@@ -6,8 +6,5 @@ module.exports = {
.url(baseUrl)
.assert.title('Coral Talk')
.waitForElementPresent('body', 1000);
},
after: client => {
client.end();
}
};
tests/e2e/tests/01_EmbedStreamTest.js
+44
View File
@@ -0,0 +1,44 @@
module.exports = {
'@tags': ['embedStream'],
before: client => {
const embedStreamPage = client.page.embedStreamPage();
embedStreamPage
.navigate()
.ready();
},
'Login as commenter': client => {
const embedStreamPage = client.page.embedStreamPage();
const {users} = client.globals;
embedStreamPage
.login(users.commenter);
},
'Add test comment': client => {
const embedStreamPage = client.page.embedStreamPage();
embedStreamPage
.postComment('Test Comment');
},
'Logout': client => {
const embedStreamPage = client.page.embedStreamPage();
embedStreamPage
.logout();
},
'Login as admin': client => {
const embedStreamPage = client.page.embedStreamPage();
const {users} = client.globals;
embedStreamPage
.login(users.admin);
},
'Approve test comment': client => {
const adminPage = client.page.adminPage();
adminPage
.navigate()
.ready();
adminPage
.approveComment();
},
after: client => {
client.end();
}
};
tests/e2e/tests/Admin/LoginTest.js
+23
View File
@@ -0,0 +1,23 @@
module.exports = {
'@tags': ['login', 'admin'],
before(client) {
const embedStreamPage = client.page.embedStreamPage();
const {launchUrl} = client;
client
.url(launchUrl);
embedStreamPage
.ready();
},
'Admin logs in': client => {
const {users} = client.globals;
const embedStreamPage = client.page.embedStreamPage();
embedStreamPage
.login(users.admin);
},
after: client => {
client.end();
}
};
tests/e2e/tests/Commenter/FlagCommentTest.js
+34
View File
@@ -0,0 +1,34 @@
module.exports = {
'@tags': ['flag', 'comments', 'commenter'],
before: client => {
const embedStreamPage = client.page.embedStreamPage();
const {users} = client.globals;
embedStreamPage
.navigate()
.ready();
embedStreamPage
.login(users.commenter);
},
'Commenter flags a comment': client => {
const embedStreamPage = client.page.embedStreamPage();
embedStreamPage
.flagComment()
.waitForElementVisible('@flagPopUp')
.waitForElementVisible('@flagCommentOption')
.click('@flagCommentOption')
.waitForElementVisible('@flagDoneButton')
.click('@flagDoneButton')
.waitForElementVisible('@flagOtherOption')
.click('@flagOtherOption')
.waitForElementVisible('@flagDoneButton')
.click('@flagDoneButton')
.click('@flagDoneButton')
.expect.element('@flagButtonText').text.to.equal('Reported');
},
after: client => {
client.end();
}
};
tests/e2e/tests/Commenter/FlagUsernameTest.js
+33
View File
@@ -0,0 +1,33 @@
module.exports = {
'@tags': ['flag', 'commenter'],
before: client => {
const embedStreamPage = client.page.embedStreamPage();
const {users} = client.globals;
embedStreamPage
.navigate()
.ready();
embedStreamPage
.login(users.commenter);
},
'Commenter flags a username': client => {
const embedStreamPage = client.page.embedStreamPage();
embedStreamPage
.flagUsername()
.waitForElementVisible('@flagPopUp')
.waitForElementVisible('@flagUsernameOption')
.click('@flagUsernameOption')
.waitForElementVisible('@flagDoneButton')
.click('@flagDoneButton')
.waitForElementVisible('@flagOtherOption')
.click('@flagOtherOption')
.waitForElementVisible('@flagDoneButton')
.click('@flagDoneButton')
.click('@flagDoneButton');
},
after: client => {
client.end();
}
};
tests/e2e/tests/Commenter/LikeCommentTest.js
+26
View File
@@ -0,0 +1,26 @@
module.exports = {
'@tags': ['like', 'comments', 'commenter'],
before: client => {
const embedStreamPage = client.page.embedStreamPage();
const {users} = client.globals;
embedStreamPage
.navigate()
.ready();
embedStreamPage
.login(users.commenter);
},
'Commenter likes a comment': client => {
const embedStreamPage = client.page.embedStreamPage();
embedStreamPage
.likeComment()
.waitForElementVisible('@likesCount', 2000)
.expect.element('@likeText').text.to.equal('Liked');
},
after: client => {
client.end();
}
};
tests/e2e/tests/Commenter/LoginTest.js
+20
View File
@@ -0,0 +1,20 @@
module.exports = {
'@tags': ['login', 'commenter'],
before: client => {
const embedStreamPage = client.page.embedStreamPage();
embedStreamPage
.navigate()
.ready();
},
'Commenter logs in': client => {
const {users} = client.globals;
const embedStreamPage = client.page.embedStreamPage();
embedStreamPage
.login(users.commenter);
},
after: client => {
client.end();
}
};
tests/e2e/tests/Commenter/PermalinkTest.js
+34
View File
@@ -0,0 +1,34 @@
let permalink = '';
module.exports = {
'@tags': ['permalink', 'commenter'],
before: client => {
const embedStreamPage = client.page.embedStreamPage();
const {users} = client.globals;
embedStreamPage
.navigate()
.ready();
embedStreamPage
.login(users.commenter);
},
'Commenter gets the permalink of a comment': client => {
const embedStreamPage = client.page.embedStreamPage();
embedStreamPage
.getPermalink(value => {
permalink = value;
});
},
'Commenter navigates to the permalink': client => {
const embedStreamPage = client.page.embedStreamPage();
embedStreamPage
.navigate(permalink);
client.assert.urlContains(permalink);
},
after: client => {
client.end();
}
};
tests/e2e/tests/Commenter/PostComment.js
+38
View File
@@ -0,0 +1,38 @@
module.exports = {
'@tags': ['write', 'commenter'],
before: client => {
const embedStreamPage = client.page.embedStreamPage();
const {users} = client.globals;
embedStreamPage
.navigate()
.ready();
embedStreamPage
.login(users.commenter);
},
'Commenter posts a comment': client => {
const embedStreamPage = client.page.embedStreamPage();
embedStreamPage
.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();
}
};
tests/e2e/tests/Moderator/LoginTest.js
+23
View File
@@ -0,0 +1,23 @@
module.exports = {
'@tags': ['login', 'moderator'],
before: client => {
const embedStreamPage = client.page.embedStreamPage();
const {launchUrl} = client;
client
.url(launchUrl);
embedStreamPage
.ready();
},
'Moderator logs in': client => {
const {users} = client.globals;
const embedStreamPage = client.page.embedStreamPage();
embedStreamPage
.login(users.moderator);
},
after: client => {
client.end();
}
};
tests/e2e/tests/Visitor/FlagCommentTest.js
+20
View File
@@ -0,0 +1,20 @@
module.exports = {
'@tags': ['flag', 'comments', 'visitor'],
before: client => {
const embedStreamPage = client.page.embedStreamPage();
embedStreamPage
.navigate()
.ready();
},
'Visitor tries to flag a comment': client => {
const embedStreamPage = client.page.embedStreamPage();
embedStreamPage
.flagComment()
.waitForElementVisible('@signInDialog', 2000);
},
after: client => {
client.end();
}
};
tests/e2e/tests/Visitor/LikeCommentTest.js
+20
View File
@@ -0,0 +1,20 @@
module.exports = {
'@tags': ['like', 'comments', 'visitor'],
before: client => {
const embedStreamPage = client.page.embedStreamPage();
embedStreamPage
.navigate()
.ready();
},
'Visitor tries to like a comment': client => {
const embedStreamPage = client.page.embedStreamPage();
embedStreamPage
.likeComment()
.waitForElementVisible('@signInDialog', 2000);
},
after: client => {
client.end();
}
};
tests/e2e/tests/Visitor/SignUpTest.js
+24
View File
@@ -0,0 +1,24 @@
module.exports = {
'@tags': ['signup', 'visitor'],
before: client => {
const embedStreamPage = client.page.embedStreamPage();
embedStreamPage
.navigate()
.ready();
},
'Visitor signs up': client => {
const embedStreamPage = client.page.embedStreamPage();
const hash = Math.floor(Math.random() * (999 - 0));
embedStreamPage
.signUp({
email: `visitor_${hash}@test.com`,
displayName: 'Visitor',
pass: 'testtest'
});
},
after: client => {
client.end();
}
};
views/article.ejs
+1 -1
View File
@@ -36,7 +36,7 @@
<script type='text/javascript' src='<%= basePath %>/pym.v1.min.js'></script>
<script>
var ready = false;
var pymParent = new pym.Parent('coralStreamEmbed', '/embed/stream', {title: 'Talk Comments', id:'coralStreamIframe'});
var pymParent = new pym.Parent('coralStreamEmbed', '/embed/stream', {title: 'Talk Comments', id:'coralStreamIframe', name: 'coralStreamIframe'});
pymParent.onMessage('height', function(height) {document.querySelector('#coralStreamEmbed iframe').height = height + 'px'})
pymParent.onMessage('childReady', function () {
var interval = setInterval(function () {
yarn.lock
+7303
View File
File diff suppressed because it is too large Load Diff