Add unit tests

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<T>(
   propsCallback: (context: TalkContext) => T
 ): InferableComponentEnhancer<T> {
   return hoistStatics<T>(
-    <U extends T>(WrappedComponent: React.ComponentType<U>) => (props: any) => (
-      <TalkContextConsumer>
-        {context => <WrappedComponent {...props} {...propsCallback(context)} />}
-      </TalkContextConsumer>
-    )
+    <U extends T>(WrappedComponent: React.ComponentType<U>) => {
+      const Component: React.StatelessComponent<any> = props => (
+        <TalkContextConsumer>
+          {context => (
+            <WrappedComponent {...props} {...propsCallback(context)} />
+          )}
+        </TalkContextConsumer>
+      );
+      Component.displayName = wrapDisplayName(WrappedComponent, "withContext");
+      return Component;
+    }
   );
 }
 

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<T extends string, I, R>(
     withContext(({ relayEnvironment }) => ({ relayEnvironment })),
     hoistStatics((WrappedComponent: React.ComponentType<any>) => {
       class CreateMutationContainer extends React.Component<any> {
+        public static displayName = wrapDisplayName(
+          WrappedComponent,
+          "createMutationContainer"
+        );
+
         private commit = (input: I) => {
           return commit(this.props.relayEnvironment, input);
         };

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(<Stream {...props} />);
+  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(<Stream {...props} />);
+  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(<Stream {...props} />);
+  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);
+  });
+});

src/core/client/stream/components/Stream.tsx

@@ -27,7 +27,13 @@ const Stream: StatelessComponent<StreamProps> = props => {
         <CommentContainer key={comment.id} data={comment} gutterBottom />
       ))}
       {props.hasMore && (
-        <Button onClick={props.onLoadMore} secondary invert fullWidth>
+        <Button
+          className={"talk-stream--loadmore"}
+          onClick={props.onLoadMore}
+          secondary
+          invert
+          fullWidth
+        >
           Load More
         </Button>
       )}

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`] = `
+<div>
+  <Logo
+    gutterBottom={true}
+  />
+  <withContext(createMutationContainer(PostCommentFormContainer))
+    assetID="asset-id"
+  />
+  <Relay(CommentContainer)
+    data={
+      Object {
+        "id": "comment-1",
+      }
+    }
+    gutterBottom={true}
+    key="comment-1"
+  />
+  <Relay(CommentContainer)
+    data={
+      Object {
+        "id": "comment-2",
+      }
+    }
+    gutterBottom={true}
+    key="comment-2"
+  />
+</div>
+`;
+
+exports[`renders when comments is null 1`] = `
+<div>
+  Comments unavailable
+</div>
+`;
+
+exports[`when there is more renders a load more button 1`] = `
+<div>
+  <Logo
+    gutterBottom={true}
+  />
+  <withContext(createMutationContainer(PostCommentFormContainer))
+    assetID="asset-id"
+  />
+  <Relay(CommentContainer)
+    data={
+      Object {
+        "id": "comment-1",
+      }
+    }
+    gutterBottom={true}
+    key="comment-1"
+  />
+  <Relay(CommentContainer)
+    data={
+      Object {
+        "id": "comment-2",
+      }
+    }
+    gutterBottom={true}
+    key="comment-2"
+  />
+  <withPropsOnChange(Button)
+    className="talk-stream--loadmore"
+    fullWidth={true}
+    invert={true}
+    onClick={[Function]}
+    secondary={true}
+  >
+    Load More
+  </withPropsOnChange(Button)>
+</div>
+`;

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(<CommentContainer {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

src/core/client/stream/containers/CommentContainer.tsx

@@ -9,7 +9,7 @@ import Comment, { CommentProps } from "../components/Comment";
 
 type InnerProps = { data: Data } & Omit<CommentProps, keyof Data>;
 
-const CommentContainer: StatelessComponent<InnerProps> = props => {
+export const CommentContainer: StatelessComponent<InnerProps> = props => {
   const { data, ...rest } = props;
   return <Comment {...rest} {...props.data} />;
 };

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(<StreamContainer {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

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<InnerProps> {
+export class StreamContainer extends React.Component<InnerProps> {
   public render() {
     const comments = this.props.asset.comments
       ? this.props.asset.comments.edges.map(edge => edge.node)

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`] = `
+<Comment
+  author={
+    Object {
+      "username": "Marvin",
+    }
+  }
+  body="Woof"
+/>
+`;

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`] = `
+<Stream
+  comments={
+    Array [
+      Object {
+        "id": "comment-1",
+      },
+      Object {
+        "id": "comment-2",
+      },
+    ]
+  }
+  id="asset-id"
+  isClosed={false}
+  onLoadMore={[Function]}
+/>
+`;

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();
+});

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<AppQueryResponse>) => {
+export const render = ({ error, props }: ReadyState<AppQueryResponse>) => {
   if (error) {
     return <div>{error.message}</div>;
   }

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`] = `
+<Relay(AppContainer)
+  data={Object {}}
+/>
+`;
+
+exports[`renders error 1`] = `
+<div>
+  error
+</div>
+`;
+
+exports[`renders loading 1`] = `
+<div>
+  Loading
+</div>
+`;