From aa2b70fd8c89a2c9dce2aab92a196b16fabbc8ef Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Mon, 3 Sep 2018 12:16:01 +0200 Subject: [PATCH] Save comment draft + test --- .../framework/lib/bootstrap/TalkContext.tsx | 8 +- .../framework/lib/bootstrap/createContext.tsx | 10 +- .../framework/lib/storage/PymStorage.ts | 18 +++- .../__snapshots__/PymStorage.spec.ts.snap | 11 --- .../client/framework/lib/storage/index.ts | 3 +- .../client/framework/lib/storage/interface.ts | 14 --- .../testHelpers/createFakePymStorage.ts | 21 ++++ .../client/framework/testHelpers/index.ts | 1 + .../stream/components/PostCommentForm.tsx | 8 +- .../__snapshots__/Stream.spec.tsx.snap | 2 +- .../PostCommentFormContainer.spec.tsx | 99 +++++++++++++++++++ .../containers/PostCommentFormContainer.tsx | 67 +++++++++++-- .../PostCommentFormContainer.spec.tsx.snap | 20 ++++ .../stream/local/initLocalState.spec.ts | 20 ++-- .../__snapshots__/postComment.spec.tsx.snap | 6 +- src/core/client/stream/test/create.tsx | 59 +++++++++++ src/core/client/stream/test/loadMore.spec.tsx | 35 +------ .../client/stream/test/permalinkView.spec.tsx | 36 +------ .../test/permalinkViewAssetNotFound.spec.tsx | 36 +------ .../permalinkViewCommentNotFound.spec.tsx | 36 +------ .../client/stream/test/postComment.spec.tsx | 40 ++------ .../client/stream/test/renderReplies.spec.tsx | 36 +------ .../client/stream/test/renderStream.spec.tsx | 36 +------ .../stream/test/showAllReplies.spec.tsx | 36 +------ 24 files changed, 354 insertions(+), 304 deletions(-) delete mode 100644 src/core/client/framework/lib/storage/__snapshots__/PymStorage.spec.ts.snap delete mode 100644 src/core/client/framework/lib/storage/interface.ts create mode 100644 src/core/client/framework/testHelpers/createFakePymStorage.ts create mode 100644 src/core/client/stream/containers/PostCommentFormContainer.spec.tsx create mode 100644 src/core/client/stream/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap create mode 100644 src/core/client/stream/test/create.tsx diff --git a/src/core/client/framework/lib/bootstrap/TalkContext.tsx b/src/core/client/framework/lib/bootstrap/TalkContext.tsx index 5b5880883..81306aadc 100644 --- a/src/core/client/framework/lib/bootstrap/TalkContext.tsx +++ b/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; diff --git a/src/core/client/framework/lib/bootstrap/createContext.tsx b/src/core/client/framework/lib/bootstrap/createContext.tsx index 64241dd5a..3fce90cd3 100644 --- a/src/core/client/framework/lib/bootstrap/createContext.tsx +++ b/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. diff --git a/src/core/client/framework/lib/storage/PymStorage.ts b/src/core/client/framework/lib/storage/PymStorage.ts index 5075e6505..ba53ec827 100644 --- a/src/core/client/framework/lib/storage/PymStorage.ts +++ b/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; + /** + * delete storage[key] + */ + removeItem(key: string): Promise; + /** + * storage[key] = value + */ + setItem(key: string, value: string): Promise; +} 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, diff --git a/src/core/client/framework/lib/storage/__snapshots__/PymStorage.spec.ts.snap b/src/core/client/framework/lib/storage/__snapshots__/PymStorage.spec.ts.snap deleted file mode 100644 index 715a8260a..000000000 --- a/src/core/client/framework/lib/storage/__snapshots__/PymStorage.spec.ts.snap +++ /dev/null @@ -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\\\\\\"}\\"}]"`; diff --git a/src/core/client/framework/lib/storage/index.ts b/src/core/client/framework/lib/storage/index.ts index 82f213a46..e17d10668 100644 --- a/src/core/client/framework/lib/storage/index.ts +++ b/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"; diff --git a/src/core/client/framework/lib/storage/interface.ts b/src/core/client/framework/lib/storage/interface.ts deleted file mode 100644 index 5a3a1b6c8..000000000 --- a/src/core/client/framework/lib/storage/interface.ts +++ /dev/null @@ -1,14 +0,0 @@ -export interface Storage { - /** - * 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; -} diff --git a/src/core/client/framework/testHelpers/createFakePymStorage.ts b/src/core/client/framework/testHelpers/createFakePymStorage.ts new file mode 100644 index 000000000..ad8510dcd --- /dev/null +++ b/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 = {}; + + 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(); +} diff --git a/src/core/client/framework/testHelpers/index.ts b/src/core/client/framework/testHelpers/index.ts index 345e7be68..69e9c5cd0 100644 --- a/src/core/client/framework/testHelpers/index.ts +++ b/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, diff --git a/src/core/client/stream/components/PostCommentForm.tsx b/src/core/client/stream/components/PostCommentForm.tsx index 00f544b86..09d4a1ba6 100644 --- a/src/core/client/stream/components/PostCommentForm.tsx +++ b/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; + onChange?: (state: FormState) => void; + initialValues?: FormProps; } const PostCommentForm: StatelessComponent = props => ( -
+ {({ handleSubmit, submitting }) => ( = props => ( className={styles.root} id="comments-postCommentForm-form" > + {({ input, meta }) => ( diff --git a/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap index 46c215a5b..b022bd1e3 100644 --- a/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap +++ b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap @@ -213,7 +213,7 @@ exports[`when use is logged in renders correctly 1`] = ` - diff --git a/src/core/client/stream/containers/PostCommentFormContainer.spec.tsx b/src/core/client/stream/containers/PostCommentFormContainer.spec.tsx new file mode 100644 index 000000000..53b104b3a --- /dev/null +++ b/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 = { + // tslint:disable-next-line:no-empty + createComment: (() => {}) as any, + assetID: "asset-id", + pymSessionStorage: createFakePymStorage(), + }; + + const wrapper = shallow(); + await timeout(); + wrapper.update(); + expect(wrapper).toMatchSnapshot(); +}); + +it("renders with initialValues", async () => { + const props: PropTypesOf = { + // tslint:disable-next-line:no-empty + createComment: (() => {}) as any, + assetID: "asset-id", + pymSessionStorage: createFakePymStorage(), + }; + + await props.pymSessionStorage.setItem(contextKey, "Hello World!"); + + const wrapper = shallow(); + await timeout(); + wrapper.update(); + expect(wrapper).toMatchSnapshot(); +}); + +it("save values", async () => { + const props: PropTypesOf = { + // tslint:disable-next-line:no-empty + createComment: (() => {}) as any, + assetID: "asset-id", + pymSessionStorage: createFakePymStorage(), + }; + + await props.pymSessionStorage.setItem(contextKey, "Hello World!"); + + const wrapper = shallow(); + 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 = { + // tslint:disable-next-line:no-empty + createComment: createCommentStub, + assetID, + pymSessionStorage: createFakePymStorage(), + }; + + await props.pymSessionStorage.setItem(contextKey, "Hello World!"); + + const wrapper = shallow(); + await timeout(); + wrapper.update(); + wrapper + .first() + .props() + .onSubmit(input, form); + expect( + createCommentStub.calledWith({ + assetID, + ...input, + }) + ).toBeTruthy(); + await timeout(); + formMock.verify(); +}); diff --git a/src/core/client/stream/containers/PostCommentFormContainer.tsx b/src/core/client/stream/containers/PostCommentFormContainer.tsx index 6398025eb..c862ce8ad 100644 --- a/src/core/client/stream/containers/PostCommentFormContainer.tsx +++ b/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 { - private onSubmit: PostCommentFormProps["onSubmit"] = async (input, form) => { +interface State { + initialValues?: PostCommentFormProps["initialValues"]; + initialized: boolean; +} + +const contextKey = "postCommentFormBody"; + +export class PostCommentFormContainer extends Component { + 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 { } 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 ; + if (!this.state.initialized) { + return null; + } + return ( + + ); } } -const enhanced = withCreateCommentMutation(PostCommentFormContainer); +const enhanced = withContext(({ pymSessionStorage }) => ({ + pymSessionStorage, +}))(withCreateCommentMutation(PostCommentFormContainer)); export type PostCommentFormContainerProps = PropTypesOf; export default enhanced; diff --git a/src/core/client/stream/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap new file mode 100644 index 000000000..de1ba17f5 --- /dev/null +++ b/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`] = ` + +`; + +exports[`renders with initialValues 1`] = ` + +`; diff --git a/src/core/client/stream/local/initLocalState.spec.ts b/src/core/client/stream/local/initLocalState.spec.ts index 2d2a3b486..49f090742 100644 --- a/src/core/client/stream/local/initLocalState.spec.ts +++ b/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"); }); diff --git a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap index cb4c00a5c..491f705d3 100644 --- a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap @@ -194,10 +194,10 @@ exports[`post a comment 1`] = `
; + 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( + + + , + { createNodeMock } + ); + + return { context, testRenderer }; +} diff --git a/src/core/client/stream/test/loadMore.spec.tsx b/src/core/client/stream/test/loadMore.spec.tsx index f58a80004..ea72b5510 100644 --- a/src/core/client/stream/test/loadMore.spec.tsx +++ b/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( - - - , - { createNodeMock } - ); + })); }); it("renders comment stream", async () => { diff --git a/src/core/client/stream/test/permalinkView.spec.tsx b/src/core/client/stream/test/permalinkView.spec.tsx index c68d3fde3..438ca2cea 100644 --- a/src/core/client/stream/test/permalinkView.spec.tsx +++ b/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( - - - , - { createNodeMock } - ); + })); }); it("renders permalink view", async () => { diff --git a/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx b/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx index 17b23b670..9d2df883e 100644 --- a/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx +++ b/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( - - - , - { createNodeMock } - ); + })); }); it("renders permalink view with unknown asset", async () => { diff --git a/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx b/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx index f49dc0534..6a7279669 100644 --- a/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx +++ b/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( - - - , - { createNodeMock } - ); + })); }); it("renders permalink view with unknown comment", async () => { diff --git a/src/core/client/stream/test/postComment.spec.tsx b/src/core/client/stream/test/postComment.spec.tsx index 9ddd8b1ec..40c4c4b4d 100644 --- a/src/core/client/stream/test/postComment.spec.tsx +++ b/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( - - - , - { 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: "Hello world!" }); - 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(); diff --git a/src/core/client/stream/test/renderReplies.spec.tsx b/src/core/client/stream/test/renderReplies.spec.tsx index 970d1a31b..b508d78d8 100644 --- a/src/core/client/stream/test/renderReplies.spec.tsx +++ b/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( - - - , - { createNodeMock } - ); + })); }); it("renders comment stream", async () => { diff --git a/src/core/client/stream/test/renderStream.spec.tsx b/src/core/client/stream/test/renderStream.spec.tsx index 3ea0d74c6..131bb678c 100644 --- a/src/core/client/stream/test/renderStream.spec.tsx +++ b/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( - - - , - { createNodeMock } - ); + })); }); it("renders comment stream", async () => { diff --git a/src/core/client/stream/test/showAllReplies.spec.tsx b/src/core/client/stream/test/showAllReplies.spec.tsx index a76aab40d..52d302e55 100644 --- a/src/core/client/stream/test/showAllReplies.spec.tsx +++ b/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( - - - , - { createNodeMock } - ); + })); }); it("renders comment stream", async () => {