diff --git a/src/core/client/embed/PymControl.ts b/src/core/client/embed/PymControl.ts index 1255d0854..92a8dbefc 100644 --- a/src/core/client/embed/PymControl.ts +++ b/src/core/client/embed/PymControl.ts @@ -25,7 +25,6 @@ export default class PymControl { title: config.title, id: `${config.id}_iframe`, name: `${config.id}_iframe`, - optionalparams: "", }); this.cleanups = decorators diff --git a/src/core/client/embed/__snapshots__/PymControl.spec.ts.snap b/src/core/client/embed/__snapshots__/PymControl.spec.ts.snap index e4f013f5d..4ab9f246a 100644 --- a/src/core/client/embed/__snapshots__/PymControl.spec.ts.snap +++ b/src/core/client/embed/__snapshots__/PymControl.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PymControl should create iframe 1`] = `""`; +exports[`PymControl should create iframe 1`] = `""`; exports[`PymControl should send message 1`] = `"pymxPYMxpymcontrol-test-idxPYMxtestxPYMxhello world"`; diff --git a/src/core/client/embed/__snapshots__/index.spec.ts.snap b/src/core/client/embed/__snapshots__/index.spec.ts.snap index 1307f9fad..18f558868 100644 --- a/src/core/client/embed/__snapshots__/index.spec.ts.snap +++ b/src/core/client/embed/__snapshots__/index.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Basic integration test should render iframe 1`] = `""`; +exports[`Basic integration test should render iframe 1`] = `""`; -exports[`Basic integration test should use canonical link 1`] = `""`; +exports[`Basic integration test should use canonical link 1`] = `""`; diff --git a/src/core/client/framework/helpers/getURLWithCommentID.tsx b/src/core/client/framework/helpers/getURLWithCommentID.tsx new file mode 100644 index 000000000..421032782 --- /dev/null +++ b/src/core/client/framework/helpers/getURLWithCommentID.tsx @@ -0,0 +1,8 @@ +import { modifyQuery } from "talk-framework/utils"; + +export default function getURLWithCommentID( + assetURL: string, + commentID?: string +) { + return modifyQuery(assetURL, { commentID }); +} diff --git a/src/core/client/framework/helpers/index.ts b/src/core/client/framework/helpers/index.ts index 653f66d98..e4a5c898f 100644 --- a/src/core/client/framework/helpers/index.ts +++ b/src/core/client/framework/helpers/index.ts @@ -1 +1,2 @@ export { default as getMe } from "./getMe"; +export { default as getURLWithCommentID } from "./getURLWithCommentID"; diff --git a/src/core/client/stream/tabs/comments/components/Comment/ButtonsBar.spec.tsx b/src/core/client/stream/tabs/comments/components/Comment/ButtonsBar.spec.tsx new file mode 100644 index 000000000..ef21fa796 --- /dev/null +++ b/src/core/client/stream/tabs/comments/components/Comment/ButtonsBar.spec.tsx @@ -0,0 +1,14 @@ +import { shallow } from "enzyme"; +import React from "react"; + +import { PropTypesOf } from "talk-framework/types"; + +import ButtonsBar from "./ButtonsBar"; + +it("renders correctly", () => { + const props: PropTypesOf = { + children: "children", + }; + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/core/client/stream/tabs/comments/components/Comment/ButtonsBar.tsx b/src/core/client/stream/tabs/comments/components/Comment/ButtonsBar.tsx new file mode 100644 index 000000000..f9e2e9f49 --- /dev/null +++ b/src/core/client/stream/tabs/comments/components/Comment/ButtonsBar.tsx @@ -0,0 +1,13 @@ +import React, { StatelessComponent } from "react"; + +import { Flex } from "talk-ui/components"; + +const ButtonsBar: StatelessComponent = props => { + return ( + + {props.children} + + ); +}; + +export default ButtonsBar; diff --git a/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx b/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx index b30621913..7ed3d93f9 100644 --- a/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx +++ b/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx @@ -2,7 +2,7 @@ import React, { StatelessComponent } from "react"; import HTMLContent from "talk-stream/components/HTMLContent"; import Timestamp from "talk-stream/components/Timestamp"; -import { Flex } from "talk-ui/components"; +import { Flex, HorizontalGutter } from "talk-ui/components"; import * as styles from "./Comment.css"; import EditedMarker from "./EditedMarker"; @@ -43,10 +43,10 @@ const Comment: StatelessComponent = props => { {props.topBarRight &&
{props.topBarRight}
} - {props.body || ""} - + + {props.body || ""} {props.footer} - + ); }; diff --git a/src/core/client/stream/tabs/comments/components/Comment/ShowConversationLink.spec.tsx b/src/core/client/stream/tabs/comments/components/Comment/ShowConversationLink.spec.tsx new file mode 100644 index 000000000..6ec618b47 --- /dev/null +++ b/src/core/client/stream/tabs/comments/components/Comment/ShowConversationLink.spec.tsx @@ -0,0 +1,17 @@ +import { shallow } from "enzyme"; +import { noop } from "lodash"; +import React from "react"; + +import { PropTypesOf } from "talk-framework/types"; + +import ShowConversationLink from "./ShowConversationLink"; + +it("renders correctly", () => { + const props: PropTypesOf = { + id: "id", + onClick: noop, + href: "http://localhost/comment", + }; + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/core/client/stream/tabs/comments/components/Comment/ShowConversationLink.tsx b/src/core/client/stream/tabs/comments/components/Comment/ShowConversationLink.tsx new file mode 100644 index 000000000..23ff05e4a --- /dev/null +++ b/src/core/client/stream/tabs/comments/components/Comment/ShowConversationLink.tsx @@ -0,0 +1,33 @@ +import React, { EventHandler, MouseEvent } from "react"; +import { StatelessComponent } from "react"; + +import { Localized } from "fluent-react/compat"; +import { Button } from "talk-ui/components"; + +export interface ShowConversationLinkProps { + id?: string; + href?: string; + onClick?: EventHandler; +} + +const ShowConversationLink: StatelessComponent< + ShowConversationLinkProps +> = props => { + return ( + + + + ); +}; + +export default ShowConversationLink; diff --git a/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/ButtonsBar.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/ButtonsBar.spec.tsx.snap new file mode 100644 index 000000000..164113601 --- /dev/null +++ b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/ButtonsBar.spec.tsx.snap @@ -0,0 +1,10 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` + + children + +`; diff --git a/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap index 09cd14a62..f1eceef62 100644 --- a/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap +++ b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap @@ -30,15 +30,11 @@ exports[`renders username and body 1`] = ` topBarRight - - Woof - - + + + Woof + footer - + `; diff --git a/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/ShowConversationLink.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/ShowConversationLink.spec.tsx.snap new file mode 100644 index 000000000..5426c46e2 --- /dev/null +++ b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/ShowConversationLink.spec.tsx.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` + + + Read More of this Conversation > + + +`; diff --git a/src/core/client/stream/tabs/comments/components/Comment/index.ts b/src/core/client/stream/tabs/comments/components/Comment/index.ts index e89d4b958..d05ab70f8 100644 --- a/src/core/client/stream/tabs/comments/components/Comment/index.ts +++ b/src/core/client/stream/tabs/comments/components/Comment/index.ts @@ -1,3 +1,5 @@ export { default, default as IndentedComment } from "./IndentedComment"; export { default as TopBarLeft } from "./TopBarLeft"; export { default as Username } from "./Username"; +export { default as ButtonsBar } from "./ButtonsBar"; +export { default as ShowConversationLink } from "./ShowConversationLink"; diff --git a/src/core/client/stream/tabs/comments/components/ReplyList.spec.tsx b/src/core/client/stream/tabs/comments/components/ReplyList.spec.tsx index c8b3dcbb2..76707a974 100644 --- a/src/core/client/stream/tabs/comments/components/ReplyList.spec.tsx +++ b/src/core/client/stream/tabs/comments/components/ReplyList.spec.tsx @@ -14,7 +14,10 @@ it("renders correctly", () => { const props: PropTypesOf = { asset: { id: "asset-id" }, comment: { id: "comment-id" }, - comments: [{ id: "comment-1" }, { id: "comment-2" }], + comments: [ + { id: "comment-1" }, + { id: "comment-2", showConversationLink: true }, + ], onShowAll: noop, hasMore: false, disableShowAll: false, diff --git a/src/core/client/stream/tabs/comments/components/ReplyList.tsx b/src/core/client/stream/tabs/comments/components/ReplyList.tsx index 896120b91..87f9eb610 100644 --- a/src/core/client/stream/tabs/comments/components/ReplyList.tsx +++ b/src/core/client/stream/tabs/comments/components/ReplyList.tsx @@ -15,7 +15,9 @@ export interface ReplyListProps { id: string; }; comments: ReadonlyArray< - { id: string } & PropTypesOf["comment"] + { id: string; showConversationLink?: boolean } & PropTypesOf< + typeof CommentContainer + >["comment"] >; onShowAll?: () => void; hasMore?: boolean; @@ -52,6 +54,7 @@ const ReplyList: StatelessComponent = props => { indentLevel={props.indentLevel} localReply={props.localReply} disableReplies={props.disableReplies} + showConversationLink={!!comment.showConversationLink} /> {getReplyListElement(props, comment)} 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 0b4cbcd15..6e66b20e5 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 @@ -8,7 +8,7 @@ exports[`renders correctly 1`] = ` - - @@ -58,7 +61,7 @@ exports[`when there is more disables load more button 1`] = ` - - - - - - - - - - - - { const props: PropTypesOf = { me: null, asset: { - id: "asset-id", + url: "http://localhost/asset", }, comment: { id: "comment-id", @@ -32,6 +32,7 @@ it("renders username and body", () => { }, indentLevel: 1, showAuthPopup: noop as any, + setCommentID: noop as any, localReply: false, disableReplies: false, }; @@ -44,7 +45,7 @@ it("renders body only", () => { const props: PropTypesOf = { me: null, asset: { - id: "asset-id", + url: "http://localhost/asset", }, comment: { id: "comment-id", @@ -62,6 +63,7 @@ it("renders body only", () => { }, indentLevel: 1, showAuthPopup: noop as any, + setCommentID: noop as any, }; const wrapper = shallow(); @@ -72,7 +74,7 @@ it("hide reply button", () => { const props: PropTypesOf = { me: null, asset: { - id: "asset-id", + url: "http://localhost/asset", }, comment: { id: "comment-id", @@ -90,6 +92,7 @@ it("hide reply button", () => { }, indentLevel: 1, showAuthPopup: noop as any, + setCommentID: noop as any, localReply: false, disableReplies: true, }; @@ -97,3 +100,35 @@ it("hide reply button", () => { const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); + +it("shows conversation link", () => { + const props: PropTypesOf = { + me: null, + asset: { + url: "http://localhost/asset", + }, + comment: { + id: "comment-id", + author: { + id: "author-id", + username: "Marvin", + }, + body: "Woof", + createdAt: "1995-12-17T03:24:00.000Z", + editing: { + edited: false, + editableUntil: "1995-12-17T03:24:30.000Z", + }, + pending: false, + }, + indentLevel: 1, + showAuthPopup: noop as any, + setCommentID: noop as any, + localReply: false, + disableReplies: false, + showConversationLink: true, + }; + + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx index f9db4932c..dc1b2b3e1 100644 --- a/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx +++ b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx @@ -1,20 +1,26 @@ import { Localized } from "fluent-react/compat"; -import React, { Component } from "react"; +import React, { Component, MouseEvent } from "react"; import { graphql } from "react-relay"; import { isBeforeDate } from "talk-common/utils"; +import { getURLWithCommentID } from "talk-framework/helpers"; import withFragmentContainer from "talk-framework/lib/relay/withFragmentContainer"; import { PropTypesOf } from "talk-framework/types"; import { CommentContainer_asset as AssetData } from "talk-stream/__generated__/CommentContainer_asset.graphql"; import { CommentContainer_comment as CommentData } from "talk-stream/__generated__/CommentContainer_comment.graphql"; import { CommentContainer_me as MeData } from "talk-stream/__generated__/CommentContainer_me.graphql"; import { + SetCommentIDMutation, ShowAuthPopupMutation, + withSetCommentIDMutation, withShowAuthPopupMutation, } from "talk-stream/mutations"; import { Button } from "talk-ui/components"; -import Comment from "../components/Comment"; +import Comment, { + ButtonsBar, + ShowConversationLink, +} from "../components/Comment"; import ReplyButton from "../components/Comment/ReplyButton"; import EditCommentFormContainer from "./EditCommentFormContainer"; import PermalinkButtonContainer from "./PermalinkButtonContainer"; @@ -26,6 +32,7 @@ interface InnerProps { asset: AssetData; indentLevel?: number; showAuthPopup: ShowAuthPopupMutation; + setCommentID: SetCommentIDMutation; /** * localReply will integrate the mutation response into * localReplies @@ -33,6 +40,8 @@ interface InnerProps { localReply?: boolean; /** disableReplies will remove the ReplyButton */ disableReplies?: boolean; + /** showConversationLink will render a link to the conversation */ + showConversationLink?: boolean; } interface State { @@ -113,6 +122,12 @@ export class CommentContainer extends Component { return; } + private handleShowConversation = (e: MouseEvent) => { + e.preventDefault(); + this.props.setCommentID({ id: this.props.comment.id }); + return false; + }; + public render() { const { comment, @@ -120,6 +135,7 @@ export class CommentContainer extends Component { indentLevel, localReply, disableReplies, + showConversationLink, } = this.props; const { showReplyDialog, showEditDialog, editable } = this.state; if (showEditDialog) { @@ -157,14 +173,28 @@ export class CommentContainer extends Component { } footer={ <> - {!disableReplies && ( - + {!disableReplies && ( + + )} + + + {showConversationLink && ( + )} - } /> @@ -181,37 +211,40 @@ export class CommentContainer extends Component { } } -const enhanced = withShowAuthPopupMutation( - withFragmentContainer({ - me: graphql` - fragment CommentContainer_me on User { - id - } - `, - asset: graphql` - fragment CommentContainer_asset on Asset { - ...ReplyCommentFormContainer_asset - } - `, - comment: graphql` - fragment CommentContainer_comment on Comment { - id - author { +const enhanced = withSetCommentIDMutation( + withShowAuthPopupMutation( + withFragmentContainer({ + me: graphql` + fragment CommentContainer_me on User { id - username } - body - createdAt - editing { - edited - editableUntil + `, + asset: graphql` + fragment CommentContainer_asset on Asset { + url + ...ReplyCommentFormContainer_asset } - pending - ...ReplyCommentFormContainer_comment - ...EditCommentFormContainer_comment - } - `, - })(CommentContainer) + `, + comment: graphql` + fragment CommentContainer_comment on Comment { + id + author { + id + username + } + body + createdAt + editing { + edited + editableUntil + } + pending + ...ReplyCommentFormContainer_comment + ...EditCommentFormContainer_comment + } + `, + })(CommentContainer) + ) ); export type CommentContainerProps = PropTypesOf; diff --git a/src/core/client/stream/tabs/comments/containers/PermalinkButtonContainer.tsx b/src/core/client/stream/tabs/comments/containers/PermalinkButtonContainer.tsx index 12900c5f7..7c8aa17f5 100644 --- a/src/core/client/stream/tabs/comments/containers/PermalinkButtonContainer.tsx +++ b/src/core/client/stream/tabs/comments/containers/PermalinkButtonContainer.tsx @@ -1,7 +1,7 @@ import React, { StatelessComponent } from "react"; import { graphql } from "react-relay"; +import { getURLWithCommentID } from "talk-framework/helpers"; import { withLocalStateContainer } from "talk-framework/lib/relay"; -import { modifyQuery } from "talk-framework/utils"; import { PermalinkButtonContainerLocal as Local } from "talk-stream/__generated__/PermalinkButtonContainerLocal.graphql"; import PermalinkButton from "../components/PermalinkButton"; @@ -18,7 +18,7 @@ export const PermalinkContainer: StatelessComponent = ({ return local.assetURL ? ( ) : null; }; diff --git a/src/core/client/stream/tabs/comments/containers/PermalinkViewContainer.tsx b/src/core/client/stream/tabs/comments/containers/PermalinkViewContainer.tsx index a21057c04..cdc5c2f65 100644 --- a/src/core/client/stream/tabs/comments/containers/PermalinkViewContainer.tsx +++ b/src/core/client/stream/tabs/comments/containers/PermalinkViewContainer.tsx @@ -1,10 +1,10 @@ import { Child as PymChild } from "pym.js"; -import qs from "query-string"; import React, { MouseEvent } from "react"; import { graphql } from "react-relay"; + +import { getURLWithCommentID } from "talk-framework/helpers"; import { withContext } from "talk-framework/lib/bootstrap"; import { withFragmentContainer } from "talk-framework/lib/relay"; -import { buildURL, parseURL } from "talk-framework/utils"; import { PermalinkViewContainer_asset as AssetData } from "talk-stream/__generated__/PermalinkViewContainer_asset.graphql"; import { PermalinkViewContainer_comment as CommentData } from "talk-stream/__generated__/PermalinkViewContainer_comment.graphql"; import { PermalinkViewContainer_me as MeData } from "talk-stream/__generated__/PermalinkViewContainer_me.graphql"; @@ -32,13 +32,8 @@ class PermalinkViewContainer extends React.Component< }; private getShowAllCommentsHref() { const { pym } = this.props; - const urlParts = parseURL((pym && pym.parentUrl) || window.location.href); - const search = qs.stringify({ - ...qs.parse(urlParts.search), - commentID: undefined, - }); - // Remove the commentId url param. - return buildURL({ ...urlParts, search }); + const url = (pym && pym.parentUrl) || window.location.href; + return getURLWithCommentID(url, undefined); } public componentDidMount() { diff --git a/src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx b/src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx index 0dfe3a80f..cb64d4ade 100644 --- a/src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx +++ b/src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx @@ -11,11 +11,15 @@ import { COMMENT_SORT, ReplyListContainer1PaginationQueryVariables, } from "talk-stream/__generated__/ReplyListContainer1PaginationQuery.graphql"; +import { ReplyListContainer5_comment as Comment5Data } from "talk-stream/__generated__/ReplyListContainer5_comment.graphql"; import { StatelessComponent } from "enzyme"; import ReplyList from "../components/ReplyList"; import LocalReplyListContainer from "./LocalReplyListContainer"; +type UnpackArray = T extends ReadonlyArray ? U : any; +type ReplyNode5 = UnpackArray["node"]; + export interface InnerProps { me: MeData | null; asset: AssetData; @@ -44,7 +48,11 @@ export class ReplyListContainer extends React.Component { ) { return null; } - const comments = this.props.comment.replies.edges.map(edge => edge.node); + const comments = this.props.comment.replies.edges.map(edge => ({ + ...edge.node, + // ReplyListContainer5 contains replyCount. + showConversationLink: ((edge.node as any) as ReplyNode5).replyCount > 0, + })); return ( - + + + } id="comment-comment-id" @@ -40,14 +42,16 @@ exports[`renders body only 1`] = ` createdAt="1995-12-17T03:24:00.000Z" footer={ - - + + + + } id="comment-comment-id" @@ -71,14 +75,54 @@ exports[`renders username and body 1`] = ` createdAt="1995-12-17T03:24:00.000Z" footer={ - + + + + + } + id="comment-comment-id" + indentLevel={1} + showEditedMarker={false} + /> + +`; + +exports[`shows conversation link 1`] = ` + + + + + + + - } id="comment-comment-id" 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 fc88a3379..963c9ce20 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 @@ -31,9 +31,11 @@ exports[`renders correctly 1`] = ` Array [ Object { "id": "comment-1", + "showConversationLink": false, }, Object { "id": "comment-2", + "showConversationLink": false, }, ] } @@ -77,9 +79,11 @@ exports[`when has more replies renders hasMore 1`] = ` Array [ Object { "id": "comment-1", + "showConversationLink": false, }, Object { "id": "comment-2", + "showConversationLink": false, }, ] } @@ -122,9 +126,11 @@ exports[`when has more replies when showing all disables show all button 1`] = ` Array [ Object { "id": "comment-1", + "showConversationLink": false, }, Object { "id": "comment-2", + "showConversationLink": false, }, ] } @@ -167,9 +173,11 @@ exports[`when has more replies when showing all enable show all button after loa Array [ Object { "id": "comment-1", + "showConversationLink": false, }, Object { "id": "comment-2", + "showConversationLink": false, }, ] } diff --git a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap index b843afa72..b24ef514d 100644 --- a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap @@ -239,32 +239,36 @@ exports[`cancel edit: edit canceled 1`] = `
-
- + +
@@ -309,32 +313,36 @@ exports[`cancel edit: edit canceled 1`] = `
-
- + +
@@ -733,32 +741,36 @@ exports[`edit a comment: edit form 1`] = `
-
- + +
@@ -1157,32 +1169,36 @@ exports[`edit a comment: optimistic response 1`] = `
-
- + +
@@ -1432,32 +1448,36 @@ exports[`edit a comment: render stream 1`] = `
-
- + +
@@ -1502,32 +1522,36 @@ exports[`edit a comment: render stream 1`] = `
-
- + +
@@ -1786,32 +1810,36 @@ exports[`edit a comment: server response 1`] = `
-
- + +
@@ -1856,32 +1884,36 @@ exports[`edit a comment: server response 1`] = `
-
- + +
@@ -2131,32 +2163,36 @@ exports[`shows expiry message: edit form closed 1`] = `
-
- + +
@@ -2201,32 +2237,36 @@ exports[`shows expiry message: edit form closed 1`] = `
-
- + +
@@ -2602,32 +2642,36 @@ exports[`shows expiry message: edit time expired 1`] = `
-
- + +
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 7a6a13b76..d63ce2df8 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 @@ -184,32 +184,36 @@ exports[`loads more comments 1`] = `
-
- + +
@@ -254,32 +258,36 @@ exports[`loads more comments 1`] = `
-
- + +
@@ -324,32 +332,36 @@ exports[`loads more comments 1`] = `
-
- + +
@@ -544,32 +556,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -614,32 +630,36 @@ exports[`renders comment stream 1`] = `
-
- + +
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 7de038658..414b63e68 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 @@ -59,32 +59,36 @@ exports[`renders permalink view 1`] = `
-
- + +
@@ -277,32 +281,36 @@ exports[`show all comments 1`] = `
-
- + +
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 bd22c7e93..47cd8652e 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 @@ -216,32 +216,36 @@ exports[`show all comments 1`] = `
-
- + +
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 f52d50282..5dd4448ff 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 @@ -233,32 +233,36 @@ exports[`post a comment: optimistic response 1`] = `
Hello world!", - } - } - /> -
- + +
@@ -303,32 +307,36 @@ exports[`post a comment: optimistic response 1`] = `
-
- + +
@@ -373,32 +381,36 @@ exports[`post a comment: optimistic response 1`] = `
-
- + +
@@ -632,32 +644,36 @@ exports[`post a comment: server response 1`] = `
Hello world! (from server)", - } - } - /> -
- + +
@@ -702,32 +718,36 @@ exports[`post a comment: server response 1`] = `
-
- + +
@@ -772,32 +792,36 @@ exports[`post a comment: server response 1`] = `
-
- + +
@@ -1031,32 +1055,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -1101,32 +1129,36 @@ exports[`renders comment stream 1`] = `
-
- + +
diff --git a/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap index 35948074c..3e0b12208 100644 --- a/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap @@ -223,32 +223,36 @@ exports[`post a reply: open reply form 1`] = `
-
- + +
@@ -297,32 +301,36 @@ exports[`post a reply: open reply form 1`] = `
-
- + +
@@ -371,32 +379,36 @@ exports[`post a reply: open reply form 1`] = `
-
- + +
@@ -445,32 +457,36 @@ exports[`post a reply: open reply form 1`] = `
-
- + +
@@ -519,32 +535,36 @@ exports[`post a reply: open reply form 1`] = `
-
- + +
@@ -593,19 +613,40 @@ exports[`post a reply: open reply form 1`] = ` @@ -989,32 +1029,36 @@ exports[`post a reply: optimistic response 1`] = `
-
- + +
@@ -1063,32 +1107,36 @@ exports[`post a reply: optimistic response 1`] = `
-
- + +
@@ -1137,32 +1185,36 @@ exports[`post a reply: optimistic response 1`] = `
-
- + +
@@ -1211,32 +1263,36 @@ exports[`post a reply: optimistic response 1`] = `
-
- + +
@@ -1285,32 +1341,36 @@ exports[`post a reply: optimistic response 1`] = `
-
- + +
@@ -1359,19 +1419,40 @@ exports[`post a reply: optimistic response 1`] = ` @@ -1570,16 +1650,20 @@ exports[`post a reply: optimistic response 1`] = `
Hello world!", + className="HorizontalGutter-root HorizontalGutter-full" + > +
Hello world!", + } } - } - /> -
+ /> +
+
@@ -1824,32 +1908,36 @@ exports[`post a reply: server response 1`] = `
-
- + +
@@ -1898,32 +1986,36 @@ exports[`post a reply: server response 1`] = `
-
- + +
@@ -1972,32 +2064,36 @@ exports[`post a reply: server response 1`] = `
-
- + +
@@ -2046,32 +2142,36 @@ exports[`post a reply: server response 1`] = `
-
- + +
@@ -2120,32 +2220,36 @@ exports[`post a reply: server response 1`] = `
-
- + +
@@ -2194,19 +2298,40 @@ exports[`post a reply: server response 1`] = ` @@ -2268,16 +2392,20 @@ exports[`post a reply: server response 1`] = `
Hello world! (from server)", + className="HorizontalGutter-root HorizontalGutter-full" + > +
Hello world! (from server)", + } } - } - /> -
+ /> +
+
@@ -2522,32 +2650,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -2596,32 +2728,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -2670,32 +2806,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -2744,32 +2884,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -2818,32 +2962,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -2892,19 +3040,40 @@ exports[`renders comment stream 1`] = ` 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 c1913d1ba..fad8105d6 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 @@ -223,32 +223,36 @@ exports[`post a reply: open reply form 1`] = `
-
- + +
@@ -420,32 +424,36 @@ exports[`post a reply: open reply form 1`] = `
-
- + +
@@ -679,32 +687,36 @@ exports[`post a reply: optimistic response 1`] = `
-
- + +
@@ -890,32 +902,36 @@ exports[`post a reply: optimistic response 1`] = `
Hello world!", - } - } - /> -
- + +
@@ -962,32 +978,36 @@ exports[`post a reply: optimistic response 1`] = `
-
- + +
@@ -1221,32 +1241,36 @@ exports[`post a reply: server response 1`] = `
-
- + +
@@ -1295,32 +1319,36 @@ exports[`post a reply: server response 1`] = `
Hello world! (from server)", - } - } - /> -
- + +
@@ -1367,32 +1395,36 @@ exports[`post a reply: server response 1`] = `
-
- + +
@@ -1626,32 +1658,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -1696,32 +1732,36 @@ exports[`renders comment stream 1`] = `
-
- + +
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 2266711cd..eb0ce6152 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 @@ -184,32 +184,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -254,32 +258,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -328,32 +336,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -402,32 +414,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -472,32 +488,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -544,32 +564,36 @@ exports[`renders comment stream 1`] = `
-
- + +
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 bfe500ef4..0ace4afd8 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 @@ -184,32 +184,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -254,32 +258,36 @@ exports[`renders comment stream 1`] = `
-
- + +
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 27fc4c77a..38c68d025 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 @@ -184,32 +184,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -258,32 +262,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -504,32 +512,36 @@ exports[`show all replies 1`] = `
-
- + +
@@ -578,32 +590,36 @@ exports[`show all replies 1`] = `
-
- + +
@@ -648,32 +664,36 @@ exports[`show all replies 1`] = `
-
- + +
diff --git a/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap new file mode 100644 index 000000000..a680e6696 --- /dev/null +++ b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap @@ -0,0 +1,738 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders comment stream 1`] = ` +
+
+
+
+ + +
+
+ +
+
+
+
+
+
+
+
+ + Markus + +
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + Markus + +
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + Markus + +
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + Markus + +
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + Markus + +
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + Markus + +
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`shows conversation 1`] = ` +
+
+ + Show All Comments + +
+
+
+
+
+ + Markus + +
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+`; diff --git a/src/core/client/stream/test/comments/showConversation.spec.tsx b/src/core/client/stream/test/comments/showConversation.spec.tsx new file mode 100644 index 000000000..ec2752228 --- /dev/null +++ b/src/core/client/stream/test/comments/showConversation.spec.tsx @@ -0,0 +1,66 @@ +import { ReactTestRenderer } from "react-test-renderer"; +import sinon from "sinon"; + +import { timeout } from "talk-common/utils"; +import { createSinonStub } from "talk-framework/testHelpers"; + +import { assetWithDeepestReplies, comments } from "../fixtures"; +import create from "./create"; + +let testRenderer: ReactTestRenderer; +beforeEach(() => { + const resolvers = { + Query: { + asset: createSinonStub( + s => s.throws(), + s => s.returns(assetWithDeepestReplies) + ), + comment: createSinonStub( + s => s.throws(), + s => + s + .withArgs(undefined, { id: "comment-with-deepest-replies-5" }) + .returns({ + ...comments[0], + id: "comment-with-deepest-replies-5", + }) + ), + }, + }; + + ({ testRenderer } = create({ + // Set this to true, to see graphql responses. + logNetwork: false, + resolvers, + initLocalState: localRecord => { + localRecord.setValue(assetWithDeepestReplies.id, "assetID"); + }, + })); +}); + +it("renders comment stream", async () => { + // Wait for loading. + await timeout(); + expect(testRenderer.toJSON()).toMatchSnapshot(); +}); + +it("shows conversation", async () => { + const mockEvent = { + preventDefault: sinon.mock().once(), + }; + + // Wait for loading. + await timeout(); + + testRenderer.root + .findByProps({ + id: + "comments-commentContainer-showConversation-comment-with-deepest-replies-5", + }) + .props.onClick(mockEvent); + + // Wait for loading. + await timeout(); + + expect(testRenderer.toJSON()).toMatchSnapshot(); +}); diff --git a/src/core/client/stream/test/fixtures.ts b/src/core/client/stream/test/fixtures.ts index a0e6e6a31..159262d22 100644 --- a/src/core/client/stream/test/fixtures.ts +++ b/src/core/client/stream/test/fixtures.ts @@ -20,6 +20,7 @@ export const comments = [ body: "Joining Too", createdAt: "2018-07-06T18:24:00.000Z", replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } }, + replyCount: 0, editing: { edited: false, editableUntil: "2018-07-06T18:24:30.000Z", @@ -31,6 +32,7 @@ export const comments = [ body: "What's up?", createdAt: "2018-07-06T18:20:00.000Z", replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } }, + replyCount: 0, editing: { edited: false, editableUntil: "2018-07-06T18:20:30.000Z", @@ -42,6 +44,7 @@ export const comments = [ body: "Hey!", createdAt: "2018-07-06T18:14:00.000Z", replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } }, + replyCount: 0, editing: { edited: false, editableUntil: "2018-07-06T18:14:30.000Z", @@ -53,6 +56,7 @@ export const comments = [ body: "Comment Body 3", createdAt: "2018-07-06T18:14:00.000Z", replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } }, + replyCount: 0, editing: { edited: false, editableUntil: "2018-07-06T18:14:30.000Z", @@ -64,6 +68,7 @@ export const comments = [ body: "Comment Body 4", createdAt: "2018-07-06T18:14:00.000Z", replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } }, + replyCount: 0, editing: { edited: false, editableUntil: "2018-07-06T18:14:30.000Z", @@ -75,6 +80,7 @@ export const comments = [ body: "Comment Body 5", createdAt: "2018-07-06T18:14:00.000Z", replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } }, + replyCount: 0, editing: { edited: false, editableUntil: "2018-07-06T18:14:30.000Z", @@ -113,6 +119,7 @@ export const commentWithReplies = { hasNextPage: false, }, }, + replyCount: 2, editing: { edited: false, editableUntil: "2018-07-06T18:24:30.000Z", @@ -133,6 +140,7 @@ export const commentWithDeepReplies = { hasNextPage: false, }, }, + replyCount: 2, editing: { edited: false, editableUntil: "2018-07-06T18:24:30.000Z", @@ -176,6 +184,7 @@ export const commentWithDeepestReplies = { ...commentWithReplies, id: "comment-with-deepest-replies", body: "body 0", + replyCount: 1, replies: { ...commentWithReplies.replies, edges: [ @@ -185,6 +194,7 @@ export const commentWithDeepestReplies = { ...commentWithReplies, id: "comment-with-deepest-replies-1", body: "body 1", + replyCount: 1, replies: { ...commentWithReplies.replies, edges: [ @@ -194,6 +204,7 @@ export const commentWithDeepestReplies = { ...commentWithReplies, id: "comment-with-deepest-replies-2", body: "body 2", + replyCount: 1, replies: { ...commentWithReplies.replies, edges: [ @@ -203,6 +214,7 @@ export const commentWithDeepestReplies = { ...commentWithReplies, id: "comment-with-deepest-replies-3", body: "body 3", + replyCount: 1, replies: { ...commentWithReplies.replies, edges: [ @@ -212,6 +224,7 @@ export const commentWithDeepestReplies = { ...commentWithReplies, id: "comment-with-deepest-replies-4", body: "body 4", + replyCount: 1, replies: { ...commentWithReplies.replies, edges: [ @@ -221,6 +234,7 @@ export const commentWithDeepestReplies = { ...commentWithReplies, id: "comment-with-deepest-replies-5", body: "body 5", + replyCount: 1, replies: { ...commentWithReplies.replies, edges: [ @@ -232,6 +246,7 @@ export const commentWithDeepestReplies = { id: "comment-with-deepest-replies-6", body: "body 6", + replyCount: 1, replies: { ...commentWithReplies.replies, edges: [], diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl index a62d6723a..6a7d3217b 100644 --- a/src/locales/en-US/stream.ftl +++ b/src/locales/en-US/stream.ftl @@ -68,3 +68,5 @@ comments-editCommentForm-rte = comments-editCommentForm-editRemainingTime = Edit: remaining comments-editCommentForm-editTimeExpired = Edit time has expired. You can no longer edit this comment. Why not post another one? comments-editedMarker-edited = Edited + +comments-showConversationLink-readMore = Read More of this Conversation >