From 8dae12b5ab8d02c282d463dc5555d2ddfafd5599 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Fri, 5 Oct 2018 09:54:47 -0300
Subject: [PATCH] Using fragment and updated fixtures

---
 .../client/stream/containers/AppContainer.tsx | 35 +++++++++++-----
 src/core/client/stream/queries/AppQuery.tsx   |  8 +---
 .../__snapshots__/editComment.spec.tsx.snap   | 14 +++----
 .../__snapshots__/loadMore.spec.tsx.snap      |  2 +-
 .../__snapshots__/permalinkView.spec.tsx.snap |  2 +-
 .../permalinkViewAssetNotFound.spec.tsx.snap  | 42 +------------------
 ...permalinkViewCommentNotFound.spec.tsx.snap |  2 +-
 .../__snapshots__/postComment.spec.tsx.snap   |  6 +--
 .../postLocalReply.spec.tsx.snap              |  8 ++--
 .../__snapshots__/postReply.spec.tsx.snap     |  8 ++--
 .../__snapshots__/renderReplies.spec.tsx.snap |  2 +-
 .../__snapshots__/renderStream.spec.tsx.snap  |  2 +-
 .../showAllReplies.spec.tsx.snap              |  2 +-
 .../showConversation.spec.tsx.snap            |  4 +-
 src/core/client/stream/test/create.tsx        |  6 +--
 src/core/client/stream/test/fixtures.ts       | 12 ++++++
 16 files changed, 69 insertions(+), 86 deletions(-)

diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx
index ad96b86dc..39cfd6084 100644
--- a/src/core/client/stream/containers/AppContainer.tsx
+++ b/src/core/client/stream/containers/AppContainer.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-
+import { withFragmentContainer } from "talk-framework/lib/relay";
 import { graphql, withLocalStateContainer } from "talk-framework/lib/relay";
 import { AppContainerLocal as Local } from "talk-stream/__generated__/AppContainerLocal.graphql";
 import {
@@ -8,12 +8,13 @@ import {
   withSetActiveTabMutation,
 } from "talk-stream/mutations";
 
+import { AppContainer_asset as AssetData } from "talk-stream/__generated__/AppContainer_asset.graphql";
 import App from "../components/App";
 
 interface InnerProps {
   local: Local;
   setActiveTab: SetActiveTabMutation;
-  commentCount: number;
+  asset: AssetData;
 }
 
 class AppContainer extends React.Component<InnerProps> {
@@ -24,25 +25,37 @@ class AppContainer extends React.Component<InnerProps> {
   public render() {
     const {
       local: { activeTab },
-      commentCount,
+      asset,
     } = this.props;
 
     return (
       <App
         activeTab={activeTab}
         onTabClick={this.handleSetActiveTab}
-        commentCount={commentCount}
+        commentCount={asset.commentCounts.totalVisible}
       />
     );
   }
 }
 
-const enhanced = withLocalStateContainer(
-  graphql`
-    fragment AppContainerLocal on Local {
-      activeTab
-    }
-  `
-)(withSetActiveTabMutation(AppContainer));
+const enhanced = withSetActiveTabMutation(
+  withFragmentContainer<InnerProps>({
+    asset: graphql`
+      fragment AppContainer_asset on Asset {
+        commentCounts {
+          totalVisible
+        }
+      }
+    `,
+  })(
+    withLocalStateContainer(
+      graphql`
+        fragment AppContainerLocal on Local {
+          activeTab
+        }
+      `
+    )(AppContainer)
+  )
+);
 
 export default enhanced;
diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx
index b18e8e9d9..7e456fe18 100644
--- a/src/core/client/stream/queries/AppQuery.tsx
+++ b/src/core/client/stream/queries/AppQuery.tsx
@@ -32,9 +32,7 @@ export const render = ({
       );
     }
 
-    return (
-      <AppContainer commentCount={props.asset.commentCounts.totalVisible} />
-    );
+    return <AppContainer asset={props.asset} />;
   }
 
   return <Spinner />;
@@ -47,9 +45,7 @@ const AppQuery: StatelessComponent<InnerProps> = ({
     query={graphql`
       query AppQuery($assetID: ID, $assetURL: String) {
         asset(id: $assetID, url: $assetURL) {
-          commentCounts {
-            totalVisible
-          }
+          ...AppContainer_asset
         }
       }
     `}
diff --git a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap
index a6bae295c..d2a122808 100644
--- a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap
@@ -27,7 +27,7 @@ exports[`cancel edit: edit canceled 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨2⁩ Comments
       </button>
     </li>
     <li
@@ -436,7 +436,7 @@ exports[`edit a comment: edit form 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨2⁩ Comments
       </button>
     </li>
     <li
@@ -920,7 +920,7 @@ exports[`edit a comment: optimistic response 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨2⁩ Comments
       </button>
     </li>
     <li
@@ -1404,7 +1404,7 @@ exports[`edit a comment: render stream 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨2⁩ Comments
       </button>
     </li>
     <li
@@ -1813,7 +1813,7 @@ exports[`edit a comment: server response 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨2⁩ Comments
       </button>
     </li>
     <li
@@ -2231,7 +2231,7 @@ exports[`shows expiry message: edit form closed 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨2⁩ Comments
       </button>
     </li>
     <li
@@ -2640,7 +2640,7 @@ exports[`shows expiry message: edit time expired 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨2⁩ Comments
       </button>
     </li>
     <li
diff --git a/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap
index c5bddccf9..9fe9c83bd 100644
--- a/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap
@@ -433,7 +433,7 @@ exports[`renders comment stream 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨2⁩ Comments
       </button>
     </li>
   </ul>
diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap
index df6f281c3..aaab7f1d2 100644
--- a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap
@@ -27,7 +27,7 @@ exports[`renders permalink view 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨2⁩ Comments
       </button>
     </li>
   </ul>
diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
index 0cc370719..1099468ac 100644
--- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
@@ -1,45 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders permalink view with unknown asset 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
->
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        ⁨6⁩ Comments
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
-    <div>
-      Asset not found
-    </div>
-  </section>
+<div>
+  Asset not found
 </div>
 `;
diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index 7da665351..18657738a 100644
--- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -27,7 +27,7 @@ exports[`renders permalink view with unknown comment 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨2⁩ Comments
       </button>
     </li>
   </ul>
diff --git a/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap
index ee6a14314..843b01875 100644
--- a/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap
@@ -27,7 +27,7 @@ exports[`post a comment: optimistic response 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨3⁩ Comments
       </button>
     </li>
     <li
@@ -504,7 +504,7 @@ exports[`post a comment: server response 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨3⁩ Comments
       </button>
     </li>
     <li
@@ -971,7 +971,7 @@ exports[`renders comment stream 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨2⁩ Comments
       </button>
     </li>
     <li
diff --git a/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap
index e426dd5d1..d1e6c2e92 100644
--- a/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap
@@ -27,7 +27,7 @@ exports[`post a reply: open reply form 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨1⁩ Comments
       </button>
     </li>
     <li
@@ -889,7 +889,7 @@ exports[`post a reply: optimistic response 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨1⁩ Comments
       </button>
     </li>
     <li
@@ -1824,7 +1824,7 @@ exports[`post a reply: server response 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨1⁩ Comments
       </button>
     </li>
     <li
@@ -2622,7 +2622,7 @@ exports[`renders comment stream 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨1⁩ Comments
       </button>
     </li>
     <li
diff --git a/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap
index 45f61f101..b8f037d18 100644
--- a/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap
@@ -27,7 +27,7 @@ exports[`post a reply: open reply form 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨2⁩ Comments
       </button>
     </li>
     <li
@@ -547,7 +547,7 @@ exports[`post a reply: optimistic response 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨3⁩ Comments
       </button>
     </li>
     <li
@@ -1157,7 +1157,7 @@ exports[`post a reply: server response 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨3⁩ Comments
       </button>
     </li>
     <li
@@ -1630,7 +1630,7 @@ exports[`renders comment stream 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨2⁩ Comments
       </button>
     </li>
     <li
diff --git a/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap
index 434bb3ff0..cc4ef9116 100644
--- a/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap
@@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨1⁩ Comments
       </button>
     </li>
   </ul>
diff --git a/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap
index 5672d8ad6..714bba9c7 100644
--- a/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap
@@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨2⁩ Comments
       </button>
     </li>
   </ul>
diff --git a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap
index cf6642c00..84fc3d4eb 100644
--- a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap
@@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨2⁩ Comments
       </button>
     </li>
   </ul>
diff --git a/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap
index 87d570681..6fbd0d02b 100644
--- a/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap
@@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨1⁩ Comments
       </button>
     </li>
   </ul>
@@ -701,7 +701,7 @@ exports[`shows conversation 1`] = `
         role="tab"
         type="button"
       >
-        ⁨6⁩ Comments
+        ⁨1⁩ Comments
       </button>
     </li>
   </ul>
diff --git a/src/core/client/stream/test/create.tsx b/src/core/client/stream/test/create.tsx
index 486f01422..4f32b73c7 100644
--- a/src/core/client/stream/test/create.tsx
+++ b/src/core/client/stream/test/create.tsx
@@ -10,12 +10,12 @@ import { PostMessageService } from "talk-framework/lib/postMessage";
 import { RestClient } from "talk-framework/lib/rest";
 import { createPromisifiedStorage } from "talk-framework/lib/storage";
 import { createUUIDGenerator } from "talk-framework/testHelpers";
-import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
 import createFluentBundle from "./createFluentBundle";
 import createNodeMock from "./createNodeMock";
-import { comments } from "./fixtures";
+
+import AppQuery from "../queries/AppQuery";
 
 export interface CreateParams {
   logNetwork?: boolean;
@@ -54,7 +54,7 @@ export default function create(params: CreateParams) {
 
   const testRenderer = TestRenderer.create(
     <TalkContextProvider value={context}>
-      <AppContainer commentCount={comments.length} />
+      <AppQuery />
     </TalkContextProvider>,
     { createNodeMock }
   );
diff --git a/src/core/client/stream/test/fixtures.ts b/src/core/client/stream/test/fixtures.ts
index 159262d22..dc58ac4b8 100644
--- a/src/core/client/stream/test/fixtures.ts
+++ b/src/core/client/stream/test/fixtures.ts
@@ -93,6 +93,9 @@ export const assets = [
     id: "asset-1",
     url: "http://localhost/assets/asset-1",
     isClosed: false,
+    commentCounts: {
+      totalVisible: 2,
+    },
     comments: {
       edges: [
         { node: comments[0], cursor: comments[0].createdAt },
@@ -160,6 +163,9 @@ export const assetWithReplies = {
       hasNextPage: false,
     },
   },
+  commentCounts: {
+    totalVisible: 1,
+  },
 };
 
 export const assetWithDeepReplies = {
@@ -178,6 +184,9 @@ export const assetWithDeepReplies = {
       hasNextPage: false,
     },
   },
+  commentCounts: {
+    totalVisible: 1,
+  },
 };
 
 export const commentWithDeepestReplies = {
@@ -292,4 +301,7 @@ export const assetWithDeepestReplies = {
       hasNextPage: false,
     },
   },
+  commentCounts: {
+    totalVisible: 1,
+  },
 };