From a26a60cc678411b7a2483cc1c20164da2eac2957 Mon Sep 17 00:00:00 2001
From: Benjamin Goering <bengoering@gmail.com>
Date: Mon, 27 Feb 2017 19:16:27 +0800
Subject: [PATCH] minial best button uionly and e2e

---
 client/coral-embed-stream/src/Comment.js    |  5 ++
 client/coral-embed-stream/style/default.css | 10 ++++
 client/coral-plugin-best/BestButton.js      | 65 +++++++++++++++++++++
 client/coral-plugin-best/translations.json  | 10 ++++
 client/coral-plugin-replies/ReplyButton.js  |  3 +-
 test/e2e/pages/embedStreamPage.js           |  5 +-
 test/e2e/tests/Moderator/BestCommentTest.js | 42 +++++++++++++
 7 files changed, 138 insertions(+), 2 deletions(-)
 create mode 100644 client/coral-plugin-best/BestButton.js
 create mode 100644 client/coral-plugin-best/translations.json
 create mode 100644 test/e2e/tests/Moderator/BestCommentTest.js

diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index e52c4aff4..0a11ee6a5 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/client/coral-embed-stream/src/Comment.js
@@ -17,6 +17,7 @@ import PubDate from 'coral-plugin-pubdate/PubDate';
 import {ReplyBox, ReplyButton} from 'coral-plugin-replies';
 import FlagComment from 'coral-plugin-flags/FlagComment';
 import LikeButton from 'coral-plugin-likes/LikeButton';
+import BestButton from 'coral-plugin-best/BestButton';
 import LoadMore from 'coral-embed-stream/src/LoadMore';
 
 import styles from './Comment.css';
