mirror of
https://github.com/wassname/talk.git
synced 2026-06-27 20:54:05 +08:00
Change load amounts for comments (#2800)
Load 20 comments initially and on load more. Load 3 replies initially and on load more. CORL-864
This commit is contained in:
Nick Funk
@@ -69,7 +69,7 @@ const CommentReplyCreatedSubscription = createSubscription(
|
||||
return;
|
||||
}
|
||||
// Comment is just outside our visible depth.
|
||||
if (depth === 6) {
|
||||
if (depth === 4) {
|
||||
// Inform last comment in visible tree about the available replies.
|
||||
// This will trigger to show the `Read More of this Conversation` link.
|
||||
const replyCount = parentProxy.getValue("replyCount") || 0;
|
||||
|
||||
@@ -18,7 +18,7 @@ import { ReplyListContainer1_settings as SettingsData } from "coral-stream/__gen
|
||||
import { ReplyListContainer1_story as StoryData } from "coral-stream/__generated__/ReplyListContainer1_story.graphql";
|
||||
import { ReplyListContainer1_viewer as ViewerData } from "coral-stream/__generated__/ReplyListContainer1_viewer.graphql";
|
||||
import { ReplyListContainer1PaginationQueryVariables } from "coral-stream/__generated__/ReplyListContainer1PaginationQuery.graphql";
|
||||
import { ReplyListContainer5_comment as Comment5Data } from "coral-stream/__generated__/ReplyListContainer5_comment.graphql";
|
||||
import { ReplyListContainer3_comment as Comment3Data } from "coral-stream/__generated__/ReplyListContainer3_comment.graphql";
|
||||
|
||||
import { isPublished } from "../helpers";
|
||||
import CommentReplyCreatedSubscription from "./CommentReplyCreatedSubscription";
|
||||
@@ -27,7 +27,7 @@ import ReplyList from "./ReplyList";
|
||||
import ReplyListViewNewMutation from "./ReplyListViewNewMutation";
|
||||
|
||||
type UnpackArray<T> = T extends ReadonlyArray<infer U> ? U : any;
|
||||
type ReplyNode5 = UnpackArray<Comment5Data["replies"]["edges"]>["node"];
|
||||
type ReplyNode3 = UnpackArray<Comment3Data["replies"]["edges"]>["node"];
|
||||
|
||||
interface BaseProps {
|
||||
viewer: ViewerData | null;
|
||||
@@ -135,7 +135,7 @@ export const ReplyListContainer: React.FunctionComponent<Props> = props => {
|
||||
),
|
||||
// ReplyListContainer5 contains replyCount.
|
||||
showConversationLink:
|
||||
((edge.node as any) as ReplyNode5).replyCount > 0,
|
||||
((edge.node as any) as ReplyNode3).replyCount > 0,
|
||||
}));
|
||||
return (
|
||||
<ReplyList
|
||||
@@ -202,20 +202,20 @@ function createReplyListContainer(
|
||||
*/
|
||||
const LastReplyList: FunctionComponent<
|
||||
PropTypesOf<typeof LocalReplyListContainer>
|
||||
> = props => <LocalReplyListContainer {...props} indentLevel={6} />;
|
||||
> = props => <LocalReplyListContainer {...props} indentLevel={3} />;
|
||||
|
||||
const ReplyListContainer5 = createReplyListContainer(
|
||||
5,
|
||||
const ReplyListContainer3 = createReplyListContainer(
|
||||
3,
|
||||
{
|
||||
viewer: graphql`
|
||||
fragment ReplyListContainer5_viewer on User {
|
||||
fragment ReplyListContainer3_viewer on User {
|
||||
...CommentContainer_viewer
|
||||
...IgnoredTombstoneOrHideContainer_viewer
|
||||
...LocalReplyListContainer_viewer
|
||||
}
|
||||
`,
|
||||
settings: graphql`
|
||||
fragment ReplyListContainer5_settings on Settings {
|
||||
fragment ReplyListContainer3_settings on Settings {
|
||||
disableCommenting {
|
||||
enabled
|
||||
}
|
||||
@@ -224,7 +224,7 @@ const ReplyListContainer5 = createReplyListContainer(
|
||||
}
|
||||
`,
|
||||
story: graphql`
|
||||
fragment ReplyListContainer5_story on Story {
|
||||
fragment ReplyListContainer3_story on Story {
|
||||
isClosed
|
||||
settings {
|
||||
live {
|
||||
@@ -236,9 +236,9 @@ const ReplyListContainer5 = createReplyListContainer(
|
||||
}
|
||||
`,
|
||||
comment: graphql`
|
||||
fragment ReplyListContainer5_comment on Comment
|
||||
fragment ReplyListContainer3_comment on Comment
|
||||
@argumentDefinitions(
|
||||
count: { type: "Int!", defaultValue: 5 }
|
||||
count: { type: "Int!", defaultValue: 3 }
|
||||
cursor: { type: "Cursor" }
|
||||
orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_ASC }
|
||||
) {
|
||||
@@ -264,161 +264,6 @@ const ReplyListContainer5 = createReplyListContainer(
|
||||
}
|
||||
`,
|
||||
},
|
||||
graphql`
|
||||
# Pagination query to be fetched upon calling 'loadMore'.
|
||||
# Notice that we re-use our fragment, and the shape of this query matches our fragment spec.
|
||||
query ReplyListContainer5PaginationQuery(
|
||||
$count: Int!
|
||||
$cursor: Cursor
|
||||
$orderBy: COMMENT_SORT!
|
||||
$commentID: ID!
|
||||
) {
|
||||
comment(id: $commentID) {
|
||||
...ReplyListContainer5_comment
|
||||
@arguments(count: $count, cursor: $cursor, orderBy: $orderBy)
|
||||
}
|
||||
}
|
||||
`,
|
||||
LastReplyList,
|
||||
true
|
||||
);
|
||||
|
||||
const ReplyListContainer4 = createReplyListContainer(
|
||||
4,
|
||||
{
|
||||
viewer: graphql`
|
||||
fragment ReplyListContainer4_viewer on User {
|
||||
...ReplyListContainer5_viewer
|
||||
...CommentContainer_viewer
|
||||
...IgnoredTombstoneOrHideContainer_viewer
|
||||
}
|
||||
`,
|
||||
settings: graphql`
|
||||
fragment ReplyListContainer4_settings on Settings {
|
||||
disableCommenting {
|
||||
enabled
|
||||
}
|
||||
...ReplyListContainer5_settings
|
||||
...CommentContainer_settings
|
||||
}
|
||||
`,
|
||||
story: graphql`
|
||||
fragment ReplyListContainer4_story on Story {
|
||||
isClosed
|
||||
settings {
|
||||
live {
|
||||
enabled
|
||||
}
|
||||
}
|
||||
...ReplyListContainer5_story
|
||||
...CommentContainer_story
|
||||
}
|
||||
`,
|
||||
comment: graphql`
|
||||
fragment ReplyListContainer4_comment on Comment
|
||||
@argumentDefinitions(
|
||||
count: { type: "Int!", defaultValue: 5 }
|
||||
cursor: { type: "Cursor" }
|
||||
orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_ASC }
|
||||
) {
|
||||
id
|
||||
status
|
||||
lastViewerAction
|
||||
replies(first: $count, after: $cursor, orderBy: $orderBy)
|
||||
@connection(key: "ReplyList_replies") {
|
||||
viewNewEdges {
|
||||
cursor
|
||||
}
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
enteredLive
|
||||
...CommentContainer_comment
|
||||
...IgnoredTombstoneOrHideContainer_comment
|
||||
...ReplyListContainer5_comment
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
},
|
||||
graphql`
|
||||
# Pagination query to be fetched upon calling 'loadMore'.
|
||||
# Notice that we re-use our fragment, and the shape of this query matches our fragment spec.
|
||||
query ReplyListContainer4PaginationQuery(
|
||||
$count: Int!
|
||||
$cursor: Cursor
|
||||
$orderBy: COMMENT_SORT!
|
||||
$commentID: ID!
|
||||
) {
|
||||
comment(id: $commentID) {
|
||||
...ReplyListContainer4_comment
|
||||
@arguments(count: $count, cursor: $cursor, orderBy: $orderBy)
|
||||
}
|
||||
}
|
||||
`,
|
||||
ReplyListContainer5
|
||||
);
|
||||
|
||||
const ReplyListContainer3 = createReplyListContainer(
|
||||
3,
|
||||
{
|
||||
viewer: graphql`
|
||||
fragment ReplyListContainer3_viewer on User {
|
||||
...ReplyListContainer4_viewer
|
||||
...CommentContainer_viewer
|
||||
...IgnoredTombstoneOrHideContainer_viewer
|
||||
}
|
||||
`,
|
||||
settings: graphql`
|
||||
fragment ReplyListContainer3_settings on Settings {
|
||||
disableCommenting {
|
||||
enabled
|
||||
}
|
||||
...ReplyListContainer4_settings
|
||||
...CommentContainer_settings
|
||||
}
|
||||
`,
|
||||
story: graphql`
|
||||
fragment ReplyListContainer3_story on Story {
|
||||
isClosed
|
||||
settings {
|
||||
live {
|
||||
enabled
|
||||
}
|
||||
}
|
||||
...ReplyListContainer4_story
|
||||
...CommentContainer_story
|
||||
}
|
||||
`,
|
||||
comment: graphql`
|
||||
fragment ReplyListContainer3_comment on Comment
|
||||
@argumentDefinitions(
|
||||
count: { type: "Int!", defaultValue: 5 }
|
||||
cursor: { type: "Cursor" }
|
||||
orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_ASC }
|
||||
) {
|
||||
id
|
||||
status
|
||||
lastViewerAction
|
||||
replies(first: $count, after: $cursor, orderBy: $orderBy)
|
||||
@connection(key: "ReplyList_replies") {
|
||||
viewNewEdges {
|
||||
cursor
|
||||
}
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
enteredLive
|
||||
...CommentContainer_comment
|
||||
...IgnoredTombstoneOrHideContainer_comment
|
||||
...ReplyListContainer4_comment
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
},
|
||||
graphql`
|
||||
# Pagination query to be fetched upon calling 'loadMore'.
|
||||
# Notice that we re-use our fragment, and the shape of this query matches our fragment spec.
|
||||
@@ -434,9 +279,9 @@ const ReplyListContainer3 = createReplyListContainer(
|
||||
}
|
||||
}
|
||||
`,
|
||||
ReplyListContainer4
|
||||
LastReplyList,
|
||||
true
|
||||
);
|
||||
|
||||
const ReplyListContainer2 = createReplyListContainer(
|
||||
2,
|
||||
{
|
||||
@@ -471,7 +316,7 @@ const ReplyListContainer2 = createReplyListContainer(
|
||||
comment: graphql`
|
||||
fragment ReplyListContainer2_comment on Comment
|
||||
@argumentDefinitions(
|
||||
count: { type: "Int!", defaultValue: 5 }
|
||||
count: { type: "Int!", defaultValue: 3 }
|
||||
cursor: { type: "Cursor" }
|
||||
orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_ASC }
|
||||
) {
|
||||
@@ -548,7 +393,7 @@ const ReplyListContainer1 = createReplyListContainer(
|
||||
comment: graphql`
|
||||
fragment ReplyListContainer1_comment on Comment
|
||||
@argumentDefinitions(
|
||||
count: { type: "Int!", defaultValue: 5 }
|
||||
count: { type: "Int!", defaultValue: 3 }
|
||||
cursor: { type: "Cursor" }
|
||||
orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_ASC }
|
||||
) {
|
||||
|
||||
+2
-2
@@ -105,7 +105,7 @@ export const AllCommentsTabContainer: FunctionComponent<Props> = props => {
|
||||
props.relay.hasMore(),
|
||||
props.story.settings.live.enabled,
|
||||
]);
|
||||
const [loadMore, isLoadingMore] = useLoadMore(props.relay, 10);
|
||||
const [loadMore, isLoadingMore] = useLoadMore(props.relay, 20);
|
||||
const beginLoadMoreEvent = useViewerNetworkEvent(LoadMoreAllCommentsEvent);
|
||||
const loadMoreAndEmit = useCallback(async () => {
|
||||
const loadMoreEvent = beginLoadMoreEvent({ storyID: props.story.id });
|
||||
@@ -219,7 +219,7 @@ const enhanced = withPaginationContainer<
|
||||
story: graphql`
|
||||
fragment AllCommentsTabContainer_story on Story
|
||||
@argumentDefinitions(
|
||||
count: { type: "Int!", defaultValue: 5 }
|
||||
count: { type: "Int!", defaultValue: 20 }
|
||||
cursor: { type: "Cursor" }
|
||||
orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_DESC }
|
||||
) {
|
||||
|
||||
+40
-568
@@ -3,7 +3,7 @@
|
||||
exports[`post a reply: open reply form 1`] = `
|
||||
<div
|
||||
className="coral coral-comment"
|
||||
data-testid="comment-comment-with-deepest-replies-5"
|
||||
data-testid="comment-comment-with-deepest-replies-3"
|
||||
>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root HorizontalGutter-full"
|
||||
@@ -12,7 +12,7 @@ exports[`post a reply: open reply form 1`] = `
|
||||
className="Indent-root"
|
||||
>
|
||||
<div
|
||||
className="Indent-level5 coral coral-indent-5"
|
||||
className="Indent-level3 coral coral-indent-3"
|
||||
>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
|
||||
@@ -31,7 +31,7 @@ exports[`post a reply: open reply form 1`] = `
|
||||
className="Popover-root"
|
||||
>
|
||||
<button
|
||||
aria-controls="username-popover-comment-with-deepest-replies-5"
|
||||
aria-controls="username-popover-comment-with-deepest-replies-3"
|
||||
className="BaseButton-root coral coral-username coral-comment-username"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
@@ -49,13 +49,13 @@ exports[`post a reply: open reply form 1`] = `
|
||||
</button>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
aria-labelledby="username-popover-comment-with-deepest-replies-5-ariainfo"
|
||||
id="username-popover-comment-with-deepest-replies-5"
|
||||
aria-labelledby="username-popover-comment-with-deepest-replies-3-ariainfo"
|
||||
id="username-popover-comment-with-deepest-replies-3"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
className="AriaInfo-root"
|
||||
id="username-popover-comment-with-deepest-replies-5-ariainfo"
|
||||
id="username-popover-comment-with-deepest-replies-3-ariainfo"
|
||||
>
|
||||
A popover with more user information
|
||||
</div>
|
||||
@@ -125,7 +125,7 @@ exports[`post a reply: open reply form 1`] = `
|
||||
className="HTMLContent-root coral coral-content coral-comment-content"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "body 5",
|
||||
"__html": "body 3",
|
||||
}
|
||||
}
|
||||
/>
|
||||
@@ -158,7 +158,7 @@ exports[`post a reply: open reply form 1`] = `
|
||||
data-color="primary"
|
||||
data-variant="textUnderlined"
|
||||
disabled={false}
|
||||
id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
|
||||
id="comments-commentContainer-replyButton-comment-with-deepest-replies-3"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
@@ -175,7 +175,7 @@ exports[`post a reply: open reply form 1`] = `
|
||||
className="Popover-root"
|
||||
>
|
||||
<button
|
||||
aria-controls="permalink-popover-comment-with-deepest-replies-5"
|
||||
aria-controls="permalink-popover-comment-with-deepest-replies-3"
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
|
||||
data-active={false}
|
||||
data-color="primary"
|
||||
@@ -194,13 +194,13 @@ exports[`post a reply: open reply form 1`] = `
|
||||
</button>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
aria-labelledby="permalink-popover-comment-with-deepest-replies-5-ariainfo"
|
||||
id="permalink-popover-comment-with-deepest-replies-5"
|
||||
aria-labelledby="permalink-popover-comment-with-deepest-replies-3-ariainfo"
|
||||
id="permalink-popover-comment-with-deepest-replies-3"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
className="AriaInfo-root"
|
||||
id="permalink-popover-comment-with-deepest-replies-5-ariainfo"
|
||||
id="permalink-popover-comment-with-deepest-replies-3-ariainfo"
|
||||
>
|
||||
A dialog showing a permalink to the comment
|
||||
</div>
|
||||
@@ -214,7 +214,7 @@ exports[`post a reply: open reply form 1`] = `
|
||||
className="Popover-root"
|
||||
>
|
||||
<button
|
||||
aria-controls="report-popover-comment-with-deepest-replies-5"
|
||||
aria-controls="report-popover-comment-with-deepest-replies-3"
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
|
||||
data-active={false}
|
||||
data-color="error"
|
||||
@@ -234,13 +234,13 @@ exports[`post a reply: open reply form 1`] = `
|
||||
</button>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
aria-labelledby="report-popover-comment-with-deepest-replies-5-ariainfo"
|
||||
id="report-popover-comment-with-deepest-replies-5"
|
||||
aria-labelledby="report-popover-comment-with-deepest-replies-3-ariainfo"
|
||||
id="report-popover-comment-with-deepest-replies-3"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
className="AriaInfo-root"
|
||||
id="report-popover-comment-with-deepest-replies-5-ariainfo"
|
||||
id="report-popover-comment-with-deepest-replies-3-ariainfo"
|
||||
>
|
||||
A dialog for reporting comments
|
||||
</div>
|
||||
@@ -252,8 +252,8 @@ exports[`post a reply: open reply form 1`] = `
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined coral coral-comment-readMoreOfConveration"
|
||||
data-color="primary"
|
||||
data-variant="underlined"
|
||||
href="http://localhost/stories/story-with-replies?commentID=comment-with-deepest-replies-5"
|
||||
id="comments-commentContainer-showConversation-comment-with-deepest-replies-5"
|
||||
href="http://localhost/stories/story-with-replies?commentID=comment-with-deepest-replies-3"
|
||||
id="comments-commentContainer-showConversation-comment-with-deepest-replies-3"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
@@ -272,7 +272,7 @@ exports[`post a reply: open reply form 1`] = `
|
||||
<form
|
||||
autoComplete="off"
|
||||
className="coral coral-createReplyComment"
|
||||
id="comments-replyCommentForm-form-comment-with-deepest-replies-5"
|
||||
id="comments-replyCommentForm-form-comment-with-deepest-replies-3"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div
|
||||
@@ -284,7 +284,7 @@ exports[`post a reply: open reply form 1`] = `
|
||||
<div>
|
||||
<label
|
||||
className="AriaInfo-root"
|
||||
htmlFor="comments-replyCommentForm-rte-comment-with-deepest-replies-5"
|
||||
htmlFor="comments-replyCommentForm-rte-comment-with-deepest-replies-3"
|
||||
>
|
||||
Write a reply
|
||||
</label>
|
||||
@@ -330,7 +330,7 @@ exports[`post a reply: open reply form 1`] = `
|
||||
}
|
||||
}
|
||||
disabled={false}
|
||||
id="comments-replyCommentForm-rte-comment-with-deepest-replies-5"
|
||||
id="comments-replyCommentForm-rte-comment-with-deepest-replies-3"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onCut={[Function]}
|
||||
@@ -439,8 +439,8 @@ exports[`post a reply: open reply form 1`] = `
|
||||
exports[`post a reply: optimistic response 1`] = `
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root HorizontalGutter-full"
|
||||
data-testid="commentReplyList-comment-with-deepest-replies-5"
|
||||
id="coral-comments-replyList-log--comment-with-deepest-replies-5"
|
||||
data-testid="commentReplyList-comment-with-deepest-replies-3"
|
||||
id="coral-comments-replyList-log--comment-with-deepest-replies-3"
|
||||
role="log"
|
||||
>
|
||||
<div
|
||||
@@ -457,7 +457,7 @@ exports[`post a reply: optimistic response 1`] = `
|
||||
className="IndentedComment-blur Indent-root"
|
||||
>
|
||||
<div
|
||||
className="Indent-level6 coral coral-indent-6"
|
||||
className="Indent-level3 coral coral-indent-3"
|
||||
>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
|
||||
@@ -1716,551 +1716,23 @@ exports[`renders comment stream 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root HorizontalGutter-full"
|
||||
data-testid="commentReplyList-comment-with-deepest-replies-3"
|
||||
id="coral-comments-replyList-log--comment-with-deepest-replies-3"
|
||||
role="log"
|
||||
>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root HorizontalGutter-full"
|
||||
>
|
||||
<div
|
||||
className="coral coral-comment"
|
||||
data-testid="comment-comment-with-deepest-replies-4"
|
||||
>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root HorizontalGutter-full"
|
||||
>
|
||||
<div
|
||||
className="Indent-root"
|
||||
>
|
||||
<div
|
||||
className="Indent-level4 coral coral-indent-4"
|
||||
>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
|
||||
role="article"
|
||||
<a
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined coral coral-comment-readMoreOfConveration"
|
||||
data-color="primary"
|
||||
data-variant="underlined"
|
||||
href="http://localhost/stories/story-with-replies?commentID=comment-with-deepest-replies-3"
|
||||
id="comments-commentContainer-showConversation-comment-with-deepest-replies-3"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
target="_parent"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
|
||||
>
|
||||
<div
|
||||
className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
|
||||
>
|
||||
<div
|
||||
className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
|
||||
>
|
||||
<div
|
||||
className="Popover-root"
|
||||
>
|
||||
<button
|
||||
aria-controls="username-popover-comment-with-deepest-replies-4"
|
||||
className="BaseButton-root coral coral-username coral-comment-username"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
|
||||
>
|
||||
Markus
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
aria-labelledby="username-popover-comment-with-deepest-replies-4-ariainfo"
|
||||
id="username-popover-comment-with-deepest-replies-4"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
className="AriaInfo-root"
|
||||
id="username-popover-comment-with-deepest-replies-4-ariainfo"
|
||||
>
|
||||
A popover with more user information
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Timestamp-root"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<time
|
||||
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="Comment-subBar"
|
||||
>
|
||||
<div
|
||||
className="Box-root Flex-root coral coral-comment-inReplyTo Flex-flex Flex-alignCenter"
|
||||
>
|
||||
<i
|
||||
aria-hidden="true"
|
||||
className="Icon-root Icon-sm InReplyTo-icon"
|
||||
>
|
||||
reply
|
||||
</i>
|
||||
<span>
|
||||
|
||||
</span>
|
||||
<span
|
||||
className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary InReplyTo-inReplyTo coral coral-comment-inReplyToText"
|
||||
>
|
||||
In reply to
|
||||
<span
|
||||
className="Box-root Typography-root Typography-heading4 Typography-colorTextDark InReplyTo-username coral coral-comment-inReplyToUsername"
|
||||
>
|
||||
Markus
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
|
||||
>
|
||||
<div
|
||||
className="HTMLContent-root coral coral-content coral-comment-content"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "body 4",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<div
|
||||
className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
|
||||
>
|
||||
<div
|
||||
className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
|
||||
data-color="primary"
|
||||
data-variant="textUnderlined"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Respect
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
|
||||
data-active={false}
|
||||
data-color="primary"
|
||||
data-variant="textUnderlined"
|
||||
disabled={false}
|
||||
id="comments-commentContainer-replyButton-comment-with-deepest-replies-4"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Reply
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
className="Popover-root"
|
||||
>
|
||||
<button
|
||||
aria-controls="permalink-popover-comment-with-deepest-replies-4"
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
|
||||
data-active={false}
|
||||
data-color="primary"
|
||||
data-variant="textUnderlined"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Share
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
aria-labelledby="permalink-popover-comment-with-deepest-replies-4-ariainfo"
|
||||
id="permalink-popover-comment-with-deepest-replies-4"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
className="AriaInfo-root"
|
||||
id="permalink-popover-comment-with-deepest-replies-4-ariainfo"
|
||||
>
|
||||
A dialog showing a permalink to the comment
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
|
||||
>
|
||||
<div
|
||||
className="Popover-root"
|
||||
>
|
||||
<button
|
||||
aria-controls="report-popover-comment-with-deepest-replies-4"
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
|
||||
data-active={false}
|
||||
data-color="error"
|
||||
data-variant="textUnderlined"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Report
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
aria-labelledby="report-popover-comment-with-deepest-replies-4-ariainfo"
|
||||
id="report-popover-comment-with-deepest-replies-4"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
className="AriaInfo-root"
|
||||
id="report-popover-comment-with-deepest-replies-4-ariainfo"
|
||||
>
|
||||
A dialog for reporting comments
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root HorizontalGutter-full"
|
||||
data-testid="commentReplyList-comment-with-deepest-replies-4"
|
||||
id="coral-comments-replyList-log--comment-with-deepest-replies-4"
|
||||
role="log"
|
||||
>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root HorizontalGutter-full"
|
||||
>
|
||||
<div
|
||||
className="coral coral-comment"
|
||||
data-testid="comment-comment-with-deepest-replies-5"
|
||||
>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root HorizontalGutter-full"
|
||||
>
|
||||
<div
|
||||
className="Indent-root"
|
||||
>
|
||||
<div
|
||||
className="Indent-level5 coral coral-indent-5"
|
||||
>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
|
||||
role="article"
|
||||
>
|
||||
<div
|
||||
className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
|
||||
>
|
||||
<div
|
||||
className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
|
||||
>
|
||||
<div
|
||||
className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
|
||||
>
|
||||
<div
|
||||
className="Popover-root"
|
||||
>
|
||||
<button
|
||||
aria-controls="username-popover-comment-with-deepest-replies-5"
|
||||
className="BaseButton-root coral coral-username coral-comment-username"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
|
||||
>
|
||||
Markus
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
aria-labelledby="username-popover-comment-with-deepest-replies-5-ariainfo"
|
||||
id="username-popover-comment-with-deepest-replies-5"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
className="AriaInfo-root"
|
||||
id="username-popover-comment-with-deepest-replies-5-ariainfo"
|
||||
>
|
||||
A popover with more user information
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Timestamp-root"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<time
|
||||
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="Comment-subBar"
|
||||
>
|
||||
<div
|
||||
className="Box-root Flex-root coral coral-comment-inReplyTo Flex-flex Flex-alignCenter"
|
||||
>
|
||||
<i
|
||||
aria-hidden="true"
|
||||
className="Icon-root Icon-sm InReplyTo-icon"
|
||||
>
|
||||
reply
|
||||
</i>
|
||||
<span>
|
||||
|
||||
</span>
|
||||
<span
|
||||
className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary InReplyTo-inReplyTo coral coral-comment-inReplyToText"
|
||||
>
|
||||
In reply to
|
||||
<span
|
||||
className="Box-root Typography-root Typography-heading4 Typography-colorTextDark InReplyTo-username coral coral-comment-inReplyToUsername"
|
||||
>
|
||||
Markus
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
|
||||
>
|
||||
<div
|
||||
className="HTMLContent-root coral coral-content coral-comment-content"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "body 5",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<div
|
||||
className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
|
||||
>
|
||||
<div
|
||||
className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
|
||||
data-color="primary"
|
||||
data-variant="textUnderlined"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Respect
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
|
||||
data-active={false}
|
||||
data-color="primary"
|
||||
data-variant="textUnderlined"
|
||||
disabled={false}
|
||||
id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Reply
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
className="Popover-root"
|
||||
>
|
||||
<button
|
||||
aria-controls="permalink-popover-comment-with-deepest-replies-5"
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
|
||||
data-active={false}
|
||||
data-color="primary"
|
||||
data-variant="textUnderlined"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Share
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
aria-labelledby="permalink-popover-comment-with-deepest-replies-5-ariainfo"
|
||||
id="permalink-popover-comment-with-deepest-replies-5"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
className="AriaInfo-root"
|
||||
id="permalink-popover-comment-with-deepest-replies-5-ariainfo"
|
||||
>
|
||||
A dialog showing a permalink to the comment
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
|
||||
>
|
||||
<div
|
||||
className="Popover-root"
|
||||
>
|
||||
<button
|
||||
aria-controls="report-popover-comment-with-deepest-replies-5"
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
|
||||
data-active={false}
|
||||
data-color="error"
|
||||
data-variant="textUnderlined"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Report
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
aria-labelledby="report-popover-comment-with-deepest-replies-5-ariainfo"
|
||||
id="report-popover-comment-with-deepest-replies-5"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
className="AriaInfo-root"
|
||||
id="report-popover-comment-with-deepest-replies-5-ariainfo"
|
||||
>
|
||||
A dialog for reporting comments
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined coral coral-comment-readMoreOfConveration"
|
||||
data-color="primary"
|
||||
data-variant="underlined"
|
||||
href="http://localhost/stories/story-with-replies?commentID=comment-with-deepest-replies-5"
|
||||
id="comments-commentContainer-showConversation-comment-with-deepest-replies-5"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
target="_parent"
|
||||
type="button"
|
||||
>
|
||||
Read More of this Conversation >
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Read More of this Conversation >
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+14
-14
@@ -3,7 +3,7 @@
|
||||
exports[`renders deepest comment with link 1`] = `
|
||||
<div
|
||||
className="coral coral-comment"
|
||||
data-testid="comment-comment-with-deepest-replies-5"
|
||||
data-testid="comment-comment-with-deepest-replies-3"
|
||||
>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root HorizontalGutter-full"
|
||||
@@ -12,7 +12,7 @@ exports[`renders deepest comment with link 1`] = `
|
||||
className="Indent-root"
|
||||
>
|
||||
<div
|
||||
className="Indent-level5 coral coral-indent-5"
|
||||
className="Indent-level3 coral coral-indent-3"
|
||||
>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
|
||||
@@ -31,7 +31,7 @@ exports[`renders deepest comment with link 1`] = `
|
||||
className="Popover-root"
|
||||
>
|
||||
<button
|
||||
aria-controls="username-popover-comment-with-deepest-replies-5"
|
||||
aria-controls="username-popover-comment-with-deepest-replies-3"
|
||||
className="BaseButton-root coral coral-username coral-comment-username"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
@@ -49,13 +49,13 @@ exports[`renders deepest comment with link 1`] = `
|
||||
</button>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
aria-labelledby="username-popover-comment-with-deepest-replies-5-ariainfo"
|
||||
id="username-popover-comment-with-deepest-replies-5"
|
||||
aria-labelledby="username-popover-comment-with-deepest-replies-3-ariainfo"
|
||||
id="username-popover-comment-with-deepest-replies-3"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
className="AriaInfo-root"
|
||||
id="username-popover-comment-with-deepest-replies-5-ariainfo"
|
||||
id="username-popover-comment-with-deepest-replies-3-ariainfo"
|
||||
>
|
||||
A popover with more user information
|
||||
</div>
|
||||
@@ -125,7 +125,7 @@ exports[`renders deepest comment with link 1`] = `
|
||||
className="HTMLContent-root coral coral-content coral-comment-content"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "body 5",
|
||||
"__html": "body 3",
|
||||
}
|
||||
}
|
||||
/>
|
||||
@@ -158,7 +158,7 @@ exports[`renders deepest comment with link 1`] = `
|
||||
data-color="primary"
|
||||
data-variant="textUnderlined"
|
||||
disabled={false}
|
||||
id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
|
||||
id="comments-commentContainer-replyButton-comment-with-deepest-replies-3"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
@@ -175,7 +175,7 @@ exports[`renders deepest comment with link 1`] = `
|
||||
className="Popover-root"
|
||||
>
|
||||
<button
|
||||
aria-controls="permalink-popover-comment-with-deepest-replies-5"
|
||||
aria-controls="permalink-popover-comment-with-deepest-replies-3"
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
|
||||
data-active={false}
|
||||
data-color="primary"
|
||||
@@ -194,13 +194,13 @@ exports[`renders deepest comment with link 1`] = `
|
||||
</button>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
aria-labelledby="permalink-popover-comment-with-deepest-replies-5-ariainfo"
|
||||
id="permalink-popover-comment-with-deepest-replies-5"
|
||||
aria-labelledby="permalink-popover-comment-with-deepest-replies-3-ariainfo"
|
||||
id="permalink-popover-comment-with-deepest-replies-3"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
className="AriaInfo-root"
|
||||
id="permalink-popover-comment-with-deepest-replies-5-ariainfo"
|
||||
id="permalink-popover-comment-with-deepest-replies-3-ariainfo"
|
||||
>
|
||||
A dialog showing a permalink to the comment
|
||||
</div>
|
||||
@@ -233,8 +233,8 @@ exports[`renders deepest comment with link 1`] = `
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined coral coral-comment-readMoreOfConveration"
|
||||
data-color="primary"
|
||||
data-variant="underlined"
|
||||
href="http://localhost/stories/story-with-replies?commentID=comment-with-deepest-replies-5"
|
||||
id="comments-commentContainer-showConversation-comment-with-deepest-replies-5"
|
||||
href="http://localhost/stories/story-with-replies?commentID=comment-with-deepest-replies-3"
|
||||
id="comments-commentContainer-showConversation-comment-with-deepest-replies-3"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
|
||||
@@ -55,38 +55,10 @@ const rootComment = denormalizeComment(
|
||||
...baseComment,
|
||||
id: "my-comment-3",
|
||||
body: "body 3",
|
||||
replyCount: 1,
|
||||
replyCount: 0,
|
||||
replies: {
|
||||
...baseComment.replies,
|
||||
edges: [
|
||||
{
|
||||
cursor: baseComment.createdAt,
|
||||
node: {
|
||||
...baseComment,
|
||||
id: "my-comment-4",
|
||||
body: "body 4",
|
||||
replyCount: 1,
|
||||
replies: {
|
||||
...baseComment.replies,
|
||||
edges: [
|
||||
{
|
||||
cursor: baseComment.createdAt,
|
||||
node: {
|
||||
...baseComment,
|
||||
id: "my-comment-5",
|
||||
body: "body 5",
|
||||
replyCount: 0,
|
||||
replies: {
|
||||
...baseComment.replies,
|
||||
edges: [],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
edges: [],
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -208,7 +180,7 @@ it("should show Read More of this Conversation", async () => {
|
||||
}
|
||||
return {
|
||||
comment: pureMerge<typeof commentData>(commentData, {
|
||||
parent: { ...baseComment, id: "my-comment-5" },
|
||||
parent: { ...baseComment, id: "my-comment-3" },
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
@@ -13,6 +13,8 @@ import {
|
||||
import { comments, settings, stories } from "../../fixtures";
|
||||
import create from "./create";
|
||||
|
||||
const loadMoreDateCursor = "2019-07-06T18:24:00.000Z";
|
||||
|
||||
let testRenderer: ReactTestRenderer;
|
||||
beforeEach(() => {
|
||||
const storyStub = {
|
||||
@@ -21,7 +23,28 @@ beforeEach(() => {
|
||||
s.callsFake((input: any) => {
|
||||
if (
|
||||
isMatch(input, {
|
||||
first: 5,
|
||||
first: 20,
|
||||
orderBy: "CREATED_AT_DESC",
|
||||
after: loadMoreDateCursor,
|
||||
})
|
||||
) {
|
||||
return {
|
||||
edges: [
|
||||
{
|
||||
node: comments[2],
|
||||
cursor: "2019-08-06T18:24:00.000Z",
|
||||
},
|
||||
],
|
||||
pageInfo: {
|
||||
endCursor: "2019-08-06T18:24:00.000Z",
|
||||
hasNextPage: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
if (
|
||||
isMatch(input, {
|
||||
first: 20,
|
||||
orderBy: "CREATED_AT_DESC",
|
||||
})
|
||||
) {
|
||||
@@ -33,35 +56,16 @@ beforeEach(() => {
|
||||
},
|
||||
{
|
||||
node: comments[1],
|
||||
cursor: comments[1].createdAt,
|
||||
cursor: loadMoreDateCursor,
|
||||
},
|
||||
],
|
||||
pageInfo: {
|
||||
endCursor: comments[1].createdAt,
|
||||
endCursor: loadMoreDateCursor,
|
||||
hasNextPage: true,
|
||||
},
|
||||
};
|
||||
}
|
||||
if (
|
||||
isMatch(input, {
|
||||
first: 10,
|
||||
orderBy: "CREATED_AT_DESC",
|
||||
after: comments[1].createdAt,
|
||||
})
|
||||
) {
|
||||
return {
|
||||
edges: [
|
||||
{
|
||||
node: comments[2],
|
||||
cursor: comments[2].createdAt,
|
||||
},
|
||||
],
|
||||
pageInfo: {
|
||||
endCursor: comments[2].createdAt,
|
||||
hasNextPage: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
throw new Error("Unexpected request");
|
||||
})
|
||||
),
|
||||
@@ -111,7 +115,11 @@ it("renders comment stream with load more button", async () => {
|
||||
const streamLog = await waitForElement(() =>
|
||||
within(testRenderer.root).getByTestID("comments-allComments-log")
|
||||
);
|
||||
|
||||
expect(within(streamLog).toJSON()).toMatchSnapshot();
|
||||
await wait(() =>
|
||||
expect(within(streamLog).queryByText("Load More")).toBeDefined()
|
||||
);
|
||||
});
|
||||
|
||||
it("loads more comments", async () => {
|
||||
@@ -128,14 +136,13 @@ it("loads more comments", async () => {
|
||||
within(streamLog)
|
||||
.getByText("Load More")
|
||||
.props.onClick();
|
||||
|
||||
// Wait for load more button to disappear
|
||||
|
||||
// Should now have one more comment
|
||||
await wait(() =>
|
||||
expect(within(streamLog).queryByText("Load More")).toBeNull()
|
||||
);
|
||||
});
|
||||
|
||||
// Should now have one more comment
|
||||
await wait(() =>
|
||||
expect(within(streamLog).queryByText("Load More")).toBeNull()
|
||||
);
|
||||
|
||||
expect(within(streamLog).getAllByTestID(/^comment-/).length).toBe(
|
||||
commentsBefore + 1
|
||||
);
|
||||
|
||||
@@ -35,7 +35,7 @@ beforeEach(() => {
|
||||
createCommentReply: sinon.stub().callsFake((_: any, data: any) => {
|
||||
expectAndFail(data.input).toMatchObject({
|
||||
storyID: storyWithDeepestReplies.id,
|
||||
parentID: "comment-with-deepest-replies-5",
|
||||
parentID: "comment-with-deepest-replies-3",
|
||||
parentRevisionID: "revision-0",
|
||||
body: "<b>Hello world!</b>",
|
||||
});
|
||||
@@ -79,7 +79,7 @@ it("post a reply", async () => {
|
||||
);
|
||||
|
||||
const deepestReply = within(streamLog).getByTestID(
|
||||
"comment-comment-with-deepest-replies-5"
|
||||
"comment-comment-with-deepest-replies-3"
|
||||
);
|
||||
|
||||
// Open reply form.
|
||||
@@ -98,7 +98,7 @@ it("post a reply", async () => {
|
||||
act(() =>
|
||||
testRenderer.root
|
||||
.findByProps({
|
||||
inputId: "comments-replyCommentForm-rte-comment-with-deepest-replies-5",
|
||||
inputId: "comments-replyCommentForm-rte-comment-with-deepest-replies-3",
|
||||
})
|
||||
.props.onChange({ html: "<b>Hello world!</b>" })
|
||||
);
|
||||
@@ -109,7 +109,7 @@ it("post a reply", async () => {
|
||||
});
|
||||
|
||||
const deepestReplyList = within(streamLog).getByTestID(
|
||||
"commentReplyList-comment-with-deepest-replies-5"
|
||||
"commentReplyList-comment-with-deepest-replies-3"
|
||||
);
|
||||
|
||||
// Test optimistic response.
|
||||
|
||||
@@ -19,7 +19,7 @@ beforeEach(() => {
|
||||
replies: createSinonStub(
|
||||
s => s.throws(),
|
||||
s =>
|
||||
s.withArgs({ first: 5, orderBy: "CREATED_AT_ASC" }).returns({
|
||||
s.withArgs({ first: 3, orderBy: "CREATED_AT_ASC" }).returns({
|
||||
edges: [
|
||||
{
|
||||
node: comments[1],
|
||||
|
||||
@@ -27,10 +27,10 @@ beforeEach(() => {
|
||||
s => s.throws(),
|
||||
s =>
|
||||
s
|
||||
.withArgs(undefined, { id: "comment-with-deepest-replies-5" })
|
||||
.withArgs(undefined, { id: "comment-with-deepest-replies-3" })
|
||||
.returns({
|
||||
...comments[0],
|
||||
id: "comment-with-deepest-replies-5",
|
||||
id: "comment-with-deepest-replies-3",
|
||||
})
|
||||
),
|
||||
settings: sinon.stub().returns(settings),
|
||||
@@ -52,7 +52,7 @@ it("renders deepest comment with link", async () => {
|
||||
within(testRenderer.root).getByTestID("comments-allComments-log")
|
||||
);
|
||||
const deepestReply = within(streamLog).getByTestID(
|
||||
"comment-comment-with-deepest-replies-5"
|
||||
"comment-comment-with-deepest-replies-3"
|
||||
);
|
||||
expect(within(deepestReply).toJSON()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@@ -37,13 +37,13 @@ it("renders app with comment stream", async () => {
|
||||
s.callsFake((input: any) => {
|
||||
if (!changedSort) {
|
||||
expectAndFail(input).toMatchObject({
|
||||
first: 5,
|
||||
first: 20,
|
||||
orderBy: "CREATED_AT_DESC",
|
||||
});
|
||||
return stories[0].comments;
|
||||
}
|
||||
expectAndFail(input).toMatchObject({
|
||||
first: 5,
|
||||
first: 20,
|
||||
orderBy: "CREATED_AT_ASC",
|
||||
});
|
||||
return stories[1].comments;
|
||||
|
||||
@@ -307,6 +307,81 @@ export const comments = denormalizeComments(
|
||||
author: commenters[2],
|
||||
body: "Comment Body 5",
|
||||
},
|
||||
{
|
||||
id: "comment-6",
|
||||
author: commenters[2],
|
||||
body: "Comment Body 5",
|
||||
},
|
||||
{
|
||||
id: "comment-7",
|
||||
author: commenters[2],
|
||||
body: "Comment Body 5",
|
||||
},
|
||||
{
|
||||
id: "comment-8",
|
||||
author: commenters[2],
|
||||
body: "Comment Body 5",
|
||||
},
|
||||
{
|
||||
id: "comment-9",
|
||||
author: commenters[2],
|
||||
body: "Comment Body 5",
|
||||
},
|
||||
{
|
||||
id: "comment-10",
|
||||
author: commenters[2],
|
||||
body: "Comment Body 5",
|
||||
},
|
||||
{
|
||||
id: "comment-11",
|
||||
author: commenters[2],
|
||||
body: "Comment Body 5",
|
||||
},
|
||||
{
|
||||
id: "comment-12",
|
||||
author: commenters[2],
|
||||
body: "Comment Body 5",
|
||||
},
|
||||
{
|
||||
id: "comment-13",
|
||||
author: commenters[2],
|
||||
body: "Comment Body 5",
|
||||
},
|
||||
{
|
||||
id: "comment-14",
|
||||
author: commenters[2],
|
||||
body: "Comment Body 5",
|
||||
},
|
||||
{
|
||||
id: "comment-15",
|
||||
author: commenters[2],
|
||||
body: "Comment Body 5",
|
||||
},
|
||||
{
|
||||
id: "comment-16",
|
||||
author: commenters[2],
|
||||
body: "Comment Body 5",
|
||||
},
|
||||
{
|
||||
id: "comment-17",
|
||||
author: commenters[2],
|
||||
body: "Comment Body 5",
|
||||
},
|
||||
{
|
||||
id: "comment-18",
|
||||
author: commenters[2],
|
||||
body: "Comment Body 5",
|
||||
},
|
||||
{
|
||||
id: "comment-19",
|
||||
author: commenters[2],
|
||||
body: "Comment Body 5",
|
||||
},
|
||||
{
|
||||
id: "comment-20",
|
||||
author: commenters[2],
|
||||
body: "Comment Body 5",
|
||||
},
|
||||
],
|
||||
baseComment
|
||||
)
|
||||
@@ -403,41 +478,11 @@ export const commentWithDeepestReplies = denormalizeComment(
|
||||
node: {
|
||||
...baseComment,
|
||||
id: "comment-with-deepest-replies-4",
|
||||
body: "body 4",
|
||||
body: "body 1",
|
||||
replyCount: 1,
|
||||
replies: {
|
||||
...baseComment.replies,
|
||||
edges: [
|
||||
{
|
||||
cursor: baseComment.createdAt,
|
||||
node: {
|
||||
...baseComment,
|
||||
id:
|
||||
"comment-with-deepest-replies-5",
|
||||
body: "body 5",
|
||||
replyCount: 1,
|
||||
replies: {
|
||||
...baseComment.replies,
|
||||
edges: [
|
||||
{
|
||||
cursor: baseComment.createdAt,
|
||||
node: {
|
||||
...baseComment,
|
||||
id:
|
||||
"comment-with-deepest-replies-6",
|
||||
body: "body 6",
|
||||
replyCount: 1,
|
||||
replies: {
|
||||
...baseComment.replies,
|
||||
edges: [],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
edges: [],
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -2611,7 +2611,7 @@ type Story {
|
||||
comments are the comments on the Story.
|
||||
"""
|
||||
comments(
|
||||
first: Int = 10 @constraint(max: 50)
|
||||
first: Int = 20 @constraint(max: 50)
|
||||
orderBy: COMMENT_SORT = CREATED_AT_DESC
|
||||
after: Cursor
|
||||
): CommentsConnection!
|
||||
|
||||
Reference in New Issue
Block a user