test: add to check for deleted comments displays

packages/components/src/ButtonShowReplies/ButtonShowReplies.stories.tsx

@@ -70,7 +70,7 @@ export const NoCreatorName: StoryFn<typeof ButtonShowReplies> = () => {
       creatorName={null}
       isShowReplies={false}
       replies={replies}
-      setIsShowReplies={mockSetIsShowReplies}
+      setIsShowReplies={() => null}
     />
   )
 }

packages/components/src/CommentItem/CommentItem.stories.tsx

@@ -10,41 +10,87 @@ export default {
   component: CommentItem,
 } as Meta<typeof CommentItem>
 
+const handleEdit = () => {
+  return
+}
+
 export const Default: StoryFn<typeof CommentItem> = () => {
   const comment = fakeComment({ creatorImage: faker.image.avatar() })
 
-  return <CommentItem isReply={false} comment={comment} showAvatar />
+  return (
+    <CommentItem
+      comment={comment}
+      handleEdit={handleEdit}
+      isReply={false}
+      showAvatar
+    />
+  )
 }
 
 export const WithoutAvatar: StoryFn<typeof CommentItem> = () => {
   const comment = fakeComment()
 
-  return <CommentItem isReply={false} comment={comment} showAvatar={false} />
+  return (
+    <CommentItem
+      comment={comment}
+      handleEdit={handleEdit}
+      isReply={false}
+      showAvatar={false}
+    />
+  )
 }
 
 export const Editable: StoryFn<typeof CommentItem> = () => {
   const comment = fakeComment({ isEditable: true })
 
-  return <CommentItem isReply={false} comment={comment} showAvatar />
+  return (
+    <CommentItem
+      comment={comment}
+      handleEdit={handleEdit}
+      isReply={false}
+      showAvatar
+    />
+  )
 }
 
 export const Edited: StoryFn<typeof CommentItem> = () => {
   const comment = fakeComment({ _edited: new Date().toISOString() })
 
-  return <CommentItem isReply={false} comment={comment} showAvatar />
+  return (
+    <CommentItem
+      comment={comment}
+      handleEdit={handleEdit}
+      isReply={false}
+      showAvatar
+    />
+  )
 }
 
 export const LongText: StoryFn<typeof CommentItem> = () => {
   const text = `Ut dignissim, odio a cursus pretium, erat ex dictum quam, a eleifend augue mauris vel metus. Suspendisse pellentesque, elit efficitur rutrum maximus, arcu enim congue ipsum, vel aliquam ipsum urna quis tellus. Mauris at imperdiet nisi. Integer at neque ex. Nullam vel ipsum sodales, porttitor nulla vitae, tincidunt est. Pellentesque vitae lectus arcu. Integer dapibus rutrum facilisis. Nullam tincidunt quam at arcu interdum, vitae egestas libero vehicula. Morbi metus tortor, dapibus id finibus ac, egestas quis leo. Phasellus scelerisque suscipit mauris sed rhoncus. In quis ultricies ipsum. Integer vitae iaculis risus, sit amet elementum augue. Pellentesque vitae sagittis erat, eget consectetur lorem.\n\nUt pharetra molestie quam id dictum. In molestie, arcu sit amet faucibus pulvinar, eros erat egestas leo, at molestie nunc velit a arcu. Aliquam erat volutpat. Vivamus vehicula mi sit amet nibh auctor efficitur. Duis fermentum sem et nibh facilisis, ut tincidunt sem commodo. Nullam ornare ex a elementum accumsan. Etiam a neque ut lacus suscipit blandit. Maecenas id tortor velit.\n\nInterdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut commodo tellus. Maecenas at leo metus. Vivamus ullamcorper ex purus, volutpat auctor nunc lobortis a. Integer sit amet ornare nisi, sed ultrices enim. Pellentesque ut aliquam urna, eu fringilla ante. Nullam dui nibh, feugiat id vestibulum nec, efficitur a lorem. In vitae pellentesque tellus. Pellentesque sed odio iaculis, imperdiet turpis at, aliquam ex. Praesent iaculis bibendum nibh, vel egestas turpis ultrices ac. Praesent tincidunt libero sed gravida ornare. Aliquam vehicula risus ut molestie suscipit. Nunc erat odio, venenatis nec posuere in, placerat eget massa. Sed in ultrices ex, vel egestas quam. Integer lectus magna, ornare at nisl sed, convallis euismod enim. Cras pretium commodo arcu non bibendum.\n\nNullam dictum lectus felis. Duis vitae lacus vitae nisl aliquet faucibus. Integer neque lacus, dignissim sed mi et, dignissim luctus metus. Cras sollicitudin vestibulum leo, ac ultrices sapien bibendum ac. Phasellus lobortis aliquam libero eu volutpat. Donec vitae rutrum tellus. Fusce vel ante ipsum. Suspendisse mollis tempus porta. Sed a orci tempor, rhoncus tortor eu, sodales justo.`
   const comment = fakeComment({ text })
 
-  return <CommentItem isReply={true} comment={comment} showAvatar />
+  return (
+    <CommentItem
+      comment={comment}
+      handleEdit={handleEdit}
+      isReply={true}
+      showAvatar
+    />
+  )
 }
 
 export const ShortTextWithLink: StoryFn<typeof CommentItem> = () => {
   const comment = fakeComment({
     text: `Ut dignissim, odio a cursus pretium. https://example.com`,
   })
 
-  return <CommentItem isReply={true} comment={comment} showAvatar />
+  return (
+    <CommentItem
+      comment={comment}
+      handleEdit={handleEdit}
+      isReply={true}
+      showAvatar
+    />
+  )
 }

