diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index 0a11ee6a5..0c7591ddf 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/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} /> - {}} - removeBestTag={() => {}} /> + + {}} + removeBestTag={() => {}} /> +
diff --git a/client/coral-plugin-best/BestButton.js b/client/coral-plugin-best/BestButton.js index c88b750ce..3010db7c6 100644 --- a/client/coral-plugin-best/BestButton.js +++ b/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. diff --git a/test/e2e/pages/embedStreamPage.js b/test/e2e/pages/embedStreamPage.js index a861b4c2e..5799fa8c9 100644 --- a/test/e2e/pages/embedStreamPage.js +++ b/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' } } }; diff --git a/test/e2e/tests/Commenter/BestCommentTest.js b/test/e2e/tests/Commenter/BestCommentTest.js new file mode 100644 index 000000000..f5747bd6e --- /dev/null +++ b/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(); + } +}; diff --git a/test/e2e/tests/Moderator/BestCommentTest.js b/test/e2e/tests/Moderator/BestCommentTest.js index ca8cacda4..f25fd7d93 100644 --- a/test/e2e/tests/Moderator/BestCommentTest.js +++ b/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 :)