From 66d8244acc1b0a1b0b77513fb5ea1286babd7760 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Fri, 3 Aug 2018 23:49:00 +0200 Subject: [PATCH] Refactor stream + some tests --- src/core/client/embed/index.html | 2 +- .../lib/relay/withLocalStateContainer.tsx | 23 ++- src/core/client/stream/components/App.css | 1 + .../client/stream/components/App.spec.tsx | 8 +- src/core/client/stream/components/App.tsx | 23 +-- .../__snapshots__/Comment.spec.tsx.snap | 2 +- .../stream/components/PermalinkView.css | 2 - .../stream/components/PermalinkView.tsx | 1 + src/core/client/stream/components/Stream.css | 1 - .../__snapshots__/App.spec.tsx.snap | 17 +-- .../stream/containers/AppContainer.spec.tsx | 16 --- .../client/stream/containers/AppContainer.tsx | 33 ++--- .../containers/CommentContainer.spec.tsx | 1 + .../containers/PermalinkViewContainer.tsx | 45 +++--- .../__snapshots__/AppContainer.spec.tsx.snap | 7 - .../CommentContainer.spec.tsx.snap | 1 + src/core/client/stream/index.tsx | 4 +- .../client/stream/queries/AppQuery.spec.tsx | 46 ------ src/core/client/stream/queries/AppQuery.tsx | 86 ----------- .../queries/PermalinkViewQuery.spec.tsx | 34 +++++ .../stream/queries/PermalinkViewQuery.tsx | 68 +++++++++ .../stream/queries/StreamQuery.spec.tsx | 33 +++++ .../client/stream/queries/StreamQuery.tsx | 58 ++++++++ .../__snapshots__/AppQuery.spec.tsx.snap | 25 ---- .../PermalinkViewQuery.spec.tsx.snap | 20 +++ .../__snapshots__/StreamQuery.spec.tsx.snap | 19 +++ .../__snapshots__/permalinkView.spec.tsx.snap | 136 ++++++++++++++++++ src/core/client/stream/test/fixtures.ts | 2 + src/core/client/stream/test/loadMore.spec.tsx | 4 +- .../client/stream/test/permalinkView.spec.tsx | 82 +++++++++++ .../client/stream/test/renderReplies.spec.tsx | 4 +- .../client/stream/test/renderStream.spec.tsx | 4 +- .../stream/test/showAllReplies.spec.tsx | 4 +- 33 files changed, 548 insertions(+), 264 deletions(-) delete mode 100644 src/core/client/stream/containers/AppContainer.spec.tsx delete mode 100644 src/core/client/stream/containers/__snapshots__/AppContainer.spec.tsx.snap delete mode 100644 src/core/client/stream/queries/AppQuery.spec.tsx delete mode 100644 src/core/client/stream/queries/AppQuery.tsx create mode 100644 src/core/client/stream/queries/PermalinkViewQuery.spec.tsx create mode 100644 src/core/client/stream/queries/PermalinkViewQuery.tsx create mode 100644 src/core/client/stream/queries/StreamQuery.spec.tsx create mode 100644 src/core/client/stream/queries/StreamQuery.tsx delete mode 100644 src/core/client/stream/queries/__snapshots__/AppQuery.spec.tsx.snap create mode 100644 src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap create mode 100644 src/core/client/stream/queries/__snapshots__/StreamQuery.spec.tsx.snap create mode 100644 src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap create mode 100644 src/core/client/stream/test/permalinkView.spec.tsx diff --git a/src/core/client/embed/index.html b/src/core/client/embed/index.html index 2eedfea25..297768c75 100644 --- a/src/core/client/embed/index.html +++ b/src/core/client/embed/index.html @@ -10,7 +10,7 @@

Talk 5.0 – Embed Stream

