mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 00:21:20 -05:00
Fix FeedbackForm tests + other small fixes
Add strings
This commit is contained in:
seotts
parent
42eb195b57
commit
ba99d49298
6 changed files with 147 additions and 32 deletions
|
|
@ -31,8 +31,8 @@ class FeedbackForm extends React.Component {
|
|||
}
|
||||
|
||||
validateFeedback (feedback) {
|
||||
if (feedback.length <= this.props.minLength) {
|
||||
return this.props.emptyError;
|
||||
if (feedback.length < this.props.minLength) {
|
||||
return this.props.emptyErrorMessage;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -82,7 +82,6 @@ class FeedbackForm extends React.Component {
|
|||
validate={this.validateFeedback}
|
||||
validationClassName="validation-full-width-input"
|
||||
/* eslint-disable react/jsx-no-bind */
|
||||
// onBlur={() => validateField('feedback')}
|
||||
onChange={e => {
|
||||
setFieldValue('feedback', e.target.value);
|
||||
setFieldTouched('feedback');
|
||||
|
|
@ -101,14 +100,14 @@ class FeedbackForm extends React.Component {
|
|||
}
|
||||
|
||||
FeedbackForm.propTypes = {
|
||||
emptyError: PropTypes.string,
|
||||
emptyErrorMessage: PropTypes.string,
|
||||
maxLength: PropTypes.number,
|
||||
minLength: PropTypes.number,
|
||||
onSubmit: PropTypes.string.isRequired
|
||||
onSubmit: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
FeedbackForm.defaultProps = {
|
||||
minLength: 0
|
||||
minLength: 1
|
||||
};
|
||||
|
||||
module.exports = FeedbackForm;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ class MuteModal extends React.Component {
|
|||
this.numSteps = this.props.showWarning ? steps.BAN_WARNING : steps.MUTE_INFO;
|
||||
|
||||
this.state = {
|
||||
step: 0
|
||||
step: steps.COMMENT_ISSUE
|
||||
};
|
||||
}
|
||||
handleNext () {
|
||||
|
|
@ -152,7 +152,7 @@ class MuteModal extends React.Component {
|
|||
<FormattedMessage id="comments.muted.mistakeInstructions" />
|
||||
</p>
|
||||
<FeedbackForm
|
||||
emptyError={this.props.intl.formatMessage({id: 'comments.muted.feedbackEmpty'})}
|
||||
emptyErrorMessage={this.props.intl.formatMessage({id: 'comments.muted.feedbackEmpty'})}
|
||||
maxLength={MAX_FEEDBACK_LENGTH}
|
||||
onSubmit={this.handleFeedbackSubmit}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
"general.birthMonth": "Birth Month",
|
||||
"general.birthYear": "Birth Year",
|
||||
"general.donate": "Donate",
|
||||
"general.monthDecember": "December",
|
||||
"general.cancel": "Cancel",
|
||||
"general.close": "Close",
|
||||
"general.collaborators": "Collaborators",
|
||||
"general.community": "Community",
|
||||
|
|
@ -82,6 +84,7 @@
|
|||
"general.scratchStore": "Scratch Store",
|
||||
"general.search": "Search",
|
||||
"general.searchEmpty": "Nothing found",
|
||||
"general.send": "Send",
|
||||
"general.signIn": "Sign in",
|
||||
"general.startOver": "Start over",
|
||||
"general.statistics": "Statistics",
|
||||
|
|
|
|||
83
static/svgs/commenting/thank_you_envelope.svg
Normal file
83
static/svgs/commenting/thank_you_envelope.svg
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 132 200" style="enable-background:new 0 0 132 200;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
.st1{opacity:0.25;fill:#FF8C1A;}
|
||||
.st2{fill:#FF8C1A;}
|
||||
.st3{opacity:0.25;fill:#0EB989;}
|
||||
.st4{fill:#FFC709;}
|
||||
.st5{fill:none;stroke:#5C6671;stroke-linecap:round;stroke-miterlimit:10;}
|
||||
.st6{fill:#5C6671;}
|
||||
.st7{opacity:0.5;fill:#6E7B8A;}
|
||||
.st8{fill-rule:evenodd;clip-rule:evenodd;fill:#ED5F87;}
|
||||
.st9{opacity:0.25;fill-rule:evenodd;clip-rule:evenodd;fill:#0EB989;}
|
||||
.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
|
||||
.st11{fill-rule:evenodd;clip-rule:evenodd;fill:#0EBD8C;fill-opacity:0.1;}
|
||||
.st12{fill-rule:evenodd;clip-rule:evenodd;fill:#575E75;fill-opacity:0.25;}
|
||||
.st13{fill-rule:evenodd;clip-rule:evenodd;fill:#0EBD8C;fill-opacity:0.25;}
|
||||
.st14{fill:#FFBF00;}
|
||||
.st15{fill:#2F9B73;}
|
||||
.st16{fill-rule:evenodd;clip-rule:evenodd;fill:#CF8B17;}
|
||||
.st17{fill-rule:evenodd;clip-rule:evenodd;fill:#5C6771;}
|
||||
.st18{opacity:0.25;fill-rule:evenodd;clip-rule:evenodd;fill:#0FBD8C;}
|
||||
.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#FFBF00;}
|
||||
.st20{fill-rule:evenodd;clip-rule:evenodd;fill:#36A97E;}
|
||||
.st21{opacity:0.6;fill-rule:evenodd;clip-rule:evenodd;fill:#0FBD8C;}
|
||||
.st22{fill:#9966FF;}
|
||||
.st23{fill-rule:evenodd;clip-rule:evenodd;fill:#575E75;}
|
||||
.st24{fill-rule:evenodd;clip-rule:evenodd;fill:#C2C5C6;}
|
||||
.st25{fill-rule:evenodd;clip-rule:evenodd;fill:#EEF3F8;}
|
||||
.st26{fill:#575E75;}
|
||||
.st27{opacity:0.3;fill:#575E75;}
|
||||
.st28{fill:#EEF3F8;}
|
||||
.st29{fill:#B5875C;}
|
||||
.st30{fill:#CCAA93;}
|
||||
.st31{fill:#5C6671;stroke:#FFBF00;stroke-width:0.5465;stroke-miterlimit:10;}
|
||||
.st32{opacity:0.8;fill:#FFFFFF;}
|
||||
.st33{fill:#DCDDDE;}
|
||||
.st34{fill:none;stroke:#DCDDDE;stroke-width:2.0722;stroke-miterlimit:10;}
|
||||
.st35{clip-path:url(#SVGID_2_);}
|
||||
.st36{opacity:0.6;}
|
||||
.st37{fill:#3CB98A;}
|
||||
.st38{fill:#3CB98A;stroke:#2F9B73;stroke-miterlimit:10;}
|
||||
.st39{fill-rule:evenodd;clip-rule:evenodd;fill:#DCDDDE;}
|
||||
.st40{clip-path:url(#SVGID_4_);}
|
||||
</style>
|
||||
<g id="Layer_2">
|
||||
</g>
|
||||
<g id="Layer_1">
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="SVGID_3_" width="132" height="200"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_2_">
|
||||
<use xlink:href="#SVGID_3_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
<g class="st35">
|
||||
<path class="st9" d="M-0.3,191.7c-63-3.3-56-14.6-59.5-91.5c-2.9-64.7,28.6-96,90.2-96c76.8,0,98.5,30.4,96.3,95.3
|
||||
C124.3,168.5,47.3,194.2-0.3,191.7z"/>
|
||||
<path class="st8" d="M104,69.8c0.5,6.9-6.5,13.5-8.4,13.8c-2,0.3-10.5-3.9-12.2-10.6c-0.1-0.2-0.1-0.4-0.1-0.7
|
||||
c-0.5-3.3,1.8-6.4,5.1-6.9c1.7-0.3,3.3,0.2,4.6,1.2c0.9-1.3,2.3-2.2,4-2.5c3.3-0.5,6.5,1.8,7,5.1C104,69.3,104,69.6,104,69.8z"/>
|
||||
<path class="st32" d="M14.7,35.6c1.8-0.5,3.3-1.9,3.8-3.8l1.1-4.2c0.5-2,3.3-2,3.9,0l1.1,4.2c0.5,1.8,1.9,3.3,3.8,3.8l4.2,1.1
|
||||
c2,0.5,2,3.3,0,3.9l-4.2,1.1c-1.8,0.5-3.3,1.9-3.8,3.8l-1.1,4.2c-0.5,2-3.3,2-3.9,0l-1.1-4.2c-0.5-1.8-1.9-3.3-3.8-3.8l-4.2-1.1
|
||||
c-2-0.5-2-3.3,0-3.9L14.7,35.6z"/>
|
||||
<path class="st32" d="M74.2,142c1.2-0.3,2.1-1.2,2.4-2.4l0.7-2.7c0.3-1.3,2.1-1.3,2.5,0l0.7,2.7c0.3,1.2,1.2,2.1,2.4,2.4l2.7,0.7
|
||||
c1.3,0.3,1.3,2.1,0,2.5l-2.7,0.7c-1.2,0.3-2.1,1.2-2.4,2.4l-0.7,2.7c-0.3,1.3-2.1,1.3-2.5,0l-0.7-2.7c-0.3-1.2-1.2-2.1-2.4-2.4
|
||||
l-2.7-0.7c-1.3-0.3-1.3-2.1,0-2.5L74.2,142z"/>
|
||||
<g>
|
||||
<path class="st33" d="M-16.1,82.2l81.8-20.5c2.3-0.6,4.6,0.8,5.1,3.1l13.9,55.5c0.6,2.3-0.8,4.6-3.1,5.1l-81.8,20.5
|
||||
c-2.3,0.6-4.6-0.8-5.1-3.1l-13.9-55.5C-19.8,85-18.4,82.7-16.1,82.2z"/>
|
||||
<path class="st0" d="M-17.4,77l81.8-20.5c2.3-0.6,4.6,0.8,5.1,3.1l13.9,55.5c0.6,2.3-0.8,4.6-3.1,5.1l-81.8,20.5
|
||||
c-2.3,0.6-4.6-0.8-5.1-3.1l-13.9-55.5C-21,79.9-19.7,77.6-17.4,77z"/>
|
||||
<path class="st34" d="M80.4,120.3L32.2,91.8c-1.8-1-4-0.4-5.1,1.3l-28.9,47.7L80.4,120.3z"/>
|
||||
<path class="st0" d="M64.5,56.6L-17.4,77c-1.1,0.3-2,1-2.6,1.9l50.4,25.9c1.9,0.8,4.2,0.3,5.4-1.4l31.9-46.3
|
||||
C66.7,56.5,65.6,56.3,64.5,56.6z"/>
|
||||
<path class="st33" d="M67.7,57.1l-31.8,46.4c-1.3,1.7-3.5,2.3-5.4,1.4L-19.9,79c-0.6,0.9-0.8,2-0.5,3l51.9,28.8
|
||||
c2.1,0.9,4.5,0.3,5.9-1.5l32.3-49.6C69.3,58.6,68.7,57.7,67.7,57.1z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
53
test/unit/components/feedback-form.test.jsx
Normal file
53
test/unit/components/feedback-form.test.jsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import React from 'react';
|
||||
import {mountWithIntl} from '../../helpers/intl-helpers.jsx';
|
||||
import FeedbackForm from '../../../src/components/modal/mute/feedback-form';
|
||||
|
||||
describe('FeedbackFormTest', () => {
|
||||
test('Feedback form empty feedback invalid', () => {
|
||||
const submitFn = jest.fn();
|
||||
const message = 'too short';
|
||||
const component = mountWithIntl(
|
||||
<FeedbackForm
|
||||
emptyErrorMessage={message}
|
||||
onSubmit={submitFn}
|
||||
/>
|
||||
);
|
||||
expect(component.find('FeedbackForm').instance()
|
||||
.validateFeedback('')
|
||||
).toBe(message);
|
||||
});
|
||||
|
||||
test('Feedback form shorter than minLength invalid', () => {
|
||||
const submitFn = jest.fn();
|
||||
const message = 'too short';
|
||||
const min = 7;
|
||||
const component = mountWithIntl(
|
||||
<FeedbackForm
|
||||
emptyErrorMessage={message}
|
||||
minLength={min}
|
||||
onSubmit={submitFn}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(component.find('FeedbackForm').instance()
|
||||
.validateFeedback('123456')
|
||||
).toBe(message);
|
||||
});
|
||||
|
||||
test('Feedback form greater than or equal to minLength invalid', () => {
|
||||
const submitFn = jest.fn();
|
||||
const message = 'too short';
|
||||
const min = 7;
|
||||
const component = mountWithIntl(
|
||||
<FeedbackForm
|
||||
emptyErrorMessage={message}
|
||||
minLength={min}
|
||||
onSubmit={submitFn}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(component.find('FeedbackForm').instance()
|
||||
.validateFeedback('1234567')
|
||||
).toBeNull();
|
||||
});
|
||||
});
|
||||
|
|
@ -154,36 +154,13 @@ describe('MuteModalTest', () => {
|
|||
expect(component.instance().state.step).toBe(3);
|
||||
});
|
||||
|
||||
test('Mute modal empty feedback invalid', () => {
|
||||
const component = shallowWithIntl(
|
||||
<MuteModal
|
||||
muteModalMessages={defaultMessages}
|
||||
/>
|
||||
).dive();
|
||||
|
||||
const emptyError = 'comments.muted.feedbackEmpty';
|
||||
expect(component.instance().validateFeedback('')).toBe(emptyError);
|
||||
});
|
||||
|
||||
test('Mute modal non-empty feedback valid', () => {
|
||||
const component = shallowWithIntl(
|
||||
<MuteModal
|
||||
muteModalMessages={defaultMessages}
|
||||
/>
|
||||
).dive();
|
||||
|
||||
expect(component.instance().validateFeedback('some feedback here')).toBeNull();
|
||||
});
|
||||
|
||||
test('Mute modal submit feedback gives thank you step', () => {
|
||||
const component = shallowWithIntl(
|
||||
<MuteModal
|
||||
muteModalMessages={defaultMessages}
|
||||
/>
|
||||
).dive();
|
||||
const mockFormikBag = {};
|
||||
mockFormikBag.setSubmitting = jest.fn();
|
||||
component.instance().handleValidSubmit({feedback: 'something'}, mockFormikBag);
|
||||
component.instance().handleFeedbackSubmit('something');
|
||||
expect(component.instance().state.step).toBe(4);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue