From 18e6638162523af85a81c43481165328666da155 Mon Sep 17 00:00:00 2001 From: Kiwi Date: Fri, 21 Sep 2018 17:57:33 +0200 Subject: [PATCH] [next] Limited threading (#1894) * Implement limited threading * Adapt snapshots * Test threading --- .../tabs/comments/components/Indent.css | 24 + .../tabs/comments/components/Indent.tsx | 20 +- .../tabs/comments/components/ReplyList.tsx | 28 +- .../__snapshots__/Indent.spec.tsx.snap | 28 +- .../__snapshots__/ReplyList.spec.tsx.snap | 180 +-- .../__snapshots__/Stream.spec.tsx.snap | 16 +- .../containers/ReplyListContainer.spec.tsx | 6 + .../containers/ReplyListContainer.tsx | 345 +++++- .../comments/containers/StreamContainer.tsx | 6 +- .../ReplyListContainer.spec.tsx.snap | 1 + .../__snapshots__/editComment.spec.tsx.snap | 1028 +++++++++-------- .../__snapshots__/loadMore.spec.tsx.snap | 440 +++---- .../__snapshots__/permalinkView.spec.tsx.snap | 176 +-- ...permalinkViewCommentNotFound.spec.tsx.snap | 88 +- .../__snapshots__/postComment.spec.tsx.snap | 752 ++++++------ .../__snapshots__/postReply.spec.tsx.snap | 860 +++++++------- .../__snapshots__/renderReplies.spec.tsx.snap | 440 ++++--- .../__snapshots__/renderStream.spec.tsx.snap | 176 +-- .../showAllReplies.spec.tsx.snap | 472 ++++---- .../test/comments/renderReplies.spec.tsx | 8 +- src/core/client/stream/test/fixtures.ts | 75 +- 21 files changed, 2964 insertions(+), 2205 deletions(-) diff --git a/src/core/client/stream/tabs/comments/components/Indent.css b/src/core/client/stream/tabs/comments/components/Indent.css index 6aa4c5e7a..b88e0b642 100644 --- a/src/core/client/stream/tabs/comments/components/Indent.css +++ b/src/core/client/stream/tabs/comments/components/Indent.css @@ -6,6 +6,30 @@ border-left: 3px solid var(--palette-grey-darkest); } +.level2 { + padding-left: var(--spacing-unit); + margin-left: var(--spacing-unit); + border-left: 3px solid var(--palette-grey-dark); +} + +.level3 { + padding-left: var(--spacing-unit); + margin-left: calc(2 * var(--spacing-unit)); + border-left: 3px solid var(--palette-grey-main); +} + +.level4 { + padding-left: var(--spacing-unit); + margin-left: calc(3 * var(--spacing-unit)); + border-left: 3px solid var(--palette-grey-light); +} + +.level5 { + padding-left: var(--spacing-unit); + margin-left: calc(4 * var(--spacing-unit)); + border-left: 3px solid var(--palette-grey-lighter); +} + .noBorder { border: 0; } diff --git a/src/core/client/stream/tabs/comments/components/Indent.tsx b/src/core/client/stream/tabs/comments/components/Indent.tsx index e40d10181..e91cdb974 100644 --- a/src/core/client/stream/tabs/comments/components/Indent.tsx +++ b/src/core/client/stream/tabs/comments/components/Indent.tsx @@ -12,13 +12,19 @@ export interface IndentProps { const Indent: StatelessComponent = props => { return ( -
- {props.children} +
+
+ {props.children} +
); }; diff --git a/src/core/client/stream/tabs/comments/components/ReplyList.tsx b/src/core/client/stream/tabs/comments/components/ReplyList.tsx index 47e0dbc39..e942ae5a9 100644 --- a/src/core/client/stream/tabs/comments/components/ReplyList.tsx +++ b/src/core/client/stream/tabs/comments/components/ReplyList.tsx @@ -21,6 +21,17 @@ export interface ReplyListProps { hasMore: boolean; disableShowAll: boolean; indentLevel?: number; + ReplyListComponent?: React.ComponentType; +} + +function getReplyListElement( + { ReplyListComponent, me, asset }: ReplyListProps, + comment: PropTypesOf["comment"] +) { + if (!ReplyListComponent) { + return null; + } + return ; } const ReplyList: StatelessComponent = props => { @@ -30,13 +41,16 @@ const ReplyList: StatelessComponent = props => { role="log" > {props.comments.map(comment => ( - + + + {getReplyListElement(props, comment)} + ))} {props.hasMore && ( diff --git a/src/core/client/stream/tabs/comments/components/__snapshots__/Indent.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/__snapshots__/Indent.spec.tsx.snap index d1b2bd78f..49a938937 100644 --- a/src/core/client/stream/tabs/comments/components/__snapshots__/Indent.spec.tsx.snap +++ b/src/core/client/stream/tabs/comments/components/__snapshots__/Indent.spec.tsx.snap @@ -4,28 +4,40 @@ exports[`renders level0 1`] = `
-
- Hello World +
+
+ Hello World +
`; exports[`renders level1 1`] = `
-
- Hello World +
+
+ Hello World +
`; exports[`renders without border 1`] = `
-
- Hello World +
+
+ Hello World +
`; diff --git a/src/core/client/stream/tabs/comments/components/__snapshots__/ReplyList.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/__snapshots__/ReplyList.spec.tsx.snap index 3473f9fe0..cd78852c3 100644 --- a/src/core/client/stream/tabs/comments/components/__snapshots__/ReplyList.spec.tsx.snap +++ b/src/core/client/stream/tabs/comments/components/__snapshots__/ReplyList.spec.tsx.snap @@ -5,36 +5,44 @@ exports[`renders correctly 1`] = ` id="talk-comments-replyList-log--comment-id" role="log" > - - + + + + > + + `; @@ -43,36 +51,44 @@ exports[`when there is more disables load more button 1`] = ` id="talk-comments-replyList-log--comment-id" role="log" > - - + + + + > + + - - + + + + > + + - - - - - - - - { isLoading: noop, } as any, me: null, + indentLevel: 1, + ReplyListComponent: () => null, }; const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); @@ -46,6 +48,8 @@ it("renders correctly when replies are null", () => { isLoading: noop, } as any, me: null, + indentLevel: 1, + ReplyListComponent: undefined, }; const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); @@ -69,6 +73,8 @@ describe("when has more replies", () => { loadMore: (_: any, callback: () => void) => (finishLoading = callback), } as any, me: null, + indentLevel: 1, + ReplyListComponent: undefined, }; let wrapper: ShallowWrapper; diff --git a/src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx b/src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx index 65c6b9ec9..f9744f55a 100644 --- a/src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx +++ b/src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx @@ -1,15 +1,15 @@ import React from "react"; -import { graphql, RelayPaginationProp } from "react-relay"; +import { graphql, GraphQLTaggedNode, RelayPaginationProp } from "react-relay"; +import { withProps } from "recompose"; import { withPaginationContainer } from "talk-framework/lib/relay"; -import { PropTypesOf } from "talk-framework/types"; -import { ReplyListContainer_asset as AssetData } from "talk-stream/__generated__/ReplyListContainer_asset.graphql"; -import { ReplyListContainer_comment as CommentData } from "talk-stream/__generated__/ReplyListContainer_comment.graphql"; -import { ReplyListContainer_me as MeData } from "talk-stream/__generated__/ReplyListContainer_me.graphql"; +import { ReplyListContainer1_asset as AssetData } from "talk-stream/__generated__/ReplyListContainer1_asset.graphql"; +import { ReplyListContainer1_comment as CommentData } from "talk-stream/__generated__/ReplyListContainer1_comment.graphql"; +import { ReplyListContainer1_me as MeData } from "talk-stream/__generated__/ReplyListContainer1_me.graphql"; import { COMMENT_SORT, - ReplyListContainerPaginationQueryVariables, -} from "talk-stream/__generated__/ReplyListContainerPaginationQuery.graphql"; + ReplyListContainer1PaginationQueryVariables, +} from "talk-stream/__generated__/ReplyListContainer1PaginationQuery.graphql"; import ReplyList from "../components/ReplyList"; @@ -18,8 +18,16 @@ export interface InnerProps { asset: AssetData; comment: CommentData; relay: RelayPaginationProp; + indentLevel: number; + ReplyListComponent: React.ComponentType | undefined; } +// TODO: (cvle) This should be autogenerated. +interface FragmentVariables { + count: number; + cursor?: string; + orderBy: COMMENT_SORT; +} export class ReplyListContainer extends React.Component { public state = { disableShowAll: false, @@ -42,7 +50,8 @@ export class ReplyListContainer extends React.Component { onShowAll={this.showAll} hasMore={this.props.relay.hasMore()} disableShowAll={this.state.disableShowAll} - indentLevel={1} + indentLevel={this.props.indentLevel} + ReplyListComponent={this.props.ReplyListComponent} /> ); } @@ -66,31 +75,61 @@ export class ReplyListContainer extends React.Component { }; } -// TODO: (cvle) This should be autogenerated. -interface FragmentVariables { - count: number; - cursor?: string; - orderBy: COMMENT_SORT; +function createReplyListContainer( + indentLevel: number, + fragments: { + me: GraphQLTaggedNode; + asset: GraphQLTaggedNode; + comment: GraphQLTaggedNode; + }, + query: GraphQLTaggedNode, + ReplyListComponent?: React.ComponentType +) { + return withProps({ indentLevel, ReplyListComponent })( + withPaginationContainer< + InnerProps, + ReplyListContainer1PaginationQueryVariables, + FragmentVariables + >(fragments, { + direction: "forward", + getConnectionFromProps(props) { + return props.comment && props.comment.replies; + }, + // This is also the default implementation of `getFragmentVariables` if it isn't provided. + getFragmentVariables(prevVars, totalCount) { + return { + ...prevVars, + count: totalCount, + }; + }, + getVariables(props, { count, cursor }, fragmentVariables) { + return { + count, + cursor, + orderBy: fragmentVariables.orderBy, + commentID: props.comment.id, + }; + }, + query, + })(ReplyListContainer) + ); } -const enhanced = withPaginationContainer< - InnerProps, - ReplyListContainerPaginationQueryVariables, - FragmentVariables ->( +const ReplyListContainer5 = createReplyListContainer( + 5, { me: graphql` - fragment ReplyListContainer_me on User { + fragment ReplyListContainer5_me on User { ...CommentContainer_me } `, asset: graphql` - fragment ReplyListContainer_asset on Asset { + fragment ReplyListContainer5_asset on Asset { ...CommentContainer_asset } `, comment: graphql` - fragment ReplyListContainer_comment on Comment + fragment ReplyListContainer5_comment on Comment @argumentDefinitions( count: { type: "Int!", defaultValue: 5 } cursor: { type: "Cursor" } @@ -109,43 +148,237 @@ const enhanced = withPaginationContainer< } `, }, + 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) + } + } + ` +); + +const ReplyListContainer4 = createReplyListContainer( + 4, { - direction: "forward", - getConnectionFromProps(props) { - return props.comment && props.comment.replies; - }, - // This is also the default implementation of `getFragmentVariables` if it isn't provided. - getFragmentVariables(prevVars, totalCount) { - return { - ...prevVars, - count: totalCount, - }; - }, - getVariables(props, { count, cursor }, fragmentVariables) { - return { - count, - cursor, - orderBy: fragmentVariables.orderBy, - commentID: props.comment.id, - }; - }, - query: 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 ReplyListContainerPaginationQuery( - $count: Int! - $cursor: Cursor - $orderBy: COMMENT_SORT! - $commentID: ID! - ) { - comment(id: $commentID) { - ...ReplyListContainer_comment - @arguments(count: $count, cursor: $cursor, orderBy: $orderBy) + me: graphql` + fragment ReplyListContainer4_me on User { + ...ReplyListContainer5_me + ...CommentContainer_me + } + `, + asset: graphql` + fragment ReplyListContainer4_asset on Asset { + ...ReplyListContainer5_asset + ...CommentContainer_asset + } + `, + 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 + replies(first: $count, after: $cursor, orderBy: $orderBy) + @connection(key: "ReplyList_replies") { + edges { + node { + id + ...CommentContainer_comment + ...ReplyListContainer5_comment + } + } } } `, - } -)(ReplyListContainer); + }, + 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 +); -export type ReplyListContainerProps = PropTypesOf; -export default enhanced; +const ReplyListContainer3 = createReplyListContainer( + 3, + { + me: graphql` + fragment ReplyListContainer3_me on User { + ...ReplyListContainer4_me + ...CommentContainer_me + } + `, + asset: graphql` + fragment ReplyListContainer3_asset on Asset { + ...ReplyListContainer4_asset + ...CommentContainer_asset + } + `, + 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 + replies(first: $count, after: $cursor, orderBy: $orderBy) + @connection(key: "ReplyList_replies") { + edges { + node { + id + ...CommentContainer_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. + query ReplyListContainer3PaginationQuery( + $count: Int! + $cursor: Cursor + $orderBy: COMMENT_SORT! + $commentID: ID! + ) { + comment(id: $commentID) { + ...ReplyListContainer3_comment + @arguments(count: $count, cursor: $cursor, orderBy: $orderBy) + } + } + `, + ReplyListContainer4 +); + +const ReplyListContainer2 = createReplyListContainer( + 2, + { + me: graphql` + fragment ReplyListContainer2_me on User { + ...ReplyListContainer3_me + ...CommentContainer_me + } + `, + asset: graphql` + fragment ReplyListContainer2_asset on Asset { + ...ReplyListContainer3_asset + ...CommentContainer_asset + } + `, + comment: graphql` + fragment ReplyListContainer2_comment on Comment + @argumentDefinitions( + count: { type: "Int!", defaultValue: 5 } + cursor: { type: "Cursor" } + orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_ASC } + ) { + id + replies(first: $count, after: $cursor, orderBy: $orderBy) + @connection(key: "ReplyList_replies") { + edges { + node { + id + ...CommentContainer_comment + ...ReplyListContainer3_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 ReplyListContainer2PaginationQuery( + $count: Int! + $cursor: Cursor + $orderBy: COMMENT_SORT! + $commentID: ID! + ) { + comment(id: $commentID) { + ...ReplyListContainer2_comment + @arguments(count: $count, cursor: $cursor, orderBy: $orderBy) + } + } + `, + ReplyListContainer3 +); + +const ReplyListContainer1 = createReplyListContainer( + 1, + { + me: graphql` + fragment ReplyListContainer1_me on User { + ...ReplyListContainer2_me + ...CommentContainer_me + } + `, + asset: graphql` + fragment ReplyListContainer1_asset on Asset { + ...ReplyListContainer2_asset + ...CommentContainer_asset + } + `, + comment: graphql` + fragment ReplyListContainer1_comment on Comment + @argumentDefinitions( + count: { type: "Int!", defaultValue: 5 } + cursor: { type: "Cursor" } + orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_ASC } + ) { + id + replies(first: $count, after: $cursor, orderBy: $orderBy) + @connection(key: "ReplyList_replies") { + edges { + node { + id + ...CommentContainer_comment + ...ReplyListContainer2_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 ReplyListContainer1PaginationQuery( + $count: Int! + $cursor: Cursor + $orderBy: COMMENT_SORT! + $commentID: ID! + ) { + comment(id: $commentID) { + ...ReplyListContainer1_comment + @arguments(count: $count, cursor: $cursor, orderBy: $orderBy) + } + } + `, + ReplyListContainer2 +); + +export default ReplyListContainer1; diff --git a/src/core/client/stream/tabs/comments/containers/StreamContainer.tsx b/src/core/client/stream/tabs/comments/containers/StreamContainer.tsx index 980d737b2..f90e7c10a 100644 --- a/src/core/client/stream/tabs/comments/containers/StreamContainer.tsx +++ b/src/core/client/stream/tabs/comments/containers/StreamContainer.tsx @@ -23,7 +23,7 @@ graphql` fragment StreamContainer_comment on Comment { id ...CommentContainer_comment - ...ReplyListContainer_comment + ...ReplyListContainer1_comment } `; @@ -95,12 +95,12 @@ const enhanced = withPaginationContainer< } } ...CommentContainer_asset - ...ReplyListContainer_asset + ...ReplyListContainer1_asset } `, me: graphql` fragment StreamContainer_me on User { - ...ReplyListContainer_me + ...ReplyListContainer1_me ...CommentContainer_me ...UserBoxContainer_me } diff --git a/src/core/client/stream/tabs/comments/containers/__snapshots__/ReplyListContainer.spec.tsx.snap b/src/core/client/stream/tabs/comments/containers/__snapshots__/ReplyListContainer.spec.tsx.snap index e17a56740..ad14ab002 100644 --- a/src/core/client/stream/tabs/comments/containers/__snapshots__/ReplyListContainer.spec.tsx.snap +++ b/src/core/client/stream/tabs/comments/containers/__snapshots__/ReplyListContainer.spec.tsx.snap @@ -2,6 +2,7 @@ exports[`renders correctly 1`] = `
- - Markus -
- + Markus + +
+ +
+
+
+
-
+
+
-
-
- -
@@ -272,60 +276,64 @@ exports[`cancel edit: edit canceled 1`] = ` className="Indent-root" >
- - Lukas -
- + Lukas + +
+ +
-
-
-
- + +
@@ -691,60 +699,64 @@ exports[`edit a comment: edit form 1`] = ` className="Indent-root" >
- - Lukas -
- + Lukas + +
+ +
-
-
-
- + +
@@ -1110,60 +1122,64 @@ exports[`edit a comment: optimistic response 1`] = ` className="Indent-root" >
- - Lukas -
- + Lukas + +
+ +
-
-
-
- + +
@@ -1364,36 +1380,66 @@ exports[`edit a comment: render stream 1`] = ` className="Indent-root" >
- - Markus -
- + Markus + +
+ +
+
+
+
-
+
+
-
-
- -
@@ -1445,60 +1465,64 @@ exports[`edit a comment: render stream 1`] = ` className="Indent-root" >
- - Lukas -
- + Lukas + +
+ +
-
-
-
- + +
@@ -1699,45 +1723,75 @@ exports[`edit a comment: server response 1`] = ` className="Indent-root" >
- - Markus -
- + Markus +
- ( - - Edited - - ) + +
+ ( + + Edited + + ) +
+
+ +
-
+
+
-
-
- -
@@ -1789,60 +1817,64 @@ exports[`edit a comment: server response 1`] = ` className="Indent-root" >
- - Lukas -
- + Lukas + +
+ +
-
-
-
- + +
@@ -2043,36 +2075,66 @@ exports[`shows expiry message: edit form closed 1`] = ` className="Indent-root" >
- - Markus -
- + Markus + +
+ +
+
+
+
-
+
+
-
-
- -
@@ -2124,60 +2160,64 @@ exports[`shows expiry message: edit form closed 1`] = ` className="Indent-root" >
- - Lukas -
- + Lukas + +
+ +
-
-
-
- + +
@@ -2520,60 +2560,64 @@ exports[`shows expiry message: edit time expired 1`] = ` className="Indent-root" >
- - Lukas -
- + Lukas + +
+ +
-
-
-
- + +
diff --git a/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap index c8496f77f..0c5742ed6 100644 --- a/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap @@ -152,60 +152,64 @@ exports[`loads more comments 1`] = ` className="Indent-root" >
- - Markus -
- + Markus + +
+ +
-
-
-
- + +
@@ -217,60 +221,64 @@ exports[`loads more comments 1`] = ` className="Indent-root" >
- - Lukas -
- + Lukas + +
+ +
-
-
-
- + +
@@ -282,60 +290,64 @@ exports[`loads more comments 1`] = ` className="Indent-root" >
- - Isabelle -
- + Isabelle + +
+ +
-
-
-
- + +
@@ -497,60 +509,64 @@ exports[`renders comment stream 1`] = ` className="Indent-root" >
- - Markus -
- + Markus + +
+ +
-
-
-
- + +
@@ -562,60 +578,64 @@ exports[`renders comment stream 1`] = ` className="Indent-root" >
- - Lukas -
- + Lukas + +
+ +
-
-
-
- + +
diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap index 2857bd17a..88f28c7fc 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap @@ -27,60 +27,64 @@ exports[`renders permalink view 1`] = ` className="Indent-root" >
- - Markus -
- + Markus + +
+ +
-
-
-
- + +
@@ -240,60 +244,64 @@ exports[`show all comments 1`] = ` className="Indent-root" >
- - Markus -
- + Markus + +
+ +
-
-
-
- + +
diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap index e3d7ca646..e926dcf61 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap @@ -184,60 +184,64 @@ exports[`show all comments 1`] = ` className="Indent-root" >
- - Markus -
- + Markus + +
+ +
-
-
-
- + +
diff --git a/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap index 28eab8f9c..e151e35cb 100644 --- a/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap @@ -185,36 +185,66 @@ exports[`post a comment: optimistic response 1`] = ` className="IndentedComment-blur Indent-root" >
- - Markus -
- + Markus + +
+ +
+
+
+
-
+
Hello world!", + } + } + /> +
+
+
+
+
+
+
Hello world!", - } - } - /> -
- +
+ + Markus + +
+ +
+
+
+
+
+ +
@@ -266,125 +339,64 @@ exports[`post a comment: optimistic response 1`] = ` className="Indent-root" >
- - Markus -
- + Lukas + +
+ +
-
-
-
- -
-
-
-
-
-
-
-
- - Lukas - -
- -
-
-
-
-
- + +
@@ -585,60 +597,64 @@ exports[`post a comment: server response 1`] = ` className="Indent-root" >
- - Markus -
- + Markus + +
+ +
-
-
Hello world! (from server)", +
Hello world! (from server)", + } } - } - /> -
- + +
@@ -650,60 +666,64 @@ exports[`post a comment: server response 1`] = ` className="Indent-root" >
- - Markus -
- + Markus + +
+ +
-
-
-
- + +
@@ -715,60 +735,64 @@ exports[`post a comment: server response 1`] = ` className="Indent-root" >
- - Lukas -
- + Lukas + +
+ +
-
-
-
- + +
@@ -969,60 +993,64 @@ exports[`renders comment stream 1`] = ` className="Indent-root" >
- - Markus -
- + Markus + +
+ +
-
-
-
- + +
@@ -1034,60 +1062,64 @@ exports[`renders comment stream 1`] = ` className="Indent-root" >
- - Lukas -
- + Lukas + +
+ +
-
-
-
- + +
diff --git a/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap index b7546e97c..69319da64 100644 --- a/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap @@ -191,60 +191,64 @@ exports[`post a reply: open reply form 1`] = ` className="Indent-root" >
- - Markus -
- + Markus + +
+ +
-
-
-
- + +
@@ -383,60 +387,64 @@ exports[`post a reply: open reply form 1`] = ` className="Indent-root" >
- - Lukas -
- + Lukas + +
+ +
-
-
-
- + +
@@ -637,60 +645,64 @@ exports[`post a reply: optimistic response 1`] = ` className="Indent-root" >
- - Markus -
- + Markus + +
+ +
-
-
-
- + +
@@ -821,7 +833,100 @@ exports[`post a reply: optimistic response 1`] = ` role="log" >
+
+
+
+
+
+ + Markus + +
+ +
+
+
+ +
+
+
Hello world!", + } + } + /> +
+ +
+
+
+
+
+
+ +
+
+
- Markus + Lukas
-
- -
Hello world!", + "__html": "What's up?", } } /> @@ -880,7 +969,7 @@ exports[`post a reply: optimistic response 1`] = ` >
-
-
-
-
-
- - Lukas - -
- -
-
-
-
-
- -
-
-
-
@@ -1160,70 +1184,7 @@ exports[`post a reply: server response 1`] = ` className="Indent-root" >
-
-
- - Markus - -
- -
-
-
-
-
- -
-
-
-
-
Hello world! (from server)", + "__html": "Joining Too", } } /> @@ -1266,7 +1227,7 @@ exports[`post a reply: server response 1`] = ` >
+
+
+
+
+
+
+
+ + Markus + +
+ +
+
+
+
Hello world! (from server)", + } + } + /> +
+ +
+
+
+
+
+
- - Lukas -
- + Lukas + +
+ +
-
-
-
- + +
@@ -1546,60 +1586,64 @@ exports[`renders comment stream 1`] = ` className="Indent-root" >
- - Markus -
- + Markus + +
+ +
-
-
-
- + +
@@ -1611,60 +1655,64 @@ exports[`renders comment stream 1`] = ` className="Indent-root" >
- - Lukas -
- + Lukas + +
+ +
-
-
-
- + +
diff --git a/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap index 1ffdb59c7..11cdce964 100644 --- a/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap @@ -152,135 +152,7 @@ exports[`renders comment stream 1`] = ` className="Indent-root" >
-
-
- - Markus - -
- -
-
-
-
-
- -
-
-
- -
-
-
-
-
- - Markus - -
- -
-
-
-
-
- -
-
-
-
-
+
+
+
+
- Lukas + Markus
@@ -375,7 +255,7 @@ exports[`renders comment stream 1`] = ` className="HTMLContent-root" dangerouslySetInnerHTML={ Object { - "__html": "What's up?", + "__html": "I like yoghurt", } } /> @@ -384,7 +264,7 @@ exports[`renders comment stream 1`] = ` >
+
+
+
+
+
+
+
+ + Markus + +
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ + Isabelle + +
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ + Isabelle + +
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + Isabelle + +
+ +
+
+
+
+
+ +
+
+
+
+
+
diff --git a/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap index a6ed47452..f7b1f2931 100644 --- a/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap @@ -152,60 +152,64 @@ exports[`renders comment stream 1`] = ` className="Indent-root" >
- - Markus -
- + Markus + +
+ +
-
-
-
- + +
@@ -217,60 +221,64 @@ exports[`renders comment stream 1`] = ` className="Indent-root" >
- - Lukas -
- + Lukas + +
+ +
-
-
-
- + +
diff --git a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap index fe7fa13f6..60fb702de 100644 --- a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap @@ -152,70 +152,7 @@ exports[`renders comment stream 1`] = ` className="Indent-root" >
-
-
- - Markus - -
- -
-
-
-
-
- -
-
-
-
-
- Lukas + Markus
@@ -249,7 +186,7 @@ exports[`renders comment stream 1`] = ` className="HTMLContent-root" dangerouslySetInnerHTML={ Object { - "__html": "What's up?", + "__html": "Joining Too", } } /> @@ -258,7 +195,7 @@ exports[`renders comment stream 1`] = ` >
+
+
- +
+
+
+
+ + Lukas + +
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
@@ -454,60 +470,64 @@ exports[`show all replies 1`] = ` className="Indent-root" >
- - Markus -
- + Markus + +
+ +
-
-
-
- + +
@@ -517,125 +537,141 @@ exports[`show all replies 1`] = ` role="log" >
- - Lukas -
- + + Lukas + +
+ +
+
+
+
+
+
-
-
- -
- - Isabelle -
- + + Isabelle + +
+ +
+
+
+
+
+
-
-
- -
diff --git a/src/core/client/stream/test/comments/renderReplies.spec.tsx b/src/core/client/stream/test/comments/renderReplies.spec.tsx index 3c361740d..b18b77b17 100644 --- a/src/core/client/stream/test/comments/renderReplies.spec.tsx +++ b/src/core/client/stream/test/comments/renderReplies.spec.tsx @@ -3,7 +3,7 @@ import { ReactTestRenderer } from "react-test-renderer"; import { timeout } from "talk-common/utils"; import { createSinonStub } from "talk-framework/testHelpers"; -import { assetWithReplies } from "../fixtures"; +import { assetWithDeepReplies } from "../fixtures"; import create from "./create"; let testRenderer: ReactTestRenderer; @@ -14,8 +14,8 @@ beforeEach(() => { s => s.throws(), s => s - .withArgs(undefined, { id: assetWithReplies.id }) - .returns(assetWithReplies) + .withArgs(undefined, { id: assetWithDeepReplies.id }) + .returns(assetWithDeepReplies) ), }, }; @@ -25,7 +25,7 @@ beforeEach(() => { logNetwork: false, resolvers, initLocalState: localRecord => { - localRecord.setValue(assetWithReplies.id, "assetID"); + localRecord.setValue(assetWithDeepReplies.id, "assetID"); }, })); }); diff --git a/src/core/client/stream/test/fixtures.ts b/src/core/client/stream/test/fixtures.ts index ec219fb67..47485cfa7 100644 --- a/src/core/client/stream/test/fixtures.ts +++ b/src/core/client/stream/test/fixtures.ts @@ -47,6 +47,39 @@ export const comments = [ editableUntil: "2018-07-06T18:14:30.000Z", }, }, + { + id: "comment-3", + author: users[2], + body: "Comment Body 3", + createdAt: "2018-07-06T18:14:00.000Z", + replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } }, + editing: { + edited: false, + editableUntil: "2018-07-06T18:14:30.000Z", + }, + }, + { + id: "comment-4", + author: users[2], + body: "Comment Body 4", + createdAt: "2018-07-06T18:14:00.000Z", + replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } }, + editing: { + edited: false, + editableUntil: "2018-07-06T18:14:30.000Z", + }, + }, + { + id: "comment-5", + author: users[2], + body: "Comment Body 5", + createdAt: "2018-07-06T18:14:00.000Z", + replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } }, + editing: { + edited: false, + editableUntil: "2018-07-06T18:14:30.000Z", + }, + }, ]; export const assets = [ @@ -73,8 +106,28 @@ export const commentWithReplies = { createdAt: "2018-07-06T18:24:00.000Z", replies: { edges: [ - { node: comments[0], cursor: comments[0].createdAt }, - { node: comments[1], cursor: comments[1].createdAt }, + { node: comments[3], cursor: comments[3].createdAt }, + { node: comments[4], cursor: comments[4].createdAt }, + ], + pageInfo: { + hasNextPage: false, + }, + }, + editing: { + edited: false, + editableUntil: "2018-07-06T18:24:30.000Z", + }, +}; + +export const commentWithDeepReplies = { + id: "comment-with-deep-replies", + author: users[0], + body: "I like yoghurt", + createdAt: "2018-07-06T18:24:00.000Z", + replies: { + edges: [ + { node: commentWithReplies, cursor: commentWithReplies.createdAt }, + { node: comments[5], cursor: comments[5].createdAt }, ], pageInfo: { hasNextPage: false, @@ -100,3 +153,21 @@ export const assetWithReplies = { }, }, }; + +export const assetWithDeepReplies = { + id: "asset-with-deep-replies", + url: "http://localhost/assets/asset-with-replies", + isClosed: false, + comments: { + edges: [ + { node: comments[0], cursor: comments[0].createdAt }, + { + node: commentWithDeepReplies, + cursor: commentWithDeepReplies.createdAt, + }, + ], + pageInfo: { + hasNextPage: false, + }, + }, +};