Fix tests

This commit is contained in:
Chi Vinh Le
2018-09-06 00:06:58 +02:00
parent 31bc5fa913
commit c96112fc8c
39 changed files with 1095 additions and 262 deletions
@@ -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}
/>