From c96112fc8c4b72a69dbc40e65948a8dbf746db0d Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 4 Sep 2018 13:25:52 +0200 Subject: [PATCH] Fix tests --- config/jest/client.config.js | 3 +- config/jest/contentTransform.js | 15 ++ .../framework/lib/bootstrap/withContext.tsx | 22 +- .../testHelpers/createFluentBundle.ts | 31 ++- .../__snapshots__/Comment.spec.tsx.snap | 14 +- .../__snapshots__/TopBar.spec.tsx.snap | 4 +- src/core/client/stream/components/RTE.tsx | 6 +- .../stream/components/ReplyList.spec.tsx | 6 +- .../client/stream/components/Stream.spec.tsx | 18 +- .../__snapshots__/RTE.spec.tsx.snap | 12 +- .../__snapshots__/ReplyList.spec.tsx.snap | 42 +++- .../__snapshots__/Stream.spec.tsx.snap | 112 +++++++++- .../containers/CommentContainer.spec.tsx | 10 +- .../stream/containers/CommentContainer.tsx | 14 +- .../containers/ReplyCommentFormContainer.tsx | 27 ++- .../containers/ReplyListContainer.spec.tsx | 9 + .../CommentContainer.spec.tsx.snap | 62 ++++-- .../ReplyListContainer.spec.tsx.snap | 100 ++++++++- .../StreamContainer.spec.tsx.snap | 88 +++++++- .../stream/mutations/CreateCommentMutation.ts | 50 +++-- .../queries/PermalinkViewQuery.spec.tsx | 1 + .../PermalinkViewQuery.spec.tsx.snap | 1 + .../test/__snapshots__/loadMore.spec.tsx.snap | 122 +++++++++-- .../__snapshots__/permalinkView.spec.tsx.snap | 50 ++++- .../permalinkViewAssetNotFound.spec.tsx.snap | 26 +-- ...permalinkViewCommentNotFound.spec.tsx.snap | 28 ++- .../__snapshots__/postComment.spec.tsx.snap | 194 +++++++++++++++--- .../__snapshots__/renderReplies.spec.tsx.snap | 94 +++++++-- .../__snapshots__/renderStream.spec.tsx.snap | 50 ++++- .../showAllReplies.spec.tsx.snap | 122 +++++++++-- .../ui/components/AriaInfo/AriaInfo.tsx | 4 +- .../client/ui/components/Button/Button.tsx | 4 +- .../ui/components/Button/ButtonIcon.tsx | 2 +- .../client/ui/components/CallOut/CallOut.tsx | 2 +- .../HorizontalGutter/HorizontalGutter.tsx | 2 +- src/core/client/ui/components/Icon/Icon.tsx | 2 +- .../ui/components/TextField/TextField.tsx | 2 +- .../ui/components/Typography/Typography.tsx | 2 +- src/locales/en-US/stream.ftl | 4 + 39 files changed, 1095 insertions(+), 262 deletions(-) create mode 100644 config/jest/contentTransform.js diff --git a/config/jest/client.config.js b/config/jest/client.config.js index 507257368..d5ba3c585 100644 --- a/config/jest/client.config.js +++ b/config/jest/client.config.js @@ -16,6 +16,7 @@ module.exports = { transform: { "^.+\\.tsx?$": "/node_modules/ts-jest", "^.+\\.css$": "/config/jest/cssTransform.js", + "^.+\\.ftl$": "/config/jest/contentTransform.js", "^(?!.*\\.(js|jsx|mjs|ts|tsx|css|json|ftl)$)": "/config/jest/fileTransform.js", }, @@ -30,7 +31,7 @@ module.exports = { "^talk-framework/(.*)$": "/src/core/client/framework/$1", "^talk-common/(.*)$": "/src/core/common/$1", }, - moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"], + moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node", "ftl"], snapshotSerializers: ["enzyme-to-json/serializer"], globals: { "ts-jest": { diff --git a/config/jest/contentTransform.js b/config/jest/contentTransform.js new file mode 100644 index 000000000..8cb718d6c --- /dev/null +++ b/config/jest/contentTransform.js @@ -0,0 +1,15 @@ +"use strict"; + +const path = require("path"); +const fs = require("fs"); +const crypto = require("crypto"); + +// This is a custom Jest transformer that returns the content of a file + +module.exports = { + process(src, filename) { + return `module.exports = ${JSON.stringify( + fs.readFileSync(filename).toString() + )};`; + }, +}; diff --git a/src/core/client/framework/lib/bootstrap/withContext.tsx b/src/core/client/framework/lib/bootstrap/withContext.tsx index 89a0da1d8..677da236a 100644 --- a/src/core/client/framework/lib/bootstrap/withContext.tsx +++ b/src/core/client/framework/lib/bootstrap/withContext.tsx @@ -1,18 +1,12 @@ -import React from "react"; -import { hoistStatics, wrapDisplayName } from "recompose"; +import * as React from "react"; +import { + hoistStatics, + InferableComponentEnhancer, + wrapDisplayName, +} from "recompose"; -import { Omit } from "talk-ui/types"; import { TalkContext, TalkContextConsumer } from "./TalkContext"; -// Injects props and removes them from the prop requirements. -// Will not pass through the injected props if they are passed in during -// render. Also adds new prop requirements from TNeedsProps. -type InferableComponentEnhancerWithProps = < - P extends TInjectedProps ->( - component: React.ComponentType

-) => React.ComponentType>; - /** * withContext is a HOC wrapper around `TalkContextConsumer`. * `propsCallback` must be provided which accepts the `TalkContext` @@ -20,7 +14,7 @@ type InferableComponentEnhancerWithProps = < */ function withContext( propsCallback: (context: TalkContext) => T -): InferableComponentEnhancerWithProps { +): InferableComponentEnhancer { return hoistStatics( (WrappedComponent: React.ComponentType) => { const Component: React.StatelessComponent = props => ( @@ -33,7 +27,7 @@ function withContext( Component.displayName = wrapDisplayName(WrappedComponent, "withContext"); return Component; } - ) as any; + ); } export default withContext; diff --git a/src/core/client/framework/testHelpers/createFluentBundle.ts b/src/core/client/framework/testHelpers/createFluentBundle.ts index a937b2b76..d524576e4 100644 --- a/src/core/client/framework/testHelpers/createFluentBundle.ts +++ b/src/core/client/framework/testHelpers/createFluentBundle.ts @@ -5,6 +5,31 @@ import path from "path"; // These locale prefixes are always loaded. const commonPrefixes = ["common", "framework"]; +function decorateErrorWhenMissing(bundle: FluentBundle) { + const originalHasMessage = bundle.hasMessage; + const originalGetMessage = bundle.getMessage; + const missing: string[] = []; + bundle.hasMessage = (id: string) => { + const result = originalHasMessage.apply(bundle, [id]); + if (!result) { + const msg = `${bundle.locales} translation for key "${id}" not found`; + // tslint:disable-next-line:no-console + console.error(msg); + missing.push(id); + } + // Even if it is missing, we say it is available and later return a descriptive error + // string as the translation. + return true; + }; + bundle.getMessage = (id: string) => { + if (missing.indexOf(id) !== -1) { + return `Missing translation "${id}"`; + } + return originalGetMessage.apply(bundle, [id]); + }; + return bundle; +} + function createFluentBundle( target: string, pathToLocale: string @@ -15,13 +40,11 @@ function createFluentBundle( files.forEach(f => { prefixes.forEach(prefix => { if (f.startsWith(prefix)) { - bundle.addMessages( - fs.readFileSync(path.resolve(pathToLocale, f)).toString() - ); + bundle.addMessages(require(path.resolve(pathToLocale, f))); } }); }); - return bundle; + return decorateErrorWhenMissing(bundle); } export default createFluentBundle; 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 02ad016ad..246444f0d 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 @@ -5,7 +5,9 @@ exports[`renders username and body 1`] = ` className="Comment-root" role="article" > - + Marvin @@ -16,12 +18,10 @@ exports[`renders username and body 1`] = ` Woof -

- -
+ direction="row" + itemGutter="half" + /> `; diff --git a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap index 9ce1f79c5..bda33e1dd 100644 --- a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap +++ b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap @@ -2,7 +2,7 @@ exports[`renders correctly on big screens 1`] = `
Hello World @@ -12,7 +12,7 @@ exports[`renders correctly on big screens 1`] = ` exports[`renders correctly on small screens 1`] = `
Hello World diff --git a/src/core/client/stream/components/RTE.tsx b/src/core/client/stream/components/RTE.tsx index ad686ebdc..81b371a35 100644 --- a/src/core/client/stream/components/RTE.tsx +++ b/src/core/client/stream/components/RTE.tsx @@ -53,12 +53,12 @@ export interface RTEProps { const features = [ - format_bold + format_bold , - format_italic + format_italic ,
- format_quote + format_quote
, ]; diff --git a/src/core/client/stream/components/ReplyList.spec.tsx b/src/core/client/stream/components/ReplyList.spec.tsx index 04038673f..9d214aaed 100644 --- a/src/core/client/stream/components/ReplyList.spec.tsx +++ b/src/core/client/stream/components/ReplyList.spec.tsx @@ -12,7 +12,8 @@ const ReplyListN = removeFragmentRefs(ReplyList); it("renders correctly", () => { const props: PropTypesOf = { - commentID: "comment-id", + asset: { id: "asset-id" }, + comment: { id: "comment-id" }, comments: [{ id: "comment-1" }, { id: "comment-2" }], onShowAll: noop, hasMore: false, @@ -24,7 +25,8 @@ it("renders correctly", () => { describe("when there is more", () => { const props: PropTypesOf = { - commentID: "comment-id", + asset: { id: "asset-id" }, + comment: { id: "comment-id" }, comments: [{ id: "comment-1" }, { id: "comment-2" }], onShowAll: sinon.spy(), hasMore: true, diff --git a/src/core/client/stream/components/Stream.spec.tsx b/src/core/client/stream/components/Stream.spec.tsx index ff327d798..3115eb6e7 100644 --- a/src/core/client/stream/components/Stream.spec.tsx +++ b/src/core/client/stream/components/Stream.spec.tsx @@ -12,8 +12,10 @@ const StreamN = removeFragmentRefs(Stream); it("renders correctly", () => { const props: PropTypesOf = { - assetID: "asset-id", - isClosed: false, + asset: { + id: "asset-id", + isClosed: false, + }, comments: [{ id: "comment-1" }, { id: "comment-2" }], onLoadMore: noop, disableLoadMore: false, @@ -27,8 +29,10 @@ it("renders correctly", () => { describe("when use is logged in", () => { it("renders correctly", () => { const props: PropTypesOf = { - assetID: "asset-id", - isClosed: false, + asset: { + id: "asset-id", + isClosed: false, + }, comments: [{ id: "comment-1" }, { id: "comment-2" }], onLoadMore: noop, disableLoadMore: false, @@ -42,8 +46,10 @@ describe("when use is logged in", () => { describe("when there is more", () => { const props: PropTypesOf = { - assetID: "asset-id", - isClosed: false, + asset: { + id: "asset-id", + isClosed: false, + }, comments: [{ id: "comment-1" }, { id: "comment-2" }], onLoadMore: sinon.spy(), disableLoadMore: false, diff --git a/src/core/client/stream/components/__snapshots__/RTE.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/RTE.spec.tsx.snap index cc39de98a..322439aab 100644 --- a/src/core/client/stream/components/__snapshots__/RTE.spec.tsx.snap +++ b/src/core/client/stream/components/__snapshots__/RTE.spec.tsx.snap @@ -18,7 +18,9 @@ exports[`renders correctly 1`] = ` id="comments-rte-bold" > - + format_bold @@ -32,7 +34,9 @@ exports[`renders correctly 1`] = ` id="comments-rte-italic" > - + format_italic @@ -46,7 +50,9 @@ exports[`renders correctly 1`] = ` id="comments-rte-blockquote" > - + format_quote diff --git a/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap index 8e8929149..60efc9399 100644 --- a/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap +++ b/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap @@ -7,7 +7,12 @@ exports[`renders correctly 1`] = ` role="log" > { const props: PropTypesOf = { - data: { + asset: { + id: "asset-id", + }, + comment: { id: "comment-id", author: { username: "Marvin", @@ -27,7 +30,10 @@ it("renders username and body", () => { it("renders body only", () => { const props: PropTypesOf = { - data: { + asset: { + id: "asset-id", + }, + comment: { id: "comment-id", author: { username: null, diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx index 24476cd1a..cc42c6304 100644 --- a/src/core/client/stream/containers/CommentContainer.tsx +++ b/src/core/client/stream/containers/CommentContainer.tsx @@ -25,9 +25,15 @@ export class CommentContainer extends Component { showReplyDialog: false, }; - private toggleReplyDialog = () => { + private openReplyDialog = () => { this.setState(state => ({ - showReplyDialog: !state.showReplyDialog, + showReplyDialog: true, + })); + }; + + private closeReplyDialog = () => { + this.setState(state => ({ + showReplyDialog: false, })); }; @@ -42,7 +48,7 @@ export class CommentContainer extends Component { footer={ <> @@ -53,7 +59,7 @@ export class CommentContainer extends Component { )} diff --git a/src/core/client/stream/containers/ReplyCommentFormContainer.tsx b/src/core/client/stream/containers/ReplyCommentFormContainer.tsx index 6cffcaa2a..0e376226e 100644 --- a/src/core/client/stream/containers/ReplyCommentFormContainer.tsx +++ b/src/core/client/stream/containers/ReplyCommentFormContainer.tsx @@ -1,4 +1,4 @@ -import React, { Component, EventHandler, MouseEvent } from "react"; +import React, { Component } from "react"; import { graphql } from "react-relay"; import { withContext } from "talk-framework/lib/bootstrap"; @@ -19,7 +19,7 @@ interface InnerProps { pymSessionStorage: PymStorage; comment: CommentData; asset: AssetData; - onCancel?: EventHandler>; + onClose?: () => void; } interface State { @@ -27,10 +27,9 @@ interface State { initialized: boolean; } -const contextKey = "postCommentFormBody"; - export class ReplyCommentFormContainer extends Component { public state: State = { initialized: false }; + private contextKey = `replyCommentFormBody-${this.props.comment.id}`; constructor(props: InnerProps) { super(props); @@ -38,7 +37,7 @@ export class ReplyCommentFormContainer extends Component { } private async init() { - const body = await this.props.pymSessionStorage.getItem(contextKey); + const body = await this.props.pymSessionStorage.getItem(this.contextKey); if (body) { this.setState({ initialValues: { @@ -51,6 +50,13 @@ export class ReplyCommentFormContainer extends Component { }); } + private handleOnCancel = () => { + this.props.pymSessionStorage.removeItem(this.contextKey); + if (this.props.onClose) { + this.props.onClose(); + } + }; + private handleOnSubmit: ReplyCommentFormProps["onSubmit"] = async ( input, form @@ -58,9 +64,13 @@ export class ReplyCommentFormContainer extends Component { try { await this.props.createComment({ assetID: this.props.asset.id, + parentID: this.props.comment.id, ...input, }); - form.reset({}); + this.props.pymSessionStorage.removeItem(this.contextKey); + if (this.props.onClose) { + this.props.onClose(); + } } catch (error) { if (error instanceof BadUserInputError) { return error.invalidArgsLocalized; @@ -73,9 +83,9 @@ export class ReplyCommentFormContainer extends Component { private handleOnChange: ReplyCommentFormProps["onChange"] = state => { if (state.values.body) { - this.props.pymSessionStorage.setItem(contextKey, state.values.body); + this.props.pymSessionStorage.setItem(this.contextKey, state.values.body); } else { - this.props.pymSessionStorage.removeItem(contextKey); + this.props.pymSessionStorage.removeItem(this.contextKey); } }; @@ -88,6 +98,7 @@ export class ReplyCommentFormContainer extends Component { onSubmit={this.handleOnSubmit} onChange={this.handleOnChange} initialValues={this.state.initialValues} + onCancel={this.handleOnCancel} /> ); } diff --git a/src/core/client/stream/containers/ReplyListContainer.spec.tsx b/src/core/client/stream/containers/ReplyListContainer.spec.tsx index 9096f3614..8b13c0ec4 100644 --- a/src/core/client/stream/containers/ReplyListContainer.spec.tsx +++ b/src/core/client/stream/containers/ReplyListContainer.spec.tsx @@ -13,6 +13,9 @@ const ReplyListContainerN = removeFragmentRefs(ReplyListContainer); it("renders correctly", () => { const props: PropTypesOf = { + asset: { + id: "asset-id", + }, comment: { id: "comment-id", replies: { @@ -30,6 +33,9 @@ it("renders correctly", () => { it("renders correctly when replies are null", () => { const props: PropTypesOf = { + asset: { + id: "asset-id", + }, comment: { id: "comment-id", replies: null, @@ -46,6 +52,9 @@ it("renders correctly when replies are null", () => { describe("when has more replies", () => { let finishLoading: ((error?: Error) => void) | null = null; const props: PropTypesOf = { + asset: { + id: "asset-id", + }, comment: { id: "comment-id", replies: { diff --git a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap index fdf0b47f0..91b9bbb01 100644 --- a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap +++ b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap @@ -1,27 +1,53 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders body only 1`] = ` - + + body="Woof" + createdAt="1995-12-17T03:24:00.000Z" + footer={ + + + + + } + id="comment-id" + /> + `; exports[`renders username and body 1`] = ` - + + body="Woof" + createdAt="1995-12-17T03:24:00.000Z" + footer={ + + + + + } + id="comment-id" + /> + `; diff --git a/src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap index 52aa9c57b..9abc32ecc 100644 --- a/src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap +++ b/src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap @@ -2,7 +2,30 @@ exports[`renders correctly 1`] = ` @@ -22,7 +40,26 @@ exports[`renders correctly 1`] = ` exports[`when has more comments renders hasMore 1`] = ` @@ -43,7 +79,26 @@ exports[`when has more comments renders hasMore 1`] = ` exports[`when has more comments when loading more disables load more button 1`] = ` @@ -64,7 +118,26 @@ exports[`when has more comments when loading more disables load more button 1`] exports[`when has more comments when loading more enable load more button after loading is done 1`] = ` diff --git a/src/core/client/stream/mutations/CreateCommentMutation.ts b/src/core/client/stream/mutations/CreateCommentMutation.ts index 5d6d04556..95c874ff7 100644 --- a/src/core/client/stream/mutations/CreateCommentMutation.ts +++ b/src/core/client/stream/mutations/CreateCommentMutation.ts @@ -1,5 +1,5 @@ import { graphql } from "react-relay"; -import { Environment } from "relay-runtime"; +import { Environment, RelayMutationConfig } from "relay-runtime"; import uuid from "uuid/v4"; import { getMe } from "talk-framework/helpers"; @@ -38,6 +38,39 @@ const mutation = graphql` let clientMutationId = 0; +function getConfig(input: CreateCommentInput): RelayMutationConfig[] { + if (!input.parentID) { + return [ + { + type: "RANGE_ADD", + connectionInfo: [ + { + key: "Stream_comments", + rangeBehavior: "prepend", + filters: { orderBy: "CREATED_AT_DESC" }, + }, + ], + parentID: input.assetID, + edgeName: "edge", + }, + ]; + } + return [ + { + type: "RANGE_ADD", + connectionInfo: [ + { + key: "ReplyList_replies", + rangeBehavior: "append", + filters: { orderBy: "CREATED_AT_ASC" }, + }, + ], + parentID: input.parentID, + edgeName: "edge", + }, + ]; +} + function commit(environment: Environment, input: CreateCommentInput) { const me = getMe(environment)!; const currentDate = new Date().toISOString(); @@ -66,20 +99,7 @@ function commit(environment: Environment, input: CreateCommentInput) { clientMutationId: (clientMutationId++).toString(), }, }, - configs: [ - { - type: "RANGE_ADD", - connectionInfo: [ - { - key: "Stream_comments", - rangeBehavior: "prepend", - filters: { orderBy: "CREATED_AT_DESC" }, - }, - ], - parentID: input.assetID, - edgeName: "edge", - }, - ], + configs: getConfig(input), }); } diff --git a/src/core/client/stream/queries/PermalinkViewQuery.spec.tsx b/src/core/client/stream/queries/PermalinkViewQuery.spec.tsx index b29ed668e..01b91218a 100644 --- a/src/core/client/stream/queries/PermalinkViewQuery.spec.tsx +++ b/src/core/client/stream/queries/PermalinkViewQuery.spec.tsx @@ -6,6 +6,7 @@ import { render } from "./PermalinkViewQuery"; it("renders permalink view container", () => { const data = { props: { + asset: {}, comment: {}, } as any, error: null, diff --git a/src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap b/src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap index b7d371bd9..c25801800 100644 --- a/src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap +++ b/src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap @@ -10,6 +10,7 @@ exports[`renders loading 1`] = ``; exports[`renders permalink view container 1`] = ` `; diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap index 82c6ceccb..955e252f0 100644 --- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap @@ -62,7 +62,7 @@ exports[`loads more comments 1`] = ` > @@ -76,7 +76,7 @@ exports[`loads more comments 1`] = ` > @@ -90,7 +90,7 @@ exports[`loads more comments 1`] = ` > @@ -153,7 +153,7 @@ exports[`loads more comments 1`] = ` role="article" >
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
@@ -320,7 +368,7 @@ exports[`renders comment stream 1`] = ` > @@ -334,7 +382,7 @@ exports[`renders comment stream 1`] = ` > @@ -348,7 +396,7 @@ exports[`renders comment stream 1`] = ` > @@ -411,7 +459,7 @@ exports[`renders comment stream 1`] = ` role="article" >
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
+
@@ -121,7 +137,7 @@ exports[`show all comments 1`] = ` > @@ -135,7 +151,7 @@ exports[`show all comments 1`] = ` > @@ -149,7 +165,7 @@ exports[`show all comments 1`] = ` > @@ -212,7 +228,7 @@ exports[`show all comments 1`] = ` role="article" >
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap index cfaa83d0e..b7f4fc521 100644 --- a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap @@ -4,30 +4,8 @@ exports[`renders permalink view with unknown asset 1`] = `
-
- - Show all comments - -

- Comment not found -

+
+ Asset not found
`; diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap index 62871c5d1..a383774e9 100644 --- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap @@ -94,7 +94,7 @@ exports[`show all comments 1`] = ` > @@ -108,7 +108,7 @@ exports[`show all comments 1`] = ` > @@ -122,7 +122,7 @@ exports[`show all comments 1`] = ` > @@ -185,7 +185,7 @@ exports[`show all comments 1`] = ` role="article" >
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
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 491f705d3..ee81cb4e7 100644 --- a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap @@ -81,7 +81,7 @@ exports[`post a comment 1`] = ` > @@ -95,7 +95,7 @@ exports[`post a comment 1`] = ` > @@ -109,7 +109,7 @@ exports[`post a comment 1`] = ` > @@ -185,7 +185,7 @@ exports[`post a comment 1`] = ` role="article" >
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
@@ -371,7 +419,7 @@ exports[`post a comment 2`] = ` > @@ -385,7 +433,7 @@ exports[`post a comment 2`] = ` > @@ -399,7 +447,7 @@ exports[`post a comment 2`] = ` > @@ -481,7 +529,7 @@ exports[`post a comment 2`] = ` role="article" >
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
@@ -667,7 +763,7 @@ exports[`renders comment stream 1`] = ` > @@ -681,7 +777,7 @@ exports[`renders comment stream 1`] = ` > @@ -695,7 +791,7 @@ exports[`renders comment stream 1`] = ` > @@ -777,7 +873,7 @@ exports[`renders comment stream 1`] = ` role="article" >
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap index 56c8f0963..2ebca65ec 100644 --- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap @@ -62,7 +62,7 @@ exports[`renders comment stream 1`] = ` > @@ -76,7 +76,7 @@ exports[`renders comment stream 1`] = ` > @@ -90,7 +90,7 @@ exports[`renders comment stream 1`] = ` > @@ -153,7 +153,7 @@ exports[`renders comment stream 1`] = ` role="article" >
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap index 65c26f837..36ae77216 100644 --- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap @@ -62,7 +62,7 @@ exports[`renders comment stream 1`] = ` > @@ -76,7 +76,7 @@ exports[`renders comment stream 1`] = ` > @@ -90,7 +90,7 @@ exports[`renders comment stream 1`] = ` > @@ -153,7 +153,7 @@ exports[`renders comment stream 1`] = ` role="article" >
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap index cfb9bbaa1..bb44e5208 100644 --- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap @@ -62,7 +62,7 @@ exports[`renders comment stream 1`] = ` > @@ -76,7 +76,7 @@ exports[`renders comment stream 1`] = ` > @@ -90,7 +90,7 @@ exports[`renders comment stream 1`] = ` > @@ -153,7 +153,7 @@ exports[`renders comment stream 1`] = ` role="article" >
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
+
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
+ className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow" + > + +
diff --git a/src/core/client/ui/components/AriaInfo/AriaInfo.tsx b/src/core/client/ui/components/AriaInfo/AriaInfo.tsx index 45dbcd598..fc88b0e03 100644 --- a/src/core/client/ui/components/AriaInfo/AriaInfo.tsx +++ b/src/core/client/ui/components/AriaInfo/AriaInfo.tsx @@ -1,5 +1,5 @@ import cn from "classnames"; -import React, { AllHTMLAttributes, StatelessComponent } from "react"; +import React, { AllHTMLAttributes, Ref, StatelessComponent } from "react"; import { withForwardRef, withStyles } from "talk-ui/hocs"; import { PropTypesOf } from "talk-ui/types"; @@ -14,6 +14,8 @@ interface InnerProps extends AllHTMLAttributes { classes: typeof styles; component?: string; children: React.ReactNode; + /** Internal: Forwarded Ref */ + forwardRef?: Ref; } const AriaInfo: StatelessComponent = props => { diff --git a/src/core/client/ui/components/Button/Button.tsx b/src/core/client/ui/components/Button/Button.tsx index 424b8bbe5..fe2a8aa4a 100644 --- a/src/core/client/ui/components/Button/Button.tsx +++ b/src/core/client/ui/components/Button/Button.tsx @@ -1,6 +1,6 @@ import cn from "classnames"; import { pick } from "lodash"; -import React, { ButtonHTMLAttributes, Ref } from "react"; +import React, { Ref } from "react"; import { withForwardRef, withStyles } from "talk-ui/hocs"; import { PropTypesOf } from "talk-ui/types"; @@ -10,7 +10,7 @@ import * as styles from "./Button.css"; // This should extend from BaseButton instead but we can't because of this bug // TODO: add bug link. -interface InnerProps extends ButtonHTMLAttributes { +interface InnerProps extends BaseButtonProps { /** If set renders an anchor tag instead */ anchor?: boolean; href?: string; diff --git a/src/core/client/ui/components/Button/ButtonIcon.tsx b/src/core/client/ui/components/Button/ButtonIcon.tsx index 963808a7b..90660c1aa 100644 --- a/src/core/client/ui/components/Button/ButtonIcon.tsx +++ b/src/core/client/ui/components/Button/ButtonIcon.tsx @@ -31,7 +31,7 @@ export const ButtonIcon: StatelessComponent = props => { ButtonIcon.defaultProps = { size: "sm", -}; +} as Partial; const enhanced = withForwardRef(withStyles(styles)(ButtonIcon)); export type ButtonIconProps = PropTypesOf; diff --git a/src/core/client/ui/components/CallOut/CallOut.tsx b/src/core/client/ui/components/CallOut/CallOut.tsx index 11eccff2c..5124b3197 100644 --- a/src/core/client/ui/components/CallOut/CallOut.tsx +++ b/src/core/client/ui/components/CallOut/CallOut.tsx @@ -51,7 +51,7 @@ const CallOut: StatelessComponent = props => { CallOut.defaultProps = { color: "regular", fullWidth: false, -}; +} as Partial; const enhanced = withStyles(styles)(CallOut); export default enhanced; diff --git a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx index 5594bd415..408dfb568 100644 --- a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx +++ b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx @@ -30,7 +30,7 @@ const HorizontalGutter: StatelessComponent = props => { HorizontalGutter.defaultProps = { size: "full", -}; +} as Partial; const enhanced = withForwardRef(withStyles(styles)(HorizontalGutter)); export type HorizontalGutterProps = PropTypesOf; diff --git a/src/core/client/ui/components/Icon/Icon.tsx b/src/core/client/ui/components/Icon/Icon.tsx index 26f33ee22..3baae6c27 100644 --- a/src/core/client/ui/components/Icon/Icon.tsx +++ b/src/core/client/ui/components/Icon/Icon.tsx @@ -37,7 +37,7 @@ const Icon: StatelessComponent = props => { Icon.defaultProps = { size: "sm", -}; +} as Partial; const enhanced = withForwardRef(withStyles(styles)(Icon)); export type IconProps = PropTypesOf; diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx index 2e4fe448b..767c379a6 100644 --- a/src/core/client/ui/components/TextField/TextField.tsx +++ b/src/core/client/ui/components/TextField/TextField.tsx @@ -89,7 +89,7 @@ TextField.defaultProps = { color: "regular", placeholder: "", type: "text", -}; +} as Partial; const enhanced = withStyles(styles)(TextField); export default enhanced; diff --git a/src/core/client/ui/components/Typography/Typography.tsx b/src/core/client/ui/components/Typography/Typography.tsx index a6912f04c..2c4a20d94 100644 --- a/src/core/client/ui/components/Typography/Typography.tsx +++ b/src/core/client/ui/components/Typography/Typography.tsx @@ -151,7 +151,7 @@ Typography.defaultProps = { noWrap: false, paragraph: false, variant: "bodyCopy", -}; +} as Partial; const enhanced = withForwardRef(withStyles(styles)(Typography)); export type TypographyProps = PropTypesOf; diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl index 009c52e99..9d2986d97 100644 --- a/src/locales/en-US/stream.ftl +++ b/src/locales/en-US/stream.ftl @@ -44,3 +44,7 @@ comments-postCommentForm-rte = comments-postCommentFormFake-rte = .placeholder = { comments-postCommentForm-rteLabel } + +comments-replyButton-reply = Reply + +comments-permalinkViewQuery-assetNotFound = { comments-streamQuery-assetNotFound }