Translating Form component

This commit is contained in:
Jeff Avallone 2019-01-15 21:42:41 -05:00
parent 3f692fc20b
commit c4a74ad244
6 changed files with 60 additions and 32 deletions

View File

@ -2,7 +2,7 @@
exports[`App removing rendered expression 1`] = `
<Fragment>
<Form
<LoadNamespace(Form)
expr="test expression"
onSubmit={[Function]}
syntax="js"
@ -20,7 +20,7 @@ exports[`App removing rendered expression 1`] = `
}
>
<FormActions />
</Form>
</LoadNamespace(Form)>
<RenderJS
expr="test expression"
onRender={[Function]}
@ -30,7 +30,7 @@ exports[`App removing rendered expression 1`] = `
exports[`App removing rendered expression 2`] = `
<Fragment>
<Form
<LoadNamespace(Form)
expr=""
onSubmit={[Function]}
syntax="js"
@ -52,7 +52,7 @@ exports[`App removing rendered expression 2`] = `
exports[`App rendering 1`] = `
<Fragment>
<Form
<LoadNamespace(Form)
expr=""
onSubmit={[Function]}
syntax="js"
@ -74,7 +74,7 @@ exports[`App rendering 1`] = `
exports[`App rendering an expression 1`] = `
<Fragment>
<Form
<LoadNamespace(Form)
expr=""
onSubmit={[Function]}
syntax="js"
@ -96,7 +96,7 @@ exports[`App rendering an expression 1`] = `
exports[`App rendering an expression 2`] = `
<Fragment>
<Form
<LoadNamespace(Form)
expr="test expression"
onSubmit={[Function]}
syntax="js"
@ -119,7 +119,7 @@ exports[`App rendering an expression 2`] = `
exports[`App rendering an expression 3`] = `
<Fragment>
<Form
<LoadNamespace(Form)
expr="test expression"
onSubmit={[Function]}
syntax="js"
@ -137,7 +137,7 @@ exports[`App rendering an expression 3`] = `
}
>
<FormActions />
</Form>
</LoadNamespace(Form)>
<RenderJS
expr="test expression"
onRender={[Function]}
@ -147,7 +147,7 @@ exports[`App rendering an expression 3`] = `
exports[`App rendering image details 1`] = `
<Fragment>
<Form
<LoadNamespace(Form)
expr="test expression"
onSubmit={[Function]}
syntax="js"
@ -165,7 +165,7 @@ exports[`App rendering image details 1`] = `
}
>
<FormActions />
</Form>
</LoadNamespace(Form)>
<RenderJS
expr="test expression"
onRender={[Function]}
@ -175,7 +175,7 @@ exports[`App rendering image details 1`] = `
exports[`App rendering image details 2`] = `
<Fragment>
<Form
<LoadNamespace(Form)
expr="test expression"
onSubmit={[Function]}
syntax="js"
@ -199,7 +199,7 @@ exports[`App rendering image details 2`] = `
}
}
/>
</Form>
</LoadNamespace(Form)>
<RenderJS
expr="test expression"
onRender={[Function]}
@ -209,7 +209,7 @@ exports[`App rendering image details 2`] = `
exports[`App rendering with an invalid syntax 1`] = `
<Fragment>
<Form
<LoadNamespace(Form)
expr=""
onSubmit={[Function]}
syntax="invalid"
@ -231,7 +231,7 @@ exports[`App rendering with an invalid syntax 1`] = `
exports[`App rendering with an invalid syntax 2`] = `
<Fragment>
<Form
<LoadNamespace(Form)
expr="test expression"
onSubmit={[Function]}
syntax="invalid"
@ -254,7 +254,7 @@ exports[`App rendering with an invalid syntax 2`] = `
exports[`App rendering with an invalid syntax 3`] = `
<Fragment>
<Form
<LoadNamespace(Form)
expr="test expression"
onSubmit={[Function]}
syntax="invalid"

View File

@ -12,12 +12,14 @@ exports[`Form rendering 1`] = `
name="expr"
onChange={[Function]}
onKeyPress={[Function]}
placeholder="Enter regular expression to display"
placeholder="TRANSLATE(Enter regular expression to display)"
/>
<button
type="submit"
>
Display
<WithMergedOptions(TransComponent)>
Display
</WithMergedOptions(TransComponent)>
</button>
<div
className="select"
@ -29,11 +31,15 @@ exports[`Form rendering 1`] = `
<option
key="testJS"
value="testJS"
/>
>
TRANSLATE(Testing JS)
</option>
<option
key="other"
value="other"
/>
>
TRANSLATE(Other)
</option>
</select>
<ChevronsDown
color="currentColor"

View File

@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withNamespaces, Trans } from 'react-i18next';
import ExpandIcon from 'react-feather/dist/icons/chevrons-down';
@ -17,7 +18,8 @@ class Form extends React.PureComponent {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
])
]),
t: PropTypes.func.isRequired
}
state = {
@ -46,7 +48,8 @@ class Form extends React.PureComponent {
render() {
const {
syntaxList,
children
children,
t
} = this.props;
const { expr, syntax } = this.state;
@ -58,15 +61,15 @@ class Form extends React.PureComponent {
onKeyPress={ this.handleKeyPress }
onChange={ this.handleChange }
autoFocus
placeholder="Enter regular expression to display"></textarea>
<button type="submit">Display</button>
placeholder={ t('Enter regular expression to display') }></textarea>
<button type="submit"><Trans>Display</Trans></button>
<div className={ style.select }>
<select
name="syntax"
value={ syntax }
onChange={ this.handleChange } >
{ syntaxList.map(({ id, label }) => (
<option value={ id } key={ id }>{ label }</option>
<option value={ id } key={ id }>{ t(label) }</option>
)) }
</select>
<ExpandIcon />
@ -77,4 +80,5 @@ class Form extends React.PureComponent {
}
}
export default Form;
export { Form };
export default withNamespaces()(Form);

View File

@ -1,17 +1,19 @@
import React from 'react';
import { shallow } from 'enzyme';
import Form from 'components/Form';
import { mockT } from 'i18n';
import { Form } from 'components/Form';
const syntaxList = [
{ id: 'testJS', name: 'Testing JS' },
{ id: 'other', name: 'Other' }
{ id: 'testJS', label: 'Testing JS' },
{ id: 'other', label: 'Other' }
];
const commonProps = { syntaxList, t: mockT };
describe('Form', () => {
test('rendering', () => {
const component = shallow(
<Form syntaxList={ syntaxList } onSubmit={ jest.fn() }>
<Form onSubmit={ jest.fn() } { ...commonProps }>
Actions
</Form>
);
@ -22,7 +24,7 @@ describe('Form', () => {
test('submitting form', () => {
const onSubmit = jest.fn();
const component = shallow(
<Form syntaxList={ syntaxList } onSubmit={ onSubmit } />
<Form onSubmit={ onSubmit } { ...commonProps } />
);
const exprInput = component.find('[name="expr"]');
@ -52,7 +54,7 @@ describe('Form', () => {
test('submitting form with Shift+Enter', () => {
const component = shallow(
<Form syntaxList={ syntaxList } onSubmit={ jest.fn() } />
<Form onSubmit={ jest.fn() } { ...commonProps } />
);
const form = component.instance();
const eventObj = {
@ -68,7 +70,7 @@ describe('Form', () => {
test('not submitting with just Enter', () => {
const component = shallow(
<Form syntaxList={ syntaxList } onSubmit={ jest.fn() } />
<Form onSubmit={ jest.fn() } { ...commonProps } />
);
const form = component.instance();
const eventObj = {

View File

@ -49,3 +49,11 @@
AN ERROR OCCURRED WHILE RENDERING THE REGULAR EXPRESSION.
"Retry": |
RETRY
"Enter regular expression to display": |
ENTER REGULAR EXPRESSION TO DISPLAY
"Display": |
DISPLAY
"JavaScript": |
JAVASCRIPT
"PCRE": |
PCRE

View File

@ -49,3 +49,11 @@
An error occurred while rendering the regular expression.
"Retry": |
Retry
"Enter regular expression to display": |
Enter regular expression to display
"Display": |
Display
"JavaScript": |
JavaScript
"PCRE": |
PCRE