fix: add validation to problem number fields (#425)

Author: ihor-romaniuk

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.js

@@ -160,7 +160,7 @@ export const scoringCardHooks = (scoring, updateSettings, defaultValue) => {
 
   const handleWeightChange = (event) => {
     let weight = parseFloat(event.target.value);
-    if (_.isNaN(weight)) {
+    if (_.isNaN(weight) || weight < 0) {
       weight = 0;
     }
     updateSettings({ scoring: { ...scoring, weight } });
@@ -194,7 +194,7 @@ export const useAnswerSettings = (showAnswer, updateSettings) => {
 
   const handleAttemptsChange = (event) => {
     let attempts = parseInt(event.target.value);
-    if (_.isNaN(attempts)) {
+    if (_.isNaN(attempts) || attempts < 0) {
       attempts = 0;
     }
     updateSettings({ showAnswer: { ...showAnswer, afterAttempts: attempts } });
@@ -210,7 +210,7 @@ export const useAnswerSettings = (showAnswer, updateSettings) => {
 export const timerCardHooks = (updateSettings) => ({
   handleChange: (event) => {
     let time = parseInt(event.target.value);
-    if (_.isNaN(time)) {
+    if (_.isNaN(time) || time < 0) {
       time = 0;
     }
     updateSettings({ timeBetween: time });

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.jsx

@@ -49,6 +49,8 @@ export const ScoringCard = ({
       <Form.Group>
         <Form.Control
           type="number"
+          min={0}
+          step={0.1}
           value={scoring.weight}
           onChange={handleWeightChange}
           floatingLabel={intl.formatMessage(messages.scoringWeightInputLabel)}
@@ -59,6 +61,8 @@ export const ScoringCard = ({
       </Form.Group>
       <Form.Group>
         <Form.Control
+          type="number"
+          min={0}
           value={attemptDisplayValue}
           onChange={handleOnChange}
           onBlur={handleMaxAttemptChange}

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.jsx

@@ -69,6 +69,7 @@ export const ShowAnswerCard = ({
         <Form.Group className="pb-0 mb-0 mt-4">
           <Form.Control
             type="number"
+            min={0}
             value={showAnswer.afterAttempts}
             onChange={handleAttemptsChange}
             floatingLabel={intl.formatMessage(messages.showAnswerAttemptsInputLabel)}

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TimerCard.jsx

@@ -27,6 +27,7 @@ export const TimerCard = ({
       <Form.Group>
         <Form.Control
           type="number"
+          min={0}
           value={timeBetween}
           onChange={handleChange}
           floatingLabel={intl.formatMessage(messages.timerInputLabel)}

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/index.jsx

@@ -24,7 +24,11 @@ export const handleToleranceTypeChange = ({ updateSettings, tolerance, answers }
 
 export const handleToleranceValueChange = ({ updateSettings, tolerance, answers }) => (event) => {
   if (!isAnswerRangeSet({ answers })) {
-    const newTolerance = { value: event.target.value, type: tolerance.type };
+    let value = parseFloat(event.target.value);
+    if (value < 0) {
+      value = 0;
+    }
+    const newTolerance = { value, type: tolerance.type };
     updateSettings({ tolerance: newTolerance });
   }
 };
@@ -92,6 +96,8 @@ export const ToleranceCard = ({
           <Form.Control
             className="mt-4"
             type="number"
+            min={0}
+            step={0.1}
             value={tolerance.value}
             onChange={handleToleranceValueChange({ updateSettings, tolerance, answers })}
             floatingLabel={intl.formatMessage(messages.toleranceValueInputLabel)}

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/index.test.jsx

@@ -138,15 +138,20 @@ describe('ToleranceCard', () => {
       const { queryByTestId } = render(<ToleranceCard tolerance={mockToleranceNull} {...props} />);
       expect(queryByTestId('input')).toBeFalsy();
     });
-    it('Renders with intial value of tolerance', async () => {
+    it('Renders with initial value of tolerance', async () => {
       const { queryByTestId } = render(<ToleranceCard tolerance={mockToleranceNumber} {...props} />);
       expect(queryByTestId('input')).toBeTruthy();
       expect(screen.getByDisplayValue('0')).toBeTruthy();
     });
     it('Calls change function on change.', () => {
       const { queryByTestId } = render(<ToleranceCard tolerance={mockToleranceNumber} {...props} />);
       fireEvent.change(queryByTestId('input'), { target: { value: 52 } });
-      expect(props.updateSettings).toHaveBeenCalledWith({ tolerance: { type: ToleranceTypes.number.type, value: '52' } });
+      expect(props.updateSettings).toHaveBeenCalledWith({ tolerance: { type: ToleranceTypes.number.type, value: 52 } });
+    });
+    it('Resets negative value on change.', () => {
+      const { queryByTestId } = render(<ToleranceCard tolerance={mockToleranceNumber} {...props} />);
+      fireEvent.change(queryByTestId('input'), { target: { value: -52 } });
+      expect(props.updateSettings).toHaveBeenCalledWith({ tolerance: { type: ToleranceTypes.number.type, value: 0 } });
     });
   });
 });

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ScoringCard.test.jsx.snap

@@ -20,7 +20,9 @@ exports[`ScoringCard snapshot snapshot: scoring setting card 1`] = `
   <Form.Group>
     <Form.Control
       floatingLabel="Points"
+      min={0}
       onChange={[MockFunction scoringCardHooks.handleWeightChange]}
+      step={0.1}
       type="number"
       value={1.5}
     />
@@ -36,8 +38,10 @@ exports[`ScoringCard snapshot snapshot: scoring setting card 1`] = `
     <Form.Control
       disabled={false}
       floatingLabel="Attempts"
+      min={0}
       onBlur={[MockFunction scoringCardHooks.handleMaxAttemptChange]}
       onChange={[MockFunction scoringCardHooks.handleOnChange]}
+      type="number"
     />
     <Form.Control.Feedback>
       <FormattedMessage
@@ -95,7 +99,9 @@ exports[`ScoringCard snapshot snapshot: scoring setting card max attempts 1`] =
   <Form.Group>
     <Form.Control
       floatingLabel="Points"
+      min={0}
       onChange={[MockFunction scoringCardHooks.handleWeightChange]}
+      step={0.1}
       type="number"
       value={1.5}
     />
@@ -111,8 +117,10 @@ exports[`ScoringCard snapshot snapshot: scoring setting card max attempts 1`] =
     <Form.Control
       disabled={true}
       floatingLabel="Attempts"
+      min={0}
       onBlur={[MockFunction scoringCardHooks.handleMaxAttemptChange]}
       onChange={[MockFunction scoringCardHooks.handleOnChange]}
+      type="number"
     />
     <Form.Control.Feedback>
       <FormattedMessage
@@ -170,7 +178,9 @@ exports[`ScoringCard snapshot snapshot: scoring setting card zero zero weight 1`
   <Form.Group>
     <Form.Control
       floatingLabel="Points"
+      min={0}
       onChange={[MockFunction scoringCardHooks.handleWeightChange]}
+      step={0.1}
       type="number"
       value={0}
     />
@@ -186,8 +196,10 @@ exports[`ScoringCard snapshot snapshot: scoring setting card zero zero weight 1`
     <Form.Control
       disabled={false}
       floatingLabel="Attempts"
+      min={0}
       onBlur={[MockFunction scoringCardHooks.handleMaxAttemptChange]}
       onChange={[MockFunction scoringCardHooks.handleOnChange]}
+      type="number"
     />
     <Form.Control.Feedback>
       <FormattedMessage

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TimerCard.test.jsx.snap

@@ -22,6 +22,7 @@ exports[`TimerCard snapshot snapshot: renders reset true setting card 1`] = `
   <Form.Group>
     <Form.Control
       floatingLabel="Seconds"
+      min={0}
       onChange={[MockFunction timerCardHooks.handleChange]}
       type="number"
       value={5}