Add unit tests

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>
+`;