Update tests

This commit is contained in:
Chi Vinh Le
2018-07-12 21:01:00 -03:00
parent ea115dd5ef
commit 542df81387
19 changed files with 119 additions and 122 deletions
@@ -1,28 +1,17 @@
import { shallow } from "enzyme";
import React from "react";
import { PropTypesOf } from "talk-framework/types";
import Comment from "./Comment";
it("renders username and body", () => {
const props = {
const props: PropTypesOf<typeof Comment> = {
author: {
username: "Marvin",
},
body: "Woof",
createdAt: new Date("December 17, 1995 03:24:00").toISOString(),
};
const wrapper = shallow(<Comment {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("renders with gutterBottom", () => {
const props = {
author: {
username: "Marvin",
},
body: "Woof",
createdAt: new Date("December 17, 1995 03:24:00").toISOString(),
gutterBottom: true,
createdAt: "1995-12-17T03:24:00.000Z",
};
const wrapper = shallow(<Comment {...props} />);
expect(wrapper).toMatchSnapshot();
@@ -0,0 +1,14 @@
import { shallow } from "enzyme";
import React from "react";
import { PropTypesOf } from "talk-framework/types";
import Timestamp from "./Timestamp";
it("renders correctly", () => {
const props: PropTypesOf<typeof Timestamp> = {
children: "1995-12-17T03:24:00.000Z",
};
const wrapper = shallow(<Timestamp {...props} />);
expect(wrapper).toMatchSnapshot();
});
@@ -1,12 +1,13 @@
import React from "react";
import TestRenderer from "react-test-renderer";
import { PropTypesOf } from "talk-framework/types";
import { UIContext, UIContextProps } from "talk-ui/components";
import TopBar from "./TopBar";
it("renders correctly on small screens", () => {
const props = {
const props: PropTypesOf<typeof TopBar> = {
children: <div>Hello World</div>,
};
@@ -25,7 +26,7 @@ it("renders correctly on small screens", () => {
});
it("renders correctly on big screens", () => {
const props = {
const props: PropTypesOf<typeof TopBar> = {
children: <div>Hello World</div>,
};
@@ -1,12 +1,13 @@
import React from "react";
import TestRenderer from "react-test-renderer";
import { PropTypesOf } from "talk-framework/types";
import { UIContext, UIContextProps } from "talk-ui/components";
import Username from "./Username";
it("renders correctly on small screens", () => {
const props = {
const props: PropTypesOf<typeof Username> = {
children: "Marvin",
};
@@ -25,7 +26,7 @@ it("renders correctly on small screens", () => {
});
it("renders correctly on big screens", () => {
const props = {
const props: PropTypesOf<typeof Username> = {
children: "Marvin",
};
@@ -9,25 +9,7 @@ exports[`renders username and body 1`] = `
Marvin
</Username>
<Timestamp>
1995-12-17T06:24:00.000Z
</Timestamp>
</TopBar>
<withPropsOnChange(Typography)>
Woof
</withPropsOnChange(Typography)>
</div>
`;
exports[`renders with gutterBottom 1`] = `
<div
role="article"
>
<TopBar>
<Username>
Marvin
</Username>
<Timestamp>
1995-12-17T06:24:00.000Z
1995-12-17T03:24:00.000Z
</Timestamp>
</TopBar>
<withPropsOnChange(Typography)>
@@ -0,0 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<withPropsOnChange(RelativeTime)
className="Timestamp-root"
date="1995-12-17T03:24:00.000Z"
/>
`;
@@ -1,11 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<MatchMedia
minWidth="xs"
/>
`;
exports[`renders correctly on big screens 1`] = `
<span
className="Typography-root Typography-heading2 Username-root"
@@ -3,10 +3,12 @@ import { noop } from "lodash";
import React from "react";
import sinon, { SinonSpy } from "sinon";
import ReplyList, { ReplyListProps } from "./ReplyList";
import { PropTypesOf } from "talk-framework/types";
import ReplyList from "./ReplyList";
it("renders correctly", () => {
const props: ReplyListProps = {
const props: PropTypesOf<typeof ReplyList> = {
commentID: "comment-id",
comments: [{ id: "comment-1" }, { id: "comment-2" }],
onShowAll: noop,
@@ -18,7 +20,7 @@ it("renders correctly", () => {
});
describe("when there is more", () => {
const props: ReplyListProps = {
const props: PropTypesOf<typeof ReplyList> = {
commentID: "comment-id",
comments: [{ id: "comment-1" }, { id: "comment-2" }],
onShowAll: sinon.spy(),
@@ -1,12 +1,14 @@
import { shallow } from "enzyme";
import { noop } from "lodash";
import React from "react";
import sinon from "sinon";
import sinon, { SinonSpy } from "sinon";
import Stream, { StreamProps } from "./Stream";
import { PropTypesOf } from "talk-framework/types";
import Stream from "./Stream";
it("renders correctly", () => {
const props: StreamProps = {
const props: PropTypesOf<typeof Stream> = {
assetID: "asset-id",
isClosed: false,
comments: [{ id: "comment-1" }, { id: "comment-2" }],
@@ -19,7 +21,7 @@ it("renders correctly", () => {
});
describe("when there is more", () => {
const props = {
const props: PropTypesOf<typeof Stream> = {
assetID: "asset-id",
isClosed: false,
comments: [{ id: "comment-1" }, { id: "comment-2" }],
@@ -35,7 +37,7 @@ describe("when there is more", () => {
it("calls onLoadMore", () => {
wrapper.find("#talk-comments-stream-loadMore").simulate("click");
expect(props.onLoadMore.calledOnce).toBe(true);
expect((props.onLoadMore as SinonSpy).calledOnce).toBe(true);
});
const wrapperDisabledButton = shallow(<Stream {...props} disableLoadMore />);
@@ -1,16 +1,18 @@
import { shallow } from "enzyme";
import React from "react";
import { PropTypesOf } from "talk-framework/types";
import { CommentContainer } from "./CommentContainer";
it("renders username and body", () => {
const props = {
const props: PropTypesOf<typeof CommentContainer> = {
data: {
author: {
username: "Marvin",
},
body: "Woof",
createdAt: new Date("December 17, 1995 03:24:00").toISOString(),
createdAt: "1995-12-17T03:24:00.000Z",
},
};
@@ -8,7 +8,7 @@ import ReplyList from "../components/ReplyList";
import { ReplyListContainer } from "./ReplyListContainer";
it("renders correctly", () => {
const props: any = {
const props: PropTypesOf<typeof ReplyListContainer> = {
comment: {
id: "comment-id",
replies: {
@@ -18,14 +18,14 @@ it("renders correctly", () => {
relay: {
hasMore: noop,
isLoading: noop,
},
} as any,
};
const wrapper = shallow(<ReplyListContainer {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("renders correctly when replies are null", () => {
const props: any = {
const props: PropTypesOf<typeof ReplyListContainer> = {
comment: {
id: "comment-id",
replies: null,
@@ -33,7 +33,7 @@ it("renders correctly when replies are null", () => {
relay: {
hasMore: noop,
isLoading: noop,
},
} as any,
};
const wrapper = shallow(<ReplyListContainer {...props} />);
expect(wrapper).toMatchSnapshot();
@@ -8,6 +8,6 @@ exports[`renders username and body 1`] = `
}
}
body="Woof"
createdAt="1995-12-17T06:24:00.000Z"
createdAt="1995-12-17T03:24:00.000Z"
/>
`;
@@ -60,10 +60,10 @@ exports[`loads more comments 1`] = `
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T21:24:00.000Z"
title="2018-07-06T18:24:00"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T21:24:00.000Z
2018-07-06T18:24:00.000Z
</time>
</div>
<p
@@ -89,10 +89,10 @@ exports[`loads more comments 1`] = `
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T21:20:00.000Z"
title="2018-07-06T18:20:00"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
>
2018-07-06T21:20:00.000Z
2018-07-06T18:20:00.000Z
</time>
</div>
<p
@@ -118,10 +118,10 @@ exports[`loads more comments 1`] = `
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T21:14:00.000Z"
title="2018-07-06T18:14:00"
dateTime="2018-07-06T18:14:00.000Z"
title="2018-07-06T18:14:00.000Z"
>
2018-07-06T21:14:00.000Z
2018-07-06T18:14:00.000Z
</time>
</div>
<p
@@ -196,10 +196,10 @@ exports[`renders comment stream 1`] = `
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T21:24:00.000Z"
title="2018-07-06T18:24:00"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T21:24:00.000Z
2018-07-06T18:24:00.000Z
</time>
</div>
<p
@@ -225,10 +225,10 @@ exports[`renders comment stream 1`] = `
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T21:20:00.000Z"
title="2018-07-06T18:20:00"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
>
2018-07-06T21:20:00.000Z
2018-07-06T18:20:00.000Z
</time>
</div>
<p
@@ -60,10 +60,10 @@ exports[`renders comment stream 1`] = `
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T21:24:00.000Z"
title="2018-07-06T18:24:00"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T21:24:00.000Z
2018-07-06T18:24:00.000Z
</time>
</div>
<p
@@ -89,10 +89,10 @@ exports[`renders comment stream 1`] = `
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T21:24:00.000Z"
title="2018-07-06T18:24:00"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T21:24:00.000Z
2018-07-06T18:24:00.000Z
</time>
</div>
<p
@@ -122,10 +122,10 @@ exports[`renders comment stream 1`] = `
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T21:24:00.000Z"
title="2018-07-06T18:24:00"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T21:24:00.000Z
2018-07-06T18:24:00.000Z
</time>
</div>
<p
@@ -147,10 +147,10 @@ exports[`renders comment stream 1`] = `
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T21:20:00.000Z"
title="2018-07-06T18:20:00"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
>
2018-07-06T21:20:00.000Z
2018-07-06T18:20:00.000Z
</time>
</div>
<p
@@ -60,10 +60,10 @@ exports[`renders comment stream 1`] = `
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T21:24:00.000Z"
title="2018-07-06T18:24:00"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T21:24:00.000Z
2018-07-06T18:24:00.000Z
</time>
</div>
<p
@@ -89,10 +89,10 @@ exports[`renders comment stream 1`] = `
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T21:20:00.000Z"
title="2018-07-06T18:20:00"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
>
2018-07-06T21:20:00.000Z
2018-07-06T18:20:00.000Z
</time>
</div>
<p
@@ -60,10 +60,10 @@ exports[`renders comment stream 1`] = `
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T21:24:00.000Z"
title="2018-07-06T18:24:00"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T21:24:00.000Z
2018-07-06T18:24:00.000Z
</time>
</div>
<p
@@ -93,10 +93,10 @@ exports[`renders comment stream 1`] = `
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T21:20:00.000Z"
title="2018-07-06T18:20:00"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
>
2018-07-06T21:20:00.000Z
2018-07-06T18:20:00.000Z
</time>
</div>
<p
@@ -185,10 +185,10 @@ exports[`show all replies 1`] = `
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T21:24:00.000Z"
title="2018-07-06T18:24:00"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T21:24:00.000Z
2018-07-06T18:24:00.000Z
</time>
</div>
<p
@@ -218,10 +218,10 @@ exports[`show all replies 1`] = `
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T21:20:00.000Z"
title="2018-07-06T18:20:00"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
>
2018-07-06T21:20:00.000Z
2018-07-06T18:20:00.000Z
</time>
</div>
<p
@@ -243,10 +243,10 @@ exports[`show all replies 1`] = `
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T21:14:00.000Z"
title="2018-07-06T18:14:00"
dateTime="2018-07-06T18:14:00.000Z"
title="2018-07-06T18:14:00.000Z"
>
2018-07-06T21:14:00.000Z
2018-07-06T18:14:00.000Z
</time>
</div>
<p
+4 -4
View File
@@ -18,19 +18,19 @@ export const comments = [
id: "comment-0",
author: users[0],
body: "Joining Too",
createdAt: "2018-07-06T18:24:00",
createdAt: "2018-07-06T18:24:00.000Z",
},
{
id: "comment-1",
author: users[1],
body: "What's up?",
createdAt: "2018-07-06T18:20:00",
createdAt: "2018-07-06T18:20:00.000Z",
},
{
id: "comment-2",
author: users[2],
body: "Hey!",
createdAt: "2018-07-06T18:14:00",
createdAt: "2018-07-06T18:14:00.000Z",
},
];
@@ -54,7 +54,7 @@ export const commentWithReplies = {
id: "comment-with-replies",
author: users[0],
body: "I like yoghurt",
createdAt: "2018-07-06T18:24:00",
createdAt: "2018-07-06T18:24:00.000Z",
replies: {
edges: [
{ node: comments[0], cursor: comments[0].createdAt },
@@ -1,12 +1,14 @@
import React from "react";
import { create } from "react-test-renderer";
import { PropTypesOf } from "talk-ui/types";
import UIContext from "../UIContext";
import RelativeTime from "./RelativeTime";
it("uses default formatter", () => {
const props = {
date: new Date("December 17, 2108 03:24:00").toISOString(),
date: "2018-12-17T03:24:00",
};
const tree = create(<RelativeTime {...props} />).toJSON();
@@ -17,8 +19,8 @@ it("uses formatter from context", () => {
const context: any = {
timeagoFormatter: () => "My Context Formatter",
};
const props = {
date: new Date("December 17, 2108 03:24:00").toISOString(),
const props: PropTypesOf<typeof RelativeTime> = {
date: "2018-12-17T03:24:00.000Z",
};
const tree = create(
<UIContext.Provider value={context}>
@@ -31,7 +33,7 @@ it("uses formatter from context", () => {
it("uses formatter from props", () => {
const props = {
date: new Date("December 17, 2108 03:24:00").toISOString(),
date: "2018-12-17T03:24:00.000Z",
formatter: () => "My Props Formatter",
};
const tree = create(<RelativeTime {...props} />).toJSON();
@@ -3,18 +3,18 @@
exports[`uses default formatter 1`] = `
<time
className="RelativeTime-root"
dateTime="2108-12-17T06:24:00.000Z"
title="2108-12-17T06:24:00.000Z"
dateTime="2018-12-17T06:24:00.000Z"
title="2018-12-17T03:24:00"
>
2108-12-17T06:24:00.000Z
2018-12-17T06:24:00.000Z
</time>
`;
exports[`uses formatter from context 1`] = `
<time
className="RelativeTime-root"
dateTime="2108-12-17T06:24:00.000Z"
title="2108-12-17T06:24:00.000Z"
dateTime="2018-12-17T03:24:00.000Z"
title="2018-12-17T03:24:00.000Z"
>
My Context Formatter
</time>
@@ -23,8 +23,8 @@ exports[`uses formatter from context 1`] = `
exports[`uses formatter from props 1`] = `
<time
className="RelativeTime-root"
dateTime="2108-12-17T06:24:00.000Z"
title="2108-12-17T06:24:00.000Z"
dateTime="2018-12-17T03:24:00.000Z"
title="2018-12-17T03:24:00.000Z"
>
My Context Formatter
</time>