feat(intl): error messages

Author: paibamboo

src/app/components/RegisterForm.test.tsx

@@ -1,35 +1,33 @@
 import {shallow} from "enzyme";
 import {Promise} from "es6-promise";
 import * as React from "react";
-import {TestHelper} from "../helpers/TestHelper";
 import {RegisterForm, RegisterReduxForm} from "./RegisterForm";
 describe("<RegisterForm />", () => {
   it("without props", () => {
-    const component = new TestHelper().mount(RegisterReduxForm);
+    const component = <RegisterReduxForm />;
     expect(component).toMatchSnapshot();
   });
 
   it("when submitting button is disabled", () => {
-    const component = new TestHelper().withProps({submitting: true}).mount(RegisterReduxForm);
+    const component = <RegisterReduxForm submitting={true} />;
     expect(component).toMatchSnapshot();
   });
 
   it("when submitting button is enabled", () => {
-    const component = new TestHelper().withProps({submitting: false}).mount(RegisterReduxForm);
+    const component = <RegisterReduxForm submitting={false} />;
     expect(component).toMatchSnapshot();
   });
 
   it("when clear button is disabled", () => {
-    const component = new TestHelper().withProps({pristine: true}).mount(RegisterReduxForm);
+    const component = <RegisterReduxForm pristine={true} />;
     expect(component).toMatchSnapshot();
   });
 
   it("when clear button is enabled", () => {
-    const component = new TestHelper().withProps({pristine: false, submitting: false}).mount(RegisterReduxForm);
+    const component = <RegisterReduxForm pristine={false} submitting={false} />;
     expect(component).toMatchSnapshot();
   });
 
-  // Event simulation is limited for Shallow rendering, not sure why CounterPage.test.tsx works
   it("calls reset func when clear button is clicked", () => {
     const reset = jest.fn();
     const onSubmit = () => new Promise((resolve) => resolve());
@@ -40,7 +38,6 @@ describe("<RegisterForm />", () => {
     expect(reset).toHaveBeenCalled();
   });
 
-  // Event simulation is limited for Shallow rendering, not sure why CounterPage.test.tsx works
   it("calls handleSubmit func when form is submitted", () => {
     const handleSubmit = jest.fn();
     const onSubmit = () => new Promise((resolve) => resolve());

src/app/components/RegisterForm.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
+import {FormattedMessage} from "react-intl";
 import { Field, FormProps } from "redux-form";
 const { reduxForm } = require("redux-form");
 import {
-  aol, email, matchedPwd, maxLength, minLength, minValue,
-  numberType, renderField, required, tooOld
+  aol, CustomField, email, matchedPwd, maxLength, minLength,
+  minValue, numberType, required, tooOld
 } from "../helpers/FormHelper";
 
 export interface IFormData {
@@ -18,21 +19,63 @@ interface IProps {
   onSubmit: (values: IFormData) => Promise<any>;
 }
 
+/*tslint:disable:jsx-no-multiline-js*/
 class RegisterForm extends React.Component<FormProps<IFormData, IProps, null> & IProps, null> {
   public render(): JSX.Element {
     const {handleSubmit, pristine, reset, submitting} = this.props;
 
     return (
       <form onSubmit={handleSubmit}>
-        <Field name="username" type="text" component={renderField} label="Username" validate={[required, maxLength(15)]}/>
-        <Field name="password" type="password" component={renderField} label="Password" validate={[required, minLength(8)]}/>
-        <Field name="confirmPassword" type="password" component={renderField} label="Confirm Password" validate={[required, matchedPwd]}/>
-        <Field name="email" type="email" component={renderField} label="Email" validate={email} warn={aol}/>
-        <Field name="age" type="number" component={renderField} label="Age" validate={[required, numberType, minValue(18)]} warn={tooOld}/>
+        <Field
+          name="username"
+          type="text"
+          component={CustomField}
+          languageId="username"
+          defaultMessage="Username"
+          validate={[required("username.required", "Username is required"), maxLength("characters.max", "Must be {max} characters or less")(15)]}
+        />
+        <Field
+          name="password"
+          type="password"
+          component={CustomField}
+          languageId="password"
+          defaultMessage="Password"
+          validate={[required("password.required", "Password is required"), minLength("characters.min", "Must be {min} characters or more")(8)]}
+        />
+        <Field
+          name="confirmPassword"
+          type="password"
+          component={CustomField}
+          languageId="confirmpassword"
+          defaultMessage="Confirm Password"
+          validate={[required("confirmpassword.required", "Please confirm your password"), matchedPwd("password.unmatched", "Passwords are not matched")]}
+        />
+        <Field
+          name="email"
+          type="email"
+          component={CustomField}
+          languageId="email"
+          defaultMessage="Email"
+          validate={email("email.invalid", "Invalid email format")}
+          warn={aol("email.aol", "Really? You still use AOL for your email?")}
+        />
+        <Field
+          name="age"
+          type="number"
+          component={CustomField}
+          languageId="age"
+          defaultMessage="Age"
+          validate={[
+            required("age.required", "Age is required"),
+            numberType("field.numbertype", "Must be a number"),
+            minValue("register.minage", "You must be at least {min} years old!")(18)
+          ]}
+          warn={tooOld("register.tooold", "You are too old for this!")}
+        />
         <div>
-          <button type="submit" disabled={submitting}>Submit</button>
+          <button type="submit" disabled={submitting}><FormattedMessage id="submit" defaultMessage="Submit" /></button>
           <button type="button" disabled={pristine || submitting} onClick={reset} style={{marginLeft: 10}}>
-            Clear Values
+            <FormattedMessage id="form.clearvalues" defaultMessage="Clear Values" />
           </button>
         </div>
       </form>