COMPASS 156 Range Component - queryToParams

src/internal-packages/validation/lib/components/common/range-input.jsx

@@ -167,11 +167,11 @@ class RangeInput extends React.Component {
 }
 
 RangeInput.propTypes = {
-  value: React.PropTypes.number,
+  value: React.PropTypes.number.isRequired,
   upperBound: React.PropTypes.bool,
   validationState: React.PropTypes.string,
-  boundIncluded: React.PropTypes.bool,
-  disabled: React.PropTypes.bool,
+  boundIncluded: React.PropTypes.bool.isRequired,
+  disabled: React.PropTypes.bool.isRequired,
   onChange: React.PropTypes.func,
   width: React.PropTypes.number
 };

src/internal-packages/validation/lib/components/rule-categories/range.jsx

@@ -43,12 +43,26 @@ class RuleCategoryRange extends React.Component {
     return result;
   }
 
+  static validateKeyAndValue(key, value) {
+    if (!_.includes(['$gt', '$gte', '$lt', '$lte'], key)) {
+      return false;
+    }
+    // Check that we have only numeric (or null) types.
+    // String types are a possible extension,
+    // but documents, arrays, BinData, undefined and other BSON types
+    // make little sense http://bsonspec.org/spec.html
+    if (typeof(value) !== 'number') {
+      return false;
+    }
+    return !isNaN(value) && Math.abs(value) !== Infinity;
+  }
+
   static queryToParams(query) {
     // if not every key in the object is one of the comparison operators,
     // this rule cannot represent the query
     const keys = _.keys(query);
     if (!_.every(keys, (key) => {
-      return _.contains(['$gt', '$gte', '$lt', '$lte'], key);
+      return RuleCategoryRange.validateKeyAndValue(key, query[key]);
     })) {
       return false;
     }
@@ -58,12 +72,17 @@ class RuleCategoryRange extends React.Component {
       lowerBoundValue: query.$gte || query.$gt || null,
       lowerBoundType: _.intersection(keys, ['$gte', '$gt'])
     };
-
-    if (result.upperBoundType.length === 0) {
-      result.upperBoundType = null;
+    if (result.upperBoundType.length > 1 || result.lowerBoundType.length > 1) {
+      return false;
     }
-    if (result.lowerBoundType.length === 0) {
-      result.lowerBoundType = null;
+    result.upperBoundType = result.upperBoundType[0] || null;
+    result.lowerBoundType = result.lowerBoundType[0] || null;
+
+    // No documents could possibly satisfy these cases, e.g. 5 <= value < 5
+    if (typeof(result.upperBoundValue) === 'number' &&
+        typeof(result.lowerBoundValue) === 'number' &&
+        result.upperBoundValue <= result.lowerBoundValue) {
+      return false;
     }
     return result;
   }
@@ -76,8 +95,17 @@ class RuleCategoryRange extends React.Component {
   render() {
     return (
       <FormGroup>
-        <RangeInput />
-        <RangeInput upperBound/>
+        <RangeInput
+            boundIncluded={this.props.parameters.lowerBoundType === '$gte'}
+            disabled={this.props.parameters.lowerBoundType === null}
+            value={this.props.parameters.lowerBoundValue}
+        />
+        <RangeInput
+            upperBound
+            boundIncluded={this.props.parameters.upperBoundType === '$lte'}
+            disabled={this.props.parameters.upperBoundType === null}
+            value={this.props.parameters.upperBoundValue}
+        />
       </FormGroup>
     );
   }

test/validation.range.test.js

@@ -15,25 +15,25 @@ chai.use(chaiEnzyme());
 describe('<RangeInput />', () => {
   context('when rendering the default control', () => {
     it('has label `LOWER BOUND`', () => {
-      const component = shallow(<RangeInput />);
+      const component = shallow(<RangeInput value={5} />);
       const labelText = component.find(ControlLabel).dive().text();
       expect(labelText).to.be.equal('LOWER BOUND');
     });
     it('has placeholder text of `enter lower bound`', () => {
-      const component = shallow(<RangeInput />);
+      const component = shallow(<RangeInput value={5} />);
       const placeholderText = component.find(FormControl).props().placeholder;
       expect(placeholderText).to.be.equal('enter lower bound');
     });
   });
 
   context('when rendering an upperBound control', () => {
     it('has label `UPPER BOUND`', () => {
-      const component = shallow(<RangeInput upperBound />);
+      const component = shallow(<RangeInput upperBound value={5} />);
       const labelText = component.find(ControlLabel).dive().text();
       expect(labelText).to.be.equal('UPPER BOUND');
     });
     it('has placeholder text of `enter upper bound`', () => {
-      const component = shallow(<RangeInput upperBound />);
+      const component = shallow(<RangeInput upperBound value={5} />);
       const placeholderText = component.find(FormControl).props().placeholder;
       expect(placeholderText).to.be.equal('enter upper bound');
     });

src/internal-packages/validation/test/rule.test.js → test/validation.rule.test.js

@@ -1,11 +1,11 @@
-/* eslint no-unused-expressions: 0 */
+/* eslint no-unused-vars: 0 */
 const chai = require('chai');
 const chaiEnzyme = require('chai-enzyme');
 const expect = chai.expect;
 const React = require('react');
 
 const mount = require('enzyme').mount;
-const Rule = require('../lib/components/rule');
+const Rule = require('../src/internal-packages/validation/lib/components/rule');
 const _ = require('lodash');
 
 // const debug = require('debug')('compass:validation:test');