wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-08-06 13:41:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add tests

Browse Source
This commit is contained in:
Chi Vinh Le
2018-09-25 21:42:15 +02:00
parent b6554b344c
commit b5b3c66d61
24 changed files with 3127 additions and 1806 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/tabs/comments/components/Comment/ShowConversationLink.spec.tsx
+17
View File
@@ -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<typeof ShowConversationLink> = {
id: "id",
onClick: noop,
href: "http://localhost/comment",
};
const wrapper = shallow(<ShowConversationLink {...props} />);
expect(wrapper).toMatchSnapshot();
});
src/core/client/stream/tabs/comments/components/Comment/ShowConversationLink.tsx
+2
View File
@@ -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<MouseEvent>;
}
@@ -15,6 +16,7 @@ const ShowConversationLink: StatelessComponent<
return (
<Localized id="comments-showConversationLink-readMore">
<Button
id={props.id}
variant="underlined"
color="primary"
href={props.href}
src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap
+5 -9
View File
@@ -30,15 +30,11 @@ exports[`renders username and body 1`] = `
topBarRight
</div>
</withPropsOnChange(Flex)>
<HTMLContent>
Woof
</HTMLContent>
<withPropsOnChange(Flex)
className="Comment-footer"
direction="row"
itemGutter="half"
>
<withPropsOnChange(HorizontalGutter)>
<HTMLContent>
Woof
</HTMLContent>
footer
</withPropsOnChange(Flex)>
</withPropsOnChange(HorizontalGutter)>
</div>
`;
src/core/client/stream/tabs/comments/components/Comment/__snapshots__/ShowConversationLink.spec.tsx.snap
+19
View File
@@ -0,0 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<Localized
id="comments-showConversationLink-readMore"
>
<withPropsOnChange(Button)
anchor={true}
color="primary"
href="http://localhost/comment"
id="id"
onClick={[Function]}
target="_parent"
variant="underlined"
>
Read More of this Conversation &gt;
</withPropsOnChange(Button)>
</Localized>
`;
src/core/client/stream/tabs/comments/components/ReplyList.spec.tsx
+4 -1
View File
@@ -14,7 +14,10 @@ it("renders correctly", () => {
const props: PropTypesOf<typeof ReplyListN> = {
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,
src/core/client/stream/tabs/comments/components/__snapshots__/ReplyList.spec.tsx.snap
+13 -6
View File
@@ -8,7 +8,7 @@ exports[`renders correctly 1`] = `
<withPropsOnChange(HorizontalGutter)
key="comment-1"
>
<withContext(createMutationContainer(Relay(CommentContainer)))
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
asset={
Object {
"id": "asset-id",
@@ -24,12 +24,13 @@ exports[`renders correctly 1`] = `
key="comment-1"
localReply={false}
me={null}
showConversationLink={false}
/>
</withPropsOnChange(HorizontalGutter)>
<withPropsOnChange(HorizontalGutter)
key="comment-2"
>
<withContext(createMutationContainer(Relay(CommentContainer)))
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
asset={
Object {
"id": "asset-id",
@@ -38,6 +39,7 @@ exports[`renders correctly 1`] = `
comment={
Object {
"id": "comment-2",
"showConversationLink": true,
}
}
disableReplies={false}
@@ -45,6 +47,7 @@ exports[`renders correctly 1`] = `
key="comment-2"
localReply={false}
me={null}
showConversationLink={true}
/>
</withPropsOnChange(HorizontalGutter)>
</withPropsOnChange(HorizontalGutter)>
@@ -58,7 +61,7 @@ exports[`when there is more disables load more button 1`] = `
<withPropsOnChange(HorizontalGutter)
key="comment-1"
>
<withContext(createMutationContainer(Relay(CommentContainer)))
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
asset={
Object {
"id": "asset-id",
@@ -72,12 +75,13 @@ exports[`when there is more disables load more button 1`] = `
indentLevel={1}
key="comment-1"
me={null}
showConversationLink={false}
/>
</withPropsOnChange(HorizontalGutter)>
<withPropsOnChange(HorizontalGutter)
key="comment-2"
>
<withContext(createMutationContainer(Relay(CommentContainer)))
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
asset={
Object {
"id": "asset-id",
@@ -91,6 +95,7 @@ exports[`when there is more disables load more button 1`] = `
indentLevel={1}
key="comment-2"
me={null}
showConversationLink={false}
/>
</withPropsOnChange(HorizontalGutter)>
<Indent
@@ -123,7 +128,7 @@ exports[`when there is more renders a load more button 1`] = `
<withPropsOnChange(HorizontalGutter)
key="comment-1"
>
<withContext(createMutationContainer(Relay(CommentContainer)))
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
asset={
Object {
"id": "asset-id",
@@ -137,12 +142,13 @@ exports[`when there is more renders a load more button 1`] = `
indentLevel={1}
key="comment-1"
me={null}
showConversationLink={false}
/>
</withPropsOnChange(HorizontalGutter)>
<withPropsOnChange(HorizontalGutter)
key="comment-2"
>
<withContext(createMutationContainer(Relay(CommentContainer)))
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
asset={
Object {
"id": "asset-id",
@@ -156,6 +162,7 @@ exports[`when there is more renders a load more button 1`] = `
indentLevel={1}
key="comment-2"
me={null}
showConversationLink={false}
/>
</withPropsOnChange(HorizontalGutter)>
<Indent
src/core/client/stream/tabs/comments/components/__snapshots__/Stream.spec.tsx.snap
+8 -8
View File
@@ -21,7 +21,7 @@ exports[`renders correctly 1`] = `
<withPropsOnChange(HorizontalGutter)
key="comment-1"
>
<withContext(createMutationContainer(Relay(CommentContainer)))
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
asset={
Object {
"id": "asset-id",
@@ -53,7 +53,7 @@ exports[`renders correctly 1`] = `
<withPropsOnChange(HorizontalGutter)
key="comment-2"
>
<withContext(createMutationContainer(Relay(CommentContainer)))
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
asset={
Object {
"id": "asset-id",
@@ -107,7 +107,7 @@ exports[`when there is more disables load more button 1`] = `
<withPropsOnChange(HorizontalGutter)
key="comment-1"
>
<withContext(createMutationContainer(Relay(CommentContainer)))
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
asset={
Object {
"id": "asset-id",
@@ -139,7 +139,7 @@ exports[`when there is more disables load more button 1`] = `
<withPropsOnChange(HorizontalGutter)
key="comment-2"
>
<withContext(createMutationContainer(Relay(CommentContainer)))
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
asset={
Object {
"id": "asset-id",
@@ -207,7 +207,7 @@ exports[`when there is more renders a load more button 1`] = `
<withPropsOnChange(HorizontalGutter)
key="comment-1"
>
<withContext(createMutationContainer(Relay(CommentContainer)))
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
asset={
Object {
"id": "asset-id",
@@ -239,7 +239,7 @@ exports[`when there is more renders a load more button 1`] = `
<withPropsOnChange(HorizontalGutter)
key="comment-2"
>
<withContext(createMutationContainer(Relay(CommentContainer)))
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
asset={
Object {
"id": "asset-id",
@@ -309,7 +309,7 @@ exports[`when use is logged in renders correctly 1`] = `
<withPropsOnChange(HorizontalGutter)
key="comment-1"
>
<withContext(createMutationContainer(Relay(CommentContainer)))
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
asset={
Object {
"id": "asset-id",
@@ -341,7 +341,7 @@ exports[`when use is logged in renders correctly 1`] = `
<withPropsOnChange(HorizontalGutter)
key="comment-2"
>
<withContext(createMutationContainer(Relay(CommentContainer)))
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
asset={
Object {
"id": "asset-id",
src/core/client/stream/tabs/comments/containers/CommentContainer.spec.tsx
+38 -3
View File
@@ -14,7 +14,7 @@ it("renders username and body", () => {
const props: PropTypesOf<typeof CommentContainerN> = {
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<typeof CommentContainerN> = {
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(<CommentContainerN {...props} />);
@@ -72,7 +74,7 @@ it("hide reply button", () => {
const props: PropTypesOf<typeof CommentContainerN> = {
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(<CommentContainerN {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("shows conversation link", () => {
const props: PropTypesOf<typeof CommentContainerN> = {
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(<CommentContainerN {...props} />);
expect(wrapper).toMatchSnapshot();
});
src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
+3
View File
@@ -185,6 +185,9 @@ export class CommentContainer extends Component<InnerProps, State> {
</ButtonsBar>
{showConversationLink && (
<ShowConversationLink
id={`comments-commentContainer-showConversation-${
comment.id
}`}
onClick={this.handleShowConversation}
href={getURLWithCommentID(
this.props.asset.url,
src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap
+61 -17
View File
@@ -14,9 +14,11 @@ exports[`hide reply button 1`] = `
createdAt="1995-12-17T03:24:00.000Z"
footer={
<React.Fragment>
<withContext(withLocalStateContainer(PermalinkContainer))
commentID="comment-id"
/>
<ButtonsBar>
<withContext(withLocalStateContainer(PermalinkContainer))
commentID="comment-id"
/>
</ButtonsBar>
</React.Fragment>
}
id="comment-comment-id"
@@ -40,14 +42,16 @@ exports[`renders body only 1`] = `
createdAt="1995-12-17T03:24:00.000Z"
footer={
<React.Fragment>
<ReplyButton
active={false}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<withContext(withLocalStateContainer(PermalinkContainer))
commentID="comment-id"
/>
<ButtonsBar>
<ReplyButton
active={false}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<withContext(withLocalStateContainer(PermalinkContainer))
commentID="comment-id"
/>
</ButtonsBar>
</React.Fragment>
}
id="comment-comment-id"
@@ -71,14 +75,54 @@ exports[`renders username and body 1`] = `
createdAt="1995-12-17T03:24:00.000Z"
footer={
<React.Fragment>
<ReplyButton
active={false}
id="comments-commentContainer-replyButton-comment-id"
<ButtonsBar>
<ReplyButton
active={false}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<withContext(withLocalStateContainer(PermalinkContainer))
commentID="comment-id"
/>
</ButtonsBar>
</React.Fragment>
}
id="comment-comment-id"
indentLevel={1}
showEditedMarker={false}
/>
</React.Fragment>
`;
exports[`shows conversation link 1`] = `
<React.Fragment>
<IndentedComment
author={
Object {
"id": "author-id",
"username": "Marvin",
}
}
blur={false}
body="Woof"
createdAt="1995-12-17T03:24:00.000Z"
footer={
<React.Fragment>
<ButtonsBar>
<ReplyButton
active={false}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<withContext(withLocalStateContainer(PermalinkContainer))
commentID="comment-id"
/>
</ButtonsBar>
<ShowConversationLink
href="http://localhost/asset?commentID=comment-id"
id="comments-commentContainer-showConversation-comment-id"
onClick={[Function]}
/>
<withContext(withLocalStateContainer(PermalinkContainer))
commentID="comment-id"
/>
</React.Fragment>
}
id="comment-comment-id"
src/core/client/stream/tabs/comments/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
+8
View File
@@ -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,
},
]
}
src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap
+308 -264
View File
@@ -239,32 +239,36 @@ exports[`cancel edit: edit canceled 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -309,32 +313,36 @@ exports[`cancel edit: edit canceled 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -733,32 +741,36 @@ exports[`edit a comment: edit form 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -1157,32 +1169,36 @@ exports[`edit a comment: optimistic response 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -1432,32 +1448,36 @@ exports[`edit a comment: render stream 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -1502,32 +1522,36 @@ exports[`edit a comment: render stream 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -1786,32 +1810,36 @@ exports[`edit a comment: server response 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Edited! (from server)",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Edited! (from server)",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -1856,32 +1884,36 @@ exports[`edit a comment: server response 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -2131,32 +2163,36 @@ exports[`shows expiry message: edit form closed 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -2201,32 +2237,36 @@ exports[`shows expiry message: edit form closed 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -2602,32 +2642,36 @@ exports[`shows expiry message: edit time expired 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap
+140 -120
View File
@@ -184,32 +184,36 @@ exports[`loads more comments 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -254,32 +258,36 @@ exports[`loads more comments 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -324,32 +332,36 @@ exports[`loads more comments 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Hey!",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-2"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Hey!",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-2"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -544,32 +556,36 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -614,32 +630,36 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap
+56 -48
View File
@@ -59,32 +59,36 @@ exports[`renders permalink view 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -277,32 +281,36 @@ exports[`show all comments 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+28 -24
View File
@@ -216,32 +216,36 @@ exports[`show all comments 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap
+224 -192
View File
@@ -233,32 +233,36 @@ exports[`post a comment: optimistic response 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "<strong>Hello world!</strong>",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-uuid-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "<strong>Hello world!</strong>",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-uuid-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -303,32 +307,36 @@ exports[`post a comment: optimistic response 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -373,32 +381,36 @@ exports[`post a comment: optimistic response 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -632,32 +644,36 @@ exports[`post a comment: server response 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "<strong>Hello world! (from server)</strong>",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-x"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "<strong>Hello world! (from server)</strong>",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-x"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -702,32 +718,36 @@ exports[`post a comment: server response 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -772,32 +792,36 @@ exports[`post a comment: server response 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -1031,32 +1055,36 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -1101,32 +1129,36 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap
+730 -562
View File
File diff suppressed because it is too large Load Diff
src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap
+280 -240
View File
@@ -223,32 +223,36 @@ exports[`post a reply: open reply form 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -420,32 +424,36 @@ exports[`post a reply: open reply form 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -679,32 +687,36 @@ exports[`post a reply: optimistic response 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -890,32 +902,36 @@ exports[`post a reply: optimistic response 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "<strong>Hello world!</strong>",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-uuid-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "<strong>Hello world!</strong>",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-uuid-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -962,32 +978,36 @@ exports[`post a reply: optimistic response 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -1221,32 +1241,36 @@ exports[`post a reply: server response 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -1295,32 +1319,36 @@ exports[`post a reply: server response 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "<strong>Hello world! (from server)</strong>",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-x"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "<strong>Hello world! (from server)</strong>",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-x"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -1367,32 +1395,36 @@ exports[`post a reply: server response 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -1626,32 +1658,36 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -1696,32 +1732,36 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap
+168 -144
View File
@@ -184,32 +184,36 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -254,32 +258,36 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "I like yoghurt",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-with-deep-replies"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "I like yoghurt",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-with-deep-replies"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -328,32 +336,36 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "I like yoghurt",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-with-replies"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "I like yoghurt",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-with-replies"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -402,32 +414,36 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Comment Body 3",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-3"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Comment Body 3",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-3"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -472,32 +488,36 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Comment Body 4",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-4"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Comment Body 4",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-4"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -544,32 +564,36 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Comment Body 5",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-5"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Comment Body 5",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-5"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap
+56 -48
View File
@@ -184,32 +184,36 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -254,32 +258,36 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap
+140 -120
View File
@@ -184,32 +184,36 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -258,32 +262,36 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -504,32 +512,36 @@ exports[`show all replies 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -578,32 +590,36 @@ exports[`show all replies 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "What's up?",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -648,32 +664,36 @@ exports[`show all replies 1`] = `
</div>
</div>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Hey!",
}
}
/>
<div
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
className="HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-2"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Hey!",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<span>
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-2"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap
+738
View File
@@ -0,0 +1,738 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders comment stream 1`] = `
<div
className="Flex-root App-root Flex-flex Flex-justifyCenter"
>
<div
className="HorizontalGutter-root Stream-root HorizontalGutter-double"
>
<div
className="HorizontalGutter-root HorizontalGutter-half"
>
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
Sign in
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
Register
</button>
</div>
<div
className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
>
<div
aria-hidden="true"
>
<div>
<div
className=""
>
<div
className=" RTE-toolbarDisabled Toolbar-toolbar"
>
<button
className="Button-button"
disabled={false}
onClick={[Function]}
title="Bold"
type="button"
>
<span
aria-hidden="true"
className="Icon-root Icon-md"
>
format_bold
</span>
</button>
<button
className="Button-button"
disabled={false}
onClick={[Function]}
title="Italic"
type="button"
>
<span
aria-hidden="true"
className="Icon-root Icon-md"
>
format_italic
</span>
</button>
<button
className="Button-button"
disabled={false}
onClick={[Function]}
title="Blockquote"
type="button"
>
<span
aria-hidden="true"
className="Icon-root Icon-md"
>
format_quote
</span>
</button>
</div>
<div
aria-hidden="true"
className="RTE-placeholder RTE-placeholder "
>
Post a comment
</div>
<div
aria-placeholder="Post a comment"
className="RTE-contentEditable RTE-content RTE-contentEditableDisabled"
contentEditable={false}
dangerouslySetInnerHTML={
Object {
"__html": "",
}
}
disabled={true}
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
</div>
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
disabled={true}
onBlur={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
>
Sign in and Join the Conversation
</button>
</div>
</div>
<div
aria-live="polite"
className="HorizontalGutter-root HorizontalGutter-full"
id="talk-comments-stream-log"
role="log"
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
>
<div
className="Indent-root"
>
<div
className=""
>
<div
className="Comment-root"
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies"
>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
>
Markus
</span>
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</div>
</div>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "body 0",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-with-deepest-replies"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-full"
id="talk-comments-replyList-log--comment-with-deepest-replies"
role="log"
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
>
<div
className="Indent-root"
>
<div
className="Indent-level1"
>
<div
className="Comment-root"
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-1"
>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
>
Markus
</span>
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</div>
</div>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "body 1",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-with-deepest-replies-1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-full"
id="talk-comments-replyList-log--comment-with-deepest-replies-1"
role="log"
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
>
<div
className="Indent-root"
>
<div
className="Indent-level2"
>
<div
className="Comment-root"
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-2"
>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
>
Markus
</span>
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</div>
</div>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "body 2",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-with-deepest-replies-2"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-full"
id="talk-comments-replyList-log--comment-with-deepest-replies-2"
role="log"
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
>
<div
className="Indent-root"
>
<div
className="Indent-level3"
>
<div
className="Comment-root"
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-3"
>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
>
Markus
</span>
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</div>
</div>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "body 3",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-with-deepest-replies-3"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-full"
id="talk-comments-replyList-log--comment-with-deepest-replies-3"
role="log"
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
>
<div
className="Indent-root"
>
<div
className="Indent-level4"
>
<div
className="Comment-root"
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-4"
>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
>
Markus
</span>
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</div>
</div>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "body 4",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-with-deepest-replies-4"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-full"
id="talk-comments-replyList-log--comment-with-deepest-replies-4"
role="log"
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
>
<div
className="Indent-root"
>
<div
className="Indent-level5"
>
<div
className="Comment-root"
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-5"
>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
>
Markus
</span>
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</div>
</div>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "body 5",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
<a
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
href="http://localhost/assets/asset-with-replies?commentID=comment-with-deepest-replies-5"
id="comments-commentContainer-showConversation-comment-with-deepest-replies-5"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
target="_parent"
type="button"
>
Read More of this Conversation &gt;
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`shows conversation 1`] = `
<div
className="Flex-root App-root Flex-flex Flex-justifyCenter"
>
<div
className="PermalinkView-root"
>
<a
className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
href="http://localhost/"
id="talk-comments-permalinkView-showAllComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
target="_parent"
type="button"
>
Show All Comments
</a>
<div
className="Indent-root"
>
<div
className=""
>
<div
className="Comment-root"
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-5"
>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
>
Markus
</span>
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</div>
</div>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HTMLContent-root"
dangerouslySetInnerHTML={
Object {
"__html": "Joining Too",
}
}
/>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
src/core/client/stream/test/comments/showConversation.spec.tsx
+66
View File
@@ -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();
});
src/core/client/stream/test/fixtures.ts
+15
View File
@@ -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: [],