diff --git a/src/components/post/post-comments/index.jsx b/src/components/post/post-comments/index.jsx index f8242791c..8ef898794 100644 --- a/src/components/post/post-comments/index.jsx +++ b/src/components/post/post-comments/index.jsx @@ -6,11 +6,11 @@ import { safeScrollBy } from '../../../services/unscroll'; import ErrorBoundary from '../../error-boundary'; import { Icon } from '../../fontawesome-icons'; import { faCommentPlus } from '../../fontawesome-custom-icons'; -import { SignInLink } from '../../sign-in-link'; import PostComment from '../post-comment'; import { CollapseComments } from './collapse-comments'; import ExpandComments from './expand-comments'; +import { SignInToAddComment } from './sign-in-to-add-comment'; import { LoadingComments } from './loading-comments'; import { CommentSpacer } from './comment-spacer'; @@ -275,18 +275,7 @@ export default class PostComments extends Component { return false; } if (!user.id) { - return post.isCommenting ? ( -
- - - - - Sign In to add comment - -
- ) : ( - false - ); + return ; } return post.isCommenting ? this.renderAddingComment() : this.renderAddCommentLink(); } diff --git a/src/components/post/post-comments/sign-in-to-add-comment.jsx b/src/components/post/post-comments/sign-in-to-add-comment.jsx new file mode 100644 index 000000000..987f98775 --- /dev/null +++ b/src/components/post/post-comments/sign-in-to-add-comment.jsx @@ -0,0 +1,16 @@ +import { Icon } from '../../fontawesome-icons'; +import { faCommentPlus } from '../../fontawesome-custom-icons'; +import { SignInLink } from '../../sign-in-link'; + +export function SignInToAddComment() { + return ( +
+ + + + + Sign in to add comment + +
+ ); +} diff --git a/test/unit/components/post-comments-fold.js b/test/unit/components/post-comments-fold.js index 72d6d94d0..fc645f86a 100644 --- a/test/unit/components/post-comments-fold.js +++ b/test/unit/components/post-comments-fold.js @@ -8,6 +8,7 @@ import { spy } from 'sinon'; import ErrorBoundary from '../../../src/components/error-boundary'; import PostComment from '../../../src/components/post/post-comment'; import PostComments from '../../../src/components/post/post-comments'; +import { SignInToAddComment } from '../../../src/components/post/post-comments/sign-in-to-add-comment'; import { CollapseComments } from '../../../src/components/post/post-comments/collapse-comments'; import ExpandComments from '../../../src/components/post/post-comments/expand-comments'; import { LoadingComments } from '../../../src/components/post/post-comments/loading-comments'; @@ -42,7 +43,9 @@ describe('', () => { 'when rendered', 'to have exactly rendered',
- + + +
, ); }); @@ -60,6 +63,7 @@ describe('', () => { 'to have rendered with all children',
+
, ); }); @@ -78,6 +82,7 @@ describe('', () => {
+
, ); }); @@ -97,6 +102,7 @@ describe('', () => { + , ); }); @@ -120,6 +126,7 @@ describe('', () => { 'to have rendered with all children',
{genCommentElements(nComments)} +
, ); }); @@ -146,6 +153,7 @@ describe('', () => { {genCommentElements(commentsAfterFold)} + , ); }); @@ -170,6 +178,7 @@ describe('', () => { 'to have rendered with all children',
{genCommentElements(nComments)} +
, ); }); @@ -196,6 +205,7 @@ describe('', () => { + , ); }); @@ -220,6 +230,7 @@ describe('', () => { {genCommentElements(commentsAfterFold)} + , ); }); @@ -238,6 +249,7 @@ describe('', () => { {genCommentElements(2)} + , ); }); @@ -258,6 +270,7 @@ describe('', () => { + , ); }); @@ -277,6 +290,7 @@ describe('', () => { + , ); }); @@ -298,6 +312,7 @@ describe('', () => { {genCommentElements(commentsAfterFold)} + , ); }); @@ -333,6 +348,7 @@ describe('', () => { 'to have rendered with all children',
{genCommentElements(nComments)} +
, ); }); @@ -360,6 +376,7 @@ describe('', () => { {genCommentElements(1)} {genCommentElements(nComments - 1)} + , ); expect( @@ -373,6 +390,7 @@ describe('', () => { {genCommentElements(1)} {genCommentElements(commentsAfterFold)} + , ); }); @@ -417,6 +435,7 @@ describe('', () => { {genCommentElements(1)} {genCommentElements(commentsAfterFold)} + , ); expect(expandSpy, 'to have a call satisfying', { args: [post.id] }); @@ -446,6 +465,7 @@ describe('', () => { {genCommentElements(2)} + , ); }); @@ -466,6 +486,7 @@ describe('', () => { 'to have rendered with all children',
{genCommentElements(7, [3])} +
, ); }); @@ -490,6 +511,7 @@ describe('', () => { {genCommentElements(4, [0, 2])} + , ); }); @@ -520,6 +542,7 @@ describe('', () => { {genCommentElements(2)} + , ); }); @@ -543,6 +566,7 @@ describe('', () => { {genCommentElements(4, [0])} + , ); }); @@ -561,6 +585,7 @@ describe('', () => { {genCommentElements(4, [0])} + , ); }); diff --git a/test/unit/components/post-comments.js b/test/unit/components/post-comments.js index 0bfe25103..6aa5069e0 100644 --- a/test/unit/components/post-comments.js +++ b/test/unit/components/post-comments.js @@ -8,8 +8,8 @@ import ErrorBoundary from '../../../src/components/error-boundary'; import PostComments from '../../../src/components/post/post-comments'; import PostComment from '../../../src/components/post/post-comment'; import ExpandComments from '../../../src/components/post/post-comments/expand-comments'; +import { SignInToAddComment } from '../../../src/components/post/post-comments/sign-in-to-add-comment'; import { LoadingComments } from '../../../src/components/post/post-comments/loading-comments'; -import { SignInLink } from '../../../src/components/sign-in-link'; const expect = unexpected.clone().use(unexpectedReact); @@ -34,6 +34,7 @@ describe('', () => { + , ); }); @@ -52,7 +53,9 @@ describe('', () => { 'when rendered', 'to have rendered with all children',
- + + +
, ); @@ -62,6 +65,7 @@ describe('', () => { 'to have rendered with all children',
+
, ); @@ -181,7 +185,7 @@ describe('', () => { ); }); - it('should render "Sign In" link if post is commented and user is anonymous', () => { + it('should render "Sign in" link and user is anonymous', () => { const post = { omittedComments: 1, omittedCommentsOffset: 1, @@ -198,16 +202,24 @@ describe('', () => { expect( , 'when rendered', - 'not to contain', - Sign In, + 'to contain', + , ); + }); - post.isCommenting = true; + it('should not render "Sign in" link if user is logged in', () => { + const post = { + omittedComments: 1, + omittedCommentsOffset: 1, + isCommenting: false, + createdBy: { username: '' }, + user: {}, + }; expect( - , + , 'when rendered', - 'to contain', - Sign In, + 'not to contain', + , ); }); });