packages/components/src/CommentItem/CommentItem.tsx

@@ -16,7 +16,7 @@ const DELETED_COMMENT = 'The original comment got deleted'
 export interface IProps {
   comment: IComment
   handleDelete?: (commentId: string) => Promise<void>
-  handleEdit?: (commentId: string, newCommentText: string) => void
+  handleEdit: (commentId: string, newCommentText: string) => void
   handleEditRequest?: (commentId: string) => Promise<void>
   isReply: boolean
   showAvatar: boolean
@@ -66,6 +66,7 @@ export const CommentItem = (props: IProps) => {
 
   const date = formatDate(_edited || _created)
   const maxHeight = isShowMore ? 'max-content' : '128px'
+  const item = isReply ? 'ReplyItem' : 'CommentItem'
 
   useEffect(() => {
     if (textRef.current) {
@@ -85,14 +86,10 @@ export const CommentItem = (props: IProps) => {
   }
 
   return (
-    <Flex
-      id={`comment:${_id}`}
-      data-cy="comment"
-      sx={{ flexDirection: 'column' }}
-    >
+    <Flex id={`comment:${_id}`} data-cy={item} sx={{ flexDirection: 'column' }}>
       <Flex sx={{ gap: 2 }}>
         {_deleted && (
-          <Box sx={{ marginBottom: 2 }}>
+          <Box sx={{ marginBottom: 2 }} data-cy="deletedComment">
             <Text sx={{ color: 'grey' }}>[{DELETED_COMMENT}]</Text>
           </Box>
         )}
@@ -151,7 +148,7 @@ export const CommentItem = (props: IProps) => {
                   }}
                 >
                   <Button
-                    data-cy="CommentItem: edit button"
+                    data-cy={`${item}: edit button`}
                     variant="outline"
                     small={true}
                     icon="edit"
@@ -160,7 +157,7 @@ export const CommentItem = (props: IProps) => {
                     edit
                   </Button>
                   <Button
-                    data-cy="CommentItem: delete button"
+                    data-cy={`${item}: delete button`}
                     variant={'outline'}
                     small={true}
                     icon="delete"
@@ -204,8 +201,8 @@ export const CommentItem = (props: IProps) => {
       <Modal width={600} isOpen={showEditModal}>
         <EditComment
           comment={text}
-          handleSubmit={(commentText) => {
-            handleEdit && handleEdit(_id, commentText)
+          handleSubmit={async (commentText) => {
+            await handleEdit(_id, commentText)
             setShowEditModal(false)
           }}
           handleCancel={() => setShowEditModal(false)}
@@ -218,8 +215,8 @@ export const CommentItem = (props: IProps) => {
         message="Are you sure you want to delete this comment?"
         confirmButtonText="Delete"
         handleCancel={() => setShowDeleteModal(false)}
-        handleConfirm={() => {
-          handleDelete && handleDelete(_id)
+        handleConfirm={async () => {
+          handleDelete && (await handleDelete(_id))
           setShowDeleteModal(false)
         }}
       />

packages/components/src/CommentList/CommentList.tsx

@@ -5,6 +5,7 @@ import { Button } from '../Button/Button'
 import { ButtonShowReplies } from '../ButtonShowReplies/ButtonShowReplies'
 import { CommentItem } from '../CommentItem/CommentItem'
 import { CreateReply } from '../CreateReply/CreateReply'
+import { nonDeletedCommentsCount } from '../DiscussionTitle/DiscussionTitle'
 import { Icon } from '../Icon/Icon'
 
 import type { IComment } from '../CommentItem/types'
@@ -89,7 +90,9 @@ export const CommentContainer = (props: IPropsCommentContainer) => {
     }
   }
 
-  if (_deleted && (!replies || replies.length === 0)) return null
+  if (_deleted && (!replies || nonDeletedCommentsCount(replies) === 0)) {
+    return null
+  }
 
   return (
     <Box

packages/components/src/CreateComment/CreateComment.tsx

@@ -7,6 +7,7 @@ export interface Props {
   maxLength: number
   isLoggedIn: boolean
   isLoading?: boolean
+  isReply?: boolean
   onSubmit: (value: string) => void
   onChange: (value: string) => void
   comment: string
@@ -16,7 +17,7 @@ export interface Props {
 }
 
 export const CreateComment = (props: Props) => {
-  const { comment, isLoggedIn, maxLength, onSubmit, isLoading } = props
+  const { comment, isLoggedIn, isReply, maxLength, onSubmit, isLoading } = props
   const userProfileType = props.userProfileType || 'member'
   const placeholder = props.placeholder || 'Leave your questions or feedback...'
   const buttonLabel = props.buttonLabel ?? 'Leave a comment'
@@ -58,7 +59,7 @@ export const CreateComment = (props: Props) => {
                   onChange && onChange(event.target.value)
                 }}
                 aria-label="Comment"
-                data-cy="comments-form"
+                data-cy={isReply ? 'reply-form' : 'comments-form'}
                 placeholder={placeholder}
                 sx={{
                   background: 'none',
@@ -104,7 +105,7 @@ export const CreateComment = (props: Props) => {
 
       <Flex sx={{ alignSelf: 'flex-end' }}>
         <Button
-          data-cy="comment-submit"
+          data-cy={isReply ? 'reply-submit' : 'comment-submit'}
           disabled={!comment.trim() || !isLoggedIn || isLoading}
           variant="primary"
           onClick={() => {

packages/components/src/CreateReply/CreateReply.tsx

@@ -45,6 +45,7 @@ export const CreateReply = (props: Props) => {
         onSubmit={handleSubmit}
         isLoggedIn={isLoggedIn}
         isLoading={isLoading}
+        isReply
         buttonLabel="Leave a reply"
       />
       {isError ? (

packages/components/src/EditComment/EditComment.tsx

@@ -51,6 +51,7 @@ export const EditComment = (props: IProps) => {
         comment,
       }}
       validate={validateEditedComment}
+      data-cy="EditCommentForm"
       render={({ invalid, handleSubmit, values }) => {
         const disabled = invalid
         return (

packages/cypress/src/integration/howto/discussions.spec.ts

@@ -17,8 +17,8 @@ describe('[Howto.Discussions]', () => {
 
     cy.signUpNewUser()
     cy.visit(`/how-to/${item.slug}#comment:${firstComment._id}`)
-    cy.get('[data-cy="comment"]').should('have.length.gte', 2)
-    cy.get('[data-cy="comment"]')
+    cy.get('[data-cy="CommentItem"]').should('have.length.gte', 2)
+    cy.get('[data-cy="CommentItem"]')
       .first()
       .scrollIntoView()
       .should('be.inViewport', 10)
@@ -57,8 +57,8 @@ describe('[Howto.Discussions]', () => {
 
     cy.step('Can add reply')
     cy.get('[data-cy=show-replies]:first').click()
-    cy.get('[data-cy=comments-form]:first').type(newReply)
-    cy.get('[data-cy=comment-submit]:first').click()
+    cy.get('[data-cy=reply-form]:first').type(newReply)
+    cy.get('[data-cy=reply-submit]:first').click()
     cy.contains(`${howtoDiscussion.comments.length + 1} comments`)
     cy.contains(newReply)
     cy.queryDocuments('howtos', '_id', '==', item._id).then((docs) => {
@@ -69,14 +69,14 @@ describe('[Howto.Discussions]', () => {
     })
 
     cy.step('Can edit their reply')
-    cy.get('[data-cy="CommentItem: edit button"]:first').click()
+    cy.get('[data-cy="ReplyItem: edit button"]:first').click()
     cy.get('[data-cy=edit-comment]').clear().type(updatedNewReply)
     cy.get('[data-cy=edit-comment-submit]').click()
     cy.contains(updatedNewReply)
     cy.contains(newReply).should('not.exist')
 
     cy.step('Can delete their reply')
-    cy.get('[data-cy="CommentItem: delete button"]:first').click()
+    cy.get('[data-cy="ReplyItem: delete button"]:first').click()
     cy.get('[data-cy="Confirm.modal: Confirm"]:first').click()
     cy.contains(updatedNewReply).should('not.exist')
     cy.contains(`${howtoDiscussion.comments.length} comments`)

packages/cypress/src/integration/questions/discussions.spec.ts

@@ -16,8 +16,8 @@ describe('[Questions.Discussions]', () => {
   it('can open using deep links', () => {
     cy.signUpNewUser()
     cy.visit(`/questions/${item.slug}#comment:${firstComment._id}`)
-    cy.get('[data-cy="comment"]').should('have.length.gte', 2)
-    cy.get('[data-cy="comment"]')
+    cy.get('[data-cy="CommentItem"]').should('have.length.gte', 2)
+    cy.get('[data-cy="CommentItem"]')
       .first()
       .scrollIntoView()
       .should('be.inViewport', 10)
@@ -32,6 +32,7 @@ describe('[Questions.Discussions]', () => {
       'An interesting question. The answer must be that when the sky is red, the apocalypse _might_ be on the way.'
     const newReply = 'Thanks Dave and Ben. What does everyone else think?'
     const updatedNewReply = 'Anyone else?'
+    const secondReply = 'Quick reply'
 
     const visitor = generateNewUserDetails()
     cy.signUpNewUser(visitor)
@@ -50,42 +51,58 @@ describe('[Questions.Discussions]', () => {
     cy.contains(updatedNewComment)
     cy.contains(newComment).should('not.exist')
 
-    cy.step('Can delete their comment')
-    cy.get('[data-cy="CommentItem: delete button"]:last').click()
-    cy.get('[data-cy="Confirm.modal: Confirm"]:last').click()
-    cy.contains(updatedNewComment).should('not.exist')
-    cy.contains(`${discussion.comments.length} comments`)
-
     cy.step('Can add reply')
     cy.get('[data-cy=show-replies]:first').click()
-    cy.get('[data-cy=comments-form]:first').type(newReply)
-    cy.get('[data-cy=comment-submit]:first').click()
-    cy.contains(`${discussion.comments.length + 1} comments`)
+    cy.get('[data-cy=reply-form]:first').type(newReply)
+    cy.get('[data-cy=reply-submit]:first').click()
+    cy.contains(`${discussion.comments.length + 2} comments`)
     cy.contains(newReply)
     cy.queryDocuments('questions', '_id', '==', item._id).then((docs) => {
       const [question] = docs
-      expect(question.commentCount).to.eq(discussion.comments.length + 1)
+      expect(question.commentCount).to.eq(discussion.comments.length + 2)
       // Updated to the just added comment iso datetime
       expect(question.latestCommentDate).to.not.eq(item.latestCommentDate)
     })
 
     cy.step('Can edit their reply')
-    cy.get('[data-cy="CommentItem: edit button"]:first').click()
+    cy.get('[data-cy="ReplyItem: edit button"]:first').click()
     cy.get('[data-cy=edit-comment]').clear().type(updatedNewReply)
     cy.get('[data-cy=edit-comment-submit]').click()
     cy.contains(updatedNewReply)
     cy.contains(newReply).should('not.exist')
 
     cy.step('Can delete their reply')
+    cy.get('[data-cy="ReplyItem: delete button"]:first').click()
+    cy.get('[data-cy="Confirm.modal: Confirm"]').click()
+    cy.contains(updatedNewReply).should('not.exist')
+
+    // Prep for: Replies still show for deleted comments
+    cy.get('[data-cy=show-replies]:last').click()
+    cy.get('[data-cy=reply-form]:last').type(secondReply)
+    cy.get('[data-cy=reply-submit]:last').click()
+    cy.contains('[data-cy="Confirm.modal: Modal"]').should('not.exist')
+    cy.get('[data-cy=ReplyItem]:last').contains(secondReply)
+
+    cy.step('Can delete their comment')
     cy.get('[data-cy="CommentItem: delete button"]:first').click()
-    cy.get('[data-cy="Confirm.modal: Confirm"]:first').click()
+    cy.get('[data-cy="Confirm.modal: Confirm"]').click()
+    cy.contains(updatedNewComment).should('not.exist')
+
+    cy.step('Replies still show for deleted comments')
+    cy.get('[data-cy="deletedComment"]').should('be.visible')
+    cy.contains(secondReply)
+
+    cy.step('Can delete their reply')
+    cy.get('[data-cy="ReplyItem: delete button"]:first').click()
+    cy.get('[data-cy="Confirm.modal: Confirm"]').click()
     cy.contains(updatedNewReply).should('not.exist')
     cy.contains(`${discussion.comments.length} comments`)
     cy.queryDocuments('questions', '_id', '==', item._id).then((docs) => {
       const [question] = docs
       expect(question.commentCount).to.eq(discussion.comments.length)
       expect(question.latestCommentDate).to.eq(item.latestCommentDate)
     })
+    cy.contains('[data-cy=deletedComment]').should('not.exist')
 
     // Putting these at the end to avoid having to put a wait in the test
     cy.step('Comment generated notification for question author')