mirror of
https://github.com/wassname/talk.git
synced 2026-09-13 13:10:43 +08:00
Fix tests
This commit is contained in:
@@ -11,7 +11,10 @@ const CommentContainerN = removeFragmentRefs(CommentContainer);
|
||||
|
||||
it("renders username and body", () => {
|
||||
const props: PropTypesOf<typeof CommentContainerN> = {
|
||||
data: {
|
||||
asset: {
|
||||
id: "asset-id",
|
||||
},
|
||||
comment: {
|
||||
id: "comment-id",
|
||||
author: {
|
||||
username: "Marvin",
|
||||
@@ -27,7 +30,10 @@ it("renders username and body", () => {
|
||||
|
||||
it("renders body only", () => {
|
||||
const props: PropTypesOf<typeof CommentContainerN> = {
|
||||
data: {
|
||||
asset: {
|
||||
id: "asset-id",
|
||||
},
|
||||
comment: {
|
||||
id: "comment-id",
|
||||
author: {
|
||||
username: null,
|
||||
|
||||
@@ -25,9 +25,15 @@ export class CommentContainer extends Component<InnerProps, State> {
|
||||
showReplyDialog: false,
|
||||
};
|
||||
|
||||
private toggleReplyDialog = () => {
|
||||
private openReplyDialog = () => {
|
||||
this.setState(state => ({
|
||||
showReplyDialog: !state.showReplyDialog,
|
||||
showReplyDialog: true,
|
||||
}));
|
||||
};
|
||||
|
||||
private closeReplyDialog = () => {
|
||||
this.setState(state => ({
|
||||
showReplyDialog: false,
|
||||
}));
|
||||
};
|
||||
|
||||
@@ -42,7 +48,7 @@ export class CommentContainer extends Component<InnerProps, State> {
|
||||
footer={
|
||||
<>
|
||||
<ReplyButton
|
||||
onClick={this.toggleReplyDialog}
|
||||
onClick={this.openReplyDialog}
|
||||
active={showReplyDialog}
|
||||
/>
|
||||
<PermalinkButtonContainer commentID={comment.id} />
|
||||
@@ -53,7 +59,7 @@ export class CommentContainer extends Component<InnerProps, State> {
|
||||
<ReplyCommentFormContainer
|
||||
comment={comment}
|
||||
asset={asset}
|
||||
onCancel={this.toggleReplyDialog}
|
||||
onClose={this.closeReplyDialog}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { Component, EventHandler, MouseEvent } from "react";
|
||||
import React, { Component } from "react";
|
||||
import { graphql } from "react-relay";
|
||||
|
||||
import { withContext } from "talk-framework/lib/bootstrap";
|
||||
@@ -19,7 +19,7 @@ interface InnerProps {
|
||||
pymSessionStorage: PymStorage;
|
||||
comment: CommentData;
|
||||
asset: AssetData;
|
||||
onCancel?: EventHandler<MouseEvent<any>>;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
@@ -27,10 +27,9 @@ interface State {
|
||||
initialized: boolean;
|
||||
}
|
||||
|
||||
const contextKey = "postCommentFormBody";
|
||||
|
||||
export class ReplyCommentFormContainer extends Component<InnerProps, State> {
|
||||
public state: State = { initialized: false };
|
||||
private contextKey = `replyCommentFormBody-${this.props.comment.id}`;
|
||||
|
||||
constructor(props: InnerProps) {
|
||||
super(props);
|
||||
@@ -38,7 +37,7 @@ export class ReplyCommentFormContainer extends Component<InnerProps, State> {
|
||||
}
|
||||
|
||||
private async init() {
|
||||
const body = await this.props.pymSessionStorage.getItem(contextKey);
|
||||
const body = await this.props.pymSessionStorage.getItem(this.contextKey);
|
||||
if (body) {
|
||||
this.setState({
|
||||
initialValues: {
|
||||
@@ -51,6 +50,13 @@ export class ReplyCommentFormContainer extends Component<InnerProps, State> {
|
||||
});
|
||||
}
|
||||
|
||||
private handleOnCancel = () => {
|
||||
this.props.pymSessionStorage.removeItem(this.contextKey);
|
||||
if (this.props.onClose) {
|
||||
this.props.onClose();
|
||||
}
|
||||
};
|
||||
|
||||
private handleOnSubmit: ReplyCommentFormProps["onSubmit"] = async (
|
||||
input,
|
||||
form
|
||||
@@ -58,9 +64,13 @@ export class ReplyCommentFormContainer extends Component<InnerProps, State> {
|
||||
try {
|
||||
await this.props.createComment({
|
||||
assetID: this.props.asset.id,
|
||||
parentID: this.props.comment.id,
|
||||
...input,
|
||||
});
|
||||
form.reset({});
|
||||
this.props.pymSessionStorage.removeItem(this.contextKey);
|
||||
if (this.props.onClose) {
|
||||
this.props.onClose();
|
||||
}
|
||||
} catch (error) {
|
||||
if (error instanceof BadUserInputError) {
|
||||
return error.invalidArgsLocalized;
|
||||
@@ -73,9 +83,9 @@ export class ReplyCommentFormContainer extends Component<InnerProps, State> {
|
||||
|
||||
private handleOnChange: ReplyCommentFormProps["onChange"] = state => {
|
||||
if (state.values.body) {
|
||||
this.props.pymSessionStorage.setItem(contextKey, state.values.body);
|
||||
this.props.pymSessionStorage.setItem(this.contextKey, state.values.body);
|
||||
} else {
|
||||
this.props.pymSessionStorage.removeItem(contextKey);
|
||||
this.props.pymSessionStorage.removeItem(this.contextKey);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -88,6 +98,7 @@ export class ReplyCommentFormContainer extends Component<InnerProps, State> {
|
||||
onSubmit={this.handleOnSubmit}
|
||||
onChange={this.handleOnChange}
|
||||
initialValues={this.state.initialValues}
|
||||
onCancel={this.handleOnCancel}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -13,6 +13,9 @@ const ReplyListContainerN = removeFragmentRefs(ReplyListContainer);
|
||||
|
||||
it("renders correctly", () => {
|
||||
const props: PropTypesOf<typeof ReplyListContainerN> = {
|
||||
asset: {
|
||||
id: "asset-id",
|
||||
},
|
||||
comment: {
|
||||
id: "comment-id",
|
||||
replies: {
|
||||
@@ -30,6 +33,9 @@ it("renders correctly", () => {
|
||||
|
||||
it("renders correctly when replies are null", () => {
|
||||
const props: PropTypesOf<typeof ReplyListContainerN> = {
|
||||
asset: {
|
||||
id: "asset-id",
|
||||
},
|
||||
comment: {
|
||||
id: "comment-id",
|
||||
replies: null,
|
||||
@@ -46,6 +52,9 @@ it("renders correctly when replies are null", () => {
|
||||
describe("when has more replies", () => {
|
||||
let finishLoading: ((error?: Error) => void) | null = null;
|
||||
const props: PropTypesOf<typeof ReplyListContainerN> = {
|
||||
asset: {
|
||||
id: "asset-id",
|
||||
},
|
||||
comment: {
|
||||
id: "comment-id",
|
||||
replies: {
|
||||
|
||||
@@ -1,27 +1,53 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders body only 1`] = `
|
||||
<Comment
|
||||
author={
|
||||
Object {
|
||||
"username": null,
|
||||
<React.Fragment>
|
||||
<Comment
|
||||
author={
|
||||
Object {
|
||||
"username": null,
|
||||
}
|
||||
}
|
||||
}
|
||||
body="Woof"
|
||||
createdAt="1995-12-17T03:24:00.000Z"
|
||||
id="comment-id"
|
||||
/>
|
||||
body="Woof"
|
||||
createdAt="1995-12-17T03:24:00.000Z"
|
||||
footer={
|
||||
<React.Fragment>
|
||||
<ReplyButton
|
||||
active={false}
|
||||
onClick={[Function]}
|
||||
/>
|
||||
<withContext(withLocalStateContainer(PermalinkContainer))
|
||||
commentID="comment-id"
|
||||
/>
|
||||
</React.Fragment>
|
||||
}
|
||||
id="comment-id"
|
||||
/>
|
||||
</React.Fragment>
|
||||
`;
|
||||
|
||||
exports[`renders username and body 1`] = `
|
||||
<Comment
|
||||
author={
|
||||
Object {
|
||||
"username": "Marvin",
|
||||
<React.Fragment>
|
||||
<Comment
|
||||
author={
|
||||
Object {
|
||||
"username": "Marvin",
|
||||
}
|
||||
}
|
||||
}
|
||||
body="Woof"
|
||||
createdAt="1995-12-17T03:24:00.000Z"
|
||||
id="comment-id"
|
||||
/>
|
||||
body="Woof"
|
||||
createdAt="1995-12-17T03:24:00.000Z"
|
||||
footer={
|
||||
<React.Fragment>
|
||||
<ReplyButton
|
||||
active={false}
|
||||
onClick={[Function]}
|
||||
/>
|
||||
<withContext(withLocalStateContainer(PermalinkContainer))
|
||||
commentID="comment-id"
|
||||
/>
|
||||
</React.Fragment>
|
||||
}
|
||||
id="comment-id"
|
||||
/>
|
||||
</React.Fragment>
|
||||
`;
|
||||
|
||||
@@ -2,7 +2,30 @@
|
||||
|
||||
exports[`renders correctly 1`] = `
|
||||
<ReplyList
|
||||
commentID="comment-id"
|
||||
asset={
|
||||
Object {
|
||||
"id": "asset-id",
|
||||
}
|
||||
}
|
||||
comment={
|
||||
Object {
|
||||
"id": "comment-id",
|
||||
"replies": Object {
|
||||
"edges": Array [
|
||||
Object {
|
||||
"node": Object {
|
||||
"id": "comment-1",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"node": Object {
|
||||
"id": "comment-2",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
comments={
|
||||
Array [
|
||||
Object {
|
||||
@@ -22,7 +45,30 @@ exports[`renders correctly when replies are null 1`] = `""`;
|
||||
|
||||
exports[`when has more replies renders hasMore 1`] = `
|
||||
<ReplyList
|
||||
commentID="comment-id"
|
||||
asset={
|
||||
Object {
|
||||
"id": "asset-id",
|
||||
}
|
||||
}
|
||||
comment={
|
||||
Object {
|
||||
"id": "comment-id",
|
||||
"replies": Object {
|
||||
"edges": Array [
|
||||
Object {
|
||||
"node": Object {
|
||||
"id": "comment-1",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"node": Object {
|
||||
"id": "comment-2",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
comments={
|
||||
Array [
|
||||
Object {
|
||||
@@ -41,7 +87,30 @@ exports[`when has more replies renders hasMore 1`] = `
|
||||
|
||||
exports[`when has more replies when showing all disables show all button 1`] = `
|
||||
<ReplyList
|
||||
commentID="comment-id"
|
||||
asset={
|
||||
Object {
|
||||
"id": "asset-id",
|
||||
}
|
||||
}
|
||||
comment={
|
||||
Object {
|
||||
"id": "comment-id",
|
||||
"replies": Object {
|
||||
"edges": Array [
|
||||
Object {
|
||||
"node": Object {
|
||||
"id": "comment-1",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"node": Object {
|
||||
"id": "comment-2",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
comments={
|
||||
Array [
|
||||
Object {
|
||||
@@ -60,7 +129,30 @@ exports[`when has more replies when showing all disables show all button 1`] = `
|
||||
|
||||
exports[`when has more replies when showing all enable show all button after loading is done 1`] = `
|
||||
<ReplyList
|
||||
commentID="comment-id"
|
||||
asset={
|
||||
Object {
|
||||
"id": "asset-id",
|
||||
}
|
||||
}
|
||||
comment={
|
||||
Object {
|
||||
"id": "comment-id",
|
||||
"replies": Object {
|
||||
"edges": Array [
|
||||
Object {
|
||||
"node": Object {
|
||||
"id": "comment-1",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"node": Object {
|
||||
"id": "comment-2",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
comments={
|
||||
Array [
|
||||
Object {
|
||||
|
||||
@@ -2,7 +2,26 @@
|
||||
|
||||
exports[`renders correctly 1`] = `
|
||||
<Stream
|
||||
assetID="asset-id"
|
||||
asset={
|
||||
Object {
|
||||
"comments": Object {
|
||||
"edges": Array [
|
||||
Object {
|
||||
"node": Object {
|
||||
"id": "comment-1",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"node": Object {
|
||||
"id": "comment-2",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
"id": "asset-id",
|
||||
"isClosed": false,
|
||||
}
|
||||
}
|
||||
comments={
|
||||
Array [
|
||||
Object {
|
||||
@@ -14,7 +33,6 @@ exports[`renders correctly 1`] = `
|
||||
]
|
||||
}
|
||||
disableLoadMore={false}
|
||||
isClosed={false}
|
||||
onLoadMore={[Function]}
|
||||
user={null}
|
||||
/>
|
||||
@@ -22,7 +40,26 @@ exports[`renders correctly 1`] = `
|
||||
|
||||
exports[`when has more comments renders hasMore 1`] = `
|
||||
<Stream
|
||||
assetID="asset-id"
|
||||
asset={
|
||||
Object {
|
||||
"comments": Object {
|
||||
"edges": Array [
|
||||
Object {
|
||||
"node": Object {
|
||||
"id": "comment-1",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"node": Object {
|
||||
"id": "comment-2",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
"id": "asset-id",
|
||||
"isClosed": false,
|
||||
}
|
||||
}
|
||||
comments={
|
||||
Array [
|
||||
Object {
|
||||
@@ -35,7 +72,6 @@ exports[`when has more comments renders hasMore 1`] = `
|
||||
}
|
||||
disableLoadMore={false}
|
||||
hasMore={true}
|
||||
isClosed={false}
|
||||
onLoadMore={[Function]}
|
||||
user={null}
|
||||
/>
|
||||
@@ -43,7 +79,26 @@ exports[`when has more comments renders hasMore 1`] = `
|
||||
|
||||
exports[`when has more comments when loading more disables load more button 1`] = `
|
||||
<Stream
|
||||
assetID="asset-id"
|
||||
asset={
|
||||
Object {
|
||||
"comments": Object {
|
||||
"edges": Array [
|
||||
Object {
|
||||
"node": Object {
|
||||
"id": "comment-1",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"node": Object {
|
||||
"id": "comment-2",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
"id": "asset-id",
|
||||
"isClosed": false,
|
||||
}
|
||||
}
|
||||
comments={
|
||||
Array [
|
||||
Object {
|
||||
@@ -56,7 +111,6 @@ exports[`when has more comments when loading more disables load more button 1`]
|
||||
}
|
||||
disableLoadMore={true}
|
||||
hasMore={true}
|
||||
isClosed={false}
|
||||
onLoadMore={[Function]}
|
||||
user={null}
|
||||
/>
|
||||
@@ -64,7 +118,26 @@ exports[`when has more comments when loading more disables load more button 1`]
|
||||
|
||||
exports[`when has more comments when loading more enable load more button after loading is done 1`] = `
|
||||
<Stream
|
||||
assetID="asset-id"
|
||||
asset={
|
||||
Object {
|
||||
"comments": Object {
|
||||
"edges": Array [
|
||||
Object {
|
||||
"node": Object {
|
||||
"id": "comment-1",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"node": Object {
|
||||
"id": "comment-2",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
"id": "asset-id",
|
||||
"isClosed": false,
|
||||
}
|
||||
}
|
||||
comments={
|
||||
Array [
|
||||
Object {
|
||||
@@ -77,7 +150,6 @@ exports[`when has more comments when loading more enable load more button after
|
||||
}
|
||||
disableLoadMore={false}
|
||||
hasMore={true}
|
||||
isClosed={false}
|
||||
onLoadMore={[Function]}
|
||||
user={null}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user