Move uuid generation to TalkContext

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

@@ -0,0 +1,57 @@
+import { IResolvers } from "graphql-tools";
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { Environment, RecordProxy, RecordSourceProxy } from "relay-runtime";
+
+import AppContainer from "talk-auth/containers/AppContainer";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+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 createEnvironment from "./createEnvironment";
+import createFluentBundle from "./createFluentBundle";
+
+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: createPromisifiedStorage(),
+    sessionStorage: createPromisifiedStorage(),
+    rest: new RestClient("http://localhost/api"),
+    postMessage: new PostMessageService(),
+    browserInfo: { ios: false },
+    uuidGenerator: createUUIDGenerator(),
+  };
+
+  const testRenderer = TestRenderer.create(
+    <TalkContextProvider value={context}>
+      <AppContainer />
+    </TalkContextProvider>
+  );
+
+  return { context, testRenderer };
+}

src/core/client/auth/test/signIn.spec.tsx

@@ -1,20 +1,10 @@
-import React from "react";
-import TestRenderer, {
-  ReactTestInstance,
-  ReactTestRenderer,
-} from "react-test-renderer";
-import { RecordProxy } from "relay-runtime";
+import { ReactTestInstance, ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
-import AppContainer from "talk-auth/containers/AppContainer";
 import { animationFrame, 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 { createPromisifiedStorage } from "talk-framework/lib/storage";
+import { TalkContext } from "talk-framework/lib/bootstrap";
 
-import createEnvironment from "./createEnvironment";
-import createFluentBundle from "./createFluentBundle";
+import create from "./create";
 
 const inputPredicate = (name: string) => (n: ReactTestInstance) => {
   return n.props.name === name && n.props.onChange;
@@ -24,27 +14,13 @@ let context: TalkContext;
 let testRenderer: ReactTestRenderer;
 let form: ReactTestInstance;
 beforeEach(() => {
-  const environment = createEnvironment({
-    initLocalState: (localRecord: RecordProxy) => {
+  ({ testRenderer, context } = create({
+    // Set this to true, to see graphql responses.
+    logNetwork: false,
+    initLocalState: localRecord => {
       localRecord.setValue("SIGN_IN", "view");
     },
-  });
-
-  context = {
-    relayEnvironment: environment,
-    localeBundles: [createFluentBundle()],
-    localStorage: createPromisifiedStorage(),
-    sessionStorage: createPromisifiedStorage(),
-    rest: new RestClient("http://localhost/api"),
-    postMessage: new PostMessageService(),
-    browserInfo: { ios: false },
-  };
-
-  testRenderer = TestRenderer.create(
-    <TalkContextProvider value={context}>
-      <AppContainer />
-    </TalkContextProvider>
-  );
+  }));
   form = testRenderer.root.findByType("form");
 });
 

src/core/client/auth/test/signUp.spec.tsx

@@ -1,20 +1,10 @@
-import React from "react";
-import TestRenderer, {
-  ReactTestInstance,
-  ReactTestRenderer,
-} from "react-test-renderer";
-import { RecordProxy } from "relay-runtime";
+import { ReactTestInstance, ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
-import AppContainer from "talk-auth/containers/AppContainer";
 import { animationFrame, 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 { createPromisifiedStorage } from "talk-framework/lib/storage";
+import { TalkContext } from "talk-framework/lib/bootstrap";
 
-import createEnvironment from "./createEnvironment";
-import createFluentBundle from "./createFluentBundle";
+import create from "./create";
 
 const inputPredicate = (name: string) => (n: ReactTestInstance) => {
   return n.props.name === name && n.props.onChange;
@@ -24,28 +14,13 @@ let context: TalkContext;
 let testRenderer: ReactTestRenderer;
 let form: ReactTestInstance;
 beforeEach(() => {
-  const environment = createEnvironment({
-    initLocalState: (localRecord: RecordProxy) => {
+  ({ testRenderer, context } = create({
+    // Set this to true, to see graphql responses.
+    logNetwork: false,
+    initLocalState: localRecord => {
       localRecord.setValue("SIGN_UP", "view");
     },
-  });
-
-  context = {
-    relayEnvironment: environment,
-    localeBundles: [createFluentBundle()],
-    localStorage: createPromisifiedStorage(),
-    sessionStorage: createPromisifiedStorage(),
-    rest: new RestClient("http://localhost/api"),
-    postMessage: new PostMessageService(),
-    browserInfo: { ios: false },
-  };
-
-  testRenderer = TestRenderer.create(
-    <TalkContextProvider value={context}>
-      <AppContainer />
-    </TalkContextProvider>
-  );
-
+  }));
   form = testRenderer.root.findByType("form");
 });
 

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

@@ -49,6 +49,9 @@ export interface TalkContext {
 
   /** Browser detection. */
   browserInfo: BrowserInfo;
+
+  /** Generates uuids. */
+  uuidGenerator: () => string;
 }
 
 const { Provider, Consumer } = React.createContext<TalkContext>({} as any);

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

@@ -0,0 +1,4 @@
+export default function createUUIDGenerator() {
+  let counter = 0;
+  return () => `uuid-${counter++}`;
+}

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

@@ -8,3 +8,4 @@ export {
   default as removeFragmentRefs,
   NoFragmentRefs,
 } from "./removeFragmentRefs";
+export { default as createUUIDGenerator } from "./createUUIDGenerator";

src/core/client/stream/mutations/CreateCommentMutation.ts

@@ -1,8 +1,8 @@
 import { graphql } from "react-relay";
 import { Environment, RelayMutationConfig } from "relay-runtime";
-import uuid from "uuid/v4";
 
 import { getMe } from "talk-framework/helpers";
+import { TalkContext } from "talk-framework/lib/bootstrap";
 import {
   commitMutationPromiseNormalized,
   createMutationContainer,
@@ -65,7 +65,11 @@ function getConfig(input: CreateCommentInput): RelayMutationConfig[] {
   ];
 }
 
-function commit(environment: Environment, input: CreateCommentInput) {
+function commit(
+  environment: Environment,
+  input: CreateCommentInput,
+  { uuidGenerator }: TalkContext
+) {
   const me = getMe(environment)!;
   const currentDate = new Date().toISOString();
   return commitMutationPromiseNormalized<MutationTypes>(environment, {
@@ -81,7 +85,7 @@ function commit(environment: Environment, input: CreateCommentInput) {
         edge: {
           cursor: currentDate,
           node: {
-            id: uuid(),
+            id: uuidGenerator(),
             createdAt: currentDate,
             author: {
               id: me.id,

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

@@ -213,7 +213,7 @@ exports[`post a comment: optimistic response 1`] = `
           >
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-optimistic"
+              id="comments-commentContainer-replyButton-uuid-0"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}

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

@@ -816,7 +816,7 @@ exports[`post a reply: optimistic response 1`] = `
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-optimistic"
+                  id="comments-commentContainer-replyButton-uuid-0"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}

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

@@ -8,6 +8,7 @@ import { PostMessageService } from "talk-framework/lib/postMessage";
 import { RestClient } from "talk-framework/lib/rest";
 import { createPromisifiedStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
+import { createUUIDGenerator } from "talk-framework/testHelpers";
 
 import createEnvironment from "./createEnvironment";
 import createFluentBundle from "./createFluentBundle";
@@ -44,6 +45,7 @@ export default function create(params: CreateParams) {
     rest: new RestClient("http://localhost/api"),
     postMessage: new PostMessageService(),
     browserInfo: { ios: false },
+    uuidGenerator: createUUIDGenerator(),
   };
 
   const testRenderer = TestRenderer.create(

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

@@ -1,16 +1,12 @@
 import { ReactTestRenderer } from "react-test-renderer";
 import timekeeper from "timekeeper";
-import uuid from "uuid/v4";
 
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
-import { UUIDMock } from "talk-test/mocks";
 
 import create from "./create";
 import { assets, users } from "./fixtures";
 
-const uuidMock = uuid as UUIDMock;
-
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
   const resolvers = {
@@ -70,9 +66,6 @@ it("renders comment stream", async () => {
 });
 
 it("post a comment", async () => {
-  // set next UUID of the optimistic response.
-  uuidMock.setMockData(["comment-optimistic"]);
-
   // Wait for loading.
   await timeout();
   testRenderer.root

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

@@ -1,16 +1,12 @@
 import { ReactTestRenderer } from "react-test-renderer";
 import timekeeper from "timekeeper";
-import uuid from "uuid/v4";
 
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
-import { UUIDMock } from "talk-test/mocks";
 
 import create from "./create";
 import { assets, users } from "./fixtures";
 
-const uuidMock = uuid as UUIDMock;
-
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
   const resolvers = {
@@ -74,9 +70,6 @@ it("renders comment stream", async () => {
 });
 
 it("post a reply", async () => {
-  // set next UUID of the optimistic response.
-  uuidMock.setMockData(["comment-optimistic"]);
-
   // Wait for loading.
   await timeout();
 

src/core/client/test/mocks.ts

@@ -19,20 +19,4 @@ function mockReact() {
   };
 }
 
-export interface UUIDMock {
-  (): string;
-  setMockData(mockData: string[]): void;
-}
-
-function mockUUID(): UUIDMock {
-  const originalUUID = require.requireActual("uuid/v4");
-  let mockData: string[] = [];
-  const uuid: UUIDMock = (() => {
-    return (mockData.length && mockData.splice(0, 1)[0]) || originalUUID();
-  }) as any;
-  uuid.setMockData = (nextMockData: string[]) => (mockData = nextMockData);
-  return uuid;
-}
-
 jest.mock("react", () => mockReact());
-jest.mock("uuid/v4", () => mockUUID());