BestButton only shows if currentUser can use it (and e2e)

client/coral-embed-stream/src/Comment.js

@@ -17,7 +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 BestButton, {IfUserCanModifyBest} from 'coral-plugin-best/BestButton';
 import LoadMore from 'coral-embed-stream/src/LoadMore';
 
 import styles from './Comment.css';
@@ -126,10 +126,12 @@ class Comment extends React.Component {
                 parentCommentId={parentId || comment.id}
                 currentUserId={currentUser && currentUser.id}
                 banned={false} />
-              <BestButton
-                isBest={false}
-                setBestTag={() => {}}
-                removeBestTag={() => {}} />
+              <IfUserCanModifyBest user={currentUser}>
+                <BestButton
+                  isBest={false}
+                  setBestTag={() => {}}
+                  removeBestTag={() => {}} />
+              </IfUserCanModifyBest>
             </div>
         <div className="commentActionsRight">
           <PermalinkButton articleURL={asset.url} commentId={comment.id} />

client/coral-plugin-best/BestButton.js

@@ -6,6 +6,17 @@ import classnames from 'classnames';
 const name = 'coral-plugin-best';
 const lang = new I18n(translations);
 
+// It would be best if the backend/api held this business logic
+const canModifyBestTag = ({roles = []} = {}) => roles && ['ADMIN', 'MODERATOR'].some(role => roles.includes(role));
+
+/**
+ * Component that only renders children if the provided user prop can modify best tags
+ */
+export const IfUserCanModifyBest = ({user, children}) => {
+  if ( ! ( user && canModifyBestTag(user))) {return null;}
+  return children;
+};
+
 /**
  * Button that lets a moderator tag a comment as "Best".
  * Used to recognize really good comments.

test/e2e/pages/embedStreamPage.js

@@ -163,6 +163,12 @@ module.exports = {
     },
     registerButton: {
       selector: '#signInDialog #coralRegister'
+    },
+    setBestButton: {
+      selector: '.e2e__set-best-comment'
+    },
+    unsetBestButton: {
+      selector: '.e2e__unset-best-comment'
     }
   }
 };

test/e2e/tests/Commenter/BestCommentTest.js

@@ -0,0 +1,25 @@
+module.exports = {
+  '@tags': ['like', 'comments', 'commenter'],
+  before: client => {
+    const embedStreamPage = client.page.embedStreamPage();
+    const {users} = client.globals;
+
+    embedStreamPage
+      .navigate()
+      .ready();
+
+    embedStreamPage
+      .login(users.commenter);
+  },
+  'Commenters should not see the set-best-comment button': client => {
+    const embedStreamPage = client.page.embedStreamPage();
+
+    embedStreamPage
+      .likeComment()
+      .waitForElementVisible('@likesCount', 2000)
+      .expect.element('@setBestButton').to.not.be.present;
+  },
+  after: client => {
+    client.end();
+  }
+};

test/e2e/tests/Moderator/BestCommentTest.js

@@ -9,22 +9,19 @@ module.exports = {
       .ready();
 
     embedStreamPage
-      .login(users.commenter);
+      .login(users.moderator);
   },
   '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';
+    const setBestCommentButton = '@setBestButton';
+    const unsetBestCommentButton = '@unsetBestButton';
     embedStreamPage
       .postComment('Hi everyone. Isn\'t this the BEST comment!?')
-      .waitForElementVisible(setBestCommentButton, 2000, () => {
-        client.expect.element(setBestCommentButton).text.to.contain('Tag as Best');        
-      })
+      .waitForElementVisible(setBestCommentButton, 2000)
       .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 :)