wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-12 06:38:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

[CORL-1014] Style comments based on number of reactions (#2930)

Browse Source 
* feat: add ability to style comments based on number of reactions

* feat: add coral-indent class

* fix: tests

* fix: snapshots
This commit is contained in:
Vinh
2020-04-15 18:28:07 +02:00
committed by GitHub
parent c9a0ab8848
commit 5b92f7e968
19 changed files with 290 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/classes.ts
+13 -7
View File
@@ -272,6 +272,12 @@ const CLASSES = {
*/
$root: "coral coral-comment",
/**
* reacted signifies the number of reactions of the comment.
* The no of reactions is appended: e.g. `coral-reacted-1`.
*/
reacted: "coral coral-reacted",
/**
* topBar is the uppper bar of the comment.
*/
@@ -386,13 +392,13 @@ const CLASSES = {
* indentation classes for the different levels.
*/
indent: [
"",
"coral coral-indent-1",
"coral coral-indent-2",
"coral coral-indent-3",
"coral coral-indent-4",
"coral coral-indent-5",
"coral coral-indent-6",
"coral coral-indent coral-indent-0",
"coral coral-indent coral-indent-1",
"coral coral-indent coral-indent-2",
"coral coral-indent coral-indent-3",
"coral coral-indent coral-indent-4",
"coral coral-indent coral-indent-5",
"coral coral-indent coral-indent-6",
],
},
src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx
+5
View File
@@ -34,6 +34,11 @@ function createDefaultProps(add: DeepPartial<Props> = {}): Props {
username: "Marvin",
badges: [],
},
actionCounts: {
reaction: {
total: 0,
},
},
parent: null,
body: "Woof",
createdAt: "1995-12-17T03:24:00.000Z",
src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
+10 -1
View File
@@ -295,7 +295,11 @@ export class CommentContainer extends Component<Props, State> {
}
return (
<div
className={cn(CLASSES.comment.$root, className)}
className={cn(
CLASSES.comment.$root,
`${CLASSES.comment.reacted}-${comment.actionCounts.reaction.total}`,
className
)}
data-testid={`comment-${comment.id}`}
>
<HorizontalGutter>
@@ -514,6 +518,11 @@ const enhanced = withContext(({ eventEmitter }) => ({ eventEmitter }))(
pending
lastViewerAction
deleted
actionCounts {
reaction {
total
}
}
...ReplyCommentFormContainer_comment
...EditCommentFormContainer_comment
...ReactionButtonContainer_comment
src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
+183 -8
View File
@@ -2,7 +2,7 @@
exports[`hide reply button 1`] = `
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-id"
>
<ForwardRef(forwardRef)>
@@ -21,6 +21,11 @@ exports[`hide reply button 1`] = `
className="coral coral-reactButton coral-comment-reactButton"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -72,6 +77,11 @@ exports[`hide reply button 1`] = `
className="coral coral-reportButton coral-comment-reportButton"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -116,6 +126,11 @@ exports[`hide reply button 1`] = `
className="coral coral-username coral-comment-username"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -142,6 +157,11 @@ exports[`hide reply button 1`] = `
className="coral coral-userTag coral-comment-userTag"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -183,6 +203,11 @@ exports[`hide reply button 1`] = `
className="coral coral-userBadge coral-comment-userBadge"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -213,7 +238,7 @@ exports[`hide reply button 1`] = `
exports[`renders body only 1`] = `
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-id"
>
<ForwardRef(forwardRef)>
@@ -232,6 +257,11 @@ exports[`renders body only 1`] = `
className="coral coral-reactButton coral-comment-reactButton"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -290,6 +320,11 @@ exports[`renders body only 1`] = `
className="coral coral-reportButton coral-comment-reportButton"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -334,6 +369,11 @@ exports[`renders body only 1`] = `
className="coral coral-username coral-comment-username"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -360,6 +400,11 @@ exports[`renders body only 1`] = `
className="coral coral-userTag coral-comment-userTag"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -401,6 +446,11 @@ exports[`renders body only 1`] = `
className="coral coral-userBadge coral-comment-userBadge"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -431,7 +481,7 @@ exports[`renders body only 1`] = `
exports[`renders disabled reply when commenting has been disabled 1`] = `
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-id"
>
<ForwardRef(forwardRef)>
@@ -450,6 +500,11 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
className="coral coral-reactButton coral-comment-reactButton"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -508,6 +563,11 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
className="coral coral-reportButton coral-comment-reportButton"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -552,6 +612,11 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
className="coral coral-username coral-comment-username"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -578,6 +643,11 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
className="coral coral-userTag coral-comment-userTag"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -619,6 +689,11 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
className="coral coral-userBadge coral-comment-userBadge"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -649,7 +724,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
exports[`renders disabled reply when story is closed 1`] = `
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-id"
>
<ForwardRef(forwardRef)>
@@ -668,6 +743,11 @@ exports[`renders disabled reply when story is closed 1`] = `
className="coral coral-reactButton coral-comment-reactButton"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -726,6 +806,11 @@ exports[`renders disabled reply when story is closed 1`] = `
className="coral coral-reportButton coral-comment-reportButton"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -770,6 +855,11 @@ exports[`renders disabled reply when story is closed 1`] = `
className="coral coral-username coral-comment-username"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -796,6 +886,11 @@ exports[`renders disabled reply when story is closed 1`] = `
className="coral coral-userTag coral-comment-userTag"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -837,6 +932,11 @@ exports[`renders disabled reply when story is closed 1`] = `
className="coral coral-userBadge coral-comment-userBadge"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -867,7 +967,7 @@ exports[`renders disabled reply when story is closed 1`] = `
exports[`renders in reply to 1`] = `
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-id"
>
<ForwardRef(forwardRef)>
@@ -886,6 +986,11 @@ exports[`renders in reply to 1`] = `
className="coral coral-reactButton coral-comment-reactButton"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -948,6 +1053,11 @@ exports[`renders in reply to 1`] = `
className="coral coral-reportButton coral-comment-reportButton"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -996,6 +1106,11 @@ exports[`renders in reply to 1`] = `
className="coral coral-username coral-comment-username"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -1026,6 +1141,11 @@ exports[`renders in reply to 1`] = `
className="coral coral-userTag coral-comment-userTag"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -1071,6 +1191,11 @@ exports[`renders in reply to 1`] = `
className="coral coral-userBadge coral-comment-userBadge"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -1105,7 +1230,7 @@ exports[`renders in reply to 1`] = `
exports[`renders username and body 1`] = `
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-id"
>
<ForwardRef(forwardRef)>
@@ -1124,6 +1249,11 @@ exports[`renders username and body 1`] = `
className="coral coral-reactButton coral-comment-reactButton"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -1182,6 +1312,11 @@ exports[`renders username and body 1`] = `
className="coral coral-reportButton coral-comment-reportButton"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -1226,6 +1361,11 @@ exports[`renders username and body 1`] = `
className="coral coral-username coral-comment-username"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -1252,6 +1392,11 @@ exports[`renders username and body 1`] = `
className="coral coral-userTag coral-comment-userTag"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -1293,6 +1438,11 @@ exports[`renders username and body 1`] = `
className="coral coral-userBadge coral-comment-userBadge"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -1323,7 +1473,7 @@ exports[`renders username and body 1`] = `
exports[`renders with tombstone when comment has been deleted 1`] = `
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-id"
>
<ForwardRef(forwardRef) />
@@ -1332,7 +1482,7 @@ exports[`renders with tombstone when comment has been deleted 1`] = `
exports[`shows conversation link 1`] = `
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-id"
>
<ForwardRef(forwardRef)>
@@ -1351,6 +1501,11 @@ exports[`shows conversation link 1`] = `
className="coral coral-reactButton coral-comment-reactButton"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -1409,6 +1564,11 @@ exports[`shows conversation link 1`] = `
className="coral coral-reportButton coral-comment-reportButton"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -1459,6 +1619,11 @@ exports[`shows conversation link 1`] = `
className="coral coral-username coral-comment-username"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -1485,6 +1650,11 @@ exports[`shows conversation link 1`] = `
className="coral coral-userTag coral-comment-userTag"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
@@ -1526,6 +1696,11 @@ exports[`shows conversation link 1`] = `
className="coral coral-userBadge coral-comment-userBadge"
comment={
Object {
"actionCounts": Object {
"reaction": Object {
"total": 0,
},
},
"author": Object {
"badges": Array [],
"id": "author-id",
src/core/client/stream/tabs/Comments/__snapshots__/Indent.spec.tsx.snap
+3 -3
View File
@@ -5,7 +5,7 @@ exports[`renders level0 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div>
Hello World
@@ -19,7 +19,7 @@ exports[`renders level1 1`] = `
className="Indent-root"
>
<div
className="Indent-level1 coral coral-indent-1"
className="Indent-level1 coral coral-indent coral-indent-1"
>
<div>
Hello World
@@ -33,7 +33,7 @@ exports[`renders without border 1`] = `
className="Indent-root"
>
<div
className="Indent-level1 coral coral-indent-1 Indent-noBorder"
className="Indent-level1 coral coral-indent coral-indent-1 Indent-noBorder"
>
<div>
Hello World
src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap
+10 -10
View File
@@ -105,7 +105,7 @@ exports[`renders permalink view 1`] = `
</svg>
</div>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-1"
>
<div
@@ -115,7 +115,7 @@ exports[`renders permalink view 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -336,7 +336,7 @@ exports[`renders permalink view 1`] = `
</svg>
</div>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-2"
>
<div
@@ -346,7 +346,7 @@ exports[`renders permalink view 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -565,7 +565,7 @@ exports[`renders permalink view 1`] = `
</svg>
</div>
<div
className="coral coral-comment coral coral-conversationThread-highlighted"
className="coral coral-comment coral coral-reacted-0 coral coral-conversationThread-highlighted"
data-testid="comment-comment-with-replies"
>
<div
@@ -575,7 +575,7 @@ exports[`renders permalink view 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root Comment-highlight HorizontalGutter-half"
@@ -790,7 +790,7 @@ exports[`renders permalink view 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-3"
>
<div
@@ -800,7 +800,7 @@ exports[`renders permalink view 1`] = `
className="Indent-root"
>
<div
className="Indent-level1 coral coral-indent-1"
className="Indent-level1 coral coral-indent coral-indent-1"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -1031,7 +1031,7 @@ exports[`renders permalink view 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-4"
>
<div
@@ -1041,7 +1041,7 @@ exports[`renders permalink view 1`] = `
className="Indent-root"
>
<div
className="Indent-level1 coral coral-indent-1"
className="Indent-level1 coral coral-indent coral-indent-1"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
+8 -8
View File
@@ -150,7 +150,7 @@ exports[`renders conversation thread 1`] = `
</svg>
</div>
<div
className="coral coral-comment coral coral-conversationThread-highlighted"
className="coral coral-comment coral coral-reacted-0 coral coral-conversationThread-highlighted"
data-testid="comment-comment-0"
>
<div
@@ -160,7 +160,7 @@ exports[`renders conversation thread 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root Comment-highlight HorizontalGutter-half"
@@ -394,7 +394,7 @@ exports[`shows more of this conversation 1`] = `
</svg>
</div>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-1"
>
<div
@@ -404,7 +404,7 @@ exports[`shows more of this conversation 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -625,7 +625,7 @@ exports[`shows more of this conversation 1`] = `
</svg>
</div>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-from-staff-0"
>
<div
@@ -635,7 +635,7 @@ exports[`shows more of this conversation 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -860,7 +860,7 @@ exports[`shows more of this conversation 1`] = `
</svg>
</div>
<div
className="coral coral-comment coral coral-conversationThread-highlighted"
className="coral coral-comment coral coral-reacted-0 coral coral-conversationThread-highlighted"
data-testid="comment-comment-0"
>
<div
@@ -870,7 +870,7 @@ exports[`shows more of this conversation 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root Comment-highlight HorizontalGutter-half"
src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
+8 -8
View File
@@ -2,7 +2,7 @@
exports[`cancel edit 1`] = `
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-with-replies"
>
<div
@@ -12,7 +12,7 @@ exports[`cancel edit 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -819,7 +819,7 @@ exports[`edit a comment: optimistic response 1`] = `
exports[`edit a comment: render comment with edit button 1`] = `
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-with-replies"
>
<div
@@ -829,7 +829,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -1066,7 +1066,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
exports[`edit a comment: server response 1`] = `
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-with-replies"
>
<div
@@ -1076,7 +1076,7 @@ exports[`edit a comment: server response 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -1322,7 +1322,7 @@ exports[`edit a comment: server response 1`] = `
exports[`shows expiry message: edit form closed 1`] = `
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-with-replies"
>
<div
@@ -1332,7 +1332,7 @@ exports[`shows expiry message: edit form closed 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap
+4 -4
View File
@@ -12,7 +12,7 @@ exports[`renders comment stream with load more button 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-0"
>
<div
@@ -22,7 +22,7 @@ exports[`renders comment stream with load more button 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -226,7 +226,7 @@ exports[`renders comment stream with load more button 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-1"
>
<div
@@ -236,7 +236,7 @@ exports[`renders comment stream with load more button 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap
+2 -2
View File
@@ -2,7 +2,7 @@
exports[`post a comment: optimistic response 1`] = `
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-uuid-0"
>
<div
@@ -12,7 +12,7 @@ exports[`post a comment: optimistic response 1`] = `
className="IndentedComment-blur Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap
+12 -12
View File
@@ -2,7 +2,7 @@
exports[`post a reply: open reply form 1`] = `
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-with-deepest-replies-3"
>
<div
@@ -12,7 +12,7 @@ exports[`post a reply: open reply form 1`] = `
className="Indent-root"
>
<div
className="Indent-level3 coral coral-indent-3"
className="Indent-level3 coral coral-indent coral-indent-3"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -450,7 +450,7 @@ exports[`post a reply: optimistic response 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-uuid-0"
>
<div
@@ -460,7 +460,7 @@ exports[`post a reply: optimistic response 1`] = `
className="IndentedComment-blur Indent-root"
>
<div
className="Indent-level3 coral coral-indent-3"
className="Indent-level3 coral coral-indent coral-indent-3"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -717,7 +717,7 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-with-deepest-replies"
>
<div
@@ -727,7 +727,7 @@ exports[`renders comment stream 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -955,7 +955,7 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-with-deepest-replies-1"
>
<div
@@ -965,7 +965,7 @@ exports[`renders comment stream 1`] = `
className="Indent-root"
>
<div
className="Indent-level1 coral coral-indent-1"
className="Indent-level1 coral coral-indent coral-indent-1"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -1220,7 +1220,7 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-with-deepest-replies-2"
>
<div
@@ -1230,7 +1230,7 @@ exports[`renders comment stream 1`] = `
className="Indent-root"
>
<div
className="Indent-level2 coral coral-indent-2"
className="Indent-level2 coral coral-indent coral-indent-2"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -1485,7 +1485,7 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-with-deepest-replies-3"
>
<div
@@ -1495,7 +1495,7 @@ exports[`renders comment stream 1`] = `
className="Indent-root"
>
<div
className="Indent-level3 coral coral-indent-3"
className="Indent-level3 coral coral-indent coral-indent-3"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap
+4 -4
View File
@@ -2,7 +2,7 @@
exports[`post a reply: open reply form 1`] = `
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-0"
>
<div
@@ -12,7 +12,7 @@ exports[`post a reply: open reply form 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -406,7 +406,7 @@ exports[`post a reply: optimistic response 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-uuid-0"
>
<div
@@ -416,7 +416,7 @@ exports[`post a reply: optimistic response 1`] = `
className="IndentedComment-blur Indent-root"
>
<div
className="Indent-level1 coral coral-indent-1"
className="Indent-level1 coral coral-indent coral-indent-1"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
+4 -4
View File
@@ -286,7 +286,7 @@ exports[`renders comment stream with community guidelines 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-0"
>
<div
@@ -296,7 +296,7 @@ exports[`renders comment stream with community guidelines 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -500,7 +500,7 @@ exports[`renders comment stream with community guidelines 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-1"
>
<div
@@ -510,7 +510,7 @@ exports[`renders comment stream with community guidelines 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap
+8 -8
View File
@@ -11,7 +11,7 @@ exports[`renders reply list 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-with-replies"
>
<div
@@ -21,7 +21,7 @@ exports[`renders reply list 1`] = `
className="Indent-root"
>
<div
className="Indent-level1 coral coral-indent-1"
className="Indent-level1 coral coral-indent coral-indent-1"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -257,7 +257,7 @@ exports[`renders reply list 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-3"
>
<div
@@ -267,7 +267,7 @@ exports[`renders reply list 1`] = `
className="Indent-root"
>
<div
className="Indent-level2 coral coral-indent-2"
className="Indent-level2 coral coral-indent coral-indent-2"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -498,7 +498,7 @@ exports[`renders reply list 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-4"
>
<div
@@ -508,7 +508,7 @@ exports[`renders reply list 1`] = `
className="Indent-root"
>
<div
className="Indent-level2 coral coral-indent-2"
className="Indent-level2 coral coral-indent coral-indent-2"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -741,7 +741,7 @@ exports[`renders reply list 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-5"
>
<div
@@ -751,7 +751,7 @@ exports[`renders reply list 1`] = `
className="Indent-root"
>
<div
className="Indent-level1 coral coral-indent-1"
className="Indent-level1 coral coral-indent coral-indent-1"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
+4 -4
View File
@@ -308,7 +308,7 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-0"
>
<div
@@ -318,7 +318,7 @@ exports[`renders comment stream 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -522,7 +522,7 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-from-staff-0"
>
<div
@@ -532,7 +532,7 @@ exports[`renders comment stream 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap
+3 -3
View File
@@ -11,7 +11,7 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-1"
>
<div
@@ -21,7 +21,7 @@ exports[`renders comment stream 1`] = `
className="Indent-root"
>
<div
className="Indent-level1 coral coral-indent-1"
className="Indent-level1 coral coral-indent coral-indent-1"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -225,7 +225,7 @@ exports[`renders comment stream 1`] = `
className="Indent-root"
>
<div
className="Indent-level1 coral coral-indent-1 Indent-noBorder"
className="Indent-level1 coral coral-indent coral-indent-1 Indent-noBorder"
>
<button
aria-controls="coral-comments-replyList-log--comment-0"
src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap
+2 -2
View File
@@ -2,7 +2,7 @@
exports[`renders deepest comment with link 1`] = `
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-with-deepest-replies-3"
>
<div
@@ -12,7 +12,7 @@ exports[`renders deepest comment with link 1`] = `
className="Indent-root"
>
<div
className="Indent-level3 coral coral-indent-3"
className="Indent-level3 coral coral-indent coral-indent-3"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap
+4 -4
View File
@@ -12,7 +12,7 @@ exports[`renders app with comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-2"
>
<div
@@ -22,7 +22,7 @@ exports[`renders app with comment stream 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -226,7 +226,7 @@ exports[`renders app with comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
className="coral coral-comment coral coral-reacted-0"
data-testid="comment-comment-3"
>
<div
@@ -236,7 +236,7 @@ exports[`renders app with comment stream 1`] = `
className="Indent-root"
>
<div
className=""
className="coral coral-indent coral-indent-0"
>
<div
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
src/core/client/stream/test/comments/stream/reaction.spec.tsx
+3
View File
@@ -68,11 +68,14 @@ it("create and remove reaction", async () => {
const comment = await waitForElement(() =>
within(testRenderer.root).getByTestID(`comment-${commentID}`)
);
expect(comment.props.className).toContain("coral-reacted-0");
const button = within(comment).getByText("Respect", { selector: "button" });
button.props.onClick({});
expect(within(button).toJSON()).toMatchSnapshot("Respected");
expect(resolvers.Mutation.createCommentReaction.called).toBe(true);
expect(comment.props.className).toContain("coral-reacted-1");
button.props.onClick({});
expect(within(button).toJSON()).toMatchSnapshot("Unrespected");
expect(resolvers.Mutation.removeCommentReaction.called).toBe(true);
expect(comment.props.className).toContain("coral-reacted-0");
});