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 index 2025974c5..23ff05e4a 100644 --- a/src/core/client/stream/tabs/comments/components/Comment/ShowConversationLink.tsx +++ b/src/core/client/stream/tabs/comments/components/Comment/ShowConversationLink.tsx @@ -5,6 +5,7 @@ import { Localized } from "fluent-react/compat"; import { Button } from "talk-ui/components"; export interface ShowConversationLinkProps { + id?: string; href?: string; onClick?: EventHandler; } @@ -15,6 +16,7 @@ const ShowConversationLink: StatelessComponent< return ( + + @@ -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`] = `
-
- +
+ - - Reply - - + Read More of this Conversation > +
@@ -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`] = `
-
- +
+ - - Reply - - + Read More of this Conversation > +
@@ -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`] = `
-
- +
+ - - Reply - - + Read More of this Conversation > +
@@ -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`] = `
-
- +
+ - - Reply - - + Read More of this Conversation > +
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: [],