@@ -125,6 +126,10 @@ class Comment extends React.Component {
                 parentCommentId={parentId || comment.id}
                 currentUserId={currentUser && currentUser.id}
                 banned={false} />
+              <BestButton
+                isBest={false}
+                setBestTag={() => {}}
+                removeBestTag={() => {}} />
             </div>
         <div className="commentActionsRight">
           <PermalinkButton articleURL={asset.url} commentId={comment.id} />
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 52876ff79..46edc44e1 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -213,10 +213,20 @@ hr {
   width: 50%;
 }
 
+.comment__action-button {
+  cursor: pointer;
+}
+
+.comment__action-button--nowrap {
+  white-space: nowrap;
+}
+
 .material-icons {
   font-size: 12px !important;
   margin-left: 3px;
   vertical-align: middle;
+  width: 1em;
+  overflow: hidden;
 }
 
 .likedButton {
diff --git a/client/coral-plugin-best/BestButton.js b/client/coral-plugin-best/BestButton.js
new file mode 100644
index 000000000..c88b750ce
--- /dev/null
+++ b/client/coral-plugin-best/BestButton.js
@@ -0,0 +1,65 @@
+import React, {Component, PropTypes} from 'react';
+import {I18n} from '../coral-framework';
+import translations from './translations.json';
+import classnames from 'classnames';
+
+const name = 'coral-plugin-best';
+const lang = new I18n(translations);
+
+/**
+ * Button that lets a moderator tag a comment as "Best".
+ * Used to recognize really good comments.
+ */
+class BestButton extends Component {
+  static propTypes = {
+
+    // whether the comment is already tagged as best
+    isBest: PropTypes.bool.isRequired,
+
+    // set that this comment is best
+    setBestTag: PropTypes.func.isRequired,
+
+    // remove the best status
+    removeBestTag: PropTypes.func.isRequired,
+  }
+
+  state = {
+    best: false
+  }
+
+  constructor(props) {
+    super(props);
+    this.onClickSetBest = this.onClickSetBest.bind(this);
+    this.onClickUnsetBest = this.onClickUnsetBest.bind(this);
+  }
+
+  onClickSetBest(e) {
+    e.preventDefault();
+    this.setState({isBest: true});
+  }
+
+  onClickUnsetBest(e) {
+    e.preventDefault();
+    this.setState({isBest: false});
+  }
+
+  render() {
+
+    // @TODO(bengo) Consider adding the comment__action classes to other buttons to add cursor:pointer and never wrap the icons
+    // @TODO(bengo) Should I reuse another element like coral-ui button? Just doing what LikeButton does for now
+    // Oh. I think that's styled for the admin. Don't use coral-ui button until the whole comment bottom bar does.
+    const {isBest} = this.state;
+    return <div className={classnames(`${name}-container`, `${name}-button`, 'comment__action-button--nowrap',
+                                      `e2e__${isBest ? 'unset' : 'set'}-best-comment`)}>
+      <button onClick={isBest ? this.onClickUnsetBest : this.onClickSetBest}
+              className='comment__action-button'>
+        <span className={`${name}-button-text`}>{lang.t(isBest ? 'unsetBest' : 'setBest')}</span>
+        <i className={`${name}-icon material-icons`} aria-hidden={true}>
+          { isBest ? 'favorite' : 'favorite_border' }
+        </i>
+      </button>
+    </div>;
+  }
+}
+
+export default BestButton;
diff --git a/client/coral-plugin-best/translations.json b/client/coral-plugin-best/translations.json
new file mode 100644
index 000000000..cfdfc04a1
--- /dev/null
+++ b/client/coral-plugin-best/translations.json
@@ -0,0 +1,10 @@
+{
+  "en": {
+    "setBest": "Tag as Best",
+    "unsetBest": "Untag as Best"
+  },
+  "es": {
+    "like": "Establecer como mejor",
+    "liked": "Desarmado como mejor"
+  }
+}
diff --git a/client/coral-plugin-replies/ReplyButton.js b/client/coral-plugin-replies/ReplyButton.js
index 68374fd2f..cd1859afc 100644
--- a/client/coral-plugin-replies/ReplyButton.js
+++ b/client/coral-plugin-replies/ReplyButton.js
@@ -1,13 +1,14 @@
 import React, {PropTypes} from 'react';
 import {I18n} from '../coral-framework';
 import translations from './translations.json';
+import classnames from 'classnames';
 
 const name = 'coral-plugin-replies';
 
 const ReplyButton = ({banned, onClick}) => {
   return (
     <button
-      className={`${name}-reply-button`}
+      className={classnames(`${name}-reply-button`, 'comment__action-button--nowrap')}
       onClick={onClick}>
       {lang.t('reply')}
       <i className={`${name}-icon material-icons`}
diff --git a/test/e2e/pages/embedStreamPage.js b/test/e2e/pages/embedStreamPage.js
index ca72df1db..a861b4c2e 100644
--- a/test/e2e/pages/embedStreamPage.js
+++ b/test/e2e/pages/embedStreamPage.js
@@ -38,7 +38,10 @@ const embedStreamCommands = {
       .setValue('@signInDialogEmail', user.email)
       .setValue('@signInDialogPassword', user.pass)
       .waitForElementVisible('@logInButton')
-      .click('@logInButton')
+      .click('@logInButton', () => {
+
+        // this.api.pause()
+      })
       .waitForElementVisible('@logoutButton', 5000);
   },
   logout() {
diff --git a/test/e2e/tests/Moderator/BestCommentTest.js b/test/e2e/tests/Moderator/BestCommentTest.js
new file mode 100644
index 000000000..ca8cacda4
--- /dev/null
+++ b/test/e2e/tests/Moderator/BestCommentTest.js
@@ -0,0 +1,42 @@
+module.exports = {
+  '@tags': ['like', 'comments', 'commenter'],
+  before: client => {
+    const embedStreamPage = client.page.embedStreamPage();
+    const {users} = client.globals;
+
+    embedStreamPage
+      .navigate()
+      .ready();
+
+    embedStreamPage
+      .login(users.commenter);
+  },
+  'Moderator marks their comment as BEST': client => {
+    const embedStreamPage = client.page.embedStreamPage();
+
+    const setBestCommentButton = '.comment:nth-of-type(1) .e2e__set-best-comment';
+    const unsetBestCommentButton = '.comment:nth-of-type(1) .e2e__unset-best-comment';
+    embedStreamPage
+      .postComment('Hi everyone. Isn\'t this the BEST comment!?')
+      .waitForElementVisible(setBestCommentButton, 2000, () => {
+        client.expect.element(setBestCommentButton).text.to.contain('Tag as Best');        
+      })
+      .click(setBestCommentButton)
+      .waitForElementVisible(unsetBestCommentButton, 2000, () => {
+        client.assert.elementNotPresent(setBestCommentButton);
+        client.expect.element(unsetBestCommentButton).text.to.contain('Untag as Best');
+      });
+
+    // on refresh, it should still be tagged as best :)
+    // client
+    //   .refresh(() => {
+
+    //   })
+    //   .waitForElementVisible(unsetBestCommentButton, 2000)
+
+    // client.pause()
+  },
+  after: client => {
+    client.end();
+  }
+};