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 d2c7277f4..6c88f64cf 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 @@ -294,32 +294,36 @@ exports[`cancel edit: edit canceled 1`] = `
-
- + +
@@ -364,32 +368,36 @@ exports[`cancel edit: edit canceled 1`] = `
-
- + +
@@ -844,32 +852,36 @@ exports[`edit a comment: edit form 1`] = `
-
- + +
@@ -1324,32 +1336,36 @@ exports[`edit a comment: optimistic response 1`] = `
-
- + +
@@ -1655,32 +1671,36 @@ exports[`edit a comment: render stream 1`] = `
-
- + +
@@ -1725,32 +1745,36 @@ exports[`edit a comment: render stream 1`] = `
-
- + +
@@ -2065,32 +2089,36 @@ exports[`edit a comment: server response 1`] = `
-
- + +
@@ -2135,32 +2163,36 @@ exports[`edit a comment: server response 1`] = `
-
- + +
@@ -2466,32 +2498,36 @@ exports[`shows expiry message: edit form closed 1`] = `
-
- + +
@@ -2536,32 +2572,36 @@ exports[`shows expiry message: edit form closed 1`] = `
-
- + +
@@ -2993,32 +3033,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 d8d25cd06..4fa7b4c86 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 @@ -239,32 +239,36 @@ exports[`loads more comments 1`] = `
-
- + +
@@ -309,32 +313,36 @@ exports[`loads more comments 1`] = `
-
- + +
@@ -379,32 +387,36 @@ exports[`loads more comments 1`] = `
-
- + +
@@ -655,32 +667,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -725,32 +741,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 b5ea5f4f4..08e554640 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 @@ -114,32 +114,36 @@ exports[`renders permalink view 1`] = `
-
- + +
@@ -388,32 +392,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 4d8ab43f1..d86ed9535 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 @@ -327,32 +327,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 d4eac5d3a..840b02577 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 @@ -288,32 +288,36 @@ exports[`post a comment: optimistic response 1`] = `
Hello world!", - } - } - /> -
- + +
@@ -358,32 +362,36 @@ exports[`post a comment: optimistic response 1`] = `
-
- + +
@@ -428,32 +436,36 @@ exports[`post a comment: optimistic response 1`] = `
-
- + +
@@ -743,32 +755,36 @@ exports[`post a comment: server response 1`] = `
Hello world! (from server)", - } - } - /> -
- + +
@@ -813,32 +829,36 @@ exports[`post a comment: server response 1`] = `
-
- + +
@@ -883,32 +903,36 @@ exports[`post a comment: server response 1`] = `
-
- + +
@@ -1198,32 +1222,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -1268,32 +1296,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 80b26d147..fbe3a4022 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 @@ -278,32 +278,36 @@ exports[`post a reply: open reply form 1`] = `
-
- + +
@@ -352,32 +356,36 @@ exports[`post a reply: open reply form 1`] = `
-
- + +
@@ -426,32 +434,36 @@ exports[`post a reply: open reply form 1`] = `
-
- + +
@@ -500,32 +512,36 @@ exports[`post a reply: open reply form 1`] = `
-
- + +
@@ -574,32 +590,36 @@ exports[`post a reply: open reply form 1`] = `
-
- + +
@@ -648,19 +668,40 @@ exports[`post a reply: open reply form 1`] = ` @@ -1100,32 +1140,36 @@ exports[`post a reply: optimistic response 1`] = `
-
- + +
@@ -1174,32 +1218,36 @@ exports[`post a reply: optimistic response 1`] = `
-
- + +
@@ -1248,32 +1296,36 @@ exports[`post a reply: optimistic response 1`] = `
-
- + +
@@ -1322,32 +1374,36 @@ exports[`post a reply: optimistic response 1`] = `
-
- + +
@@ -1396,32 +1452,36 @@ exports[`post a reply: optimistic response 1`] = `
-
- + +
@@ -1470,19 +1530,40 @@ exports[`post a reply: optimistic response 1`] = ` @@ -1681,16 +1761,20 @@ exports[`post a reply: optimistic response 1`] = `
Hello world!", + className="HorizontalGutter-root HorizontalGutter-full" + > +
Hello world!", + } } - } - /> -
+ /> +
+
@@ -1991,32 +2075,36 @@ exports[`post a reply: server response 1`] = `
-
- + +
@@ -2065,32 +2153,36 @@ exports[`post a reply: server response 1`] = `
-
- + +
@@ -2139,32 +2231,36 @@ exports[`post a reply: server response 1`] = `
-
- + +
@@ -2213,32 +2309,36 @@ exports[`post a reply: server response 1`] = `
-
- + +
@@ -2287,32 +2387,36 @@ exports[`post a reply: server response 1`] = `
-
- + +
@@ -2361,19 +2465,40 @@ exports[`post a reply: server response 1`] = ` @@ -2435,16 +2559,20 @@ exports[`post a reply: server response 1`] = `
Hello world! (from server)", + className="HorizontalGutter-root HorizontalGutter-full" + > +
Hello world! (from server)", + } } - } - /> -
+ /> +
+
@@ -2745,32 +2873,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -2819,32 +2951,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -2893,32 +3029,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -2967,32 +3107,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -3041,32 +3185,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -3115,19 +3263,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 2965c29b6..1e208ac73 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 @@ -278,32 +278,36 @@ exports[`post a reply: open reply form 1`] = `
-
- + +
@@ -475,32 +479,36 @@ exports[`post a reply: open reply form 1`] = `
-
- + +
@@ -790,32 +798,36 @@ exports[`post a reply: optimistic response 1`] = `
-
- + +
@@ -1001,32 +1013,36 @@ exports[`post a reply: optimistic response 1`] = `
Hello world!", - } - } - /> -
- + +
@@ -1073,32 +1089,36 @@ exports[`post a reply: optimistic response 1`] = `
-
- + +
@@ -1388,32 +1408,36 @@ exports[`post a reply: server response 1`] = `
-
- + +
@@ -1462,32 +1486,36 @@ exports[`post a reply: server response 1`] = `
Hello world! (from server)", - } - } - /> -
- + +
@@ -1534,32 +1562,36 @@ exports[`post a reply: server response 1`] = `
-
- + +
@@ -1849,32 +1881,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -1919,32 +1955,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 46bf324f5..47efa8e73 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 @@ -239,32 +239,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -309,32 +313,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -383,32 +391,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -457,32 +469,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -527,32 +543,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -599,32 +619,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 625ae787b..6c775fc46 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 @@ -239,32 +239,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -309,32 +313,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 f6a08814f..0ea582ab0 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 @@ -239,32 +239,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -313,32 +317,36 @@ exports[`renders comment stream 1`] = `
-
- + +
@@ -615,32 +623,36 @@ exports[`show all replies 1`] = `
-
- + +
@@ -689,32 +701,36 @@ exports[`show all replies 1`] = `
-
- + +
@@ -759,32 +775,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..efe0eb26f --- /dev/null +++ b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap @@ -0,0 +1,850 @@ +// 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 4ae5fb6d3..cb13d23b5 100644 --- a/src/locales/en-US/stream.ftl +++ b/src/locales/en-US/stream.ftl @@ -68,9 +68,11 @@ 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 > ## Profile Tab profile-historyComment-viewConversation = View Conversation profile-historyComment-replies = Replies {$replyCount} profile-historyComment-commentHistory = Comment History profile-historyComment-story = Story: {$title} +