From 428c35a9311d92897f4e17f49c4fe3a2bf93279c Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 31 Aug 2018 16:11:25 +0200
Subject: [PATCH] Hide forward ref and fix tests

---
 .../framework/lib/relay/hideForwardRef.ts     | 10 ++++++++++
 .../lib/relay/withFragmentContainer.ts        | 12 +++++++++--
 .../lib/relay/withPaginationContainer.ts      | 20 ++++++++++++++++---
 .../lib/relay/withRefetchContainer.ts         | 16 ++++++++++++---
 .../StreamContainer.spec.tsx.snap             |  4 ++++
 5 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 src/core/client/framework/lib/relay/hideForwardRef.ts

diff --git a/src/core/client/framework/lib/relay/hideForwardRef.ts b/src/core/client/framework/lib/relay/hideForwardRef.ts
new file mode 100644
index 000000000..434faf078
--- /dev/null
+++ b/src/core/client/framework/lib/relay/hideForwardRef.ts
@@ -0,0 +1,10 @@
+import React, { ComponentType, StatelessComponent } from "react";
+
+// TODO: (cvle) This currently a workaround to hide ForwardRef from
+// enzyme which does not support it well yet.
+export default function hideForwardRef(component: ComponentType) {
+  const wrapped: StatelessComponent = (props: any) =>
+    React.createElement(component, props);
+  wrapped.displayName = component.displayName;
+  return wrapped;
+}
diff --git a/src/core/client/framework/lib/relay/withFragmentContainer.ts b/src/core/client/framework/lib/relay/withFragmentContainer.ts
index 728c375b5..bbac61726 100644
--- a/src/core/client/framework/lib/relay/withFragmentContainer.ts
+++ b/src/core/client/framework/lib/relay/withFragmentContainer.ts
@@ -5,6 +5,9 @@ import {
   GraphQLTaggedNode,
 } from "react-relay";
 import { InferableComponentEnhancerWithProps } from "recompose";
+import { wrapDisplayName } from "recompose";
+
+import hideForwardRef from "./hideForwardRef";
 import { FragmentKeysNoLocal } from "./types";
 
 /**
@@ -18,5 +21,10 @@ export default <T>(
 ): InferableComponentEnhancerWithProps<
   { [P in FragmentKeysNoLocal<T>]: T[P] },
   { [P in FragmentKeysNoLocal<T>]: FragmentOrRegularProp<T[P]> }
-> => (component: React.ComponentType<any>) =>
-  createFragmentContainer(component, fragmentSpec) as any;
+> => (component: React.ComponentType<any>) => {
+  const result = createFragmentContainer(component, fragmentSpec);
+  result.displayName = wrapDisplayName(component, "Relay");
+  // TODO: (cvle) We wrap this currently to hide the ForwardRef which is not
+  // well supported yet in enzyme.
+  return hideForwardRef(result) as any;
+};
diff --git a/src/core/client/framework/lib/relay/withPaginationContainer.ts b/src/core/client/framework/lib/relay/withPaginationContainer.ts
index 8535d0a7f..563a7fcb5 100644
--- a/src/core/client/framework/lib/relay/withPaginationContainer.ts
+++ b/src/core/client/framework/lib/relay/withPaginationContainer.ts
@@ -5,8 +5,13 @@ import {
   GraphQLTaggedNode,
   RelayPaginationProp,
 } from "react-relay";
-import { InferableComponentEnhancerWithProps } from "recompose";
+import {
+  InferableComponentEnhancerWithProps,
+  wrapDisplayName,
+} from "recompose";
 import { Variables } from "relay-runtime";
+
+import hideForwardRef from "./hideForwardRef";
 import { FragmentKeysNoLocal } from "./types";
 
 // TODO: (cvle) at some point we might switch these to stock react-relay typings
@@ -44,5 +49,14 @@ export default <T, QueryVariables, FragmentVariables>(
 ): InferableComponentEnhancerWithProps<
   { [P in FragmentKeysNoLocal<T>]: T[P] } & { relay: RelayPaginationProp },
   { [P in FragmentKeysNoLocal<T>]: FragmentOrRegularProp<T[P]> }
-> => (component: React.ComponentType<any>) =>
-  createPaginationContainer(component, fragmentSpec, connectionConfig) as any;
+> => (component: React.ComponentType<any>) => {
+  const result = createPaginationContainer(
+    component,
+    fragmentSpec,
+    connectionConfig
+  );
+  result.displayName = wrapDisplayName(component, "Relay");
+  // TODO: (cvle) We wrap this currently to hide the ForwardRef which is not
+  // well supported yet in enzyme.
+  return hideForwardRef(result) as any;
+};
diff --git a/src/core/client/framework/lib/relay/withRefetchContainer.ts b/src/core/client/framework/lib/relay/withRefetchContainer.ts
index 9f0618f55..3036daaf8 100644
--- a/src/core/client/framework/lib/relay/withRefetchContainer.ts
+++ b/src/core/client/framework/lib/relay/withRefetchContainer.ts
@@ -4,7 +4,12 @@ import {
   GraphQLTaggedNode,
   RelayRefetchProp,
 } from "react-relay";
-import { InferableComponentEnhancerWithProps } from "recompose";
+import {
+  InferableComponentEnhancerWithProps,
+  wrapDisplayName,
+} from "recompose";
+
+import hideForwardRef from "./hideForwardRef";
 import { FragmentKeysNoLocal } from "./types";
 
 /**
@@ -19,5 +24,10 @@ export default <T>(
 ): InferableComponentEnhancerWithProps<
   { [P in FragmentKeysNoLocal<T>]: T[P] } & { relay: RelayRefetchProp },
   { [P in FragmentKeysNoLocal<T>]: FragmentOrRegularProp<T[P]> }
-> => (component: React.ComponentType<any>) =>
-  createRefetchContainer(component, fragmentSpec, refetchQuery) as any;
+> => (component: React.ComponentType<any>) => {
+  const result = createRefetchContainer(component, fragmentSpec, refetchQuery);
+  result.displayName = wrapDisplayName(component, "Relay");
+  // TODO: (cvle) We wrap this currently to hide the ForwardRef which is not
+  // well supported yet in enzyme.
+  return hideForwardRef(result) as any;
+};
diff --git a/src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap
index e3813397c..e24710a2b 100644
--- a/src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap
+++ b/src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap
@@ -16,6 +16,7 @@ exports[`renders correctly 1`] = `
   disableLoadMore={false}
   isClosed={false}
   onLoadMore={[Function]}
+  user={null}
 />
 `;
 
@@ -36,6 +37,7 @@ exports[`when has more comments renders hasMore 1`] = `
   hasMore={true}
   isClosed={false}
   onLoadMore={[Function]}
+  user={null}
 />
 `;
 
@@ -56,6 +58,7 @@ exports[`when has more comments when loading more disables load more button 1`]
   hasMore={true}
   isClosed={false}
   onLoadMore={[Function]}
+  user={null}
 />
 `;
 
@@ -76,5 +79,6 @@ exports[`when has more comments when loading more enable load more button after
   hasMore={true}
   isClosed={false}
   onLoadMore={[Function]}
+  user={null}
 />
 `;