Translating Form component
This commit is contained in:
parent
3f692fc20b
commit
c4a74ad244
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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);
|
||||
|
@ -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 = {
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user