Show "sign in to comment" link under all posts for anonymous users

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 ? (
-        <div className="comment">
-          <span className="comment-icon fa-stack">
-            <Icon icon={faCommentPlus} />
-          </span>
-          <span>
-            <SignInLink>Sign In</SignInLink> to add comment
-          </span>
-        </div>
-      ) : (
-        false
-      );
+      return <SignInToAddComment />;
     }
     return post.isCommenting ? this.renderAddingComment() : this.renderAddCommentLink();
   }

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 (
+    <div className="comment">
+      <span className="comment-icon fa-stack">
+        <Icon icon={faCommentPlus} />
+      </span>
+      <span>
+        <SignInLink>Sign in</SignInLink> to add comment
+      </span>
+    </div>
+  );
+}

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('<PostComments>', () => {
         'when rendered',
         'to have exactly rendered',
         <div className="comments" role="list" aria-label="0 comments">
-          <ErrorBoundary />
+          <ErrorBoundary>
+            <SignInToAddComment />
+          </ErrorBoundary>
         </div>,
       );
     });
@@ -60,6 +63,7 @@ describe('<PostComments>', () => {
         'to have rendered with all children',
         <div className="comments" role="list">
           <PostComment />
+          <SignInToAddComment />
         </div>,
       );
     });
@@ -78,6 +82,7 @@ describe('<PostComments>', () => {
         <div className="comments" role="list">
           <PostComment />
           <PostComment />
+          <SignInToAddComment />
         </div>,
       );
     });
@@ -97,6 +102,7 @@ describe('<PostComments>', () => {
           <PostComment />
           <PostComment />
           <PostComment />
+          <SignInToAddComment />
         </div>,
       );
     });
@@ -120,6 +126,7 @@ describe('<PostComments>', () => {
         'to have rendered with all children',
         <div className="comments" role="list">
           {genCommentElements(nComments)}
+          <SignInToAddComment />
         </div>,
       );
     });
@@ -146,6 +153,7 @@ describe('<PostComments>', () => {
           <PostComment />
           <ExpandComments omittedComments={minFoldedComments} omittedCommentLikes={5} />
           {genCommentElements(commentsAfterFold)}
+          <SignInToAddComment />
         </div>,
       );
     });
@@ -170,6 +178,7 @@ describe('<PostComments>', () => {
         'to have rendered with all children',
         <div className="comments" role="list">
           {genCommentElements(nComments)}
+          <SignInToAddComment />
         </div>,
       );
     });
@@ -196,6 +205,7 @@ describe('<PostComments>', () => {
           <PostComment />
           <ExpandComments omittedComments={2} />
           <PostComment />
+          <SignInToAddComment />
         </div>,
       );
     });
@@ -220,6 +230,7 @@ describe('<PostComments>', () => {
           <PostComment />
           <ExpandComments omittedComments={post.omittedComments} />
           {genCommentElements(commentsAfterFold)}
+          <SignInToAddComment />
         </div>,
       );
     });
@@ -238,6 +249,7 @@ describe('<PostComments>', () => {
           <PostComment />
           <ExpandComments omittedComments={3} omittedCommentLikes={7} />
           {genCommentElements(2)}
+          <SignInToAddComment />
         </div>,
       );
     });
@@ -258,6 +270,7 @@ describe('<PostComments>', () => {
           <LoadingComments />
           <ExpandComments omittedComments={p.omittedComments} />
           <PostComment />
+          <SignInToAddComment />
         </div>,
       );
     });
@@ -277,6 +290,7 @@ describe('<PostComments>', () => {
           <PostComment />
           <ExpandComments omittedComments={post.omittedComments} />
           <LoadingComments />
+          <SignInToAddComment />
         </div>,
       );
     });
@@ -298,6 +312,7 @@ describe('<PostComments>', () => {
           <PostComment />
           <ExpandComments omittedComments={post.omittedComments + extraComments} />
           {genCommentElements(commentsAfterFold)}
+          <SignInToAddComment />
         </div>,
       );
     });
