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

[CORL-339] Allow comment draft when not logged in (#2315)

Browse Source 
* feat: allow user to draft a comment before logging in

* test: snapshot

* fix: lint

* chore: upgrade rte

* fix: snapshots
This commit is contained in:
Kiwi
2019-05-20 18:14:09 +02:00
committed by GitHub
parent ab466510f3
commit 3ea696fcc8
17 changed files with 407 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+3 -3
View File
@@ -2489,9 +2489,9 @@
"integrity": "sha512-Bl38cx/rS/oRqb0gvzT/mtA3BNWdLwqLEyI5Jdp8mA1CG+pOL7NQZeLEz8OIRI/ie6xBnjT7CoVKscjfmpX7nw=="
},
"@coralproject/rte": {
"version": "0.10.13",
"resolved": "https://registry.npmjs.org/@coralproject/rte/-/rte-0.10.13.tgz",
"integrity": "sha512-YlKErdrGD3xMPWjObKIa0hmqG2n9F1sbemZrnWwBCzC5xt+ktkTynAXfHo+tsyKquJLZVtFISP8+A717tMl8wg==",
"version": "0.10.15",
"resolved": "https://registry.npmjs.org/@coralproject/rte/-/rte-0.10.15.tgz",
"integrity": "sha512-w8UWmjZxEQIW1zTMAchsmy1lzklqH2EjoyDqr9ZBed0GN6gfWfU1duTDQKc7K2igdGNRTyYfHbfXhKRIdOC6oA==",
"dev": true,
"requires": {
"bowser": "^1.0.0",
package.json
+1 -1
View File
@@ -136,7 +136,7 @@
"@babel/preset-env": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.3.3",
"@coralproject/rte": "^0.10.13",
"@coralproject/rte": "^0.10.15",
"@intervolga/optimize-cssnano-plugin": "^1.0.6",
"@types/basic-auth": "^1.1.2",
"@types/bcryptjs": "^2.4.1",
src/core/client/stream/tabs/comments/components/PostCommentFormFake.spec.tsx
+10 -1
View File
@@ -1,3 +1,4 @@
import { noop } from "lodash";
import React from "react";
import { createRenderer } from "react-test-renderer/shallow";
import { removeFragmentRefs } from "talk-framework/testHelpers";
@@ -8,6 +9,14 @@ const PostCommentFormFakeN = removeFragmentRefs(PostCommentFormFake);
it("renders correctly", () => {
const renderer = createRenderer();
renderer.render(<PostCommentFormFakeN story={{}} showMessageBox />);
renderer.render(
<PostCommentFormFakeN
story={{}}
draft=""
onDraftChange={noop}
onSignIn={noop}
showMessageBox
/>
);
expect(renderer.getRenderOutput()).toMatchSnapshot();
});
src/core/client/stream/tabs/comments/components/PostCommentFormFake.tsx
+44 -28
View File
@@ -1,5 +1,5 @@
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent } from "react";
import React, { FunctionComponent, useCallback } from "react";
import { PropTypesOf } from "talk-framework/types";
import { Button, HorizontalGutter } from "talk-ui/components";
@@ -12,35 +12,51 @@ import styles from "./PostCommentFormFake.css";
interface Props {
showMessageBox?: boolean;
story: PropTypesOf<typeof MessageBoxContainer>["story"];
draft: string;
onDraftChange: (draft: string) => void;
onSignIn: () => void;
}
const PostCommentFormFake: FunctionComponent<Props> = props => (
<div>
{props.showMessageBox && (
<MessageBoxContainer story={props.story} className={styles.messageBox} />
)}
<HorizontalGutter className={styles.root}>
<div aria-hidden="true">
<Localized
id="comments-postCommentFormFake-rte"
attrs={{ placeholder: true }}
>
<RTE placeholder="Post a comment" disabled />
const PostCommentFormFake: FunctionComponent<Props> = props => {
const onChange = useCallback(
(data: { html: string; text: string }) => props.onDraftChange(data.html),
[props.onDraftChange]
);
return (
<div>
{props.showMessageBox && (
<MessageBoxContainer
story={props.story}
className={styles.messageBox}
/>
)}
<HorizontalGutter className={styles.root}>
<div aria-hidden="true">
<Localized
id="comments-postCommentFormFake-rte"
attrs={{ placeholder: true }}
>
<RTE
placeholder="Post a comment"
value={props.draft}
onChange={onChange}
/>
</Localized>
</div>
<Localized id="comments-postCommentFormFake-signInAndJoin">
<Button
color="primary"
variant="filled"
type="submit"
fullWidth
onClick={props.onSignIn}
>
Sign in and join the conversation
</Button>
</Localized>
</div>
<Localized id="comments-postCommentFormFake-signInAndJoin">
<Button
color="primary"
variant="filled"
disabled
type="submit"
fullWidth
>
Sign in and join the conversation
</Button>
</Localized>
</HorizontalGutter>
</div>
);
</HorizontalGutter>
</div>
);
};
export default PostCommentFormFake;
src/core/client/stream/tabs/comments/components/RTE.css
+1 -1
View File
@@ -10,5 +10,5 @@
.placeholder {
composes: placeholder from "talk-ui/shared/typography.css";
margin: var(--mini-unit) 0 0 calc(1px + var(--mini-unit));
margin: 10px 0 0 calc(10px);
}
src/core/client/stream/tabs/comments/components/__snapshots__/PostCommentFormFake.spec.tsx.snap
+3 -2
View File
@@ -21,8 +21,9 @@ exports[`renders correctly 1`] = `
id="comments-postCommentFormFake-rte"
>
<RTE
disabled={true}
onChange={[Function]}
placeholder="Post a comment"
value=""
/>
</Localized>
</div>
@@ -31,8 +32,8 @@ exports[`renders correctly 1`] = `
>
<ForwardRef(forwardRef)
color="primary"
disabled={true}
fullWidth={true}
onClick={[Function]}
type="submit"
variant="filled"
>
src/core/client/stream/tabs/comments/components/__snapshots__/RTE.spec.tsx.snap
+2
View File
@@ -7,6 +7,8 @@ exports[`renders correctly 1`] = `
classNameDisabled=""
contentClassName="RTE-content"
contentClassNameDisabled=""
contentContainerClassName=""
contentContainerClassNameDisabled=""
features={
Array [
<ForwardRef
src/core/client/stream/tabs/comments/components/__snapshots__/Stream.spec.tsx.snap
+4 -4
View File
@@ -24,7 +24,7 @@ exports[`renders correctly 1`] = `
}
}
/>
<withContext(withContext(createMutationContainer(withContext(withFetch(withContext(withLocalStateContainer(Relay(PostCommentFormContainer))))))))
<withContext(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withFetch(withContext(withLocalStateContainer(Relay(PostCommentFormContainer))))))))))
settings={
Object {
"reaction": Object {
@@ -170,7 +170,7 @@ exports[`when there is more disables load more button 1`] = `
}
}
/>
<withContext(withContext(createMutationContainer(withContext(withFetch(withContext(withLocalStateContainer(Relay(PostCommentFormContainer))))))))
<withContext(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withFetch(withContext(withLocalStateContainer(Relay(PostCommentFormContainer))))))))))
settings={
Object {
"reaction": Object {
@@ -330,7 +330,7 @@ exports[`when there is more renders a load more button 1`] = `
}
}
/>
<withContext(withContext(createMutationContainer(withContext(withFetch(withContext(withLocalStateContainer(Relay(PostCommentFormContainer))))))))
<withContext(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withFetch(withContext(withLocalStateContainer(Relay(PostCommentFormContainer))))))))))
settings={
Object {
"reaction": Object {
@@ -490,7 +490,7 @@ exports[`when use is logged in renders correctly 1`] = `
}
}
/>
<withContext(withContext(createMutationContainer(withContext(withFetch(withContext(withLocalStateContainer(Relay(PostCommentFormContainer))))))))
<withContext(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withFetch(withContext(withLocalStateContainer(Relay(PostCommentFormContainer))))))))))
settings={
Object {
"reaction": Object {
src/core/client/stream/tabs/comments/containers/PostCommentFormContainer.spec.tsx
+1
View File
@@ -22,6 +22,7 @@ function createDefaultProps(add: DeepPartial<Props> = {}): Props {
local: {
loggedIn: true,
},
showAuthPopup: noop as any,
createComment: noop as any,
refreshSettings: noop as any,
story: {
src/core/client/stream/tabs/comments/containers/PostCommentFormContainer.tsx
+70 -42
View File
@@ -21,7 +21,9 @@ import { PostCommentFormContainerLocal as Local } from "talk-stream/__generated_
import { RefreshSettingsFetch } from "talk-stream/fetches";
import {
CreateCommentMutation,
ShowAuthPopupMutation,
withCreateCommentMutation,
withShowAuthPopupMutation,
} from "talk-stream/mutations";
import PostCommentForm from "../components/PostCommentForm";
@@ -41,6 +43,7 @@ interface Props {
settings: SettingsData;
local: Local;
story: StoryData;
showAuthPopup: ShowAuthPopupMutation;
}
interface State {
@@ -50,10 +53,17 @@ interface State {
initialized: boolean;
keepFormWhenClosed: boolean;
submitStatus: SubmitStatus | null;
notLoggedInDraft: string;
}
const contextKey = "postCommentFormBody";
/**
* A temporary variable to save draft when user is not logged in.
* This will be restored after the stream has refreshed.
*/
let preserveNotLoggedInDraft = "";
export class PostCommentFormContainer extends Component<Props, State> {
public state: State = {
initialized: false,
@@ -63,22 +73,29 @@ export class PostCommentFormContainer extends Component<Props, State> {
!this.props.story.isClosed &&
!this.props.settings.disableCommenting.enabled,
submitStatus: null,
notLoggedInDraft: "",
};
constructor(props: Props) {
super(props);
// Restore comment draft, if available.
this.state.notLoggedInDraft = preserveNotLoggedInDraft;
preserveNotLoggedInDraft = "";
this.init();
}
public componentWillUnmount() {
// Keep comment draft around. User might just have signed in and caused a reload.
preserveNotLoggedInDraft = this.state.notLoggedInDraft;
}
private async init() {
const body = await this.props.sessionStorage.getItem(contextKey);
if (body) {
this.setState({
initialValues: {
body,
},
});
}
this.setState({
initialValues: {
body: body || this.state.notLoggedInDraft,
},
});
this.setState({
initialized: true,
});
@@ -145,6 +162,12 @@ export class PostCommentFormContainer extends Component<Props, State> {
}
};
private handleDraftChange = (draft: string) => {
this.setState({ notLoggedInDraft: draft });
};
private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
public render() {
if (!this.state.initialized) {
return null;
@@ -172,8 +195,11 @@ export class PostCommentFormContainer extends Component<Props, State> {
if (!this.props.local.loggedIn) {
return (
<PostCommentFormFake
draft={this.state.notLoggedInDraft}
onDraftChange={this.handleDraftChange}
story={this.props.story}
showMessageBox={this.props.story.settings.messageBox.enabled}
onSignIn={this.handleSignIn}
/>
);
}
@@ -212,45 +238,47 @@ export class PostCommentFormContainer extends Component<Props, State> {
const enhanced = withContext(({ sessionStorage }) => ({
sessionStorage,
}))(
withCreateCommentMutation(
withFetch(RefreshSettingsFetch)(
withLocalStateContainer(
graphql`
fragment PostCommentFormContainerLocal on Local {
loggedIn
}
`
)(
withFragmentContainer<Props>({
settings: graphql`
fragment PostCommentFormContainer_settings on Settings {
charCount {
enabled
min
max
}
disableCommenting {
enabled
message
}
closeCommenting {
message
}
withShowAuthPopupMutation(
withCreateCommentMutation(
withFetch(RefreshSettingsFetch)(
withLocalStateContainer(
graphql`
fragment PostCommentFormContainerLocal on Local {
loggedIn
}
`,
story: graphql`
fragment PostCommentFormContainer_story on Story {
id
isClosed
...MessageBoxContainer_story
settings {
messageBox {
`
)(
withFragmentContainer<Props>({
settings: graphql`
fragment PostCommentFormContainer_settings on Settings {
charCount {
enabled
min
max
}
disableCommenting {
enabled
message
}
closeCommenting {
message
}
}
}
`,
})(PostCommentFormContainer)
`,
story: graphql`
fragment PostCommentFormContainer_story on Story {
id
isClosed
...MessageBoxContainer_story
settings {
messageBox {
enabled
}
}
}
`,
})(PostCommentFormContainer)
)
)
)
)
src/core/client/stream/tabs/comments/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap
+15
View File
@@ -4,6 +4,11 @@ exports[`renders correctly 1`] = `
<PostCommentForm
disabled={false}
disabledMessage="closed"
initialValues={
Object {
"body": "",
}
}
max={100}
min={3}
onChange={[Function]}
@@ -46,6 +51,11 @@ exports[`renders when commenting has been disabled (non-collapsing) 1`] = `
<PostCommentForm
disabled={true}
disabledMessage="commenting disabled"
initialValues={
Object {
"body": "",
}
}
max={100}
min={3}
onChange={[Function]}
@@ -88,6 +98,11 @@ exports[`renders when story has been closed (non-collapsing) 1`] = `
<PostCommentForm
disabled={true}
disabledMessage="story closed"
initialValues={
Object {
"body": "",
}
}
max={100}
min={3}
onChange={[Function]}
src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap
+88 -72
View File
@@ -228,25 +228,29 @@ exports[`edit a comment and handle server error: edit form 1`] = `
className=""
>
<div
aria-placeholder="Edit comment"
className="RTE-contentEditable RTE-content"
contentEditable={true}
dangerouslySetInnerHTML={
Object {
"__html": "I like yoghurt",
className="RTE-contentEditableContainer"
>
<div
aria-placeholder="Edit comment"
className="RTE-contentEditable RTE-content"
contentEditable={true}
dangerouslySetInnerHTML={
Object {
"__html": "I like yoghurt",
}
}
}
disabled={false}
id="comments-editCommentForm-rte-comment-with-replies"
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
disabled={false}
id="comments-editCommentForm-rte-comment-with-replies"
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
</div>
<div
className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
>
@@ -394,25 +398,29 @@ exports[`edit a comment: edit form 1`] = `
className=""
>
<div
aria-placeholder="Edit comment"
className="RTE-contentEditable RTE-content"
contentEditable={true}
dangerouslySetInnerHTML={
Object {
"__html": "I like yoghurt",
className="RTE-contentEditableContainer"
>
<div
aria-placeholder="Edit comment"
className="RTE-contentEditable RTE-content"
contentEditable={true}
dangerouslySetInnerHTML={
Object {
"__html": "I like yoghurt",
}
}
}
disabled={false}
id="comments-editCommentForm-rte-comment-with-replies"
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
disabled={false}
id="comments-editCommentForm-rte-comment-with-replies"
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
</div>
<div
className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
>
@@ -560,25 +568,29 @@ exports[`edit a comment: optimistic response 1`] = `
className=""
>
<div
aria-placeholder="Edit comment"
className="RTE-contentEditable RTE-content RTE-contentEditableDisabled"
contentEditable={false}
dangerouslySetInnerHTML={
Object {
"__html": "Edited!",
className="RTE-contentEditableContainer"
>
<div
aria-placeholder="Edit comment"
className="RTE-contentEditable RTE-content RTE-contentEditableDisabled"
contentEditable={false}
dangerouslySetInnerHTML={
Object {
"__html": "Edited!",
}
}
}
disabled={true}
id="comments-editCommentForm-rte-comment-with-replies"
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
disabled={true}
id="comments-editCommentForm-rte-comment-with-replies"
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
</div>
<div
className="RTE-toolbar RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
>
@@ -1290,25 +1302,29 @@ exports[`shows expiry message: edit time expired 1`] = `
className=""
>
<div
aria-placeholder="Edit comment"
className="RTE-contentEditable RTE-content RTE-contentEditableDisabled"
contentEditable={false}
dangerouslySetInnerHTML={
Object {
"__html": "I like yoghurt",
className="RTE-contentEditableContainer"
>
<div
aria-placeholder="Edit comment"
className="RTE-contentEditable RTE-content RTE-contentEditableDisabled"
contentEditable={false}
dangerouslySetInnerHTML={
Object {
"__html": "I like yoghurt",
}
}
}
disabled={true}
id="comments-editCommentForm-rte-comment-with-replies"
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
disabled={true}
id="comments-editCommentForm-rte-comment-with-replies"
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
</div>
<div
className="RTE-toolbar RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
>
src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap
+27 -23
View File
@@ -228,31 +228,35 @@ exports[`post a reply: open reply form 1`] = `
className=""
>
<div
aria-hidden="true"
className="RTE-placeholder RTE-placeholder"
className="RTE-contentEditableContainer"
>
Write a reply
</div>
<div
aria-placeholder="Write a reply"
className="RTE-contentEditable RTE-content"
contentEditable={true}
dangerouslySetInnerHTML={
Object {
"__html": "",
<div
aria-placeholder="Write a reply"
className="RTE-contentEditable RTE-content"
contentEditable={true}
dangerouslySetInnerHTML={
Object {
"__html": "",
}
}
}
disabled={false}
id="comments-replyCommentForm-rte-comment-with-deepest-replies-5"
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
disabled={false}
id="comments-replyCommentForm-rte-comment-with-deepest-replies-5"
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
<div
aria-hidden="true"
className="RTE-placeholder RTE-placeholder"
>
Write a reply
</div>
</div>
<div
className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
>
src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap
+27 -23
View File
@@ -213,31 +213,35 @@ exports[`post a reply: open reply form 1`] = `
className=""
>
<div
aria-hidden="true"
className="RTE-placeholder RTE-placeholder"
className="RTE-contentEditableContainer"
>
Write a reply
</div>
<div
aria-placeholder="Write a reply"
className="RTE-contentEditable RTE-content"
contentEditable={true}
dangerouslySetInnerHTML={
Object {
"__html": "",
<div
aria-placeholder="Write a reply"
className="RTE-contentEditable RTE-content"
contentEditable={true}
dangerouslySetInnerHTML={
Object {
"__html": "",
}
}
}
disabled={false}
id="comments-replyCommentForm-rte-comment-0"
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
disabled={false}
id="comments-replyCommentForm-rte-comment-0"
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
<div
aria-hidden="true"
className="RTE-placeholder RTE-placeholder"
>
Write a reply
</div>
</div>
<div
className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
>
src/core/client/stream/test/comments/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
+28 -25
View File
@@ -64,32 +64,35 @@ exports[`renders comment stream with community guidelines 1`] = `
className=""
>
<div
aria-hidden="true"
className="RTE-placeholder RTE-placeholder "
className="RTE-contentEditableContainer"
>
Post a comment
<div
aria-placeholder="Post a comment"
className="RTE-contentEditable RTE-content"
contentEditable={true}
dangerouslySetInnerHTML={
Object {
"__html": "",
}
}
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
<div
aria-hidden="true"
className="RTE-placeholder RTE-placeholder"
>
Post a comment
</div>
</div>
<div
aria-placeholder="Post a comment"
className="RTE-contentEditable RTE-content RTE-contentEditableDisabled"
contentEditable={false}
dangerouslySetInnerHTML={
Object {
"__html": "",
}
}
disabled={true}
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
<div
className="RTE-toolbar RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
>
<button
className="Button-button"
@@ -138,9 +141,9 @@ exports[`renders comment stream with community guidelines 1`] = `
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
disabled={true}
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
src/core/client/stream/test/comments/__snapshots__/renderMessageBox.spec.tsx.snap
+55 -48
View File
@@ -177,31 +177,35 @@ exports[`renders message box when logged in 1`] = `
className=""
>
<div
aria-hidden="true"
className="RTE-placeholder RTE-placeholder"
className="RTE-contentEditableContainer"
>
Post a comment
</div>
<div
aria-placeholder="Post a comment"
className="RTE-contentEditable RTE-content"
contentEditable={true}
dangerouslySetInnerHTML={
Object {
"__html": "",
<div
aria-placeholder="Post a comment"
className="RTE-contentEditable RTE-content"
contentEditable={true}
dangerouslySetInnerHTML={
Object {
"__html": "",
}
}
}
disabled={false}
id="comments-postCommentForm-field"
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
disabled={false}
id="comments-postCommentForm-field"
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
<div
aria-hidden="true"
className="RTE-placeholder RTE-placeholder"
>
Post a comment
</div>
</div>
<div
className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
>
@@ -351,32 +355,35 @@ exports[`renders message box when not logged in 1`] = `
className=""
>
<div
aria-hidden="true"
className="RTE-placeholder RTE-placeholder "
className="RTE-contentEditableContainer"
>
Post a comment
<div
aria-placeholder="Post a comment"
className="RTE-contentEditable RTE-content"
contentEditable={true}
dangerouslySetInnerHTML={
Object {
"__html": "",
}
}
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
<div
aria-hidden="true"
className="RTE-placeholder RTE-placeholder"
>
Post a comment
</div>
</div>
<div
aria-placeholder="Post a comment"
className="RTE-contentEditable RTE-content RTE-contentEditableDisabled"
contentEditable={false}
dangerouslySetInnerHTML={
Object {
"__html": "",
}
}
disabled={true}
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
<div
className="RTE-toolbar RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
>
<button
className="Button-button"
@@ -425,9 +432,9 @@ exports[`renders message box when not logged in 1`] = `
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
disabled={true}
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap
+28 -25
View File
@@ -82,32 +82,35 @@ exports[`renders comment stream 1`] = `
className=""
>
<div
aria-hidden="true"
className="RTE-placeholder RTE-placeholder "
className="RTE-contentEditableContainer"
>
Post a comment
<div
aria-placeholder="Post a comment"
className="RTE-contentEditable RTE-content"
contentEditable={true}
dangerouslySetInnerHTML={
Object {
"__html": "",
}
}
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
<div
aria-hidden="true"
className="RTE-placeholder RTE-placeholder"
>
Post a comment
</div>
</div>
<div
aria-placeholder="Post a comment"
className="RTE-contentEditable RTE-content RTE-contentEditableDisabled"
contentEditable={false}
dangerouslySetInnerHTML={
Object {
"__html": "",
}
}
disabled={true}
onBlur={[Function]}
onChange={[Function]}
onCut={[Function]}
onFocus={[Function]}
onInput={[Function]}
onKeyDown={[Function]}
onPaste={[Function]}
onSelect={[Function]}
/>
<div
className="RTE-toolbar RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
>
<button
className="Button-button"
@@ -156,9 +159,9 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
disabled={true}
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}