From bc4d746291b6b29dddb59c3c89f0c299306a5ea5 Mon Sep 17 00:00:00 2001 From: Kiwi Date: Fri, 19 Oct 2018 19:32:12 +0200 Subject: [PATCH 1/2] fix: use asset url (#2005) --- .../comments/containers/CommentContainer.tsx | 6 +- .../containers/PermalinkButtonContainer.tsx | 28 +- .../CommentContainer.spec.tsx.snap | 28 +- .../__snapshots__/editComment.spec.tsx.snap | 363 ++++++++ .../__snapshots__/loadMore.spec.tsx.snap | 165 ++++ .../__snapshots__/permalinkView.spec.tsx.snap | 264 ++++++ ...permalinkViewCommentNotFound.spec.tsx.snap | 33 + ...permalinkViewLoadMoreParents.spec.tsx.snap | 132 +++ .../__snapshots__/postComment.spec.tsx.snap | 264 ++++++ .../postLocalReply.spec.tsx.snap | 858 ++++++++++++++++++ .../__snapshots__/postReply.spec.tsx.snap | 330 +++++++ .../__snapshots__/renderReplies.spec.tsx.snap | 198 ++++ .../__snapshots__/renderStream.spec.tsx.snap | 66 ++ .../showAllReplies.spec.tsx.snap | 165 ++++ .../showConversation.spec.tsx.snap | 231 +++++ 15 files changed, 3112 insertions(+), 19 deletions(-) diff --git a/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx index 9516d10ac..daebede42 100644 --- a/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx +++ b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx @@ -190,7 +190,10 @@ export class CommentContainer extends Component { active={showReplyDialog} /> )} - + = ({ - local, +export const PermalinkButtonContainerProps: StatelessComponent = ({ + asset, commentID, }) => { - return local.assetURL ? ( + return ( - ) : null; + ); }; -const enhanced = withLocalStateContainer( - graphql` - fragment PermalinkButtonContainerLocal on Local { - assetURL +const enhanced = withFragmentContainer({ + asset: graphql` + fragment PermalinkButtonContainer_asset on Asset { + url } - ` -)(PermalinkContainer); + `, +})(PermalinkButtonContainerProps); export default enhanced; diff --git a/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap index e1c085015..f637160c9 100644 --- a/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap +++ b/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap @@ -9,7 +9,12 @@ exports[`hide reply button 1`] = ` footer={ - - - - +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + )} + + ); +}; + +export default CommentHistory; diff --git a/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx b/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx deleted file mode 100644 index 654e0daf4..000000000 --- a/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { Localized } from "fluent-react/compat"; -import * as React from "react"; -import { StatelessComponent } from "react"; -import { HorizontalGutter, Typography } from "talk-ui/components"; -import HistoryComment from "./HistoryComment"; - -interface Comment { - id: string; - body: string | null; - createdAt: any; - replyCount: number | null; - asset: { - title: string | null; - }; - conversationURL: string; - onGotoConversation: (e: React.MouseEvent) => void; -} - -interface CommentsHistoryProps { - comments: Comment[]; -} - -const CommentsHistory: StatelessComponent = props => { - return ( - - - Comment History - - {props.comments.map(comment => ( - - ))} - - ); -}; - -export default CommentsHistory; diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.spec.tsx b/src/core/client/stream/tabs/profile/components/HistoryComment.spec.tsx new file mode 100644 index 000000000..1791765b6 --- /dev/null +++ b/src/core/client/stream/tabs/profile/components/HistoryComment.spec.tsx @@ -0,0 +1,25 @@ +import { shallow } from "enzyme"; +import { noop } from "lodash"; +import React from "react"; + +import { removeFragmentRefs } from "talk-framework/testHelpers"; +import { PropTypesOf } from "talk-framework/types"; + +import HistoryComment from "./HistoryComment"; + +const HistoryCommentN = removeFragmentRefs(HistoryComment); + +it("renders correctly", () => { + const props: PropTypesOf = { + body: "Hello World", + createdAt: "2018-07-06T18:24:00.000Z", + replyCount: 4, + asset: { + title: "Asset Title", + }, + conversationURL: "http://localhost/conversation", + onGotoConversation: noop, + }; + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/core/client/stream/tabs/profile/components/Profile.spec.tsx b/src/core/client/stream/tabs/profile/components/Profile.spec.tsx new file mode 100644 index 000000000..c02477631 --- /dev/null +++ b/src/core/client/stream/tabs/profile/components/Profile.spec.tsx @@ -0,0 +1,18 @@ +import { shallow } from "enzyme"; +import React from "react"; + +import { removeFragmentRefs } from "talk-framework/testHelpers"; +import { PropTypesOf } from "talk-framework/types"; + +import Profile from "./Profile"; + +const ProfileN = removeFragmentRefs(Profile); + +it("renders correctly", () => { + const props: PropTypesOf = { + asset: {}, + me: {}, + }; + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/core/client/stream/tabs/profile/components/Profile.tsx b/src/core/client/stream/tabs/profile/components/Profile.tsx index 04e448a23..58df61b21 100644 --- a/src/core/client/stream/tabs/profile/components/Profile.tsx +++ b/src/core/client/stream/tabs/profile/components/Profile.tsx @@ -3,21 +3,19 @@ import { StatelessComponent } from "react"; import { PropTypesOf } from "talk-framework/types"; import UserBoxContainer from "talk-stream/containers/UserBoxContainer"; import { HorizontalGutter } from "talk-ui/components"; -import CommentsHistoryContainer from "../containers/CommentsHistoryContainer"; +import CommentHistoryContainer from "../containers/CommentHistoryContainer"; export interface ProfileProps { - asset: PropTypesOf["asset"]; + asset: PropTypesOf["asset"]; me: PropTypesOf["me"] & - PropTypesOf["me"]; + PropTypesOf["me"]; } const Profile: StatelessComponent = props => { return ( - {props.me && ( - - )} + ); }; diff --git a/src/core/client/stream/tabs/profile/components/__snapshots__/CommentHistory.spec.tsx.snap b/src/core/client/stream/tabs/profile/components/__snapshots__/CommentHistory.spec.tsx.snap new file mode 100644 index 000000000..ec5b69a83 --- /dev/null +++ b/src/core/client/stream/tabs/profile/components/__snapshots__/CommentHistory.spec.tsx.snap @@ -0,0 +1,131 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`has more disables load more 1`] = ` + + + + Comment History + + + + + + + Load More + + + +`; + +exports[`has more renders correctly 1`] = ` + + + + Comment History + + + + + + + Load More + + + +`; + +exports[`renders correctly 1`] = ` + + + + Comment History + + + + + +`; diff --git a/src/core/client/stream/tabs/profile/components/__snapshots__/HistoryComment.spec.tsx.snap b/src/core/client/stream/tabs/profile/components/__snapshots__/HistoryComment.spec.tsx.snap new file mode 100644 index 000000000..9c4dc16ae --- /dev/null +++ b/src/core/client/stream/tabs/profile/components/__snapshots__/HistoryComment.spec.tsx.snap @@ -0,0 +1,75 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` + + + + Story: {$title} + + + + 2018-07-06T18:24:00.000Z + + + + Hello World + + + +
+ + reply + + + + Replies {$replyCount} + + +
+ + + launch + + + + View Conversation + + + + + +
+ + +`; diff --git a/src/core/client/stream/tabs/profile/components/__snapshots__/Profile.spec.tsx.snap b/src/core/client/stream/tabs/profile/components/__snapshots__/Profile.spec.tsx.snap new file mode 100644 index 000000000..ddf5b290a --- /dev/null +++ b/src/core/client/stream/tabs/profile/components/__snapshots__/Profile.spec.tsx.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` + + + + +`; diff --git a/src/core/client/stream/tabs/profile/containers/CommentHistoryContainer.tsx b/src/core/client/stream/tabs/profile/containers/CommentHistoryContainer.tsx new file mode 100644 index 000000000..8c10ee259 --- /dev/null +++ b/src/core/client/stream/tabs/profile/containers/CommentHistoryContainer.tsx @@ -0,0 +1,124 @@ +import React from "react"; +import { graphql, RelayPaginationProp } from "react-relay"; + +import { withPaginationContainer } from "talk-framework/lib/relay"; +import { CommentHistoryContainer_asset as AssetData } from "talk-stream/__generated__/CommentHistoryContainer_asset.graphql"; +import { CommentHistoryContainer_me as MeData } from "talk-stream/__generated__/CommentHistoryContainer_me.graphql"; +import { CommentHistoryContainerPaginationQueryVariables } from "talk-stream/__generated__/CommentHistoryContainerPaginationQuery.graphql"; + +import CommentHistory from "../components/CommentHistory"; + +interface CommentHistoryContainerProps { + me: MeData; + asset: AssetData; + relay: RelayPaginationProp; +} + +export class CommentHistoryContainer extends React.Component< + CommentHistoryContainerProps +> { + public state = { + disableLoadMore: false, + }; + + public render() { + const comments = this.props.me.comments.edges.map(edge => edge.node); + return ( + + ); + } + + private loadMore = () => { + if (!this.props.relay.hasMore() || this.props.relay.isLoading()) { + return; + } + this.setState({ disableLoadMore: true }); + this.props.relay.loadMore( + 10, // Fetch the next 10 feed items + error => { + this.setState({ disableLoadMore: false }); + if (error) { + // tslint:disable-next-line:no-console + console.error(error); + } + } + ); + }; +} + +// TODO: (cvle) This should be autogenerated. +interface FragmentVariables { + count: number; + cursor?: string; +} + +const enhanced = withPaginationContainer< + CommentHistoryContainerProps, + CommentHistoryContainerPaginationQueryVariables, + FragmentVariables +>( + { + asset: graphql` + fragment CommentHistoryContainer_asset on Asset { + ...HistoryCommentContainer_asset + } + `, + me: graphql` + fragment CommentHistoryContainer_me on User + @argumentDefinitions( + count: { type: "Int!", defaultValue: 5 } + cursor: { type: "Cursor" } + ) { + comments(first: $count, after: $cursor) + @connection(key: "CommentHistory_comments") { + edges { + node { + id + ...HistoryCommentContainer_comment + } + } + } + } + `, + }, + { + direction: "forward", + getConnectionFromProps(props) { + return props.me && props.me.comments; + }, + // 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, + }; + }, + 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 CommentHistoryContainerPaginationQuery( + $count: Int! + $cursor: Cursor + ) { + me { + ...CommentHistoryContainer_me + @arguments(count: $count, cursor: $cursor) + } + } + `, + } +)(CommentHistoryContainer); + +export default enhanced; diff --git a/src/core/client/stream/tabs/profile/containers/CommentsHistoryContainer.tsx b/src/core/client/stream/tabs/profile/containers/CommentsHistoryContainer.tsx deleted file mode 100644 index 3056a488b..000000000 --- a/src/core/client/stream/tabs/profile/containers/CommentsHistoryContainer.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React from "react"; -import { graphql } from "react-relay"; - -import { getURLWithCommentID } from "talk-framework/helpers"; -import { withFragmentContainer } from "talk-framework/lib/relay"; -import { CommentsHistoryContainer_asset as AssetData } from "talk-stream/__generated__/CommentsHistoryContainer_asset.graphql"; -import { CommentsHistoryContainer_me as CommentsData } from "talk-stream/__generated__/CommentsHistoryContainer_me.graphql"; -import { - SetCommentIDMutation, - withSetCommentIDMutation, -} from "talk-stream/mutations"; -import CommentsHistory from "../components/CommentsHistory"; - -interface CommentsHistoryContainerProps { - setCommentID: SetCommentIDMutation; - me: CommentsData; - asset: AssetData; -} - -export class CommentsHistoryContainer extends React.Component< - CommentsHistoryContainerProps -> { - private onGoToConversation = (id: string) => { - this.props.setCommentID({ id }); - }; - public render() { - const comments = this.props.me.comments.edges.map(edge => ({ - ...edge.node, - conversationURL: getURLWithCommentID(edge.node.asset.url, edge.node.id), - onGotoConversation: (e: React.MouseEvent) => { - if (this.props.asset.id === edge.node.asset.id) { - this.onGoToConversation(edge.node.id); - e.preventDefault(); - } - }, - })); - return ; - } -} - -const enhanced = withSetCommentIDMutation( - withFragmentContainer({ - asset: graphql` - fragment CommentsHistoryContainer_asset on Asset { - id - } - `, - me: graphql` - fragment CommentsHistoryContainer_me on User { - comments { - edges { - node { - id - body - createdAt - replyCount - asset { - id - title - url - } - } - } - } - } - `, - })(CommentsHistoryContainer) -); - -export default enhanced; diff --git a/src/core/client/stream/tabs/profile/containers/HistoryCommentContainer.tsx b/src/core/client/stream/tabs/profile/containers/HistoryCommentContainer.tsx new file mode 100644 index 000000000..8e0a21cca --- /dev/null +++ b/src/core/client/stream/tabs/profile/containers/HistoryCommentContainer.tsx @@ -0,0 +1,66 @@ +import React from "react"; +import { graphql } from "react-relay"; + +import { getURLWithCommentID } from "talk-framework/helpers"; +import { withFragmentContainer } from "talk-framework/lib/relay"; +import { HistoryCommentContainer_asset as AssetData } from "talk-stream/__generated__/HistoryCommentContainer_asset.graphql"; +import { HistoryCommentContainer_comment as CommentData } from "talk-stream/__generated__/HistoryCommentContainer_comment.graphql"; +import { + SetCommentIDMutation, + withSetCommentIDMutation, +} from "talk-stream/mutations"; +import HistoryComment from "../components/HistoryComment"; + +interface HistoryCommentContainerProps { + setCommentID: SetCommentIDMutation; + asset: AssetData; + comment: CommentData; +} + +export class HistoryCommentContainer extends React.Component< + HistoryCommentContainerProps +> { + private handleGoToConversation = (e: React.MouseEvent) => { + if (this.props.asset.id === this.props.comment.asset.id) { + this.props.setCommentID({ id: this.props.comment.id }); + e.preventDefault(); + } + }; + public render() { + return ( + + ); + } +} + +const enhanced = withSetCommentIDMutation( + withFragmentContainer({ + asset: graphql` + fragment HistoryCommentContainer_asset on Asset { + id + } + `, + comment: graphql` + fragment HistoryCommentContainer_comment on Comment { + id + body + createdAt + replyCount + asset { + id + title + url + } + } + `, + })(HistoryCommentContainer) +); + +export default enhanced; diff --git a/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx b/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx index 716ce75bc..390110f27 100644 --- a/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx +++ b/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx @@ -20,13 +20,13 @@ export class StreamContainer extends React.Component { const enhanced = withFragmentContainer({ asset: graphql` fragment ProfileContainer_asset on Asset { - ...CommentsHistoryContainer_asset + ...CommentHistoryContainer_asset } `, me: graphql` fragment ProfileContainer_me on User { ...UserBoxContainer_me - ...CommentsHistoryContainer_me + ...CommentHistoryContainer_me } `, })(StreamContainer); diff --git a/src/core/client/stream/tabs/profile/queries/ProfileQuery.tsx b/src/core/client/stream/tabs/profile/queries/ProfileQuery.tsx index 8eef92f6d..e98212f77 100644 --- a/src/core/client/stream/tabs/profile/queries/ProfileQuery.tsx +++ b/src/core/client/stream/tabs/profile/queries/ProfileQuery.tsx @@ -64,10 +64,6 @@ const ProfileQuery: StatelessComponent = ({ assetID, assetURL, }} - cacheConfig={{ - // TODO: enable caching after mutations are adapted. - force: true, - }} render={render} /> ); diff --git a/src/core/client/stream/test/fixtures.ts b/src/core/client/stream/test/fixtures.ts index 04c777810..dbaf708b3 100644 --- a/src/core/client/stream/test/fixtures.ts +++ b/src/core/client/stream/test/fixtures.ts @@ -242,6 +242,20 @@ export const assets = denormalizeAssets([ }, }, }, + { + ...baseAsset, + id: "asset-2", + url: "http://localhost/assets/asset-2", + comments: { + edges: [ + { node: comments[2], cursor: comments[2].createdAt }, + { node: comments[3], cursor: comments[3].createdAt }, + ], + pageInfo: { + hasNextPage: false, + }, + }, + }, ]); export const assetWithReplies = denormalizeAsset({ @@ -293,3 +307,23 @@ export const assetWithDeepestReplies = denormalizeAsset({ }, }, }); + +export const meWithComments = { + id: "me-with-comments", + username: "Markus", + comments: { + edges: [ + { + node: { ...assets[0].comments.edges[0].node, asset: assets[0] }, + cursor: comments[0].createdAt, + }, + { + node: { ...assets[1].comments.edges[0].node, asset: assets[1] }, + cursor: comments[1].createdAt, + }, + ], + pageInfo: { + hasNextPage: false, + }, + }, +}; diff --git a/src/core/client/stream/test/profile/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/profile/__snapshots__/loadMore.spec.tsx.snap new file mode 100644 index 000000000..59976be4e --- /dev/null +++ b/src/core/client/stream/test/profile/__snapshots__/loadMore.spec.tsx.snap @@ -0,0 +1,522 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`loads more comments 1`] = ` +
+
    + + +
+
+
+
+
+
+ Signed in as + + Markus + + . +
+
+ + Not you?  + + +
+
+
+
+

+ Comment History +

+
+

+ Story: ⁨title⁩ +

+ + +
+

+ Story: ⁨title⁩ +

+ + +
+

+ Story: ⁨title⁩ +

+ + +
+
+
+
+`; + +exports[`renders comment stream 1`] = ` +
+
    + + +
+
+
+
+
+
+ Signed in as + + Markus + + . +
+
+ + Not you?  + + +
+
+
+
+

+ Comment History +

+
+

+ Story: ⁨title⁩ +

+ + +
+

+ Story: ⁨title⁩ +

+ + + +
+
+
+
+`; diff --git a/src/core/client/stream/test/profile/__snapshots__/renderProfile.spec.tsx.snap b/src/core/client/stream/test/profile/__snapshots__/renderProfile.spec.tsx.snap new file mode 100644 index 000000000..d406b1c47 --- /dev/null +++ b/src/core/client/stream/test/profile/__snapshots__/renderProfile.spec.tsx.snap @@ -0,0 +1,226 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders profile 1`] = ` +
+
    + + +
+
+
+
+
+
+ Signed in as + + Markus + + . +
+
+ + Not you?  + + +
+
+
+
+

+ Comment History +

+
+

+ Story: ⁨title⁩ +

+ + +
+

+ Story: ⁨title⁩ +

+ + +
+
+
+
+`; diff --git a/src/core/client/stream/test/profile/create.ts b/src/core/client/stream/test/profile/create.ts new file mode 100644 index 000000000..377a8caee --- /dev/null +++ b/src/core/client/stream/test/profile/create.ts @@ -0,0 +1,13 @@ +import createTopLevel, { CreateParams } from "../create"; + +export default function create(params: CreateParams) { + return createTopLevel({ + ...params, + initLocalState: (localRecord, source, environment) => { + if (params.initLocalState) { + localRecord.setValue("PROFILE", "activeTab"); + params.initLocalState(localRecord, source, environment); + } + }, + }); +} diff --git a/src/core/client/stream/test/profile/loadMore.spec.tsx b/src/core/client/stream/test/profile/loadMore.spec.tsx new file mode 100644 index 000000000..9417ed34c --- /dev/null +++ b/src/core/client/stream/test/profile/loadMore.spec.tsx @@ -0,0 +1,92 @@ +import { ReactTestRenderer } from "react-test-renderer"; +import sinon from "sinon"; + +import { timeout } from "talk-common/utils"; +import { createSinonStub } from "talk-framework/testHelpers"; + +import { assets, comments, meWithComments } from "../fixtures"; +import create from "./create"; + +let testRenderer: ReactTestRenderer; +beforeEach(() => { + const meStub = { + ...meWithComments, + comments: createSinonStub( + s => s.throws(), + s => + s.withArgs({ first: 5, orderBy: "CREATED_AT_DESC" }).returns({ + edges: [ + { + node: { ...comments[0], asset: assets[0] }, + cursor: comments[0].createdAt, + }, + { + node: { ...comments[1], asset: assets[0] }, + cursor: comments[1].createdAt, + }, + ], + pageInfo: { + endCursor: comments[1].createdAt, + hasNextPage: true, + }, + }), + s => + s + .withArgs({ + first: 10, + orderBy: "CREATED_AT_DESC", + after: comments[1].createdAt, + }) + .returns({ + edges: [ + { + node: { ...comments[2], asset: assets[0] }, + cursor: comments[2].createdAt, + }, + ], + pageInfo: { + endCursor: comments[2].createdAt, + hasNextPage: false, + }, + }) + ), + }; + + const resolvers = { + Query: { + asset: createSinonStub( + s => s.throws(), + s => + s + .withArgs(undefined, { id: assets[0].id, url: null }) + .returns(assets[0]) + ), + me: sinon.stub().returns(meStub), + }, + }; + + ({ testRenderer } = create({ + // Set this to true, to see graphql responses. + logNetwork: false, + resolvers, + initLocalState: localRecord => { + localRecord.setValue(assets[0].id, "assetID"); + }, + })); +}); + +it("renders comment stream", async () => { + // Wait for loading. + await timeout(); + expect(testRenderer.toJSON()).toMatchSnapshot(); +}); + +it("loads more comments", async () => { + testRenderer.root + .findByProps({ id: "talk-profile-commentHistory-loadMore" }) + .props.onClick(); + + // Wait for loading. + await timeout(); + expect(testRenderer.toJSON()).toMatchSnapshot(); +}); diff --git a/src/core/client/stream/test/profile/renderProfile.spec.tsx b/src/core/client/stream/test/profile/renderProfile.spec.tsx new file mode 100644 index 000000000..519febb13 --- /dev/null +++ b/src/core/client/stream/test/profile/renderProfile.spec.tsx @@ -0,0 +1,39 @@ +import { ReactTestRenderer } from "react-test-renderer"; +import sinon from "sinon"; + +import { timeout } from "talk-common/utils"; +import { createSinonStub } from "talk-framework/testHelpers"; + +import { assets, meWithComments } from "../fixtures"; +import create from "./create"; + +let testRenderer: ReactTestRenderer; +beforeEach(() => { + const resolvers = { + Query: { + asset: createSinonStub( + s => s.throws(), + s => + s + .withArgs(undefined, { id: assets[0].id, url: null }) + .returns(assets[0]) + ), + me: sinon.stub().returns(meWithComments), + }, + }; + + ({ testRenderer } = create({ + // Set this to true, to see graphql responses. + logNetwork: false, + resolvers, + initLocalState: localRecord => { + localRecord.setValue(assets[0].id, "assetID"); + }, + })); +}); + +it("renders profile", async () => { + // Wait for loading. + await timeout(); + expect(testRenderer.toJSON()).toMatchSnapshot(); +}); diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl index ceb0ce01c..89929f3f2 100644 --- a/src/locales/en-US/stream.ftl +++ b/src/locales/en-US/stream.ftl @@ -92,3 +92,4 @@ profile-historyComment-commentHistory = Comment History profile-historyComment-story = Story: {$title} profile-profileQuery-errorLoadingProfile = Error loading profile profile-profileQuery-assetNotFound = Asset not found +profile-commentHistory-loadMore = Load More