wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-09 06:07:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix tests

Browse Source
This commit is contained in:
Chi Vinh Le
2018-09-04 13:25:52 +02:00
parent 31bc5fa913
commit c96112fc8c
39 changed files with 1095 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/jest/client.config.js
+2 -1
View File
@@ -16,6 +16,7 @@ module.exports = {
transform: {
"^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^.+\\.ftl$": "<rootDir>/config/jest/contentTransform.js",
"^(?!.*\\.(js|jsx|mjs|ts|tsx|css|json|ftl)$)":
"<rootDir>/config/jest/fileTransform.js",
},
@@ -30,7 +31,7 @@ module.exports = {
"^talk-framework/(.*)$": "<rootDir>/src/core/client/framework/$1",
"^talk-common/(.*)$": "<rootDir>/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": {
config/jest/contentTransform.js
+15
View File
@@ -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()
)};`;
},
};
src/core/client/framework/lib/bootstrap/withContext.tsx
+8 -14
View File
@@ -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<TInjectedProps> = <
P extends TInjectedProps
>(
component: React.ComponentType<P>
) => React.ComponentType<Omit<P, keyof TInjectedProps>>;
/**
* withContext is a HOC wrapper around `TalkContextConsumer`.
* `propsCallback` must be provided which accepts the `TalkContext`
@@ -20,7 +14,7 @@ type InferableComponentEnhancerWithProps<TInjectedProps> = <
*/
function withContext<T>(
propsCallback: (context: TalkContext) => T
): InferableComponentEnhancerWithProps<T> {
): InferableComponentEnhancer<T> {
return hoistStatics<T>(
<U extends T>(WrappedComponent: React.ComponentType<U>) => {
const Component: React.StatelessComponent<any> = props => (
@@ -33,7 +27,7 @@ function withContext<T>(
Component.displayName = wrapDisplayName(WrappedComponent, "withContext");
return Component;
}
) as any;
);
}
export default withContext;
src/core/client/framework/testHelpers/createFluentBundle.ts
+27 -4
View File
@@ -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;
src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
+7 -7
View File
@@ -5,7 +5,9 @@ exports[`renders username and body 1`] = `
className="Comment-root"
role="article"
>
<TopBar>
<TopBar
className="Comment-topBar"
>
<Username>
Marvin
</Username>
@@ -16,12 +18,10 @@ exports[`renders username and body 1`] = `
<HTMLContent>
Woof
</HTMLContent>
<div
<withPropsOnChange(Flex)
className="Comment-footer"
>
<withContext(withLocalStateContainer(PermalinkContainer))
commentID="comment-id"
/>
</div>
direction="row"
itemGutter="half"
/>
</div>
`;
src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
+2 -2
View File
@@ -2,7 +2,7 @@
exports[`renders correctly on big screens 1`] = `
<div
className="Flex-root TopBar-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
<div>
Hello World
@@ -12,7 +12,7 @@ exports[`renders correctly on big screens 1`] = `
exports[`renders correctly on small screens 1`] = `
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<div>
Hello World
src/core/client/stream/components/RTE.tsx
+3 -3
View File
@@ -53,12 +53,12 @@ export interface RTEProps {
const features = [
<Localized key="bold" id="comments-rte-bold" attrs={{ title: true }}>
<Bold>
<Icon>format_bold</Icon>
<Icon size="md">format_bold</Icon>
</Bold>
</Localized>,
<Localized key="italic" id="comments-rte-italic" attrs={{ title: true }}>
<Italic>
<Icon>format_italic</Icon>
<Icon size="md">format_italic</Icon>
</Italic>
</Localized>,
<Localized
@@ -67,7 +67,7 @@ const features = [
attrs={{ title: true }}
>
<Blockquote key="blockquote">
<Icon>format_quote</Icon>
<Icon size="md">format_quote</Icon>
</Blockquote>
</Localized>,
];
src/core/client/stream/components/ReplyList.spec.tsx
+4 -2
View File
@@ -12,7 +12,8 @@ const ReplyListN = removeFragmentRefs(ReplyList);
it("renders correctly", () => {
const props: PropTypesOf<typeof ReplyListN> = {
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<typeof ReplyListN> = {
commentID: "comment-id",
asset: { id: "asset-id" },
comment: { id: "comment-id" },
comments: [{ id: "comment-1" }, { id: "comment-2" }],
onShowAll: sinon.spy(),
hasMore: true,
src/core/client/stream/components/Stream.spec.tsx
+12 -6
View File
@@ -12,8 +12,10 @@ const StreamN = removeFragmentRefs(Stream);
it("renders correctly", () => {
const props: PropTypesOf<typeof StreamN> = {
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<typeof StreamN> = {
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<typeof StreamN> = {
assetID: "asset-id",
isClosed: false,
asset: {
id: "asset-id",
isClosed: false,
},
comments: [{ id: "comment-1" }, { id: "comment-2" }],
onLoadMore: sinon.spy(),
disableLoadMore: false,
src/core/client/stream/components/__snapshots__/RTE.spec.tsx.snap
+9 -3
View File
@@ -18,7 +18,9 @@ exports[`renders correctly 1`] = `
id="comments-rte-bold"
>
<Toggle>
<withPropsOnChange(Icon)>
<withPropsOnChange(Icon)
size="md"
>
format_bold
</withPropsOnChange(Icon)>
</Toggle>
@@ -32,7 +34,9 @@ exports[`renders correctly 1`] = `
id="comments-rte-italic"
>
<Toggle>
<withPropsOnChange(Icon)>
<withPropsOnChange(Icon)
size="md"
>
format_italic
</withPropsOnChange(Icon)>
</Toggle>
@@ -46,7 +50,9 @@ exports[`renders correctly 1`] = `
id="comments-rte-blockquote"
>
<Toggle>
<withPropsOnChange(Icon)>
<withPropsOnChange(Icon)
size="md"
>
format_quote
</withPropsOnChange(Icon)>
</Toggle>
src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
+36 -6
View File
@@ -7,7 +7,12 @@ exports[`renders correctly 1`] = `
role="log"
>
<Relay(CommentContainer)
data={
asset={
Object {
"id": "asset-id",
}
}
comment={
Object {
"id": "comment-1",
}
@@ -15,7 +20,12 @@ exports[`renders correctly 1`] = `
key="comment-1"
/>
<Relay(CommentContainer)
data={
asset={
Object {
"id": "asset-id",
}
}
comment={
Object {
"id": "comment-2",
}
@@ -33,7 +43,12 @@ exports[`when there is more disables load more button 1`] = `
role="log"
>
<Relay(CommentContainer)
data={
asset={
Object {
"id": "asset-id",
}
}
comment={
Object {
"id": "comment-1",
}
@@ -41,7 +56,12 @@ exports[`when there is more disables load more button 1`] = `
key="comment-1"
/>
<Relay(CommentContainer)
data={
asset={
Object {
"id": "asset-id",
}
}
comment={
Object {
"id": "comment-2",
}
@@ -73,7 +93,12 @@ exports[`when there is more renders a load more button 1`] = `
role="log"
>
<Relay(CommentContainer)
data={
asset={
Object {
"id": "asset-id",
}
}
comment={
Object {
"id": "comment-1",
}
@@ -81,7 +106,12 @@ exports[`when there is more renders a load more button 1`] = `
key="comment-1"
/>
<Relay(CommentContainer)
data={
asset={
Object {
"id": "asset-id",
}
}
comment={
Object {
"id": "comment-2",
}
src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
+104 -8
View File
@@ -22,13 +22,25 @@ exports[`renders correctly 1`] = `
key="comment-1"
>
<Relay(CommentContainer)
data={
asset={
Object {
"id": "asset-id",
"isClosed": false,
}
}
comment={
Object {
"id": "comment-1",
}
}
/>
<Relay(ReplyListContainer)
asset={
Object {
"id": "asset-id",
"isClosed": false,
}
}
comment={
Object {
"id": "comment-1",
@@ -40,13 +52,25 @@ exports[`renders correctly 1`] = `
key="comment-2"
>
<Relay(CommentContainer)
data={
asset={
Object {
"id": "asset-id",
"isClosed": false,
}
}
comment={
Object {
"id": "comment-2",
}
}
/>
<Relay(ReplyListContainer)
asset={
Object {
"id": "asset-id",
"isClosed": false,
}
}
comment={
Object {
"id": "comment-2",
@@ -80,13 +104,25 @@ exports[`when there is more disables load more button 1`] = `
key="comment-1"
>
<Relay(CommentContainer)
data={
asset={
Object {
"id": "asset-id",
"isClosed": false,
}
}
comment={
Object {
"id": "comment-1",
}
}
/>
<Relay(ReplyListContainer)
asset={
Object {
"id": "asset-id",
"isClosed": false,
}
}
comment={
Object {
"id": "comment-1",
@@ -98,13 +134,25 @@ exports[`when there is more disables load more button 1`] = `
key="comment-2"
>
<Relay(CommentContainer)
data={
asset={
Object {
"id": "asset-id",
"isClosed": false,
}
}
comment={
Object {
"id": "comment-2",
}
}
/>
<Relay(ReplyListContainer)
asset={
Object {
"id": "asset-id",
"isClosed": false,
}
}
comment={
Object {
"id": "comment-2",
@@ -152,13 +200,25 @@ exports[`when there is more renders a load more button 1`] = `
key="comment-1"
>
<Relay(CommentContainer)
data={
asset={
Object {
"id": "asset-id",
"isClosed": false,
}
}
comment={
Object {
"id": "comment-1",
}
}
/>
<Relay(ReplyListContainer)
asset={
Object {
"id": "asset-id",
"isClosed": false,
}
}
comment={
Object {
"id": "comment-1",
@@ -170,13 +230,25 @@ exports[`when there is more renders a load more button 1`] = `
key="comment-2"
>
<Relay(CommentContainer)
data={
asset={
Object {
"id": "asset-id",
"isClosed": false,
}
}
comment={
Object {
"id": "comment-2",
}
}
/>
<Relay(ReplyListContainer)
asset={
Object {
"id": "asset-id",
"isClosed": false,
}
}
comment={
Object {
"id": "comment-2",
@@ -226,13 +298,25 @@ exports[`when use is logged in renders correctly 1`] = `
key="comment-1"
>
<Relay(CommentContainer)
data={
asset={
Object {
"id": "asset-id",
"isClosed": false,
}
}
comment={
Object {
"id": "comment-1",
}
}
/>
<Relay(ReplyListContainer)
asset={
Object {
"id": "asset-id",
"isClosed": false,
}
}
comment={
Object {
"id": "comment-1",
@@ -244,13 +328,25 @@ exports[`when use is logged in renders correctly 1`] = `
key="comment-2"
>
<Relay(CommentContainer)
data={
asset={
Object {
"id": "asset-id",
"isClosed": false,
}
}
comment={
Object {
"id": "comment-2",
}
}
/>
<Relay(ReplyListContainer)
asset={
Object {
"id": "asset-id",
"isClosed": false,
}
}
comment={
Object {
"id": "comment-2",
src/core/client/stream/containers/CommentContainer.spec.tsx
+8 -2
View File
@@ -11,7 +11,10 @@ const CommentContainerN = removeFragmentRefs(CommentContainer);
it("renders username and body", () => {
const props: PropTypesOf<typeof CommentContainerN> = {
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<typeof CommentContainerN> = {
data: {
asset: {
id: "asset-id",
},
comment: {
id: "comment-id",
author: {
username: null,
src/core/client/stream/containers/CommentContainer.tsx
+10 -4
View File
@@ -25,9 +25,15 @@ export class CommentContainer extends Component<InnerProps, State> {
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<InnerProps, State> {
footer={
<>
<ReplyButton
onClick={this.toggleReplyDialog}
onClick={this.openReplyDialog}
active={showReplyDialog}
/>
<PermalinkButtonContainer commentID={comment.id} />
@@ -53,7 +59,7 @@ export class CommentContainer extends Component<InnerProps, State> {
<ReplyCommentFormContainer
comment={comment}
asset={asset}
onCancel={this.toggleReplyDialog}
onClose={this.closeReplyDialog}
/>
)}
</>
src/core/client/stream/containers/ReplyCommentFormContainer.tsx
+19 -8
View File
@@ -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<MouseEvent<any>>;
onClose?: () => void;
}
interface State {
@@ -27,10 +27,9 @@ interface State {
initialized: boolean;
}
const contextKey = "postCommentFormBody";
export class ReplyCommentFormContainer extends Component<InnerProps, State> {
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<InnerProps, State> {
}
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<InnerProps, State> {
});
}
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<InnerProps, State> {
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<InnerProps, State> {
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<InnerProps, State> {
onSubmit={this.handleOnSubmit}
onChange={this.handleOnChange}
initialValues={this.state.initialValues}
onCancel={this.handleOnCancel}
/>
);
}
src/core/client/stream/containers/ReplyListContainer.spec.tsx
+9
View File
@@ -13,6 +13,9 @@ const ReplyListContainerN = removeFragmentRefs(ReplyListContainer);
it("renders correctly", () => {
const props: PropTypesOf<typeof ReplyListContainerN> = {
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<typeof ReplyListContainerN> = {
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<typeof ReplyListContainerN> = {
asset: {
id: "asset-id",
},
comment: {
id: "comment-id",
replies: {
src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
+44 -18
View File
@@ -1,27 +1,53 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders body only 1`] = `
<Comment
author={
Object {
"username": null,
<React.Fragment>
<Comment
author={
Object {
"username": null,
}
}
}
body="Woof"
createdAt="1995-12-17T03:24:00.000Z"
id="comment-id"
/>
body="Woof"
createdAt="1995-12-17T03:24:00.000Z"
footer={
<React.Fragment>
<ReplyButton
active={false}
onClick={[Function]}
/>
<withContext(withLocalStateContainer(PermalinkContainer))
commentID="comment-id"
/>
</React.Fragment>
}
id="comment-id"
/>
</React.Fragment>
`;
exports[`renders username and body 1`] = `
<Comment
author={
Object {
"username": "Marvin",
<React.Fragment>
<Comment
author={
Object {
"username": "Marvin",
}
}
}
body="Woof"
createdAt="1995-12-17T03:24:00.000Z"
id="comment-id"
/>
body="Woof"
createdAt="1995-12-17T03:24:00.000Z"
footer={
<React.Fragment>
<ReplyButton
active={false}
onClick={[Function]}
/>
<withContext(withLocalStateContainer(PermalinkContainer))
commentID="comment-id"
/>
</React.Fragment>
}
id="comment-id"
/>
</React.Fragment>
`;
src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
+96 -4
View File
@@ -2,7 +2,30 @@
exports[`renders correctly 1`] = `
<ReplyList
commentID="comment-id"
asset={
Object {
"id": "asset-id",
}
}
comment={
Object {
"id": "comment-id",
"replies": Object {
"edges": Array [
Object {
"node": Object {
"id": "comment-1",
},
},
Object {
"node": Object {
"id": "comment-2",
},
},
],
},
}
}
comments={
Array [
Object {
@@ -22,7 +45,30 @@ exports[`renders correctly when replies are null 1`] = `""`;
exports[`when has more replies renders hasMore 1`] = `
<ReplyList
commentID="comment-id"
asset={
Object {
"id": "asset-id",
}
}
comment={
Object {
"id": "comment-id",
"replies": Object {
"edges": Array [
Object {
"node": Object {
"id": "comment-1",
},
},
Object {
"node": Object {
"id": "comment-2",
},
},
],
},
}
}
comments={
Array [
Object {
@@ -41,7 +87,30 @@ exports[`when has more replies renders hasMore 1`] = `
exports[`when has more replies when showing all disables show all button 1`] = `
<ReplyList
commentID="comment-id"
asset={
Object {
"id": "asset-id",
}
}
comment={
Object {
"id": "comment-id",
"replies": Object {
"edges": Array [
Object {
"node": Object {
"id": "comment-1",
},
},
Object {
"node": Object {
"id": "comment-2",
},
},
],
},
}
}
comments={
Array [
Object {
@@ -60,7 +129,30 @@ exports[`when has more replies when showing all disables show all button 1`] = `
exports[`when has more replies when showing all enable show all button after loading is done 1`] = `
<ReplyList
commentID="comment-id"
asset={
Object {
"id": "asset-id",
}
}
comment={
Object {
"id": "comment-id",
"replies": Object {
"edges": Array [
Object {
"node": Object {
"id": "comment-1",
},
},
Object {
"node": Object {
"id": "comment-2",
},
},
],
},
}
}
comments={
Array [
Object {
src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap
+80 -8
View File
@@ -2,7 +2,26 @@
exports[`renders correctly 1`] = `
<Stream
assetID="asset-id"
asset={
Object {
"comments": Object {
"edges": Array [
Object {
"node": Object {
"id": "comment-1",
},
},
Object {
"node": Object {
"id": "comment-2",
},
},
],
},
"id": "asset-id",
"isClosed": false,
}
}
comments={
Array [
Object {
@@ -14,7 +33,6 @@ exports[`renders correctly 1`] = `
]
}
disableLoadMore={false}
isClosed={false}
onLoadMore={[Function]}
user={null}
/>
@@ -22,7 +40,26 @@ exports[`renders correctly 1`] = `
exports[`when has more comments renders hasMore 1`] = `
<Stream
assetID="asset-id"
asset={
Object {
"comments": Object {
"edges": Array [
Object {
"node": Object {
"id": "comment-1",
},
},
Object {
"node": Object {
"id": "comment-2",
},
},
],
},
"id": "asset-id",
"isClosed": false,
}
}
comments={
Array [
Object {
@@ -35,7 +72,6 @@ exports[`when has more comments renders hasMore 1`] = `
}
disableLoadMore={false}
hasMore={true}
isClosed={false}
onLoadMore={[Function]}
user={null}
/>
@@ -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`] = `
<Stream
assetID="asset-id"
asset={
Object {
"comments": Object {
"edges": Array [
Object {
"node": Object {
"id": "comment-1",
},
},
Object {
"node": Object {
"id": "comment-2",
},
},
],
},
"id": "asset-id",
"isClosed": false,
}
}
comments={
Array [
Object {
@@ -56,7 +111,6 @@ exports[`when has more comments when loading more disables load more button 1`]
}
disableLoadMore={true}
hasMore={true}
isClosed={false}
onLoadMore={[Function]}
user={null}
/>
@@ -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`] = `
<Stream
assetID="asset-id"
asset={
Object {
"comments": Object {
"edges": Array [
Object {
"node": Object {
"id": "comment-1",
},
},
Object {
"node": Object {
"id": "comment-2",
},
},
],
},
"id": "asset-id",
"isClosed": false,
}
}
comments={
Array [
Object {
@@ -77,7 +150,6 @@ exports[`when has more comments when loading more enable load more button after
}
disableLoadMore={false}
hasMore={true}
isClosed={false}
onLoadMore={[Function]}
user={null}
/>
src/core/client/stream/mutations/CreateCommentMutation.ts
+35 -15
View File
@@ -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),
});
}
src/core/client/stream/queries/PermalinkViewQuery.spec.tsx
+1
View File
@@ -6,6 +6,7 @@ import { render } from "./PermalinkViewQuery";
it("renders permalink view container", () => {
const data = {
props: {
asset: {},
comment: {},
} as any,
error: null,
src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap
+1
View File
@@ -10,6 +10,7 @@ exports[`renders loading 1`] = `<withPropsOnChange(Spinner) />`;
exports[`renders permalink view container 1`] = `
<withContext(withContext(createMutationContainer(Relay(PermalinkViewContainer))))
asset={Object {}}
comment={Object {}}
/>
`;
src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+101 -21
View File
@@ -62,7 +62,7 @@ exports[`loads more comments 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_bold
</span>
@@ -76,7 +76,7 @@ exports[`loads more comments 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_italic
</span>
@@ -90,7 +90,7 @@ exports[`loads more comments 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_quote
</span>
@@ -153,7 +153,7 @@ exports[`loads more comments 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -177,8 +177,24 @@ exports[`loads more comments 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
<div
@@ -189,7 +205,7 @@ exports[`loads more comments 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -213,8 +229,24 @@ exports[`loads more comments 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
<div
@@ -225,7 +257,7 @@ exports[`loads more comments 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -249,8 +281,24 @@ exports[`loads more comments 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -320,7 +368,7 @@ exports[`renders comment stream 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_bold
</span>
@@ -334,7 +382,7 @@ exports[`renders comment stream 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_italic
</span>
@@ -348,7 +396,7 @@ exports[`renders comment stream 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_quote
</span>
@@ -411,7 +459,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -435,8 +483,24 @@ exports[`renders comment stream 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
<div
@@ -447,7 +511,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -471,8 +535,24 @@ exports[`renders comment stream 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
<button
src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+41 -9
View File
@@ -28,7 +28,7 @@ exports[`renders permalink view 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -52,8 +52,24 @@ exports[`renders permalink view 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -121,7 +137,7 @@ exports[`show all comments 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_bold
</span>
@@ -135,7 +151,7 @@ exports[`show all comments 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_italic
</span>
@@ -149,7 +165,7 @@ exports[`show all comments 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_quote
</span>
@@ -212,7 +228,7 @@ exports[`show all comments 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -236,8 +252,24 @@ exports[`show all comments 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
+2 -24
View File
@@ -4,30 +4,8 @@ exports[`renders permalink view with unknown asset 1`] = `
<div
className="Flex-root App-root Flex-flex Flex-justifyCenter"
>
<div
className="PermalinkView-root"
>
<a
className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
href="http://localhost/"
id="talk-comments-permalinkView-showAllComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
target="_parent"
type="button"
>
Show all comments
</a>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Comment not found
</p>
<div>
Asset not found
</div>
</div>
`;
src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+22 -6
View File
@@ -94,7 +94,7 @@ exports[`show all comments 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_bold
</span>
@@ -108,7 +108,7 @@ exports[`show all comments 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_italic
</span>
@@ -122,7 +122,7 @@ exports[`show all comments 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_quote
</span>
@@ -185,7 +185,7 @@ exports[`show all comments 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -209,8 +209,24 @@ exports[`show all comments 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
+161 -33
View File
@@ -81,7 +81,7 @@ exports[`post a comment 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_bold
</span>
@@ -95,7 +95,7 @@ exports[`post a comment 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_italic
</span>
@@ -109,7 +109,7 @@ exports[`post a comment 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_quote
</span>
@@ -185,7 +185,7 @@ exports[`post a comment 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -209,8 +209,24 @@ exports[`post a comment 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
<div
@@ -221,7 +237,7 @@ exports[`post a comment 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -245,8 +261,24 @@ exports[`post a comment 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
<div
@@ -257,7 +289,7 @@ exports[`post a comment 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -281,8 +313,24 @@ exports[`post a comment 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -371,7 +419,7 @@ exports[`post a comment 2`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_bold
</span>
@@ -385,7 +433,7 @@ exports[`post a comment 2`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_italic
</span>
@@ -399,7 +447,7 @@ exports[`post a comment 2`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_quote
</span>
@@ -481,7 +529,7 @@ exports[`post a comment 2`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -505,8 +553,24 @@ exports[`post a comment 2`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
<div
@@ -517,7 +581,7 @@ exports[`post a comment 2`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -541,8 +605,24 @@ exports[`post a comment 2`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
<div
@@ -553,7 +633,7 @@ exports[`post a comment 2`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -577,8 +657,24 @@ exports[`post a comment 2`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
@@ -667,7 +763,7 @@ exports[`renders comment stream 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_bold
</span>
@@ -681,7 +777,7 @@ exports[`renders comment stream 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_italic
</span>
@@ -695,7 +791,7 @@ exports[`renders comment stream 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_quote
</span>
@@ -777,7 +873,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -801,8 +897,24 @@ exports[`renders comment stream 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
<div
@@ -813,7 +925,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -837,8 +949,24 @@ exports[`renders comment stream 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+79 -15
View File
@@ -62,7 +62,7 @@ exports[`renders comment stream 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_bold
</span>
@@ -76,7 +76,7 @@ exports[`renders comment stream 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_italic
</span>
@@ -90,7 +90,7 @@ exports[`renders comment stream 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_quote
</span>
@@ -153,7 +153,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -177,8 +177,24 @@ exports[`renders comment stream 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
<div
@@ -189,7 +205,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -213,8 +229,24 @@ exports[`renders comment stream 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
<div
className="Indent-root Indent-level0"
@@ -229,7 +261,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -253,15 +285,31 @@ exports[`renders comment stream 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
<div
className="Comment-root"
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -285,8 +333,24 @@ exports[`renders comment stream 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+41 -9
View File
@@ -62,7 +62,7 @@ exports[`renders comment stream 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_bold
</span>
@@ -76,7 +76,7 @@ exports[`renders comment stream 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_italic
</span>
@@ -90,7 +90,7 @@ exports[`renders comment stream 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_quote
</span>
@@ -153,7 +153,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -177,8 +177,24 @@ exports[`renders comment stream 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
<div
@@ -189,7 +205,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -213,8 +229,24 @@ exports[`renders comment stream 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+101 -21
View File
@@ -62,7 +62,7 @@ exports[`renders comment stream 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_bold
</span>
@@ -76,7 +76,7 @@ exports[`renders comment stream 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_italic
</span>
@@ -90,7 +90,7 @@ exports[`renders comment stream 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_quote
</span>
@@ -153,7 +153,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -177,8 +177,24 @@ exports[`renders comment stream 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
<div
className="Indent-root Indent-level0"
@@ -193,7 +209,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -217,8 +233,24 @@ exports[`renders comment stream 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
<button
aria-controls="talk-comments-replyList-log--comment-0"
@@ -306,7 +338,7 @@ exports[`show all replies 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_bold
</span>
@@ -320,7 +352,7 @@ exports[`show all replies 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_italic
</span>
@@ -334,7 +366,7 @@ exports[`show all replies 1`] = `
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
className="Icon-root Icon-md"
>
format_quote
</span>
@@ -397,7 +429,7 @@ exports[`show all replies 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -421,8 +453,24 @@ exports[`show all replies 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
<div
className="Indent-root Indent-level0"
@@ -437,7 +485,7 @@ exports[`show all replies 1`] = `
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -461,15 +509,31 @@ exports[`show all replies 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
<div
className="Comment-root"
role="article"
>
<div
className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -493,8 +557,24 @@ exports[`show all replies 1`] = `
}
/>
<div
className="Comment-footer"
/>
className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Reply
</span>
</button>
</div>
</div>
</div>
</div>
src/core/client/ui/components/AriaInfo/AriaInfo.tsx
+3 -1
View File
@@ -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<HTMLElement> {
classes: typeof styles;
component?: string;
children: React.ReactNode;
/** Internal: Forwarded Ref */
forwardRef?: Ref<HTMLButtonElement>;
}
const AriaInfo: StatelessComponent<InnerProps> = props => {
src/core/client/ui/components/Button/Button.tsx
+2 -2
View File
@@ -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<HTMLButtonElement> {
interface InnerProps extends BaseButtonProps {
/** If set renders an anchor tag instead */
anchor?: boolean;
href?: string;
src/core/client/ui/components/Button/ButtonIcon.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export const ButtonIcon: StatelessComponent<InnerProps> = props => {
ButtonIcon.defaultProps = {
size: "sm",
};
} as Partial<InnerProps>;
const enhanced = withForwardRef(withStyles(styles)(ButtonIcon));
export type ButtonIconProps = PropTypesOf<typeof enhanced>;
src/core/client/ui/components/CallOut/CallOut.tsx
+1 -1
View File
@@ -51,7 +51,7 @@ const CallOut: StatelessComponent<CallOutProps> = props => {
CallOut.defaultProps = {
color: "regular",
fullWidth: false,
};
} as Partial<CallOutProps>;
const enhanced = withStyles(styles)(CallOut);
export default enhanced;
src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ const HorizontalGutter: StatelessComponent<InnerProps> = props => {
HorizontalGutter.defaultProps = {
size: "full",
};
} as Partial<InnerProps>;
const enhanced = withForwardRef(withStyles(styles)(HorizontalGutter));
export type HorizontalGutterProps = PropTypesOf<typeof enhanced>;
src/core/client/ui/components/Icon/Icon.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ const Icon: StatelessComponent<InnerProps> = props => {
Icon.defaultProps = {
size: "sm",
};
} as Partial<InnerProps>;
const enhanced = withForwardRef(withStyles(styles)(Icon));
export type IconProps = PropTypesOf<typeof enhanced>;
src/core/client/ui/components/TextField/TextField.tsx
+1 -1
View File
@@ -89,7 +89,7 @@ TextField.defaultProps = {
color: "regular",
placeholder: "",
type: "text",
};
} as Partial<TextFieldProps>;
const enhanced = withStyles(styles)(TextField);
export default enhanced;
src/core/client/ui/components/Typography/Typography.tsx
+1 -1
View File
@@ -151,7 +151,7 @@ Typography.defaultProps = {
noWrap: false,
paragraph: false,
variant: "bodyCopy",
};
} as Partial<InnerProps>;
const enhanced = withForwardRef(withStyles(styles)(Typography));
export type TypographyProps = PropTypesOf<typeof enhanced>;
src/locales/en-US/stream.ftl
+4
View File
@@ -44,3 +44,7 @@ comments-postCommentForm-rte =
comments-postCommentFormFake-rte =
.placeholder = { comments-postCommentForm-rteLabel }
comments-replyButton-reply = Reply
comments-permalinkViewQuery-assetNotFound = { comments-streamQuery-assetNotFound }