Implement reply

This commit is contained in:
Chi Vinh Le
2018-09-06 00:06:58 +02:00
parent ee30003390
commit 110becb075
26 changed files with 2076 additions and 84 deletions
@@ -181,6 +181,7 @@ exports[`loads more comments 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -233,6 +234,7 @@ exports[`loads more comments 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -285,6 +287,7 @@ exports[`loads more comments 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -487,6 +490,7 @@ exports[`renders comment stream 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -539,6 +543,7 @@ exports[`renders comment stream 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -56,6 +56,7 @@ exports[`renders permalink view 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -256,6 +257,7 @@ exports[`show all comments 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -213,6 +213,7 @@ exports[`show all comments 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -213,6 +213,7 @@ exports[`post a comment 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -265,6 +266,7 @@ exports[`post a comment 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -317,6 +319,7 @@ exports[`post a comment 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -557,6 +560,7 @@ exports[`post a comment 2`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -609,6 +613,7 @@ exports[`post a comment 2`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -661,6 +666,7 @@ exports[`post a comment 2`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -901,6 +907,7 @@ exports[`renders comment stream 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -953,6 +960,7 @@ exports[`renders comment stream 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
File diff suppressed because it is too large Load Diff
@@ -181,6 +181,7 @@ exports[`renders comment stream 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -233,6 +234,7 @@ exports[`renders comment stream 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -289,6 +291,7 @@ exports[`renders comment stream 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -341,6 +344,7 @@ exports[`renders comment stream 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -181,6 +181,7 @@ exports[`renders comment stream 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -233,6 +234,7 @@ exports[`renders comment stream 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -181,6 +181,7 @@ exports[`renders comment stream 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -237,6 +238,7 @@ exports[`renders comment stream 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -461,6 +463,7 @@ exports[`show all replies 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -517,6 +520,7 @@ exports[`show all replies 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -569,6 +573,7 @@ exports[`show all replies 1`] = `
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
id="comments-commentContainer-replyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
+3
View File
@@ -19,18 +19,21 @@ export const comments = [
author: users[0],
body: "Joining Too",
createdAt: "2018-07-06T18:24:00.000Z",
replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
},
{
id: "comment-1",
author: users[1],
body: "What's up?",
createdAt: "2018-07-06T18:20:00.000Z",
replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
},
{
id: "comment-2",
author: users[2],
body: "Hey!",
createdAt: "2018-07-06T18:14:00.000Z",
replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
},
];
@@ -0,0 +1,102 @@
import { ReactTestRenderer } from "react-test-renderer";
import timekeeper from "timekeeper";
import { timeout } from "talk-common/utils";
import { createSinonStub } from "talk-framework/testHelpers";
import create from "./create";
import { assets, users } from "./fixtures";
let testRenderer: ReactTestRenderer;
beforeEach(() => {
const resolvers = {
Query: {
asset: createSinonStub(
s => s.throws(),
s => s.withArgs(undefined, { id: assets[0].id }).returns(assets[0])
),
me: createSinonStub(
s => s.throws(),
s => s.withArgs(undefined, { clientAuthRevision: 0 }).returns(users[0])
),
},
Mutation: {
createComment: createSinonStub(
s => s.throws(),
s =>
s
.withArgs(undefined, {
input: {
assetID: assets[0].id,
parentID: assets[0].comments.edges[0].node.id,
body: "<strong>Hello world!</strong>",
clientMutationId: "0",
},
})
.returns({
commentEdge: {
cursor: "2018-07-06T18:24:00.000Z",
node: {
id: "comment-x",
author: users[0],
body: "<strong>Hello world! (from server)</strong>",
createdAt: "2018-07-06T18:24:00.000Z",
replies: {
edges: [],
pageInfo: { endCursor: null, hasNextPage: false },
},
},
},
clientMutationId: "0",
})
),
},
};
({ testRenderer } = create({
// Set this to true, to see graphql responses.
logNetwork: false,
resolvers,
initLocalState: localRecord => {
localRecord.setValue(assets[0].id, "assetID");
},
}));
});
it("renders comment stream", async () => {
// Wait for loading.
await timeout();
expect(testRenderer.toJSON()).toMatchSnapshot();
});
it("post a reply", async () => {
// Wait for loading.
await timeout();
// Open reply form.
testRenderer.root
.findByProps({ id: "comments-commentContainer-replyButton-comment-0" })
.props.onClick();
await timeout();
expect(testRenderer.toJSON()).toMatchSnapshot();
// Write reply .
testRenderer.root
.findByProps({ inputId: "comments-replyCommentForm-rte-comment-0" })
.props.onChange({ html: "<strong>Hello world!</strong>" });
timekeeper.freeze(new Date("2018-07-06T18:24:00.000Z"));
testRenderer.root
.findByProps({ id: "comments-replyCommentForm-form-comment-0" })
.props.onSubmit();
// Test optimistic response.
expect(testRenderer.toJSON()).toMatchSnapshot();
timekeeper.reset();
// Wait for loading.
await timeout();
// Test after server response.
expect(testRenderer.toJSON()).toMatchSnapshot();
});