wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-08-02 13:10:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Test, Colorize TextFields, disable on submit

Browse Source
This commit is contained in:
Chi Vinh Le
2018-08-27 21:36:36 +02:00
parent 1684ed44ef
commit dcb3c23f56
17 changed files with 265 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/auth/components/App.spec.tsx
+14
View File
@@ -0,0 +1,14 @@
import { shallow } from "enzyme";
import React from "react";
import { PropTypesOf } from "talk-framework/types";
import App from "./App";
it("renders sign in", () => {
const props: PropTypesOf<typeof App> = {
view: "SIGN_IN",
};
const wrapper = shallow(<App {...props} />);
expect(wrapper).toMatchSnapshot();
});
src/core/client/auth/components/App.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ const renderView = (view: View) => {
case "RESET_PASSWORD":
return <ResetPasswordContainer />;
default:
return <SignInContainer />;
throw new Error(`Unknown view ${view}`);
}
};
src/core/client/auth/components/ForgotPassword.tsx
+14 -2
View File
@@ -33,7 +33,7 @@ export interface ForgotPasswordForm {
const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
return (
<Form onSubmit={props.onSubmit}>
{({ handleSubmit, submitError }) => (
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<AutoHeightContainer />
<HorizontalGutter size="double">
@@ -71,7 +71,13 @@ const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
onChange={input.onChange}
value={input.value}
placeholder="Email Address"
color={
meta.touched && (meta.error || meta.submitError)
? "error"
: "regular"
}
fullWidth
disabled={submitting}
/>
</Localized>
{meta.touched &&
@@ -84,7 +90,13 @@ const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
)}
</Field>
<Localized id="forgotPassword-sendEmailButton">
<Button variant="filled" color="primary" size="large" fullWidth>
<Button
variant="filled"
color="primary"
size="large"
fullWidth
disabled={submitting}
>
Send Email
</Button>
</Localized>
src/core/client/auth/components/ResetPassword.tsx
+20 -2
View File
@@ -36,7 +36,7 @@ export interface ResetPasswordForm {
const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
return (
<Form onSubmit={props.onSubmit}>
{({ handleSubmit, submitError }) => (
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<AutoHeightContainer />
<HorizontalGutter size="double">
@@ -77,6 +77,12 @@ const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
value={input.value}
placeholder="Password"
type="password"
color={
meta.touched && (meta.error || meta.submitError)
? "error"
: "regular"
}
disabled={submitting}
fullWidth
/>
</Localized>
@@ -109,6 +115,12 @@ const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
value={input.value}
placeholder="Confirm Password"
type="password"
color={
meta.touched && (meta.error || meta.submitError)
? "error"
: "regular"
}
disabled={submitting}
fullWidth
/>
</Localized>
@@ -122,7 +134,13 @@ const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
)}
</Field>
<Localized id="resetPassword-resetPasswordButton">
<Button variant="filled" color="primary" size="large" fullWidth>
<Button
variant="filled"
color="primary"
size="large"
fullWidth
disabled={submitting}
>
Reset Password
</Button>
</Localized>
src/core/client/auth/components/SignIn.tsx
+15
View File
@@ -71,6 +71,12 @@ const SignIn: StatelessComponent<SignInForm> = props => {
onChange={input.onChange}
value={input.value}
placeholder="Email Address"
color={
meta.touched && (meta.error || meta.submitError)
? "error"
: "regular"
}
disabled={submitting}
fullWidth
/>
</Localized>
@@ -100,6 +106,12 @@ const SignIn: StatelessComponent<SignInForm> = props => {
value={input.value}
placeholder="Password"
type="password"
color={
meta.touched && (meta.error || meta.submitError)
? "error"
: "regular"
}
disabled={submitting}
fullWidth
/>
</Localized>
@@ -115,6 +127,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
variant="underlined"
color="primary"
size="small"
disabled={submitting}
onClick={props.onGotoForgotPassword}
>
Forgot your password?
@@ -130,6 +143,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
color="primary"
size="large"
type="submit"
disabled={submitting}
fullWidth
>
Sign in and join the conversation
@@ -143,6 +157,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
variant="underlined"
size="small"
color="primary"
disabled={submitting}
onClick={props.onGotoSignUp}
/>
}
src/core/client/auth/components/SignUp.tsx
+28 -2
View File
@@ -41,7 +41,7 @@ export interface SignUpForm {
const SignUp: StatelessComponent<SignUpForm> = props => {
return (
<Form onSubmit={props.onSubmit}>
{({ handleSubmit, submitError }) => (
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<AutoHeightContainer />
<HorizontalGutter size="double">
@@ -73,6 +73,12 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
onChange={input.onChange}
value={input.value}
placeholder="Email Address"
color={
meta.touched && (meta.error || meta.submitError)
? "error"
: "regular"
}
disabled={submitting}
fullWidth
/>
</Localized>
@@ -109,6 +115,12 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
onChange={input.onChange}
value={input.value}
placeholder="Username"
color={
meta.touched && (meta.error || meta.submitError)
? "error"
: "regular"
}
disabled={submitting}
fullWidth
/>
</Localized>
@@ -145,6 +157,12 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
value={input.value}
placeholder="Password"
type="password"
color={
meta.touched && (meta.error || meta.submitError)
? "error"
: "regular"
}
disabled={submitting}
fullWidth
/>
</Localized>
@@ -176,6 +194,12 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
value={input.value}
placeholder="Confirm Password"
type="password"
color={
meta.touched && (meta.error || meta.submitError)
? "error"
: "regular"
}
disabled={submitting}
fullWidth
/>
</Localized>
@@ -193,8 +217,9 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
variant="filled"
color="primary"
size="large"
fullWidth
type="submit"
disabled={submitting}
fullWidth
>
Sign up and join the conversation
</Button>
@@ -208,6 +233,7 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
size="small"
color="primary"
onClick={props.onGotoSignIn}
disabled={submitting}
/>
}
>
src/core/client/auth/components/__snapshots__/App.spec.tsx.snap
+9
View File
@@ -0,0 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders sign in 1`] = `
<div
className="App-root"
>
<withContext(createMutationContainer(withContext(createMutationContainer(SignInContainer)))) />
</div>
`;
src/core/client/stream/components/PostCommentFormFake.spec.tsx
+9
View File
@@ -0,0 +1,9 @@
import { shallow } from "enzyme";
import React from "react";
import PostCommentFormFake from "./PostCommentFormFake";
it("renders correctly", () => {
const wrapper = shallow(<PostCommentFormFake />);
expect(wrapper).toMatchSnapshot();
});
src/core/client/stream/components/PoweredBy.spec.tsx
+15
View File
@@ -0,0 +1,15 @@
import { shallow } from "enzyme";
import { noop } from "lodash";
import React from "react";
import { PropTypesOf } from "talk-framework/types";
import PoweredBy from "./PoweredBy";
it("renders correctly", () => {
const props: PropTypesOf<typeof PoweredBy> = {
className: "custom",
};
const wrapper = shallow(<PoweredBy {...props} />);
expect(wrapper).toMatchSnapshot();
});
src/core/client/stream/components/UserBoxAuthenticated.spec.tsx
+16
View File
@@ -0,0 +1,16 @@
import { shallow } from "enzyme";
import { noop } from "lodash";
import React from "react";
import { PropTypesOf } from "talk-framework/types";
import UserBoxAuthenticated from "./UserBoxAuthenticated";
it("renders correctly", () => {
const props: PropTypesOf<typeof UserBoxAuthenticated> = {
onSignOut: noop,
username: "Username",
};
const wrapper = shallow(<UserBoxAuthenticated {...props} />);
expect(wrapper).toMatchSnapshot();
});
src/core/client/stream/components/__snapshots__/PostCommentFormFake.spec.tsx.snap
+26
View File
@@ -0,0 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<withPropsOnChange(HorizontalGutter)
className="PostCommentFormFake-root"
>
<textarea
className="PostCommentFormFake-textarea"
disabled={true}
placeholder="Post a comment"
/>
<Localized
id="comments-PostCommentFormFake-signInAndJoin"
>
<withPropsOnChange(Button)
color="primary"
disabled={true}
fullWidth={true}
type="submit"
variant="filled"
>
Sign in and join the conversation
</withPropsOnChange(Button)>
</Localized>
</withPropsOnChange(HorizontalGutter)>
`;
src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap
+22
View File
@@ -0,0 +1,22 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<div
className="custom"
>
<withPropsOnChange(Typography)
color="textSecondary"
container="span"
variant="inputDescription"
>
Powered by
</withPropsOnChange(Typography)>
<withPropsOnChange(Typography)
container="span"
variant="heading4"
>
The Coral Project
</withPropsOnChange(Typography)>
</div>
`;
src/core/client/stream/components/__snapshots__/UserBoxAuthenticated.spec.tsx.snap
+38
View File
@@ -0,0 +1,38 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<withPropsOnChange(Flex)
itemGutter="half"
wrap={true}
>
<Localized
id="comments-userBoxAuthenticated-signedInAs"
username={<Username />}
>
<withPropsOnChange(Typography)
container="div"
variant="bodyCopy"
>
Signed in as &lt;username&gt;&lt;/username&gt;.
</withPropsOnChange(Typography)>
</Localized>
<Localized
button={
<withPropsOnChange(Button)
color="primary"
onClick={[Function]}
size="small"
variant="underlined"
/>
}
id="comments-userBoxAuthenticated-notYou"
>
<withPropsOnChange(Typography)
container={[Function]}
variant="bodyCopy"
>
Not you? &lt;button&gt;Sign Out&lt;/button&gt;
</withPropsOnChange(Typography)>
</Localized>
</withPropsOnChange(Flex)>
`;
src/core/client/ui/components/HorizontalGutter/HorizontalGutter.spec.tsx
+22
View File
@@ -0,0 +1,22 @@
import React from "react";
import TestRenderer from "react-test-renderer";
import { PropTypesOf } from "talk-ui/types";
import HorizontalGutter from "./HorizontalGutter";
it("renders correctly", () => {
const props: PropTypesOf<typeof HorizontalGutter> = {
className: "custom",
};
const renderer = TestRenderer.create(<HorizontalGutter {...props} />);
expect(renderer.toJSON()).toMatchSnapshot();
});
it("renders double size", () => {
const props: PropTypesOf<typeof HorizontalGutter> = {
size: "double",
};
const renderer = TestRenderer.create(<HorizontalGutter {...props} />);
expect(renderer.toJSON()).toMatchSnapshot();
});
src/core/client/ui/components/HorizontalGutter/__snapshots__/HorizontalGutter.spec.tsx.snap
+13
View File
@@ -0,0 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<div
className="HorizontalGutter-root custom HorizontalGutter-full"
/>
`;
exports[`renders double size 1`] = `
<div
className="HorizontalGutter-root HorizontalGutter-double"
/>
`;
src/core/client/ui/components/TextField/TextField.tsx
+2
View File
@@ -49,6 +49,8 @@ export interface TextFieldProps {
* onChange
*/
onChange?: EventHandler<ChangeEvent<HTMLInputElement>>;
disabled?: boolean;
}
const TextField: StatelessComponent<TextFieldProps> = props => {
src/docs/forms.mdx
+1 -1
View File
@@ -57,7 +57,7 @@ import { InputLabel, CallOut, ValidationMessage, TextField, InputDescription, Fl
<FormField>
<InputLabel defaultValue="something.com">Username</InputLabel>
<InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
<TextField fullWidth/>
<TextField color="error" fullWidth />
<ValidationMessage fullWidth>Invalid characters. Try again.</ValidationMessage>
</FormField>