diff --git a/src/core/client/framework/lib/bootstrap/withContext.tsx b/src/core/client/framework/lib/bootstrap/withContext.tsx index 82ae2695f..677da236a 100644 --- a/src/core/client/framework/lib/bootstrap/withContext.tsx +++ b/src/core/client/framework/lib/bootstrap/withContext.tsx @@ -1,5 +1,9 @@ import * as React from "react"; -import { hoistStatics, InferableComponentEnhancer } from "recompose"; +import { + hoistStatics, + InferableComponentEnhancer, + wrapDisplayName, +} from "recompose"; import { TalkContext, TalkContextConsumer } from "./TalkContext"; @@ -12,11 +16,17 @@ function withContext( propsCallback: (context: TalkContext) => T ): InferableComponentEnhancer { return hoistStatics( - (WrappedComponent: React.ComponentType) => (props: any) => ( - - {context => } - - ) + (WrappedComponent: React.ComponentType) => { + const Component: React.StatelessComponent = props => ( + + {context => ( + + )} + + ); + Component.displayName = wrapDisplayName(WrappedComponent, "withContext"); + return Component; + } ); } diff --git a/src/core/client/framework/lib/relay/createMutationContainer.tsx b/src/core/client/framework/lib/relay/createMutationContainer.tsx index 3e3d8bf60..d0a91e92d 100644 --- a/src/core/client/framework/lib/relay/createMutationContainer.tsx +++ b/src/core/client/framework/lib/relay/createMutationContainer.tsx @@ -1,5 +1,10 @@ import * as React from "react"; -import { compose, hoistStatics, InferableComponentEnhancer } from "recompose"; +import { + compose, + hoistStatics, + InferableComponentEnhancer, + wrapDisplayName, +} from "recompose"; import { Environment } from "relay-runtime"; import { withContext } from "../bootstrap"; @@ -19,6 +24,11 @@ function createMutationContainer( withContext(({ relayEnvironment }) => ({ relayEnvironment })), hoistStatics((WrappedComponent: React.ComponentType) => { class CreateMutationContainer extends React.Component { + public static displayName = wrapDisplayName( + WrappedComponent, + "createMutationContainer" + ); + private commit = (input: I) => { return commit(this.props.relayEnvironment, input); }; diff --git a/src/core/client/stream/components/Stream.spec.tsx b/src/core/client/stream/components/Stream.spec.tsx new file mode 100644 index 000000000..0cfa2044b --- /dev/null +++ b/src/core/client/stream/components/Stream.spec.tsx @@ -0,0 +1,50 @@ +import { shallow } from "enzyme"; +import { noop } from "lodash"; +import React from "react"; +import sinon from "sinon"; + +import Stream from "./Stream"; + +it("renders correctly", () => { + const props = { + id: "asset-id", + isClosed: false, + comments: [{ id: "comment-1" }, { id: "comment-2" }], + onLoadMore: noop, + hasMore: false, + }; + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); +}); + +it("renders when comments is null", () => { + const props = { + id: "asset-id", + isClosed: false, + comments: null, + onLoadMore: noop, + hasMore: false, + }; + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); +}); + +describe("when there is more", () => { + const props = { + id: "asset-id", + isClosed: false, + comments: [{ id: "comment-1" }, { id: "comment-2" }], + onLoadMore: sinon.spy(), + hasMore: true, + }; + + const wrapper = shallow(); + it("renders a load more button", () => { + expect(wrapper).toMatchSnapshot(); + }); + + it("calls onLoadMore", () => { + wrapper.find(".talk-stream--loadmore").simulate("click"); + expect(props.onLoadMore.calledOnce).toBe(true); + }); +}); diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx index 454b1f38f..fc547b822 100644 --- a/src/core/client/stream/components/Stream.tsx +++ b/src/core/client/stream/components/Stream.tsx @@ -27,7 +27,13 @@ const Stream: StatelessComponent = props => { ))} {props.hasMore && ( - )} diff --git a/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap new file mode 100644 index 000000000..1cd7703f7 --- /dev/null +++ b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap @@ -0,0 +1,74 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` +
+ + + + +
+`; + +exports[`renders when comments is null 1`] = ` +
+ Comments unavailable +
+`; + +exports[`when there is more renders a load more button 1`] = ` +
+ + + + + + Load More + +
+`; diff --git a/src/core/client/stream/containers/CommentContainer.spec.tsx b/src/core/client/stream/containers/CommentContainer.spec.tsx new file mode 100644 index 000000000..94ffb7392 --- /dev/null +++ b/src/core/client/stream/containers/CommentContainer.spec.tsx @@ -0,0 +1,18 @@ +import { shallow } from "enzyme"; +import React from "react"; + +import { CommentContainer } from "./CommentContainer"; + +it("renders username and body", () => { + const props = { + data: { + author: { + username: "Marvin", + }, + body: "Woof", + }, + }; + + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx index e80793e49..4735d44ca 100644 --- a/src/core/client/stream/containers/CommentContainer.tsx +++ b/src/core/client/stream/containers/CommentContainer.tsx @@ -9,7 +9,7 @@ import Comment, { CommentProps } from "../components/Comment"; type InnerProps = { data: Data } & Omit; -const CommentContainer: StatelessComponent = props => { +export const CommentContainer: StatelessComponent = props => { const { data, ...rest } = props; return ; }; diff --git a/src/core/client/stream/containers/StreamContainer.spec.tsx b/src/core/client/stream/containers/StreamContainer.spec.tsx new file mode 100644 index 000000000..9e3bfebce --- /dev/null +++ b/src/core/client/stream/containers/StreamContainer.spec.tsx @@ -0,0 +1,23 @@ +import { shallow } from "enzyme"; +import { noop } from "lodash"; +import React from "react"; + +import { StreamContainer } from "./StreamContainer"; + +it("renders username and body", () => { + const props: any = { + asset: { + id: "asset-id", + isClosed: false, + comments: { + edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }], + }, + }, + relay: { + hasMore: noop, + isLoading: noop, + }, + }; + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/core/client/stream/containers/StreamContainer.tsx b/src/core/client/stream/containers/StreamContainer.tsx index 0a169ad3a..c948c5d84 100644 --- a/src/core/client/stream/containers/StreamContainer.tsx +++ b/src/core/client/stream/containers/StreamContainer.tsx @@ -11,12 +11,12 @@ import { import Stream from "../components/Stream"; -interface InnerProps { +export interface InnerProps { asset: Data; relay: RelayPaginationProp; } -class StreamContainer extends React.Component { +export class StreamContainer extends React.Component { public render() { const comments = this.props.asset.comments ? this.props.asset.comments.edges.map(edge => edge.node) diff --git a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap new file mode 100644 index 000000000..6ce053179 --- /dev/null +++ b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders username and body 1`] = ` + +`; diff --git a/src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap new file mode 100644 index 000000000..5f9e72622 --- /dev/null +++ b/src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders username and body 1`] = ` + +`; diff --git a/src/core/client/stream/queries/AppQuery.spec.tsx b/src/core/client/stream/queries/AppQuery.spec.tsx new file mode 100644 index 000000000..a301a76b7 --- /dev/null +++ b/src/core/client/stream/queries/AppQuery.spec.tsx @@ -0,0 +1,31 @@ +import { shallow } from "enzyme"; +import React from "react"; + +import { render } from "./AppQuery"; + +it("renders app", () => { + const data = { + props: {} as any, + error: null, + }; + const wrapper = shallow(React.createElement(() => render(data))); + expect(wrapper).toMatchSnapshot(); +}); + +it("renders loading", () => { + const data = { + props: null, + error: null, + }; + const wrapper = shallow(React.createElement(() => render(data))); + expect(wrapper).toMatchSnapshot(); +}); + +it("renders error", () => { + const data = { + props: null, + error: new Error("error"), + }; + const wrapper = shallow(React.createElement(() => render(data))); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx index 96d260568..424a11dd6 100644 --- a/src/core/client/stream/queries/AppQuery.tsx +++ b/src/core/client/stream/queries/AppQuery.tsx @@ -15,7 +15,7 @@ import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal. import AppContainer from "../containers/AppContainer"; -const render = ({ error, props }: ReadyState) => { +export const render = ({ error, props }: ReadyState) => { if (error) { return
{error.message}
; } diff --git a/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap b/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap new file mode 100644 index 000000000..dbd2ad45a --- /dev/null +++ b/src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders app 1`] = ` + +`; + +exports[`renders error 1`] = ` +
+ error +
+`; + +exports[`renders loading 1`] = ` +
+ Loading +
+`;