From 50fdf66e5e6e7971e2263d5f1f1b829ec1a559d3 Mon Sep 17 00:00:00 2001
From: Deundre Williams <de871959@ucf.edu>
Date: Thu, 8 Sep 2022 12:02:32 -0400
Subject: [PATCH 1/6] add margin of error validation

---
 .../NumericAnswer/numeric-option.js           | 60 +++++++++++++++++--
 1 file changed, 55 insertions(+), 5 deletions(-)

diff --git a/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.js b/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.js
index b23c7cd447..84171e5fc8 100644
--- a/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.js
+++ b/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.js
@@ -6,7 +6,8 @@ import {
 	WITHIN_A_RANGE,
 	requirementDropdown,
 	marginDropdown,
-	simplifedToFullText
+	simplifedToFullText,
+	PERCENT
 } from '../constants'
 import NumericEntry from '../entry/numeric-entry'
 import {
@@ -95,12 +96,30 @@ const getRangeEndValidityString = (startValueString, endValueString) => {
 	}
 }
 
-const onBlurAnswer = event => {
-	event.target.setCustomValidity(getValidityString(event.target.value))
-	event.target.reportValidity()
+const getMarginOfErrorValidityString = (answer, errorType) => {
+
+	// Filter out leading zeroes
+	const parsedAnswer = parseInt(answer)
+
+	switch(simplifedToFullText[errorType]) {
+		case PERCENT: {
+			if (parsedAnswer === 0)
+				return 'Answer cannot be 0 while Error Type is Percent'
+			else
+				return ''
+		}
+		default:
+			return ''
+	}
+
 }
 
-const NumericOption = ({ numericChoice, onHandleInputChange, onHandleSelectChange }) => {
+const NumericOption = ({ editor, numericChoice, onHandleInputChange, onHandleSelectChange }) => {
+
+	const answerRef = React.createRef()
+
+	const marginErrorTypeRef = React.createRef()
+
 	const inputStartRef = React.createRef()
 	const inputEndRef = React.createRef()
 	const { requirement, answer, start, end, margin, type } = numericChoice
@@ -111,6 +130,24 @@ const NumericOption = ({ numericChoice, onHandleInputChange, onHandleSelectChang
 		onHandleInputChange(event)
 	}
 
+	const onBlurAnswer = event => {
+
+		// Get normal error validity string
+		let answerValidityString = getValidityString(event.target.value)
+
+		// Validate for margin of error
+		if (answerValidityString === '' && !isRefRelatedTarget(event, marginErrorTypeRef)) {
+			answerValidityString = getMarginOfErrorValidityString(answer, type)
+		}
+
+		if (answerValidityString !== '') {
+			editor.addToErrors(event.target)
+		}
+
+		event.target.setCustomValidity(answerValidityString)
+		event.target.reportValidity()
+	}
+
 	const onBlurErrorValue = event => {
 		const errorAmount = parseFloat(event.target.value)
 
@@ -151,6 +188,16 @@ const NumericOption = ({ numericChoice, onHandleInputChange, onHandleSelectChang
 		onBlurAnswer(event)
 	}
 
+	const onBlurMarginOfErrorType = event => {
+
+		// If not moving to related input, get validity string
+		if (!isRefRelatedTarget(event, answerRef)) {
+			event.target.setCustomValidity(getMarginOfErrorValidityString(answer, type))
+			event.target.reportValidity()
+		}
+
+	}
+
 	switch (simplifedToFullText[requirement]) {
 		case WITHIN_A_RANGE:
 			return (
@@ -222,6 +269,7 @@ const NumericOption = ({ numericChoice, onHandleInputChange, onHandleSelectChang
 							onBlur={onBlurAnswer}
 							contentEditable={false}
 							autoComplete="off"
+							ref={answerRef}
 						/>
 					</label>
 					<label className="select margin-type">
@@ -231,6 +279,8 @@ const NumericOption = ({ numericChoice, onHandleInputChange, onHandleSelectChang
 							name="margin-type"
 							value={simplifedToFullText[type]}
 							onChange={onHandleSelectChange}
+							ref={marginErrorTypeRef}
+							onBlur={onBlurMarginOfErrorType}
 						>
 							{marginDropdown.map(type => (
 								<option key={type}>{type}</option>

From 7cc86497894f696c0d04e164d2d284b12665ef11 Mon Sep 17 00:00:00 2001
From: Deundre Williams <de871959@ucf.edu>
Date: Tue, 13 Sep 2022 08:55:26 -0400
Subject: [PATCH 2/6] add test

---
 .../components/visual-editor.test.js          |  21 +
 .../oboeditor/components/visual-editor.js     |  12 +
 .../editor-component.test.js.snap             |  14 +
 .../__snapshots__/numeric-option.test.js.snap |   3 +
 .../NumericAnswer/numeric-option.js           |  62 +-
 .../NumericAnswer/numeric-option.test.js      | 766 +++++++++++-------
 6 files changed, 564 insertions(+), 314 deletions(-)

diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/visual-editor.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/visual-editor.test.js
index 05429bce40..4e31729dce 100644
--- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/visual-editor.test.js
+++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/visual-editor.test.js
@@ -1451,4 +1451,25 @@ describe('VisualEditor', () => {
 		expect(spy).not.toHaveBeenCalled()
 		expect(instance.state.saveState).toBe('')
 	})
+
+	test('PageEditor component doesnt save if any input field is invalid', () => {
+		const props = { model: { title: '' } }
+		const mockFn = jest.fn()
+		const spy = jest.spyOn(VisualEditor.prototype, 'exportCurrentToJSON')
+
+		const mockReportValidty = jest.fn().mockReturnValue(false)
+
+		const component = mount(<VisualEditor {...props} />)
+		const instance = component.instance()
+
+		document.getElementsByTagName('input')[0].reportValidity = jest.fn().mockReturnValue(false)
+
+		instance.markUnsaved()
+		instance.saveModule('mockId')
+
+		// eslint-disable-next-line no-undefined
+		expect(instance.checkIfSaved(mockFn)).toBe(undefined)
+		expect(spy).not.toHaveBeenCalled()
+		expect(instance.state.saveState).toBe('')
+	})
 })
diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/visual-editor.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/visual-editor.js
index 3a059e3bb0..bd18caa6e8 100644
--- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/visual-editor.js
+++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/visual-editor.js
@@ -364,6 +364,18 @@ class VisualEditor extends React.Component {
 		const json = this.props.model.flatJSON()
 		json.content.start = EditorStore.state.startingId
 
+		// Check validity of all input and select elements
+		const inputFields = document.querySelectorAll('input,select')
+		const message = 'Cannot save this module while errors are present'
+
+		for (const field of Array.from(inputFields)) {
+			field.blur()
+			if (field.reportValidity() === false) {
+				window.alert(message) //eslint-disable-line no-alert
+				return
+			}
+		}
+
 		// deal with content
 		this.props.model.children.forEach(child => {
 			let contentJSON = {}
diff --git a/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/__snapshots__/editor-component.test.js.snap b/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/__snapshots__/editor-component.test.js.snap
index c83cf8e84e..bccb7026bd 100644
--- a/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/__snapshots__/editor-component.test.js.snap
+++ b/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/__snapshots__/editor-component.test.js.snap
@@ -379,6 +379,7 @@ exports[`NumericAnswer Editor Node NumericAnswer (requirement="margin",type="abs
       <select
         className="select-item"
         name="margin-type"
+        onBlur={[Function]}
         onChange={[Function]}
         value="Absolute"
       >
@@ -458,6 +459,7 @@ exports[`NumericAnswer Editor Node NumericAnswer (requirement="margin",type="abs
       <select
         className="select-item"
         name="margin-type"
+        onBlur={[Function]}
         onChange={[Function]}
         value="Absolute"
       >
@@ -537,6 +539,7 @@ exports[`NumericAnswer Editor Node NumericAnswer (requirement="margin",type="abs
       <select
         className="select-item"
         name="margin-type"
+        onBlur={[Function]}
         onChange={[Function]}
         value="Absolute"
       >
@@ -616,6 +619,7 @@ exports[`NumericAnswer Editor Node NumericAnswer (requirement="margin",type="abs
       <select
         className="select-item"
         name="margin-type"
+        onBlur={[Function]}
         onChange={[Function]}
         value="Absolute"
       >
@@ -695,6 +699,7 @@ exports[`NumericAnswer Editor Node NumericAnswer (requirement="margin",type="abs
       <select
         className="select-item"
         name="margin-type"
+        onBlur={[Function]}
         onChange={[Function]}
         value="Absolute"
       >
@@ -774,6 +779,7 @@ exports[`NumericAnswer Editor Node NumericAnswer (requirement="margin",type="abs
       <select
         className="select-item"
         name="margin-type"
+        onBlur={[Function]}
         onChange={[Function]}
         value="Absolute"
       >
@@ -853,6 +859,7 @@ exports[`NumericAnswer Editor Node NumericAnswer (requirement="margin",type="abs
       <select
         className="select-item"
         name="margin-type"
+        onBlur={[Function]}
         onChange={[Function]}
         value="Absolute"
       >
@@ -932,6 +939,7 @@ exports[`NumericAnswer Editor Node NumericAnswer (requirement="margin",type="per
       <select
         className="select-item"
         name="margin-type"
+        onBlur={[Function]}
         onChange={[Function]}
         value="Percent"
       >
@@ -1011,6 +1019,7 @@ exports[`NumericAnswer Editor Node NumericAnswer (requirement="margin",type="per
       <select
         className="select-item"
         name="margin-type"
+        onBlur={[Function]}
         onChange={[Function]}
         value="Percent"
       >
@@ -1090,6 +1099,7 @@ exports[`NumericAnswer Editor Node NumericAnswer (requirement="margin",type="per
       <select
         className="select-item"
         name="margin-type"
+        onBlur={[Function]}
         onChange={[Function]}
         value="Percent"
       >
@@ -1169,6 +1179,7 @@ exports[`NumericAnswer Editor Node NumericAnswer (requirement="margin",type="per
       <select
         className="select-item"
         name="margin-type"
+        onBlur={[Function]}
         onChange={[Function]}
         value="Percent"
       >
@@ -1248,6 +1259,7 @@ exports[`NumericAnswer Editor Node NumericAnswer (requirement="margin",type="per
       <select
         className="select-item"
         name="margin-type"
+        onBlur={[Function]}
         onChange={[Function]}
         value="Percent"
       >
@@ -1327,6 +1339,7 @@ exports[`NumericAnswer Editor Node NumericAnswer (requirement="margin",type="per
       <select
         className="select-item"
         name="margin-type"
+        onBlur={[Function]}
         onChange={[Function]}
         value="Percent"
       >
@@ -1406,6 +1419,7 @@ exports[`NumericAnswer Editor Node NumericAnswer (requirement="margin",type="per
       <select
         className="select-item"
         name="margin-type"
+        onBlur={[Function]}
         onChange={[Function]}
         value="Percent"
       >
diff --git a/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/__snapshots__/numeric-option.test.js.snap b/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/__snapshots__/numeric-option.test.js.snap
index 98ba56d1c5..6fb59cb662 100644
--- a/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/__snapshots__/numeric-option.test.js.snap
+++ b/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/__snapshots__/numeric-option.test.js.snap
@@ -92,6 +92,7 @@ exports[`NumericOption NumericOption renders as expected with requirement of \`m
     <select
       className="select-item"
       name="requirement"
+      onChange={[Function]}
       value="Margin of error"
     >
       <option>
@@ -126,6 +127,7 @@ exports[`NumericOption NumericOption renders as expected with requirement of \`m
     <select
       className="select-item"
       name="margin-type"
+      onBlur={[Function]}
     >
       <option>
         Percent
@@ -163,6 +165,7 @@ exports[`NumericOption NumericOption renders as expected with requirement of \`r
     <select
       className="select-item"
       name="requirement"
+      onChange={[Function]}
       value="Within a range"
     >
       <option>
diff --git a/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.js b/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.js
index 84171e5fc8..1ce732a45f 100644
--- a/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.js
+++ b/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.js
@@ -96,26 +96,24 @@ const getRangeEndValidityString = (startValueString, endValueString) => {
 	}
 }
 
-const getMarginOfErrorValidityString = (answer, errorType) => {
-
+const getMarginOfErrorAnswerValidityString = (answer, errorType) => {
 	// Filter out leading zeroes
-	const parsedAnswer = parseInt(answer)
+	const parsedAnswer = parseInt(answer, 10)
 
-	switch(simplifedToFullText[errorType]) {
+	switch (simplifedToFullText[errorType]) {
 		case PERCENT: {
-			if (parsedAnswer === 0)
+			if (parsedAnswer === 0) {
 				return 'Answer cannot be 0 while Error Type is Percent'
-			else
+			} else {
 				return ''
+			}
 		}
 		default:
 			return ''
 	}
-
 }
 
-const NumericOption = ({ editor, numericChoice, onHandleInputChange, onHandleSelectChange }) => {
-
+const NumericOption = ({ numericChoice, onHandleInputChange, onHandleSelectChange }) => {
 	const answerRef = React.createRef()
 
 	const marginErrorTypeRef = React.createRef()
@@ -124,6 +122,31 @@ const NumericOption = ({ editor, numericChoice, onHandleInputChange, onHandleSel
 	const inputEndRef = React.createRef()
 	const { requirement, answer, start, end, margin, type } = numericChoice
 
+	// Clear out any custom validity after a field changes to ensure old errors don't show
+	const clearCustomValidity = () => {
+		if (answerRef.current) {
+			answerRef.current.setCustomValidity('')
+		}
+
+		if (inputStartRef.current) {
+			inputStartRef.current.setCustomValidity('')
+		}
+
+		if (inputEndRef.current) {
+			inputEndRef.current.setCustomValidity('')
+		}
+
+		if (marginErrorTypeRef.current) {
+			marginErrorTypeRef.current.setCustomValidity('')
+		}
+	}
+
+	const onAnswerTypeChange = event => {
+		clearCustomValidity()
+
+		onHandleSelectChange(event)
+	}
+
 	const onChangeNumericValue = event => {
 		// Clear out the error string and then update state
 		event.target.setCustomValidity('')
@@ -131,24 +154,27 @@ const NumericOption = ({ editor, numericChoice, onHandleInputChange, onHandleSel
 	}
 
 	const onBlurAnswer = event => {
+		clearCustomValidity()
 
 		// Get normal error validity string
 		let answerValidityString = getValidityString(event.target.value)
 
 		// Validate for margin of error
 		if (answerValidityString === '' && !isRefRelatedTarget(event, marginErrorTypeRef)) {
-			answerValidityString = getMarginOfErrorValidityString(answer, type)
+			answerValidityString = getMarginOfErrorAnswerValidityString(event.target.value, type)
 		}
 
-		if (answerValidityString !== '') {
-			editor.addToErrors(event.target)
-		}
+		// if (answerValidityString !== '') {
+		// 	editor.addToErrors(event.target)
+		// }
 
 		event.target.setCustomValidity(answerValidityString)
 		event.target.reportValidity()
 	}
 
 	const onBlurErrorValue = event => {
+		clearCustomValidity()
+
 		const errorAmount = parseFloat(event.target.value)
 
 		if (!Number.isFinite(errorAmount)) {
@@ -163,6 +189,7 @@ const NumericOption = ({ editor, numericChoice, onHandleInputChange, onHandleSel
 	}
 
 	const onBlurStart = event => {
+		clearCustomValidity()
 		// If the user is moving to a related input then don't show range errors.
 		// If we don't do this then the user might be in the middle of typing a range
 		// and would be forced to fix it before they're done inputting the range
@@ -176,6 +203,7 @@ const NumericOption = ({ editor, numericChoice, onHandleInputChange, onHandleSel
 	}
 
 	const onBlurEnd = event => {
+		clearCustomValidity()
 		// If the user is moving to a related input then don't show range errors.
 		// If we don't do this then the user might be in the middle of typing a range
 		// and would be forced to fix it before they're done inputting the range
@@ -189,13 +217,13 @@ const NumericOption = ({ editor, numericChoice, onHandleInputChange, onHandleSel
 	}
 
 	const onBlurMarginOfErrorType = event => {
+		clearCustomValidity()
 
 		// If not moving to related input, get validity string
 		if (!isRefRelatedTarget(event, answerRef)) {
-			event.target.setCustomValidity(getMarginOfErrorValidityString(answer, type))
+			event.target.setCustomValidity(getMarginOfErrorAnswerValidityString(answer, type))
 			event.target.reportValidity()
 		}
-
 	}
 
 	switch (simplifedToFullText[requirement]) {
@@ -208,7 +236,7 @@ const NumericOption = ({ editor, numericChoice, onHandleInputChange, onHandleSel
 							className="select-item"
 							name="requirement"
 							value={simplifedToFullText[requirement]}
-							onChange={onHandleSelectChange}
+							onChange={onAnswerTypeChange}
 						>
 							{requirementDropdown.map(requirement => (
 								<option key={requirement}>{requirement}</option>
@@ -252,7 +280,7 @@ const NumericOption = ({ editor, numericChoice, onHandleInputChange, onHandleSel
 							className="select-item"
 							name="requirement"
 							value={simplifedToFullText[requirement]}
-							onChange={onHandleSelectChange}
+							onChange={onAnswerTypeChange}
 						>
 							{requirementDropdown.map(requirement => (
 								<option key={requirement}>{requirement}</option>
diff --git a/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.test.js b/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.test.js
index c7cacc2eb0..e7e8a20e27 100644
--- a/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.test.js
+++ b/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.test.js
@@ -311,338 +311,510 @@ describe('NumericOption', () => {
 		)
 	})
 
-	test('Error amount reports input error if a non-positive number', () => {
-		const onSelectChange = jest.fn()
-		const onInputChange = jest.fn()
-		const component = mount(
-			<NumericOption
-				numericChoice={{ requirement: 'margin', type: 'percent' }}
-				onHandleSelectChange={onSelectChange}
-				onHandleInputChange={onInputChange}
-			/>
-		)
-		const setCustomValidity = jest.fn()
-		const reportValidity = jest.fn()
+	describe('margin of error', () => {
+
+		describe('error amount', () => {
+			test('reports input error if a non-positive number', () => {
+				const onSelectChange = jest.fn()
+				const onInputChange = jest.fn()
+				const component = mount(
+					<NumericOption
+						numericChoice={{ requirement: 'margin', type: 'percent' }}
+						onHandleSelectChange={onSelectChange}
+						onHandleInputChange={onInputChange}
+					/>
+				)
+				const setCustomValidity = jest.fn()
+				const reportValidity = jest.fn()
+
+				component
+					.find('.input-item')
+					.at(1)
+					.simulate('blur', {
+						target: {
+							setCustomValidity,
+							reportValidity,
+							value: '1'
+						}
+					})
+				expect(setCustomValidity).toHaveBeenCalledTimes(1)
+				expect(setCustomValidity).toHaveBeenLastCalledWith('')
+				expect(reportValidity).toHaveBeenCalledTimes(1)
+
+				component
+					.find('.input-item')
+					.at(1)
+					.simulate('blur', {
+						target: {
+							setCustomValidity,
+							reportValidity,
+							value: '0'
+						}
+					})
+				expect(setCustomValidity).toHaveBeenCalledTimes(2)
+				expect(setCustomValidity).toHaveBeenLastCalledWith('Error amount must be greater than 0')
+				expect(reportValidity).toHaveBeenCalledTimes(2)
+
+				component
+					.find('.input-item')
+					.at(1)
+					.simulate('blur', {
+						target: {
+							setCustomValidity,
+							reportValidity,
+							value: ''
+						}
+					})
+				expect(setCustomValidity).toHaveBeenCalledTimes(3)
+				expect(setCustomValidity).toHaveBeenLastCalledWith('Enter a numeric error amount')
+				expect(reportValidity).toHaveBeenCalledTimes(3)
+
+				component
+					.find('.input-item')
+					.at(1)
+					.simulate('blur', {
+						target: {
+							setCustomValidity,
+							reportValidity,
+							value: 'x'
+						}
+					})
+				expect(setCustomValidity).toHaveBeenCalledTimes(4)
+				expect(setCustomValidity).toHaveBeenLastCalledWith('Enter a numeric error amount')
+				expect(reportValidity).toHaveBeenCalledTimes(4)
+
+				component
+					.find('.input-item')
+					.at(1)
+					.simulate('blur', {
+						target: {
+							setCustomValidity,
+							reportValidity,
+							value: '0.001'
+						}
+					})
+				expect(setCustomValidity).toHaveBeenCalledTimes(5)
+				expect(setCustomValidity).toHaveBeenLastCalledWith('')
+				expect(reportValidity).toHaveBeenCalledTimes(5)
+			})
+		})
 
-		component
-			.find('.input-item')
-			.at(1)
-			.simulate('blur', {
+		describe('answer', () => {
+			test('reports when blur from answer input', () => {
+				const onSelectChange = jest.fn()
+				const onInputChange = jest.fn()
+				const component = renderer.create(
+					<NumericOption
+						numericChoice={{ requirement: 'margin', type: 'percent' }}
+						onHandleSelectChange={onSelectChange}
+						onHandleInputChange={onInputChange}
+					/>
+				)
+				const setCustomValidity = jest.fn()
+				const reportValidity = jest.fn()
+				NumericEntry.mockImplementation(() => ({
+					status: OK
+				}))
+
+				NumericEntryRange.mockImplementation(() => ({
+					isSingular: true
+				}))
+
+				// Is ref related target
+				isRefRelatedTarget.mockImplementation(() => true)
+				component.root.findAllByProps({ className: 'input-item' })[0].props.onBlur({
+					target: {
+						setCustomValidity,
+						reportValidity,
+						value: '0'
+					},
+					relatedTarget: component.root.findAllByProps({ className: 'select-item' })[1]
+				})
+				expect(setCustomValidity).toHaveBeenCalledTimes(1)
+				expect(setCustomValidity).toHaveBeenLastCalledWith('')
+				expect(reportValidity).toHaveBeenCalledTimes(1)
+
+				// Is not ref related target
+				isRefRelatedTarget.mockImplementation(() => false)
+				component.root.findAllByProps({ className: 'input-item' })[0].props.onBlur({
+					target: {
+						setCustomValidity,
+						reportValidity,
+						value: '0'
+					},
+					relatedTarget: component.root.findAllByProps({ className: 'select-item' })[0]
+				})
+				expect(setCustomValidity).toHaveBeenCalledTimes(2)
+				expect(setCustomValidity).toHaveBeenLastCalledWith(
+					'Answer cannot be 0 while Error Type is Percent'
+				)
+				expect(reportValidity).toHaveBeenCalledTimes(2)
+			})
+		})
+
+		describe('error type', () => {
+			test('Expected validation is reported when blur from error type', () => {
+				const onSelectChange = jest.fn()
+				const onInputChange = jest.fn()
+				let component = renderer.create(
+					<NumericOption
+						numericChoice={{ requirement: 'margin', type: 'percent', answer: 0 }}
+						onHandleSelectChange={onSelectChange}
+						onHandleInputChange={onInputChange}
+					/>
+				)
+				const setCustomValidity = jest.fn()
+				const reportValidity = jest.fn()
+				NumericEntry.mockImplementation(() => ({
+					status: OK
+				}))
+
+				NumericEntryRange.mockImplementation(() => ({
+					isSingular: true
+				}))
+
+				// Is ref related target
+				isRefRelatedTarget.mockImplementation(() => true)
+
+				component.root.findAllByType('input')[0].value = '0'
+
+				component.root.findAllByType('select')[1].props.onBlur({
+					target: {
+						setCustomValidity,
+						reportValidity,
+						value: 'Percent'
+					},
+					relatedTarget: component.root.findAllByProps({ className: 'margin-value' })[0]
+				})
+				expect(setCustomValidity).toHaveBeenCalledTimes(0)
+
+				// Is not ref related target
+				isRefRelatedTarget.mockImplementation(() => false)
+				component.root.findAllByType('select')[1].props.onBlur({
+					target: {
+						setCustomValidity,
+						reportValidity,
+						value: 'Percent'
+					},
+					relatedTarget: component.root.findAllByProps({ className: 'input-item' })[1]
+				})
+				expect(setCustomValidity).toHaveBeenCalledTimes(1)
+				expect(setCustomValidity).toHaveBeenLastCalledWith(
+					'Answer cannot be 0 while Error Type is Percent'
+				)
+				expect(reportValidity).toHaveBeenCalledTimes(1)
+
+				component = renderer.create(
+					<NumericOption
+						numericChoice={{ requirement: 'margin', type: 'percent', answer: 1 }}
+						onHandleSelectChange={onSelectChange}
+						onHandleInputChange={onInputChange}
+					/>
+				)
+
+				isRefRelatedTarget.mockImplementation(() => false)
+				component.root.findAllByType('select')[1].props.onBlur({
+					target: {
+						setCustomValidity,
+						reportValidity,
+						value: 'Percent'
+					},
+					relatedTarget: component.root.findAllByProps({ className: 'input-item' })[1]
+				})
+				expect(setCustomValidity).toHaveBeenCalledTimes(2)
+				expect(setCustomValidity).toHaveBeenLastCalledWith('')
+				expect(reportValidity).toHaveBeenCalledTimes(2)
+			})
+
+			test('Expected validation is reported when blur from error type as absolute', () => {
+				const onSelectChange = jest.fn()
+				const onInputChange = jest.fn()
+				const component = renderer.create(
+					<NumericOption
+						numericChoice={{ requirement: 'margin', type: 'Absolute', answer: 0 }}
+						onHandleSelectChange={onSelectChange}
+						onHandleInputChange={onInputChange}
+					/>
+				)
+				const setCustomValidity = jest.fn()
+				const reportValidity = jest.fn()
+				NumericEntry.mockImplementation(() => ({
+					status: OK
+				}))
+
+				NumericEntryRange.mockImplementation(() => ({
+					isSingular: true
+				}))
+
+				// Is not ref related target
+				isRefRelatedTarget.mockImplementation(() => false)
+				component.root.findAllByType('select')[1].props.onBlur({
+					target: {
+						setCustomValidity,
+						reportValidity,
+						value: 'Absolute'
+					},
+					relatedTarget: component.root.findAllByProps({ className: 'input-item' })[1]
+				})
+				expect(setCustomValidity).toHaveBeenCalledTimes(1)
+				expect(setCustomValidity).toHaveBeenLastCalledWith('')
+				expect(reportValidity).toHaveBeenCalledTimes(1)
+			})
+		})
+
+
+	})
+
+	describe('within a range', () => {
+		test('Expected validation is reported when blur from start input', () => {
+			const onSelectChange = jest.fn()
+			const onInputChange = jest.fn()
+			const component = renderer.create(
+				<NumericOption
+					numericChoice={{ requirement: 'range', start: '1', end: '1' }}
+					onHandleSelectChange={onSelectChange}
+					onHandleInputChange={onInputChange}
+				/>
+			)
+			const setCustomValidity = jest.fn()
+			const reportValidity = jest.fn()
+			NumericEntry.mockImplementation(() => ({
+				status: OK
+			}))
+
+			NumericEntryRange.mockImplementation(() => ({
+				isSingular: true
+			}))
+
+			isRefRelatedTarget.mockImplementation(() => true)
+			component.root.findAllByProps({ className: 'input-item' })[0].props.onBlur({
 				target: {
 					setCustomValidity,
 					reportValidity,
 					value: '1'
-				}
+				},
+				relatedTarget: component.root.findAllByProps({ className: 'input-item' })[1]
 			})
-		expect(setCustomValidity).toHaveBeenCalledTimes(1)
-		expect(setCustomValidity).toHaveBeenLastCalledWith('')
-		expect(reportValidity).toHaveBeenCalledTimes(1)
+			expect(setCustomValidity).toHaveBeenCalledTimes(1)
+			expect(setCustomValidity).toHaveBeenLastCalledWith('')
+			expect(reportValidity).toHaveBeenCalledTimes(1)
 
-		component
-			.find('.input-item')
-			.at(1)
-			.simulate('blur', {
+			isRefRelatedTarget.mockImplementation(() => false)
+			component.root.findAllByProps({ className: 'input-item' })[0].props.onBlur({
 				target: {
 					setCustomValidity,
 					reportValidity,
-					value: '0'
-				}
+					value: '1'
+				},
+				relatedTarget: component.root.findAllByProps({ className: 'input-item' })[1]
+			})
+			expect(setCustomValidity).toHaveBeenCalledTimes(2)
+			expect(setCustomValidity).toHaveBeenLastCalledWith(
+				'Start value should be smaller than the end value'
+			)
+			expect(reportValidity).toHaveBeenCalledTimes(2)
+
+			NumericEntryRange.mockImplementation(() => {
+				throw 'Invalid range: min value must be larger than max value'
 			})
-		expect(setCustomValidity).toHaveBeenCalledTimes(2)
-		expect(setCustomValidity).toHaveBeenLastCalledWith('Error amount must be greater than 0')
-		expect(reportValidity).toHaveBeenCalledTimes(2)
 
-		component
-			.find('.input-item')
-			.at(1)
-			.simulate('blur', {
+			isRefRelatedTarget.mockImplementation(() => true)
+			component.root.findAllByProps({ className: 'input-item' })[0].props.onBlur({
 				target: {
 					setCustomValidity,
 					reportValidity,
-					value: ''
-				}
+					value: '2'
+				},
+				relatedTarget: component.root.findAllByProps({ className: 'input-item' })[1]
 			})
-		expect(setCustomValidity).toHaveBeenCalledTimes(3)
-		expect(setCustomValidity).toHaveBeenLastCalledWith('Enter a numeric error amount')
-		expect(reportValidity).toHaveBeenCalledTimes(3)
+			expect(setCustomValidity).toHaveBeenCalledTimes(3)
+			expect(setCustomValidity).toHaveBeenLastCalledWith('')
+			expect(reportValidity).toHaveBeenCalledTimes(3)
 
-		component
-			.find('.input-item')
-			.at(1)
-			.simulate('blur', {
+			isRefRelatedTarget.mockImplementation(() => false)
+			component.root.findAllByProps({ className: 'input-item' })[0].props.onBlur({
 				target: {
 					setCustomValidity,
 					reportValidity,
-					value: 'x'
-				}
+					value: '2'
+				},
+				relatedTarget: component.root.findAllByProps({ className: 'input-item' })[1]
+			})
+			expect(setCustomValidity).toHaveBeenCalledTimes(4)
+			expect(setCustomValidity).toHaveBeenLastCalledWith(
+				"Start value can't be larger than the end value"
+			)
+			expect(reportValidity).toHaveBeenCalledTimes(4)
+
+			NumericEntryRange.mockImplementation(() => {
+				throw 'Some other error'
 			})
-		expect(setCustomValidity).toHaveBeenCalledTimes(4)
-		expect(setCustomValidity).toHaveBeenLastCalledWith('Enter a numeric error amount')
-		expect(reportValidity).toHaveBeenCalledTimes(4)
 
-		component
-			.find('.input-item')
-			.at(1)
-			.simulate('blur', {
+			isRefRelatedTarget.mockImplementation(() => true)
+			component.root.findAllByProps({ className: 'input-item' })[0].props.onBlur({
 				target: {
 					setCustomValidity,
 					reportValidity,
-					value: '0.001'
-				}
+					value: '2'
+				},
+				relatedTarget: component.root.findAllByProps({ className: 'input-item' })[1]
 			})
-		expect(setCustomValidity).toHaveBeenCalledTimes(5)
-		expect(setCustomValidity).toHaveBeenLastCalledWith('')
-		expect(reportValidity).toHaveBeenCalledTimes(5)
-	})
-
-	test('Expected validation is reported when blur from start input', () => {
-		const onSelectChange = jest.fn()
-		const onInputChange = jest.fn()
-		const component = renderer.create(
-			<NumericOption
-				numericChoice={{ requirement: 'range', start: '1', end: '1' }}
-				onHandleSelectChange={onSelectChange}
-				onHandleInputChange={onInputChange}
-			/>
-		)
-		const setCustomValidity = jest.fn()
-		const reportValidity = jest.fn()
-		NumericEntry.mockImplementation(() => ({
-			status: OK
-		}))
-
-		NumericEntryRange.mockImplementation(() => ({
-			isSingular: true
-		}))
-
-		isRefRelatedTarget.mockImplementation(() => true)
-		component.root.findAllByProps({ className: 'input-item' })[0].props.onBlur({
-			target: {
-				setCustomValidity,
-				reportValidity,
-				value: '1'
-			},
-			relatedTarget: component.root.findAllByProps({ className: 'input-item' })[1]
-		})
-		expect(setCustomValidity).toHaveBeenCalledTimes(1)
-		expect(setCustomValidity).toHaveBeenLastCalledWith('')
-		expect(reportValidity).toHaveBeenCalledTimes(1)
-
-		isRefRelatedTarget.mockImplementation(() => false)
-		component.root.findAllByProps({ className: 'input-item' })[0].props.onBlur({
-			target: {
-				setCustomValidity,
-				reportValidity,
-				value: '1'
-			},
-			relatedTarget: component.root.findAllByProps({ className: 'input-item' })[1]
-		})
-		expect(setCustomValidity).toHaveBeenCalledTimes(2)
-		expect(setCustomValidity).toHaveBeenLastCalledWith(
-			'Start value should be smaller than the end value'
-		)
-		expect(reportValidity).toHaveBeenCalledTimes(2)
-
-		NumericEntryRange.mockImplementation(() => {
-			throw 'Invalid range: min value must be larger than max value'
-		})
-
-		isRefRelatedTarget.mockImplementation(() => true)
-		component.root.findAllByProps({ className: 'input-item' })[0].props.onBlur({
-			target: {
-				setCustomValidity,
-				reportValidity,
-				value: '2'
-			},
-			relatedTarget: component.root.findAllByProps({ className: 'input-item' })[1]
-		})
-		expect(setCustomValidity).toHaveBeenCalledTimes(3)
-		expect(setCustomValidity).toHaveBeenLastCalledWith('')
-		expect(reportValidity).toHaveBeenCalledTimes(3)
-
-		isRefRelatedTarget.mockImplementation(() => false)
-		component.root.findAllByProps({ className: 'input-item' })[0].props.onBlur({
-			target: {
-				setCustomValidity,
-				reportValidity,
-				value: '2'
-			},
-			relatedTarget: component.root.findAllByProps({ className: 'input-item' })[1]
-		})
-		expect(setCustomValidity).toHaveBeenCalledTimes(4)
-		expect(setCustomValidity).toHaveBeenLastCalledWith(
-			"Start value can't be larger than the end value"
-		)
-		expect(reportValidity).toHaveBeenCalledTimes(4)
-
-		NumericEntryRange.mockImplementation(() => {
-			throw 'Some other error'
-		})
+			expect(setCustomValidity).toHaveBeenCalledTimes(5)
+			expect(setCustomValidity).toHaveBeenLastCalledWith('')
+			expect(reportValidity).toHaveBeenCalledTimes(5)
 
-		isRefRelatedTarget.mockImplementation(() => true)
-		component.root.findAllByProps({ className: 'input-item' })[0].props.onBlur({
-			target: {
-				setCustomValidity,
-				reportValidity,
-				value: '2'
-			},
-			relatedTarget: component.root.findAllByProps({ className: 'input-item' })[1]
-		})
-		expect(setCustomValidity).toHaveBeenCalledTimes(5)
-		expect(setCustomValidity).toHaveBeenLastCalledWith('')
-		expect(reportValidity).toHaveBeenCalledTimes(5)
-
-		isRefRelatedTarget.mockImplementation(() => false)
-		component.root.findAllByProps({ className: 'input-item' })[0].props.onBlur({
-			target: {
-				setCustomValidity,
-				reportValidity,
-				value: '2'
-			},
-			relatedTarget: component.root.findAllByProps({ className: 'input-item' })[1]
+			isRefRelatedTarget.mockImplementation(() => false)
+			component.root.findAllByProps({ className: 'input-item' })[0].props.onBlur({
+				target: {
+					setCustomValidity,
+					reportValidity,
+					value: '2'
+				},
+				relatedTarget: component.root.findAllByProps({ className: 'input-item' })[1]
+			})
+			expect(setCustomValidity).toHaveBeenCalledTimes(6)
+			expect(setCustomValidity).toHaveBeenLastCalledWith('')
+			expect(reportValidity).toHaveBeenCalledTimes(6)
 		})
-		expect(setCustomValidity).toHaveBeenCalledTimes(6)
-		expect(setCustomValidity).toHaveBeenLastCalledWith('')
-		expect(reportValidity).toHaveBeenCalledTimes(6)
-	})
-
-	test('Expected validation is reported when blur from end input', () => {
-		const onSelectChange = jest.fn()
-		const onInputChange = jest.fn()
-		const component = renderer.create(
-			<NumericOption
-				numericChoice={{ requirement: 'range', start: '1', end: '1' }}
-				onHandleSelectChange={onSelectChange}
-				onHandleInputChange={onInputChange}
-			/>
-		)
-		const setCustomValidity = jest.fn()
-		const reportValidity = jest.fn()
-		NumericEntry.mockImplementation(() => ({
-			status: OK
-		}))
-
-		NumericEntryRange.mockImplementation(() => ({
-			isSingular: true
-		}))
 
-		isRefRelatedTarget.mockImplementation(() => true)
-		component.root.findAllByProps({ className: 'input-item' })[1].props.onBlur({
-			target: {
-				setCustomValidity,
-				reportValidity,
-				value: '1'
-			},
-			relatedTarget: component.root.findAllByProps({ className: 'input-item' })[0]
-		})
-		expect(setCustomValidity).toHaveBeenCalledTimes(1)
-		expect(setCustomValidity).toHaveBeenLastCalledWith('')
-		expect(reportValidity).toHaveBeenCalledTimes(1)
+		test('Expected validation is reported when blur from end input', () => {
+			const onSelectChange = jest.fn()
+			const onInputChange = jest.fn()
+			const component = renderer.create(
+				<NumericOption
+					numericChoice={{ requirement: 'range', start: '1', end: '1' }}
+					onHandleSelectChange={onSelectChange}
+					onHandleInputChange={onInputChange}
+				/>
+			)
+			const setCustomValidity = jest.fn()
+			const reportValidity = jest.fn()
+			NumericEntry.mockImplementation(() => ({
+				status: OK
+			}))
+
+			NumericEntryRange.mockImplementation(() => ({
+				isSingular: true
+			}))
+
+			isRefRelatedTarget.mockImplementation(() => true)
+			component.root.findAllByProps({ className: 'input-item' })[1].props.onBlur({
+				target: {
+					setCustomValidity,
+					reportValidity,
+					value: '1'
+				},
+				relatedTarget: component.root.findAllByProps({ className: 'input-item' })[0]
+			})
+			expect(setCustomValidity).toHaveBeenCalledTimes(1)
+			expect(setCustomValidity).toHaveBeenLastCalledWith('')
+			expect(reportValidity).toHaveBeenCalledTimes(1)
 
-		isRefRelatedTarget.mockImplementation(() => false)
-		component.root.findAllByProps({ className: 'input-item' })[1].props.onBlur({
-			target: {
-				setCustomValidity,
-				reportValidity,
-				value: '1'
-			},
-			relatedTarget: component.root.findAllByProps({ className: 'input-item' })[0]
-		})
-		expect(setCustomValidity).toHaveBeenCalledTimes(2)
-		expect(setCustomValidity).toHaveBeenLastCalledWith(
-			'End value should be larger than the start value'
-		)
-		expect(reportValidity).toHaveBeenCalledTimes(2)
+			isRefRelatedTarget.mockImplementation(() => false)
+			component.root.findAllByProps({ className: 'input-item' })[1].props.onBlur({
+				target: {
+					setCustomValidity,
+					reportValidity,
+					value: '1'
+				},
+				relatedTarget: component.root.findAllByProps({ className: 'input-item' })[0]
+			})
+			expect(setCustomValidity).toHaveBeenCalledTimes(2)
+			expect(setCustomValidity).toHaveBeenLastCalledWith(
+				'End value should be larger than the start value'
+			)
+			expect(reportValidity).toHaveBeenCalledTimes(2)
+
+			NumericEntryRange.mockImplementation(() => {
+				throw 'Invalid range: min value must be larger than max value'
+			})
 
-		NumericEntryRange.mockImplementation(() => {
-			throw 'Invalid range: min value must be larger than max value'
-		})
+			isRefRelatedTarget.mockImplementation(() => true)
+			component.root.findAllByProps({ className: 'input-item' })[1].props.onBlur({
+				target: {
+					setCustomValidity,
+					reportValidity,
+					value: '2'
+				},
+				relatedTarget: component.root.findAllByProps({ className: 'input-item' })[0]
+			})
+			expect(setCustomValidity).toHaveBeenCalledTimes(3)
+			expect(setCustomValidity).toHaveBeenLastCalledWith('')
+			expect(reportValidity).toHaveBeenCalledTimes(3)
 
-		isRefRelatedTarget.mockImplementation(() => true)
-		component.root.findAllByProps({ className: 'input-item' })[1].props.onBlur({
-			target: {
-				setCustomValidity,
-				reportValidity,
-				value: '2'
-			},
-			relatedTarget: component.root.findAllByProps({ className: 'input-item' })[0]
-		})
-		expect(setCustomValidity).toHaveBeenCalledTimes(3)
-		expect(setCustomValidity).toHaveBeenLastCalledWith('')
-		expect(reportValidity).toHaveBeenCalledTimes(3)
-
-		isRefRelatedTarget.mockImplementation(() => false)
-		component.root.findAllByProps({ className: 'input-item' })[1].props.onBlur({
-			target: {
-				setCustomValidity,
-				reportValidity,
-				value: '2'
-			},
-			relatedTarget: component.root.findAllByProps({ className: 'input-item' })[0]
-		})
-		expect(setCustomValidity).toHaveBeenCalledTimes(4)
-		expect(setCustomValidity).toHaveBeenLastCalledWith(
-			"End value can't be smaller than the start value"
-		)
-		expect(reportValidity).toHaveBeenCalledTimes(4)
+			isRefRelatedTarget.mockImplementation(() => false)
+			component.root.findAllByProps({ className: 'input-item' })[1].props.onBlur({
+				target: {
+					setCustomValidity,
+					reportValidity,
+					value: '2'
+				},
+				relatedTarget: component.root.findAllByProps({ className: 'input-item' })[0]
+			})
+			expect(setCustomValidity).toHaveBeenCalledTimes(4)
+			expect(setCustomValidity).toHaveBeenLastCalledWith(
+				"End value can't be smaller than the start value"
+			)
+			expect(reportValidity).toHaveBeenCalledTimes(4)
+
+			NumericEntryRange.mockImplementation(() => {
+				throw 'Some other error'
+			})
 
-		NumericEntryRange.mockImplementation(() => {
-			throw 'Some other error'
-		})
+			isRefRelatedTarget.mockImplementation(() => true)
+			component.root.findAllByProps({ className: 'input-item' })[1].props.onBlur({
+				target: {
+					setCustomValidity,
+					reportValidity,
+					value: '2'
+				},
+				relatedTarget: component.root.findAllByProps({ className: 'input-item' })[0]
+			})
+			expect(setCustomValidity).toHaveBeenCalledTimes(5)
+			expect(setCustomValidity).toHaveBeenLastCalledWith('')
+			expect(reportValidity).toHaveBeenCalledTimes(5)
 
-		isRefRelatedTarget.mockImplementation(() => true)
-		component.root.findAllByProps({ className: 'input-item' })[1].props.onBlur({
-			target: {
-				setCustomValidity,
-				reportValidity,
-				value: '2'
-			},
-			relatedTarget: component.root.findAllByProps({ className: 'input-item' })[0]
-		})
-		expect(setCustomValidity).toHaveBeenCalledTimes(5)
-		expect(setCustomValidity).toHaveBeenLastCalledWith('')
-		expect(reportValidity).toHaveBeenCalledTimes(5)
-
-		isRefRelatedTarget.mockImplementation(() => false)
-		component.root.findAllByProps({ className: 'input-item' })[1].props.onBlur({
-			target: {
-				setCustomValidity,
-				reportValidity,
-				value: '2'
-			},
-			relatedTarget: component.root.findAllByProps({ className: 'input-item' })[0]
-		})
-		expect(setCustomValidity).toHaveBeenCalledTimes(6)
-		expect(setCustomValidity).toHaveBeenLastCalledWith('')
-		expect(reportValidity).toHaveBeenCalledTimes(6)
+			isRefRelatedTarget.mockImplementation(() => false)
+			component.root.findAllByProps({ className: 'input-item' })[1].props.onBlur({
+				target: {
+					setCustomValidity,
+					reportValidity,
+					value: '2'
+				},
+				relatedTarget: component.root.findAllByProps({ className: 'input-item' })[0]
+			})
+			expect(setCustomValidity).toHaveBeenCalledTimes(6)
+			expect(setCustomValidity).toHaveBeenLastCalledWith('')
+			expect(reportValidity).toHaveBeenCalledTimes(6)
+
+			NumericEntryRange.mockImplementation(() => ({
+				isSingular: false
+			}))
+			isRefRelatedTarget.mockImplementation(() => true)
+			component.root.findAllByProps({ className: 'input-item' })[1].props.onBlur({
+				target: {
+					setCustomValidity,
+					reportValidity,
+					value: '2'
+				},
+				relatedTarget: component.root.findAllByProps({ className: 'input-item' })[0]
+			})
+			expect(setCustomValidity).toHaveBeenCalledTimes(7)
+			expect(setCustomValidity).toHaveBeenLastCalledWith('')
+			expect(reportValidity).toHaveBeenCalledTimes(7)
 
-		NumericEntryRange.mockImplementation(() => ({
-			isSingular: false
-		}))
-		isRefRelatedTarget.mockImplementation(() => true)
-		component.root.findAllByProps({ className: 'input-item' })[1].props.onBlur({
-			target: {
-				setCustomValidity,
-				reportValidity,
-				value: '2'
-			},
-			relatedTarget: component.root.findAllByProps({ className: 'input-item' })[0]
-		})
-		expect(setCustomValidity).toHaveBeenCalledTimes(7)
-		expect(setCustomValidity).toHaveBeenLastCalledWith('')
-		expect(reportValidity).toHaveBeenCalledTimes(7)
-
-		isRefRelatedTarget.mockImplementation(() => false)
-		component.root.findAllByProps({ className: 'input-item' })[1].props.onBlur({
-			target: {
-				setCustomValidity,
-				reportValidity,
-				value: '2'
-			},
-			relatedTarget: component.root.findAllByProps({ className: 'input-item' })[0]
+			isRefRelatedTarget.mockImplementation(() => false)
+			component.root.findAllByProps({ className: 'input-item' })[1].props.onBlur({
+				target: {
+					setCustomValidity,
+					reportValidity,
+					value: '2'
+				},
+				relatedTarget: component.root.findAllByProps({ className: 'input-item' })[0]
+			})
+			expect(setCustomValidity).toHaveBeenCalledTimes(8)
+			expect(setCustomValidity).toHaveBeenLastCalledWith('')
+			expect(reportValidity).toHaveBeenCalledTimes(8)
 		})
-		expect(setCustomValidity).toHaveBeenCalledTimes(8)
-		expect(setCustomValidity).toHaveBeenLastCalledWith('')
-		expect(reportValidity).toHaveBeenCalledTimes(8)
 	})
 })

From ccc0427586a2e5d1e8819fcabd7adf7fb9f0c528 Mon Sep 17 00:00:00 2001
From: Deundre Williams <de871959@ucf.edu>
Date: Wed, 21 Sep 2022 10:23:44 -0400
Subject: [PATCH 3/6] add test for preventing saving

---
 .../components/visual-editor.test.js          | 41 +++++++++++++++++--
 .../oboeditor/components/visual-editor.js     | 41 +++++++++++++------
 2 files changed, 67 insertions(+), 15 deletions(-)

diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/visual-editor.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/visual-editor.test.js
index 4e31729dce..14f7fcb4a0 100644
--- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/visual-editor.test.js
+++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/visual-editor.test.js
@@ -1456,20 +1456,55 @@ describe('VisualEditor', () => {
 		const props = { model: { title: '' } }
 		const mockFn = jest.fn()
 		const spy = jest.spyOn(VisualEditor.prototype, 'exportCurrentToJSON')
+		const hasInvalidFieldsSpy = jest.spyOn(VisualEditor.prototype, 'hasInvalidFields')
 
-		const mockReportValidty = jest.fn().mockReturnValue(false)
+		const input = document.createElement('input')
+		input.reportValidity = jest.fn().mockReturnValue(false)
+		document.body.appendChild(input)
 
 		const component = mount(<VisualEditor {...props} />)
 		const instance = component.instance()
 
-		document.getElementsByTagName('input')[0].reportValidity = jest.fn().mockReturnValue(false)
-
 		instance.markUnsaved()
 		instance.saveModule('mockId')
 
 		// eslint-disable-next-line no-undefined
 		expect(instance.checkIfSaved(mockFn)).toBe(undefined)
 		expect(spy).not.toHaveBeenCalled()
+		expect(hasInvalidFieldsSpy).toHaveBeenCalled()
 		expect(instance.state.saveState).toBe('')
+
+		document.body.removeChild(input)
+	})
+
+	test('PageEditor component saves if all input fields are valid', () => {
+		const props = {
+			model: {
+				title: '',
+				flatJSON: jest.fn().mockReturnValue({ content: {} }),
+				children: []
+			},
+			saveDraft: jest.fn().mockResolvedValue(true)
+		}
+		const spy = jest
+			.spyOn(VisualEditor.prototype, 'exportCurrentToJSON')
+			.mockImplementation(() => {})
+		const hasInvalidFieldsSpy = jest.spyOn(VisualEditor.prototype, 'hasInvalidFields')
+
+		const input = document.createElement('input')
+		input.reportValidity = jest.fn().mockReturnValue(true)
+		document.body.appendChild(input)
+
+		const component = mount(<VisualEditor {...props} />)
+		const instance = component.instance()
+
+		instance.markUnsaved()
+		instance.saveModule('mockId')
+
+		expect(hasInvalidFieldsSpy).toHaveBeenCalled()
+		expect(spy).toHaveBeenCalled()
+		expect(instance.state.saveState).toBe('saving')
+
+		document.body.removeChild(input)
 	})
 })
diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/visual-editor.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/visual-editor.js
index bd18caa6e8..5182107257 100644
--- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/visual-editor.js
+++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/visual-editor.js
@@ -71,6 +71,7 @@ class VisualEditor extends React.Component {
 		this.renderElement = this.renderElement.bind(this)
 		this.setEditorFocus = this.setEditorFocus.bind(this)
 		this.onClick = this.onClick.bind(this)
+		this.hasInvalidFields = this.hasInvalidFields.bind(this)
 
 		this.editor = this.withPlugins(withHistory(withReact(createEditor())))
 		this.editor.toggleEditable = this.toggleEditable
@@ -195,10 +196,17 @@ class VisualEditor extends React.Component {
 			//eslint-disable-next-line
 			return undefined // Returning undefined will allow browser to close normally
 		}
+
+		if (this.hasInvalidFields()) {
+			//eslint-disable-next-line
+			return undefined
+		}
+
 		if (this.state.saveState !== 'saveSuccessful') {
 			event.returnValue = true
 			return true // Returning true will cause browser to ask user to confirm leaving page
 		}
+
 		//eslint-disable-next-line
 		return undefined
 	}
@@ -355,27 +363,36 @@ class VisualEditor extends React.Component {
 		this.saveModule(this.props.draftId)
 	}
 
+	// Checks all input and select fields to see if any have false validity
+	hasInvalidFields() {
+		const inputFields = document.querySelectorAll('input,select')
+
+		for (const field of Array.from(inputFields)) {
+			field.blur()
+			if (field.reportValidity() === false) {
+				return true
+			}
+		}
+
+		return false
+	}
+
 	saveModule(draftId) {
 		if (this.props.readOnly) {
 			return
 		}
 
+		// Check validity of all input and select elements
+		if (this.hasInvalidFields()) {
+			const message = 'Cannot save this module while errors are present'
+			window.alert(message) //eslint-disable-line no-alert
+			return
+		}
+
 		this.exportCurrentToJSON()
 		const json = this.props.model.flatJSON()
 		json.content.start = EditorStore.state.startingId
 
-		// Check validity of all input and select elements
-		const inputFields = document.querySelectorAll('input,select')
-		const message = 'Cannot save this module while errors are present'
-
-		for (const field of Array.from(inputFields)) {
-			field.blur()
-			if (field.reportValidity() === false) {
-				window.alert(message) //eslint-disable-line no-alert
-				return
-			}
-		}
-
 		// deal with content
 		this.props.model.children.forEach(child => {
 			let contentJSON = {}

From 0fc5660ec10614d1b4f06a39ccd2ded291890883 Mon Sep 17 00:00:00 2001
From: Deundre Williams <de871959@ucf.edu>
Date: Wed, 21 Sep 2022 11:57:29 -0400
Subject: [PATCH 4/6] remove comment

---
 .../NumericAnswer/numeric-option.js                           | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.js b/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.js
index 1ce732a45f..4e10dcd264 100644
--- a/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.js
+++ b/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.js
@@ -164,10 +164,6 @@ const NumericOption = ({ numericChoice, onHandleInputChange, onHandleSelectChang
 			answerValidityString = getMarginOfErrorAnswerValidityString(event.target.value, type)
 		}
 
-		// if (answerValidityString !== '') {
-		// 	editor.addToErrors(event.target)
-		// }
-
 		event.target.setCustomValidity(answerValidityString)
 		event.target.reportValidity()
 	}

From 9b5e8bed7e7fef0a86a1411bcfa8609fa95374d5 Mon Sep 17 00:00:00 2001
From: Deundre Williams <de871959@ucf.edu>
Date: Thu, 22 Sep 2022 10:47:53 -0400
Subject: [PATCH 5/6] fix spacing

---
 .../NumericAnswer/numeric-option.js                              | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.js b/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.js
index 4e10dcd264..afd6991940 100644
--- a/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.js
+++ b/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.js
@@ -143,7 +143,6 @@ const NumericOption = ({ numericChoice, onHandleInputChange, onHandleSelectChang
 
 	const onAnswerTypeChange = event => {
 		clearCustomValidity()
-
 		onHandleSelectChange(event)
 	}
 

From 3028275bec46b6c24b51312fdcad3b8411f1af94 Mon Sep 17 00:00:00 2001
From: Deundre Williams <de871959@ucf.edu>
Date: Thu, 22 Sep 2022 10:54:12 -0400
Subject: [PATCH 6/6] force formatting

---
 .../NumericAnswer/numeric-option.test.js                       | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.test.js b/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.test.js
index e7e8a20e27..f7a69a12ca 100644
--- a/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.test.js
+++ b/packages/obonode/obojobo-chunks-numeric-assessment/NumericAnswer/numeric-option.test.js
@@ -312,7 +312,6 @@ describe('NumericOption', () => {
 	})
 
 	describe('margin of error', () => {
-
 		describe('error amount', () => {
 			test('reports input error if a non-positive number', () => {
 				const onSelectChange = jest.fn()
@@ -561,8 +560,6 @@ describe('NumericOption', () => {
 				expect(reportValidity).toHaveBeenCalledTimes(1)
 			})
 		})
-
-
 	})
 
 	describe('within a range', () => {