Save comment draft + test

src/core/client/framework/lib/bootstrap/TalkContext.tsx

@@ -8,7 +8,7 @@ import { Environment } from "relay-runtime";
 
 import { PostMessageService } from "talk-framework/lib/postMessage";
 import { RestClient } from "talk-framework/lib/rest";
-import { Storage } from "talk-framework/lib/storage";
+import { PymStorage } from "talk-framework/lib/storage";
 import { UIContext } from "talk-ui/components";
 import { ClickFarAwayRegister } from "talk-ui/components/ClickOutside";
 
@@ -28,6 +28,12 @@ export interface TalkContext {
   /** Session storage */
   sessionStorage: Storage;
 
+  /** Session Storage over pym */
+  pymLocalStorage?: PymStorage;
+
+  /** Session storage over pym */
+  pymSessionStorage?: PymStorage;
+
   /** media query values for testing purposes */
   mediaQueryValues?: MediaQueryMatchers;
 

src/core/client/framework/lib/bootstrap/createContext.tsx

@@ -117,12 +117,10 @@ export default async function createContext({
     registerClickFarAway,
     rest: new RestClient("/api", tokenGetter),
     postMessage: new PostMessageService(),
-    localStorage: pym
-      ? createPymStorage(pym, "localStorage")
-      : createLocalStorage(),
-    sessionStorage: pym
-      ? createPymStorage(pym, "sessionStorage")
-      : createSessionStorage(),
+    localStorage: createLocalStorage(),
+    sessionStorage: createSessionStorage(),
+    pymLocalStorage: pym && createPymStorage(pym, "localStorage"),
+    pymSessionStorage: pym && createPymStorage(pym, "sessionStorage"),
   };
 
   // Run custom initializations.

src/core/client/framework/lib/storage/PymStorage.ts

@@ -1,6 +1,20 @@
 import { Child, Parent } from "pym.js";
 import uuid from "uuid/v4";
-import { Storage } from "./interface";
+
+export interface PymStorage {
+  /**
+   * value = storage[key]
+   */
+  getItem(key: string): Promise<string | null>;
+  /**
+   * delete storage[key]
+   */
+  removeItem(key: string): Promise<void>;
+  /**
+   * storage[key] = value
+   */
+  setItem(key: string, value: string): Promise<void>;
+}
 
 type Pym = Child | Parent;
 
@@ -13,7 +27,7 @@ type Pym = Child | Parent;
 export default function createPymStorage(
   pym: Pym,
   type: "localStorage" | "sessionStorage"
-): Storage {
+): PymStorage {
   // A Map of requestID => {resolve, reject}
   const requests: Record<
     string,

src/core/client/framework/lib/storage/__snapshots__/PymStorage.spec.ts.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`connectStorageToPym should handle handle errors 1`] = `"[{\\"key\\":\\"pymStorage.localStorage.error\\",\\"value\\":\\"{\\\\\\"id\\\\\\":\\\\\\"0\\\\\\",\\\\\\"error\\\\\\":\\\\\\"error\\\\\\"}\\"}]"`;
-
-exports[`connectStorageToPym should handle unknown method 1`] = `"[{\\"key\\":\\"pymStorage.localStorage.error\\",\\"value\\":\\"{\\\\\\"id\\\\\\":\\\\\\"0\\\\\\",\\\\\\"error\\\\\\":\\\\\\"Unknown method unknown\\\\\\"}\\"}]"`;
-
-exports[`connectStorageToPym should set, get and remove item 1`] = `"{\\"talkPymStorage:key\\":\\"test\\"}"`;
-
-exports[`connectStorageToPym should set, get and remove item 2`] = `"{}"`;
-
-exports[`connectStorageToPym should set, get and remove item 3`] = `"[{\\"key\\":\\"pymStorage.localStorage.response\\",\\"value\\":\\"{\\\\\\"id\\\\\\":\\\\\\"0\\\\\\"}\\"},{\\"key\\":\\"pymStorage.localStorage.response\\",\\"value\\":\\"{\\\\\\"id\\\\\\":\\\\\\"1\\\\\\",\\\\\\"result\\\\\\":\\\\\\"test\\\\\\"}\\"},{\\"key\\":\\"pymStorage.localStorage.response\\",\\"value\\":\\"{\\\\\\"id\\\\\\":\\\\\\"2\\\\\\"}\\"}]"`;

src/core/client/framework/lib/storage/index.ts

@@ -1,5 +1,4 @@
 export { default as createInMemoryStorage } from "./InMemoryStorage";
 export { default as createLocalStorage } from "./LocalStorage";
 export { default as createSessionStorage } from "./SessionStorage";
-export { default as createPymStorage } from "./PymStorage";
-export { Storage } from "./interface";
+export { default as createPymStorage, PymStorage } from "./PymStorage";

src/core/client/framework/lib/storage/interface.ts

@@ -1,14 +0,0 @@
-export interface Storage {
-  /**
-   * value = storage[key]
-   */
-  getItem(key: string): Promise<string | null> | string | null;
-  /**
-   * delete storage[key]
-   */
-  removeItem(key: string): Promise<void> | void;
-  /**
-   * storage[key] = value
-   */
-  setItem(key: string, value: string): Promise<void> | void;
-}

src/core/client/framework/testHelpers/createFakePymStorage.ts

@@ -0,0 +1,21 @@
+import { PymStorage } from "talk-framework/lib/storage";
+
+export class FakeStorage implements PymStorage {
+  public store: Record<string, string> = {};
+
+  public setItem(key: string, value: string) {
+    this.store[key] = value;
+    return Promise.resolve();
+  }
+  public removeItem(key: string) {
+    delete this.store[key];
+    return Promise.resolve();
+  }
+  public getItem(key: string) {
+    return Promise.resolve(this.store[key]);
+  }
+}
+
+export default function createFakePymStorage() {
+  return new FakeStorage();
+}

src/core/client/framework/testHelpers/index.ts

@@ -4,6 +4,7 @@ export {
 } from "./createRelayEnvironment";
 export { default as createFluentBundle } from "./createFluentBundle";
 export { default as createSinonStub } from "./createSinonStub";
+export { default as createFakePymStorage } from "./createFakePymStorage";
 export {
   default as removeFragmentRefs,
   NoFragmentRefs,

src/core/client/stream/components/PostCommentForm.tsx

@@ -1,6 +1,7 @@
+import { FormState } from "final-form";
 import { Localized } from "fluent-react/compat";
 import React, { StatelessComponent } from "react";
-import { Field, Form } from "react-final-form";
+import { Field, Form, FormSpy } from "react-final-form";
 
 import { OnSubmit } from "talk-framework/lib/form";
 import { required } from "talk-framework/lib/validation";
@@ -22,10 +23,12 @@ interface FormProps {
 
 export interface PostCommentFormProps {
   onSubmit: OnSubmit<FormProps>;
+  onChange?: (state: FormState) => void;
+  initialValues?: FormProps;
 }
 
 const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
-  <Form onSubmit={props.onSubmit}>
+  <Form onSubmit={props.onSubmit} initialValues={props.initialValues}>
     {({ handleSubmit, submitting }) => (
       <form
         autoComplete="off"
@@ -33,6 +36,7 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
         className={styles.root}
         id="comments-postCommentForm-form"
       >
+        <FormSpy onChange={props.onChange} />
         <HorizontalGutter>
           <Field name="body" validate={required}>
             {({ input, meta }) => (

src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap

@@ -213,7 +213,7 @@ exports[`when use is logged in renders correctly 1`] = `
     <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
       user={Object {}}
     />
-    <withContext(createMutationContainer(PostCommentFormContainer))
+    <withContext(withContext(createMutationContainer(PostCommentFormContainer)))
       assetID="asset-id"
     />
   </withPropsOnChange(HorizontalGutter)>

src/core/client/stream/containers/PostCommentFormContainer.spec.tsx

@@ -0,0 +1,99 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+import sinon from "sinon";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import { timeout } from "talk-common/utils";
+import { createFakePymStorage } from "talk-framework/testHelpers";
+import { PostCommentFormContainer } from "./PostCommentFormContainer";
+
+const contextKey = "postCommentFormBody";
+
+it("renders correctly", async () => {
+  const props: PropTypesOf<typeof PostCommentFormContainer> = {
+    // tslint:disable-next-line:no-empty
+    createComment: (() => {}) as any,
+    assetID: "asset-id",
+    pymSessionStorage: createFakePymStorage(),
+  };
+
+  const wrapper = shallow(<PostCommentFormContainer {...props} />);
+  await timeout();
+  wrapper.update();
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders with initialValues", async () => {
+  const props: PropTypesOf<typeof PostCommentFormContainer> = {
+    // tslint:disable-next-line:no-empty
+    createComment: (() => {}) as any,
+    assetID: "asset-id",
+    pymSessionStorage: createFakePymStorage(),
+  };
+
+  await props.pymSessionStorage.setItem(contextKey, "Hello World!");
+
+  const wrapper = shallow(<PostCommentFormContainer {...props} />);
+  await timeout();
+  wrapper.update();
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("save values", async () => {
+  const props: PropTypesOf<typeof PostCommentFormContainer> = {
+    // tslint:disable-next-line:no-empty
+    createComment: (() => {}) as any,
+    assetID: "asset-id",
+    pymSessionStorage: createFakePymStorage(),
+  };
+
+  await props.pymSessionStorage.setItem(contextKey, "Hello World!");
+
+  const wrapper = shallow(<PostCommentFormContainer {...props} />);
+  await timeout();
+  wrapper.update();
+  wrapper
+    .first()
+    .props()
+    .onChange({ values: { body: "changed" } });
+  expect(await props.pymSessionStorage.getItem(contextKey)).toBe("changed");
+});
+
+it("creates a comment", async () => {
+  const assetID = "asset-id";
+  const input = { body: "Hello World!" };
+  const createCommentStub = sinon.stub();
+  const form = { reset: noop };
+  const formMock = sinon.mock(form);
+  formMock
+    .expects("reset")
+    .withArgs({})
+    .once();
+
+  const props: PropTypesOf<typeof PostCommentFormContainer> = {
+    // tslint:disable-next-line:no-empty
+    createComment: createCommentStub,
+    assetID,
+    pymSessionStorage: createFakePymStorage(),
+  };
+
+  await props.pymSessionStorage.setItem(contextKey, "Hello World!");
+
+  const wrapper = shallow(<PostCommentFormContainer {...props} />);
+  await timeout();
+  wrapper.update();
+  wrapper
+    .first()
+    .props()
+    .onSubmit(input, form);
+  expect(
+    createCommentStub.calledWith({
+      assetID,
+      ...input,
+    })
+  ).toBeTruthy();
+  await timeout();
+  formMock.verify();
+});

src/core/client/stream/containers/PostCommentFormContainer.tsx

@@ -1,6 +1,8 @@
-import React, { Component, ReactNode } from "react";
+import React, { Component } from "react";
 
+import { withContext } from "talk-framework/lib/bootstrap";
 import { BadUserInputError } from "talk-framework/lib/errors";
+import { PymStorage } from "talk-framework/lib/storage";
 import { PropTypesOf } from "talk-framework/types";
 
 import PostCommentForm, {
@@ -11,17 +13,48 @@ import { CreateCommentMutation, withCreateCommentMutation } from "../mutations";
 interface InnerProps {
   createComment: CreateCommentMutation;
   assetID: string;
-  children?: ReactNode;
+  pymSessionStorage: PymStorage;
 }
 
-class PostCommentFormContainer extends Component<InnerProps> {
-  private onSubmit: PostCommentFormProps["onSubmit"] = async (input, form) => {
+interface State {
+  initialValues?: PostCommentFormProps["initialValues"];
+  initialized: boolean;
+}
+
+const contextKey = "postCommentFormBody";
+
+export class PostCommentFormContainer extends Component<InnerProps, State> {
+  public state: State = { initialized: false };
+
+  constructor(props: InnerProps) {
+    super(props);
+    this.init();
+  }
+
+  private async init() {
+    const body = await this.props.pymSessionStorage.getItem(contextKey);
+    if (body) {
+      this.setState({
+        initialValues: {
+          body,
+        },
+      });
+    }
+    this.setState({
+      initialized: true,
+    });
+  }
+
+  private handleOnSubmit: PostCommentFormProps["onSubmit"] = async (
+    input,
+    form
+  ) => {
     try {
       await this.props.createComment({
         assetID: this.props.assetID,
         ...input,
       });
-      form.reset();
+      form.reset({});
     } catch (error) {
       if (error instanceof BadUserInputError) {
         return error.invalidArgsLocalized;
@@ -31,11 +64,31 @@ class PostCommentFormContainer extends Component<InnerProps> {
     }
     return undefined;
   };
+
+  private handleOnChange: PostCommentFormProps["onChange"] = state => {
+    if (state.values.body) {
+      this.props.pymSessionStorage.setItem(contextKey, state.values.body);
+    } else {
+      this.props.pymSessionStorage.removeItem(contextKey);
+    }
+  };
+
   public render() {
-    return <PostCommentForm onSubmit={this.onSubmit} />;
+    if (!this.state.initialized) {
+      return null;
+    }
+    return (
+      <PostCommentForm
+        onSubmit={this.handleOnSubmit}
+        onChange={this.handleOnChange}
+        initialValues={this.state.initialValues}
+      />
+    );
   }
 }
 
-const enhanced = withCreateCommentMutation(PostCommentFormContainer);
+const enhanced = withContext(({ pymSessionStorage }) => ({
+  pymSessionStorage,
+}))(withCreateCommentMutation(PostCommentFormContainer));
 export type PostCommentFormContainerProps = PropTypesOf<typeof enhanced>;
 export default enhanced;

src/core/client/stream/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<PostCommentForm
+  onChange={[Function]}
+  onSubmit={[Function]}
+/>
+`;
+
+exports[`renders with initialValues 1`] = `
+<PostCommentForm
+  initialValues={
+    Object {
+      "body": "Hello World!",
+    }
+  }
+  onChange={[Function]}
+  onSubmit={[Function]}
+/>
+`;

src/core/client/stream/local/initLocalState.spec.ts

@@ -19,12 +19,14 @@ beforeEach(() => {
 });
 
 it("init local state", async () => {
-  initLocalState(environment, { localStorage: createInMemoryStorage() } as any);
+  await initLocalState(environment, {
+    localStorage: createInMemoryStorage(),
+  } as any);
   await timeout();
   expect(JSON.stringify(source.toJSON(), null, 2)).toMatchSnapshot();
 });
 
-it("set assetID from query", () => {
+it("set assetID from query", async () => {
   const assetID = "asset-id";
   const previousLocation = location.toString();
   const previousState = window.history.state;
@@ -33,12 +35,14 @@ it("set assetID from query", () => {
     document.title,
     `http://localhost/?assetID=${assetID}`
   );
-  initLocalState(environment, { localStorage: createInMemoryStorage() } as any);
+  await initLocalState(environment, {
+    localStorage: createInMemoryStorage(),
+  } as any);
   expect(source.get(LOCAL_ID)!.assetID).toBe(assetID);
   window.history.replaceState(previousState, document.title, previousLocation);
 });
 
-it("set commentID from query", () => {
+it("set commentID from query", async () => {
   const commentID = "comment-id";
   const previousLocation = location.toString();
   const previousState = window.history.state;
@@ -47,16 +51,18 @@ it("set commentID from query", () => {
     document.title,
     `http://localhost/?commentID=${commentID}`
   );
-  initLocalState(environment, { localStorage: createInMemoryStorage() } as any);
+  await initLocalState(environment, {
+    localStorage: createInMemoryStorage(),
+  } as any);
   expect(source.get(LOCAL_ID)!.commentID).toBe(commentID);
   window.history.replaceState(previousState, document.title, previousLocation);
 });
 
-it("set authToken from localStorage", () => {
+it("set authToken from localStorage", async () => {
   const authToken = "auth-token";
   const localStorage = createInMemoryStorage();
   localStorage.setItem("authToken", authToken);
-  initLocalState(environment, { localStorage } as any);
+  await initLocalState(environment, { localStorage } as any);
   expect(source.get(LOCAL_ID)!.authToken).toBe(authToken);
   localStorage.removeItem("authToken");
 });

src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap

@@ -194,10 +194,10 @@ exports[`post a comment 1`] = `
             </span>
             <time
               className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.002Z"
-              title="2018-07-06T18:24:00.002Z"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              2018-07-06T18:24:00.002Z
+              2018-07-06T18:24:00.000Z
             </time>
           </div>
           <div

src/core/client/stream/test/create.tsx

@@ -0,0 +1,59 @@
+import { IResolvers } from "graphql-tools";
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { Environment, RecordProxy, RecordSourceProxy } from "relay-runtime";
+
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
+import { createFakePymStorage } from "talk-framework/testHelpers";
+import AppContainer from "talk-stream/containers/AppContainer";
+
+import createEnvironment from "./createEnvironment";
+import createFluentBundle from "./createFluentBundle";
+import createNodeMock from "./createNodeMock";
+
+interface CreateParams {
+  logNetwork?: boolean;
+  resolvers: IResolvers<any, any>;
+  initLocalState?: (
+    local: RecordProxy,
+    source: RecordSourceProxy,
+    environment: Environment
+  ) => void;
+}
+
+export default function create(params: CreateParams) {
+  const environment = createEnvironment({
+    // Set this to true, to see graphql responses.
+    logNetwork: params.logNetwork,
+    resolvers: params.resolvers,
+    initLocalState: (localRecord, source, env) => {
+      localRecord.setValue(0, "authRevision");
+      if (params.initLocalState) {
+        params.initLocalState(localRecord, source, env);
+      }
+    },
+  });
+
+  const context: TalkContext = {
+    relayEnvironment: environment,
+    localeBundles: [createFluentBundle()],
+    localStorage: createInMemoryStorage(),
+    sessionStorage: createInMemoryStorage(),
+    pymLocalStorage: createFakePymStorage(),
+    pymSessionStorage: createFakePymStorage(),
+    rest: new RestClient("http://localhost/api"),
+    postMessage: new PostMessageService(),
+  };
+
+  const testRenderer = TestRenderer.create(
+    <TalkContextProvider value={context}>
+      <AppContainer />
+    </TalkContextProvider>,
+    { createNodeMock }
+  );
+
+  return { context, testRenderer };
+}

src/core/client/stream/test/loadMore.spec.tsx

@@ -1,17 +1,9 @@
-import React from "react";
-import TestRenderer, { ReactTestRenderer } from "react-test-renderer";
+import { ReactTestRenderer } from "react-test-renderer";
 
 import { timeout } from "talk-common/utils";
-import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
-import { PostMessageService } from "talk-framework/lib/postMessage";
-import { RestClient } from "talk-framework/lib/rest";
-import { createInMemoryStorage } from "talk-framework/lib/storage";
 import { createSinonStub } from "talk-framework/testHelpers";
-import AppContainer from "talk-stream/containers/AppContainer";
 
-import createEnvironment from "./createEnvironment";
-import createFluentBundle from "./createFluentBundle";
-import createNodeMock from "./createNodeMock";
+import create from "./create";
 import { assets, comments } from "./fixtures";
 
 let testRenderer: ReactTestRenderer;
@@ -68,31 +60,14 @@ beforeEach(() => {
     },
   };
 
-  const environment = createEnvironment({
+  ({ testRenderer } = create({
     // Set this to true, to see graphql responses.
     logNetwork: false,
     resolvers,
-    initLocalState: (localRecord, source) => {
-      localRecord.setValue(0, "authRevision");
+    initLocalState: localRecord => {
       localRecord.setValue(assetStub.id, "assetID");
     },
-  });
-
-  const context: TalkContext = {
-    relayEnvironment: environment,
-    localeBundles: [createFluentBundle()],
-    localStorage: createInMemoryStorage(),
-    sessionStorage: createInMemoryStorage(),
-    rest: new RestClient("http://localhost/api"),
-    postMessage: new PostMessageService(),
-  };
-
-  testRenderer = TestRenderer.create(
-    <TalkContextProvider value={context}>
-      <AppContainer />
-    </TalkContextProvider>,
-    { createNodeMock }
-  );
+  }));
 });
 
 it("renders comment stream", async () => {

src/core/client/stream/test/permalinkView.spec.tsx

@@ -1,19 +1,10 @@
-import React from "react";
-import TestRenderer, { ReactTestRenderer } from "react-test-renderer";
-import { RecordProxy } from "relay-runtime";
+import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
-import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
-import { PostMessageService } from "talk-framework/lib/postMessage";
-import { RestClient } from "talk-framework/lib/rest";
-import { createInMemoryStorage } from "talk-framework/lib/storage";
 import { createSinonStub } from "talk-framework/testHelpers";
-import AppContainer from "talk-stream/containers/AppContainer";
 
-import createEnvironment from "./createEnvironment";
-import createFluentBundle from "./createFluentBundle";
-import createNodeMock from "./createNodeMock";
+import create from "./create";
 import { assets, comments } from "./fixtures";
 
 let testRenderer: ReactTestRenderer;
@@ -50,32 +41,15 @@ beforeEach(() => {
     },
   };
 
-  const environment = createEnvironment({
+  ({ testRenderer } = create({
     // Set this to true, to see graphql responses.
     logNetwork: false,
     resolvers,
-    initLocalState: (localRecord: RecordProxy) => {
-      localRecord.setValue(0, "authRevision");
+    initLocalState: localRecord => {
       localRecord.setValue(assetStub.id, "assetID");
       localRecord.setValue(commentStub.id, "commentID");
     },
-  });
-
-  const context: TalkContext = {
-    relayEnvironment: environment,
-    localeBundles: [createFluentBundle()],
-    localStorage: createInMemoryStorage(),
-    sessionStorage: createInMemoryStorage(),
-    rest: new RestClient("http://localhost/api"),
-    postMessage: new PostMessageService(),
-  };
-
-  testRenderer = TestRenderer.create(
-    <TalkContextProvider value={context}>
-      <AppContainer />
-    </TalkContextProvider>,
-    { createNodeMock }
-  );
+  }));
 });
 
 it("renders permalink view", async () => {

src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx

@@ -1,17 +1,8 @@
-import React from "react";
-import TestRenderer, { ReactTestRenderer } from "react-test-renderer";
-import { RecordProxy } from "relay-runtime";
+import { ReactTestRenderer } from "react-test-renderer";
 
 import { timeout } from "talk-common/utils";
-import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
-import { PostMessageService } from "talk-framework/lib/postMessage";
-import { RestClient } from "talk-framework/lib/rest";
-import { createInMemoryStorage } from "talk-framework/lib/storage";
-import AppContainer from "talk-stream/containers/AppContainer";
 
-import createEnvironment from "./createEnvironment";
-import createFluentBundle from "./createFluentBundle";
-import createNodeMock from "./createNodeMock";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
@@ -22,32 +13,15 @@ beforeEach(() => {
     },
   };
 
-  const environment = createEnvironment({
+  ({ testRenderer } = create({
     // Set this to true, to see graphql responses.
     logNetwork: false,
     resolvers,
-    initLocalState: (localRecord: RecordProxy) => {
-      localRecord.setValue(0, "authRevision");
+    initLocalState: localRecord => {
       localRecord.setValue("unknown-asset-id", "assetID");
       localRecord.setValue("unknown-comment-id", "commentID");
     },
-  });
-
-  const context: TalkContext = {
-    relayEnvironment: environment,
-    localeBundles: [createFluentBundle()],
-    localStorage: createInMemoryStorage(),
-    sessionStorage: createInMemoryStorage(),
-    rest: new RestClient("http://localhost/api"),
-    postMessage: new PostMessageService(),
-  };
-
-  testRenderer = TestRenderer.create(
-    <TalkContextProvider value={context}>
-      <AppContainer />
-    </TalkContextProvider>,
-    { createNodeMock }
-  );
+  }));
 });
 
 it("renders permalink view with unknown asset", async () => {

src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx

@@ -1,19 +1,10 @@
-import React from "react";
-import TestRenderer, { ReactTestRenderer } from "react-test-renderer";
-import { RecordProxy } from "relay-runtime";
+import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
-import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
-import { PostMessageService } from "talk-framework/lib/postMessage";
-import { RestClient } from "talk-framework/lib/rest";
-import { createInMemoryStorage } from "talk-framework/lib/storage";
 import { createSinonStub } from "talk-framework/testHelpers";
-import AppContainer from "talk-stream/containers/AppContainer";
 
-import createEnvironment from "./createEnvironment";
-import createFluentBundle from "./createFluentBundle";
-import createNodeMock from "./createNodeMock";
+import create from "./create";
 import { assets, comments } from "./fixtures";
 
 let testRenderer: ReactTestRenderer;
@@ -47,32 +38,15 @@ beforeEach(() => {
     },
   };
 
-  const environment = createEnvironment({
+  ({ testRenderer } = create({
     // Set this to true, to see graphql responses.
     logNetwork: false,
     resolvers,
-    initLocalState: (localRecord: RecordProxy) => {
+    initLocalState: localRecord => {
       localRecord.setValue(assetStub.id, "assetID");
       localRecord.setValue("unknown-comment-id", "commentID");
-      localRecord.setValue(0, "authRevision");
     },
-  });
-
-  const context: TalkContext = {
-    relayEnvironment: environment,
-    localeBundles: [createFluentBundle()],
-    localStorage: createInMemoryStorage(),
-    sessionStorage: createInMemoryStorage(),
-    rest: new RestClient("http://localhost/api"),
-    postMessage: new PostMessageService(),
-  };
-
-  testRenderer = TestRenderer.create(
-    <TalkContextProvider value={context}>
-      <AppContainer />
-    </TalkContextProvider>,
-    { createNodeMock }
-  );
+  }));
 });
 
 it("renders permalink view with unknown comment", async () => {

src/core/client/stream/test/postComment.spec.tsx

@@ -1,19 +1,10 @@
-import React from "react";
-import TestRenderer, { ReactTestRenderer } from "react-test-renderer";
-import { RecordProxy } from "relay-runtime";
+import { ReactTestRenderer } from "react-test-renderer";
 import timekeeper from "timekeeper";
 
 import { timeout } from "talk-common/utils";
-import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
-import { PostMessageService } from "talk-framework/lib/postMessage";
-import { RestClient } from "talk-framework/lib/rest";
-import { createInMemoryStorage } from "talk-framework/lib/storage";
 import { createSinonStub } from "talk-framework/testHelpers";
-import AppContainer from "talk-stream/containers/AppContainer";
 
-import createEnvironment from "./createEnvironment";
-import createFluentBundle from "./createFluentBundle";
-import createNodeMock from "./createNodeMock";
+import create from "./create";
 import { assets, users } from "./fixtures";
 
 let testRenderer: ReactTestRenderer;
@@ -57,31 +48,14 @@ beforeEach(() => {
     },
   };
 
-  const environment = createEnvironment({
+  ({ testRenderer } = create({
     // Set this to true, to see graphql responses.
     logNetwork: false,
     resolvers,
-    initLocalState: (localRecord: RecordProxy) => {
+    initLocalState: localRecord => {
       localRecord.setValue(assets[0].id, "assetID");
-      localRecord.setValue(0, "authRevision");
     },
-  });
-
-  const context: TalkContext = {
-    relayEnvironment: environment,
-    localeBundles: [createFluentBundle()],
-    localStorage: createInMemoryStorage(),
-    sessionStorage: createInMemoryStorage(),
-    rest: new RestClient("http://localhost/api"),
-    postMessage: new PostMessageService(),
-  };
-
-  testRenderer = TestRenderer.create(
-    <TalkContextProvider value={context}>
-      <AppContainer />
-    </TalkContextProvider>,
-    { createNodeMock }
-  );
+  }));
 });
 
 it("renders comment stream", async () => {
@@ -91,11 +65,13 @@ it("renders comment stream", async () => {
 });
 
 it("post a comment", async () => {
+  // Wait for loading.
+  await timeout();
   testRenderer.root
     .findByProps({ inputId: "comments-postCommentForm-field" })
     .props.onChange({ html: "<strong>Hello world!</strong>" });
 
-  timekeeper.travel(new Date("2018-07-06T18:24:00.000Z"));
+  timekeeper.freeze(new Date("2018-07-06T18:24:00.000Z"));
   testRenderer.root
     .findByProps({ id: "comments-postCommentForm-form" })
     .props.onSubmit();

src/core/client/stream/test/renderReplies.spec.tsx

@@ -1,18 +1,9 @@
-import React from "react";
-import TestRenderer, { ReactTestRenderer } from "react-test-renderer";
-import { RecordProxy } from "relay-runtime";
+import { ReactTestRenderer } from "react-test-renderer";
 
 import { timeout } from "talk-common/utils";
-import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
-import { PostMessageService } from "talk-framework/lib/postMessage";
-import { RestClient } from "talk-framework/lib/rest";
-import { createInMemoryStorage } from "talk-framework/lib/storage";
 import { createSinonStub } from "talk-framework/testHelpers";
-import AppContainer from "talk-stream/containers/AppContainer";
 
-import createEnvironment from "./createEnvironment";
-import createFluentBundle from "./createFluentBundle";
-import createNodeMock from "./createNodeMock";
+import create from "./create";
 import { assetWithReplies } from "./fixtures";
 
 let testRenderer: ReactTestRenderer;
@@ -29,31 +20,14 @@ beforeEach(() => {
     },
   };
 
-  const environment = createEnvironment({
+  ({ testRenderer } = create({
     // Set this to true, to see graphql responses.
     logNetwork: false,
     resolvers,
-    initLocalState: (localRecord: RecordProxy) => {
+    initLocalState: localRecord => {
       localRecord.setValue(assetWithReplies.id, "assetID");
-      localRecord.setValue(0, "authRevision");
     },
-  });
-
-  const context: TalkContext = {
-    relayEnvironment: environment,
-    localeBundles: [createFluentBundle()],
-    localStorage: createInMemoryStorage(),
-    sessionStorage: createInMemoryStorage(),
-    rest: new RestClient("http://localhost/api"),
-    postMessage: new PostMessageService(),
-  };
-
-  testRenderer = TestRenderer.create(
-    <TalkContextProvider value={context}>
-      <AppContainer />
-    </TalkContextProvider>,
-    { createNodeMock }
-  );
+  }));
 });
 
 it("renders comment stream", async () => {

src/core/client/stream/test/renderStream.spec.tsx

@@ -1,18 +1,9 @@
-import React from "react";
-import TestRenderer, { ReactTestRenderer } from "react-test-renderer";
-import { RecordProxy } from "relay-runtime";
+import { ReactTestRenderer } from "react-test-renderer";
 
 import { timeout } from "talk-common/utils";
-import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
-import { PostMessageService } from "talk-framework/lib/postMessage";
-import { RestClient } from "talk-framework/lib/rest";
-import { createInMemoryStorage } from "talk-framework/lib/storage";
 import { createSinonStub } from "talk-framework/testHelpers";
-import AppContainer from "talk-stream/containers/AppContainer";
 
-import createEnvironment from "./createEnvironment";
-import createFluentBundle from "./createFluentBundle";
-import createNodeMock from "./createNodeMock";
+import create from "./create";
 import { assets } from "./fixtures";
 
 let testRenderer: ReactTestRenderer;
@@ -26,31 +17,14 @@ beforeEach(() => {
     },
   };
 
-  const environment = createEnvironment({
+  ({ testRenderer } = create({
     // Set this to true, to see graphql responses.
     logNetwork: false,
     resolvers,
-    initLocalState: (localRecord: RecordProxy) => {
+    initLocalState: localRecord => {
       localRecord.setValue(assets[0].id, "assetID");
-      localRecord.setValue(0, "authRevision");
     },
-  });
-
-  const context: TalkContext = {
-    relayEnvironment: environment,
-    localeBundles: [createFluentBundle()],
-    localStorage: createInMemoryStorage(),
-    sessionStorage: createInMemoryStorage(),
-    rest: new RestClient("http://localhost/api"),
-    postMessage: new PostMessageService(),
-  };
-
-  testRenderer = TestRenderer.create(
-    <TalkContextProvider value={context}>
-      <AppContainer />
-    </TalkContextProvider>,
-    { createNodeMock }
-  );
+  }));
 });
 
 it("renders comment stream", async () => {

src/core/client/stream/test/showAllReplies.spec.tsx

@@ -1,19 +1,10 @@
-import React from "react";
-import TestRenderer, { ReactTestRenderer } from "react-test-renderer";
-import { RecordProxy } from "relay-runtime";
+import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
-import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
-import { PostMessageService } from "talk-framework/lib/postMessage";
-import { RestClient } from "talk-framework/lib/rest";
-import { createInMemoryStorage } from "talk-framework/lib/storage";
 import { createSinonStub } from "talk-framework/testHelpers";
-import AppContainer from "talk-stream/containers/AppContainer";
 
-import createEnvironment from "./createEnvironment";
-import createFluentBundle from "./createFluentBundle";
-import createNodeMock from "./createNodeMock";
+import create from "./create";
 import { assets, comments } from "./fixtures";
 
 let testRenderer: ReactTestRenderer;
@@ -85,31 +76,14 @@ beforeEach(() => {
     },
   };
 
-  const environment = createEnvironment({
+  ({ testRenderer } = create({
     // Set this to true, to see graphql responses.
     logNetwork: false,
     resolvers,
-    initLocalState: (localRecord: RecordProxy) => {
+    initLocalState: localRecord => {
       localRecord.setValue(assetStub.id, "assetID");
-      localRecord.setValue(0, "authRevision");
     },
-  });
-
-  const context: TalkContext = {
-    relayEnvironment: environment,
-    localeBundles: [createFluentBundle()],
-    localStorage: createInMemoryStorage(),
-    sessionStorage: createInMemoryStorage(),
-    rest: new RestClient("http://localhost/api"),
-    postMessage: new PostMessageService(),
-  };
-
-  testRenderer = TestRenderer.create(
-    <TalkContextProvider value={context}>
-      <AppContainer />
-    </TalkContextProvider>,
-    { createNodeMock }
-  );
+  }));
 });
 
 it("renders comment stream", async () => {