-
+
diff --git a/src/core/client/framework/lib/relay/withLocalStateContainer.tsx b/src/core/client/framework/lib/relay/withLocalStateContainer.tsx index 9eaeb0ce8..421eb7d71 100644 --- a/src/core/client/framework/lib/relay/withLocalStateContainer.tsx +++ b/src/core/client/framework/lib/relay/withLocalStateContainer.tsx @@ -1,8 +1,14 @@ import * as React from "react"; -import { compose, hoistStatics, InferableComponentEnhancer } from "recompose"; +import { + compose, + hoistStatics, + InferableComponentEnhancer, + wrapDisplayName, +} from "recompose"; import { CSelector, CSnapshot, + Disposable, Environment, GraphQLTaggedNode, } from "relay-runtime"; @@ -36,6 +42,12 @@ function withLocalStateContainer( withContext(({ relayEnvironment }) => ({ relayEnvironment })), hoistStatics((BaseComponent: React.ComponentType) => { class LocalStateContainer extends React.Component { + public static displayName = wrapDisplayName( + BaseComponent, + "withLocalStateContainer" + ); + private subscription: Disposable; + constructor(props: Props) { super(props); const fragment = (fragmentSpec as any).data().default; @@ -53,7 +65,10 @@ function withLocalStateContainer( variables: {}, }; const snapshot = props.relayEnvironment.lookup(selector); - props.relayEnvironment.subscribe(snapshot, this.updateSnapshot); + this.subscription = props.relayEnvironment.subscribe( + snapshot, + this.updateSnapshot + ); this.state = { data: snapshot.data, }; @@ -63,6 +78,10 @@ function withLocalStateContainer( this.setState({ data: snapshot.data }); }; + public componentWillUnmount() { + this.subscription.dispose(); + } + public render() { const { relayEnvironment: _, ...rest } = this.props; return ; diff --git a/src/core/client/stream/components/App.css b/src/core/client/stream/components/App.css index 68c4e29c4..3f61a7cae 100644 --- a/src/core/client/stream/components/App.css +++ b/src/core/client/stream/components/App.css @@ -11,4 +11,5 @@ } .root { + width: 100%; } diff --git a/src/core/client/stream/components/App.spec.tsx b/src/core/client/stream/components/App.spec.tsx index 9b91a8974..d7dfdc3a7 100644 --- a/src/core/client/stream/components/App.spec.tsx +++ b/src/core/client/stream/components/App.spec.tsx @@ -5,17 +5,17 @@ import { PropTypesOf } from "talk-framework/types"; import App from "./App"; -it("renders correctly", () => { +it("renders stream", () => { const props: PropTypesOf = { - asset: {}, + showPermalinkView: false, }; const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); -it("renders correctly when asset is null", () => { +it("renders permalink view", () => { const props: PropTypesOf = { - asset: null, + showPermalinkView: true, }; const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx index 14659585a..39272cb17 100644 --- a/src/core/client/stream/components/App.tsx +++ b/src/core/client/stream/components/App.tsx @@ -3,23 +3,26 @@ import { StatelessComponent } from "react"; import { Flex } from "talk-ui/components"; -import StreamContainer from "../containers/StreamContainer"; +import PermalinkViewQuery from "../queries/PermalinkViewQuery"; +import StreamQuery from "../queries/StreamQuery"; import * as styles from "./App.css"; export interface AppProps { - asset: {} | null; + showPermalinkView: boolean; } const App: StatelessComponent = props => { - if (props.asset) { - return ( - - - - ); - } - return
Asset not found
; + const view = props.showPermalinkView ? ( + + ) : ( + + ); + return ( + + {view} + + ); }; export default App; diff --git a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap index b92b29a8e..c86fc9284 100644 --- a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap +++ b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap @@ -18,7 +18,7 @@ exports[`renders username and body 1`] = `
-
diff --git a/src/core/client/stream/components/PermalinkView.css b/src/core/client/stream/components/PermalinkView.css index 1e9f3ca45..a71a33af8 100644 --- a/src/core/client/stream/components/PermalinkView.css +++ b/src/core/client/stream/components/PermalinkView.css @@ -1,7 +1,5 @@ .root { width: 100%; - max-width: 400px; - margin: calc(0.5 * var(--spacing-unit)) auto; } .button { diff --git a/src/core/client/stream/components/PermalinkView.tsx b/src/core/client/stream/components/PermalinkView.tsx index 68396ac74..b7ea70370 100644 --- a/src/core/client/stream/components/PermalinkView.tsx +++ b/src/core/client/stream/components/PermalinkView.tsx @@ -20,6 +20,7 @@ const PermalinkView: StatelessComponent = ({
{assetURL && ( +
+
+
+ + Markus + + +
+

+ Joining Too +

+
+
+
+
+
+`; + +exports[`show all comments 1`] = ` +
+
+
+
+