diff --git a/src/containers/CriterionContainer/CriterionFeedback.jsx b/src/containers/CriterionContainer/CriterionFeedback.jsx index 2deb4b9..1fa5bfa 100644 --- a/src/containers/CriterionContainer/CriterionFeedback.jsx +++ b/src/containers/CriterionContainer/CriterionFeedback.jsx @@ -3,10 +3,12 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { Form } from '@edx/paragon'; +import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import { feedbackRequirement } from 'data/services/lms/constants'; import actions from 'data/actions'; import selectors from 'data/selectors'; +import messages from './messages'; /** * @@ -24,6 +26,8 @@ export class CriterionFeedback extends React.Component { }); } + translate = (msg) => this.props.intl.formatMessage(msg); + render() { const { config, isGrading, value } = this.props; if (config === feedbackRequirement.disabled) { @@ -33,7 +37,7 @@ export class CriterionFeedback extends React.Component { ({ describe('Criterion Feedback', () => { const props = { + intl: { formatMessage }, orderNum: 1, config: 'config string', isGrading: true, diff --git a/src/containers/CriterionContainer/RadioCriterion.jsx b/src/containers/CriterionContainer/RadioCriterion.jsx index cea8c33..53c65aa 100644 --- a/src/containers/CriterionContainer/RadioCriterion.jsx +++ b/src/containers/CriterionContainer/RadioCriterion.jsx @@ -3,9 +3,11 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { Form } from '@edx/paragon'; +import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import actions from 'data/actions'; import selectors from 'data/selectors'; +import messages from './messages'; /** * @@ -24,7 +26,12 @@ export class RadioCriterion extends React.Component { } render() { - const { config, data, isGrading } = this.props; + const { + config, + data, + intl, + isGrading, + } = this.props; return ( <> @@ -33,7 +40,7 @@ export class RadioCriterion extends React.Component { className="criteria-option" key={option.name} value={option.name} - description={`${option.points} points`} + description={intl.formatMessage(messages.optionPoints, { points: option.points })} onChange={this.onChange} disabled={!isGrading} > @@ -56,6 +63,8 @@ RadioCriterion.defaultProps = { RadioCriterion.propTypes = { orderNum: PropTypes.number.isRequired, isGrading: PropTypes.bool.isRequired, + // injected + intl: intlShape.isRequired, // redux config: PropTypes.shape({ prompt: PropTypes.string, @@ -87,4 +96,4 @@ export const mapDispatchToProps = { setCriterionOption: actions.grading.setCriterionOption, }; -export default connect(mapStateToProps, mapDispatchToProps)(RadioCriterion); +export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(RadioCriterion)); diff --git a/src/containers/CriterionContainer/RadioCriterion.test.jsx b/src/containers/CriterionContainer/RadioCriterion.test.jsx index fd3965e..116c789 100644 --- a/src/containers/CriterionContainer/RadioCriterion.test.jsx +++ b/src/containers/CriterionContainer/RadioCriterion.test.jsx @@ -3,6 +3,7 @@ import { shallow } from 'enzyme'; import actions from 'data/actions'; import selectors from 'data/selectors'; +import { formatMessage } from 'testUtils'; import { RadioCriterion, mapDispatchToProps, @@ -36,8 +37,9 @@ jest.mock('data/selectors', () => ({ }, })); -describe('Radio Crition Container', () => { +describe('Radio Criterion Container', () => { const props = { + intl: { formatMessage }, orderNum: 1, isGrading: true, config: { diff --git a/src/containers/CriterionContainer/ReviewCriterion.jsx b/src/containers/CriterionContainer/ReviewCriterion.jsx index 5721867..3272c4f 100644 --- a/src/containers/CriterionContainer/ReviewCriterion.jsx +++ b/src/containers/CriterionContainer/ReviewCriterion.jsx @@ -3,8 +3,10 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { Form, FormControlFeedback } from '@edx/paragon'; +import { FormattedMessage } from '@edx/frontend-platform/i18n'; import selectors from 'data/selectors'; +import messages from './messages'; /** * @@ -16,7 +18,7 @@ export const ReviewCriterion = ({ config }) => (
{option.label} - {`${option.points} points`} +
diff --git a/src/containers/CriterionContainer/ReviewCriterion.test.jsx b/src/containers/CriterionContainer/ReviewCriterion.test.jsx index 19b3fdd..170b0e1 100644 --- a/src/containers/CriterionContainer/ReviewCriterion.test.jsx +++ b/src/containers/CriterionContainer/ReviewCriterion.test.jsx @@ -3,6 +3,7 @@ import { shallow } from 'enzyme'; import selectors from 'data/selectors'; import { ReviewCriterion, mapStateToProps } from './ReviewCriterion'; +import messages from './messages'; jest.mock('@edx/paragon', () => ({ Form: { @@ -80,9 +81,10 @@ describe('Review Crition Container', () => { expect(optionEl.find('.option-label').childAt(0).text()).toEqual( option.label, ); - expect(optionEl.find('.option-points').childAt(0).text()).toContain( - String(option.points), - ); + expect(optionEl.find('.option-points').childAt(0).props()).toEqual({ + ...messages.optionPoints, + values: { points: option.points }, + }); }); }); }); diff --git a/src/containers/CriterionContainer/__snapshots__/RadioCriterion.test.jsx.snap b/src/containers/CriterionContainer/__snapshots__/RadioCriterion.test.jsx.snap index eae402b..d8c2128 100644 --- a/src/containers/CriterionContainer/__snapshots__/RadioCriterion.test.jsx.snap +++ b/src/containers/CriterionContainer/__snapshots__/RadioCriterion.test.jsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Radio Crition Container snapshot is grading 1`] = ` +exports[`Radio Criterion Container snapshot is grading 1`] = ` `; -exports[`Radio Crition Container snapshot is not grading 1`] = ` +exports[`Radio Criterion Container snapshot is not grading 1`] = ` - 1 points + @@ -34,7 +43,16 @@ exports[`Review Crition Container snapshot 1`] = ` - 2 points + diff --git a/src/containers/CriterionContainer/messages.js b/src/containers/CriterionContainer/messages.js new file mode 100644 index 0000000..22263cc --- /dev/null +++ b/src/containers/CriterionContainer/messages.js @@ -0,0 +1,21 @@ +import { defineMessages } from '@edx/frontend-platform/i18n'; + +const messages = defineMessages({ + addComments: { + id: 'ora-grading.CriterionFeedback.addCommentsLabel', + defaultMessage: 'Add comments', + description: 'label for editable feedback field', + }, + comments: { + id: 'ora-grading.CriterionFeedback.commentsLabel', + defaultMessage: 'Comments', + description: 'label for read-only feedback field', + }, + optionPoints: { + id: 'ora-grading.RadioCriterion.optionPoints', + defaultMessage: '{points} points', + description: 'criterion option point value display', + }, +}); + +export default messages;