@@ -333,6 +348,7 @@ describe('<PostComments>', () => {
           'to have rendered with all children',
           <div className="comments" role="list">
             {genCommentElements(nComments)}
+            <SignInToAddComment />
           </div>,
         );
       });
@@ -360,6 +376,7 @@ describe('<PostComments>', () => {
             {genCommentElements(1)}
             <CollapseComments />
             {genCommentElements(nComments - 1)}
+            <SignInToAddComment />
           </div>,
         );
         expect(
@@ -373,6 +390,7 @@ describe('<PostComments>', () => {
             {genCommentElements(1)}
             <ExpandComments omittedComments={nComments - commentsAfterFold - 1} />
             {genCommentElements(commentsAfterFold)}
+            <SignInToAddComment />
           </div>,
         );
       });
@@ -417,6 +435,7 @@ describe('<PostComments>', () => {
             {genCommentElements(1)}
             <ExpandComments omittedComments={post.omittedComments + extraCommentsAfterFold} />
             {genCommentElements(commentsAfterFold)}
+            <SignInToAddComment />
           </div>,
         );
         expect(expandSpy, 'to have a call satisfying', { args: [post.id] });
@@ -446,6 +465,7 @@ describe('<PostComments>', () => {
             <PostComment isEditing={true} />
             <ExpandComments omittedComments={3} />
             {genCommentElements(2)}
+            <SignInToAddComment />
           </div>,
         );
       });
@@ -466,6 +486,7 @@ describe('<PostComments>', () => {
           'to have rendered with all children',
           <div className="comments" role="list">
             {genCommentElements(7, [3])}
+            <SignInToAddComment />
           </div>,
         );
       });
@@ -490,6 +511,7 @@ describe('<PostComments>', () => {
             <PostComment isEditing={true} />
             <ExpandComments omittedComments={4} />
             {genCommentElements(4, [0, 2])}
+            <SignInToAddComment />
           </div>,
         );
       });
@@ -520,6 +542,7 @@ describe('<PostComments>', () => {
             <PostComment isEditing={true} />
             <ExpandComments omittedComments={4} />
             {genCommentElements(2)}
+            <SignInToAddComment />
           </div>,
         );
       });
@@ -543,6 +566,7 @@ describe('<PostComments>', () => {
             <PostComment isEditing={true} />
             <ExpandComments omittedComments={2} />
             {genCommentElements(4, [0])}
+            <SignInToAddComment />
           </div>,
         );
       });
@@ -561,6 +585,7 @@ describe('<PostComments>', () => {
             <LoadingComments />
             <ExpandComments omittedComments={3} />
             {genCommentElements(4, [0])}
+            <SignInToAddComment />
           </div>,
         );
       });

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('<PostComments>', () => {
         <PostComment />
         <ExpandComments />
         <LoadingComments />
+        <SignInToAddComment />
       </div>,
     );
   });
@@ -52,7 +53,9 @@ describe('<PostComments>', () => {
       'when rendered',
       'to have rendered with all children',
       <div className="comments">
-        <ErrorBoundary />
+        <ErrorBoundary>
+          <SignInToAddComment />
+        </ErrorBoundary>
       </div>,
     );
 
@@ -62,6 +65,7 @@ describe('<PostComments>', () => {
       'to have rendered with all children',
       <div>
         <PostComment />
+        <SignInToAddComment />
       </div>,
     );
 
@@ -181,7 +185,7 @@ describe('<PostComments>', () => {
     );
   });
 
-  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('<PostComments>', () => {
     expect(
       <PostComments comments={[]} post={post} user={{}} />,
       'when rendered',
-      'not to contain',
-      <SignInLink>Sign In</SignInLink>,
+      'to contain',
+      <SignInToAddComment />,
     );
+  });
 
-    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(
-      <PostComments comments={[]} post={post} user={{}} />,
+      <PostComments comments={[]} post={post} user={{ id: 'some-user' }} />,
       'when rendered',
-      'to contain',
-      <SignInLink>Sign In</SignInLink>,
+      'not to contain',
+      <SignInToAddComment />,
     );
   });
 });