From 77eb53808216597530b4c59f3057c9da127504bd Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 6 Aug 2018 20:13:50 +0200
Subject: [PATCH] Add more integration tests

---
 .../containers/PermalinkViewContainer.tsx     |  11 +-
 .../permalinkViewAssetNotFound.spec.tsx.snap  |  17 +++
 ...permalinkViewCommentNotFound.spec.tsx.snap | 109 ++++++++++++++++++
 .../test/permalinkViewAssetNotFound.spec.tsx  |  43 +++++++
 .../permalinkViewCommentNotFound.spec.tsx     |  78 +++++++++++++
 5 files changed, 254 insertions(+), 4 deletions(-)
 create mode 100644 src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
 create mode 100644 src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
 create mode 100644 src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
 create mode 100644 src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx

diff --git a/src/core/client/stream/containers/PermalinkViewContainer.tsx b/src/core/client/stream/containers/PermalinkViewContainer.tsx
index 769ecc7ff..65fede9d8 100644
--- a/src/core/client/stream/containers/PermalinkViewContainer.tsx
+++ b/src/core/client/stream/containers/PermalinkViewContainer.tsx
@@ -10,8 +10,8 @@ import {
 import PermalinkView from "../components/PermalinkView";
 
 interface PermalinkViewContainerProps {
-  comment: CommentData;
-  asset: AssetData;
+  comment: CommentData | null;
+  asset: AssetData | null;
   setCommentID: SetCommentIDMutation;
 }
 
@@ -26,7 +26,7 @@ class PermalinkViewContainer extends React.Component<
     return (
       <PermalinkView
         comment={comment}
-        assetURL={asset.url}
+        assetURL={(asset && asset.url) || null}
         onShowAllComments={this.showAllComments}
       />
     );
@@ -34,7 +34,10 @@ class PermalinkViewContainer extends React.Component<
 }
 
 const enhanced = withSetCommentIDMutation(
-  withFragmentContainer<{ comment: CommentData; asset: AssetData }>({
+  withFragmentContainer<{
+    comment: CommentData | null;
+    asset: AssetData | null;
+  }>({
     comment: graphql`
       fragment PermalinkViewContainer_comment on Comment {
         ...CommentContainer
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
new file mode 100644
index 000000000..270fae18d
--- /dev/null
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders permalink view with unknown asset 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
+>
+  <div
+    className="PermalinkView-root"
+  >
+    <p
+      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+    >
+      Comment not found
+    </p>
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
new file mode 100644
index 000000000..6e094cf1e
--- /dev/null
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders permalink view with unknown comment 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
+>
+  <div
+    className="PermalinkView-root"
+  >
+    <button
+      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+      id="talk-comments-permalinkView-showAllComments"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+    >
+      Show all Comments
+    </button>
+    <p
+      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+    >
+      Comment not found
+    </p>
+  </div>
+</div>
+`;
+
+exports[`show all comments 1`] = `
+<div
+  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
+>
+  <div
+    className="Stream-root"
+  >
+    <form
+      autoComplete="off"
+      onSubmit={[Function]}
+    >
+      <div>
+        <textarea
+          className="PostCommentForm-textarea"
+          name="body"
+          onChange={[Function]}
+          value=""
+        />
+      </div>
+      <div
+        className="PostCommentForm-postButtonContainer"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+          disabled={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+        >
+          Post
+        </button>
+      </div>
+    </form>
+    <div
+      aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
+      >
+        <div
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
+          <div
+            className="Comment-footer"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx b/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
new file mode 100644
index 000000000..17be1416e
--- /dev/null
+++ b/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+
+import { timeout } from "talk-common/utils";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import AppContainer from "talk-stream/containers/AppContainer";
+
+import createEnvironment from "./createEnvironment";
+
+const resolvers = {
+  Query: {
+    comment: () => null,
+    asset: () => null,
+  },
+};
+
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue("unknown-asset-id", "assetID");
+    localRecord.setValue("unknown-comment-id", "commentID");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeMessages: [],
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppContainer />
+  </TalkContextProvider>
+);
+
+it("renders permalink view with unknown asset", async () => {
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx b/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
new file mode 100644
index 000000000..3f905ce4b
--- /dev/null
+++ b/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+import sinon from "sinon";
+
+import { timeout } from "talk-common/utils";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import AppContainer from "talk-stream/containers/AppContainer";
+
+import createEnvironment from "./createEnvironment";
+import { assets, comments } from "./fixtures";
+
+const commentStub = {
+  ...comments[0],
+};
+
+const assetStub = {
+  ...assets[0],
+  comments: {
+    pageInfo: {
+      hasNextPage: false,
+    },
+    edges: [
+      {
+        node: commentStub,
+        cursor: commentStub.createdAt,
+      },
+    ],
+  },
+};
+
+const resolvers = {
+  Query: {
+    comment: () => null,
+    asset: sinon
+      .stub()
+      .throws()
+      .withArgs(undefined, { id: assetStub.id })
+      .returns(assetStub),
+  },
+};
+
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue(assetStub.id, "assetID");
+    localRecord.setValue("unknown-comment-id", "commentID");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeMessages: [],
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppContainer />
+  </TalkContextProvider>
+);
+
+it("renders permalink view with unknown comment", async () => {
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("show all comments", async () => {
+  testRenderer.root
+    .findByProps({
+      id: "talk-comments-permalinkView-showAllComments",
+    })
+    .props.onClick();
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});