[js] fix number parsing with range form elements in parameters

Also adds tests for negative numbers

conda/js/src/components/ParameterCreate.jsx

@@ -266,13 +266,15 @@ export default class ParameterCreate extends React.Component<Props, State> {
 								<FormGroup row>
 									<Col>
 										<InputGroup>
-											<InputGroupAddon>Min</InputGroupAddon>
+											<InputGroupAddon addonType='prepend'>Min</InputGroupAddon>
 											<Input
 												type='number'
 												step={param.type.startsWith('float') ? 'any' : '1'}
 												value={param.range[0]}
 												onChange={e => {
-													const num = e.target.value;
+													const num = Number.parseFloat(e.target.value);
+													if(Number.isNaN(num))
+														return;
 													const max = param.range[1];
 													if(num > max){
 														return;
@@ -295,14 +297,16 @@ export default class ParameterCreate extends React.Component<Props, State> {
 									</Col>
 									<Col>
 										<InputGroup>
-											<InputGroupAddon>Max</InputGroupAddon>
+											<InputGroupAddon addonType='prepend'>Max</InputGroupAddon>
 											<Input
 												type='number'
 												step={param.type.startsWith('float') ? 'any' : '1'}
 												value={param.range[1]}
 												required
 												onChange={e => {
-													const num = e.target.value;
+													const num = Number.parseFloat(e.target.value);
+													if(Number.isNaN(num))
+														return;
 													const min = param.range[0];
 													if(num < min){
 														return;

conda/js/src/components/ParameterCreate.spec.jsx

@@ -63,7 +63,7 @@ describe('<ParameterCreate />', () => {
 		});
 	});
 
-	describe.only('regression', () => {
+	describe('regression', () => {
 		it(`doesnt let min be larger than max in a range parameter`, () => {
 			let param = {
 				type: 'int8',
@@ -98,6 +98,45 @@ describe('<ParameterCreate />', () => {
 			expect(updateParameter.callCount).to.equal(1);
 			expect(wrapper.props().param.range).to.deep.equal([2, 2]);
 		});
+		it(`doesnt let min be larger than max in a range parameter for negative numbers`, () => {
+			let param = {
+				type: 'int8',
+				default: '',
+				description: '',
+				range: [
+					-1,
+					-2
+				]
+			};
+			const updateParameter = sinon.spy(_updateParameter);
+
+			wrapper = mount(
+				<C
+					name={name}
+					param={param}
+					params={params}
+					updateParameter={updateParameter}
+				/>
+			);
+
+			// sanity checks
+			expect(wrapper.find('TypedField')).to.have.prop('name', name);
+
+			wrapper.find('Input[step="1"]').at(0).prop('onChange')( { target: { value: -1 }});
+			wrapper.update();
+			expect(updateParameter.callCount).to.equal(0);
+			expect(wrapper.props().param.range).to.deep.equal([-1, -2]);
+
+			wrapper.find('Input[step="1"]').at(0).prop('onChange')( { target: { value: -2 }});
+			wrapper.update();
+			expect(updateParameter.callCount).to.equal(1);
+			expect(wrapper.props().param.range).to.deep.equal([-2, -2]);
+
+			wrapper.find('Input[step="1"]').at(0).prop('onChange')( { target: { value: -3 }});
+			wrapper.update();
+			expect(updateParameter.callCount).to.equal(2);
+			expect(wrapper.props().param.range).to.deep.equal([-3, -2]);
+		});
 		it(`doesnt let max be smaller than min in a range parameter`, () => {
 			let param = {
 				type: 'int8',
@@ -132,5 +171,44 @@ describe('<ParameterCreate />', () => {
 			expect(updateParameter.callCount).to.equal(1);
 			expect(wrapper.props().param.range).to.deep.equal([3, 3]);
 		});
+		it(`doesnt let max be smaller than min in a range parameter for negative numbers`, () => {
+			let param = {
+				type: 'int8',
+				default: '',
+				description: '',
+				range: [
+					-3,
+					-2
+				]
+			};
+			const updateParameter = sinon.spy(_updateParameter);
+
+			wrapper = mount(
+				<C
+					name={name}
+					param={param}
+					params={params}
+					updateParameter={updateParameter}
+				/>
+			);
+
+			// sanity checks
+			expect(wrapper.find('TypedField')).to.have.prop('name', name);
+
+			wrapper.find('Input[step="1"]').at(1).prop('onChange')( { target: { value: -5 }});
+			wrapper.update();
+			expect(updateParameter.callCount).to.equal(0);
+			expect(wrapper.props().param.range).to.deep.equal([-3, -2]);
+
+			wrapper.find('Input[step="1"]').at(1).prop('onChange')( { target: { value: -3 }});
+			wrapper.update();
+			expect(updateParameter.callCount).to.equal(1);
+			expect(wrapper.props().param.range).to.deep.equal([-3, -3]);
+
+			wrapper.find('Input[step="1"]').at(1).prop('onChange')( { target: { value: -1 }});
+			wrapper.update();
+			expect(updateParameter.callCount).to.equal(2);
+			expect(wrapper.props().param.range).to.deep.equal([-3, -1]);
+		});
 	});
 });