Merge pull request #218 from maryvilledev/regression-fixes

Regression fixes

__tests__/components/RuleLabel.test.jsx

@@ -15,6 +15,7 @@ describe('<RuleLabel />', () => {
         color=""
         rule=""
         count=""
+        isActive={false}
         onClick={jest.fn()}
       />
     );
@@ -28,27 +29,29 @@ describe('<RuleLabel />', () => {
         color=""
         rule={rule}
         count={count}
+        isActive={false}
         onClick={jest.fn()}
       />
     );
     expect(wrapper.children()).toHaveLength(2);
     expect(wrapper.childAt(0).node).toBe(rule);
     expect(wrapper.childAt(1).childAt(0).node).toBe(`(${count})`);
   });
-  it('toggles color when clicked', () => {
+  it('toggles color when isActive prop changes', () => {
     const color = '#000000';
     const wrapper = shallowWithContext(
       <RuleLabel 
         color={color}
         rule={''}
         count={''}
+        isActive={false}
         onClick={jest.fn()}
       />
     );
     expect(wrapper.props().style.backgroundColor).toBe('transparent');
-    wrapper.simulate('click');
+    wrapper.setProps({ isActive: true });
     expect(wrapper.props().style.backgroundColor).toBe(color);
-    wrapper.simulate('click');
+    wrapper.setProps({ isActive: false });
     expect(wrapper.props().style.backgroundColor).toBe('transparent');
   });
   it('invokes the onClick callback prop', () => {
@@ -58,6 +61,7 @@ describe('<RuleLabel />', () => {
         color={''}
         rule={''}
         count={''}
+        isActive={false}
         onClick={onClick}
       />
     );

__tests__/components/__snapshots__/RulesSelector.test.jsx.snap

@@ -13,10 +13,12 @@ exports[`<RulesSelector /> matches snapshot 1`] = `
   <div>
     <RuleLabel
       count={1}
+      isActive={false}
       onClick={[Function]}
       rule="For Loops" />
     <RuleLabel
       count={21}
+      isActive={true}
       onClick={[Function]}
       rule="Atoms" />
   </div>

server/server.js

@@ -29,12 +29,13 @@ const ASTTemplate = {
   type: _.isString,
   begin: _.isNumber,
   end: _.isNumber,
+  tags: _.isArray,
   children: _.isArray
 };
 
 const validateAST = function(AST) {
   if (_.isString(AST)) { return true; }
-  return _.congruent(ASTTemplate, AST) && (AST.children && AST.children.every(validateAST))
+  return _.similar(ASTTemplate, AST) && (AST.children && AST.children.every(validateAST))
 }
 
 const requestTemplate = {
@@ -56,7 +57,7 @@ app.use(express.static(path.resolve(__dirname, "..", 'build')));
 
 function saveToRedis(id, req, res) {
   var json = JSON.parse(req.body.json);
-  if (_.isObject(json) && _.congruent(requestTemplate, json)) {
+  if (_.isObject(json) && _.similar(requestTemplate, json)) {
     redis.set(id, JSON.stringify(json));
     res.json({id: id});
   } else {

src/components/RuleLabel.jsx

@@ -19,32 +19,19 @@ const styles = {
   },
 }
 
-class RuleLabel extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isActive: false,
-    }
-  }
+const RuleLabel = ({ color, rule, count, onClick, isActive }) => {
+  const backgroundColor = isActive ? color : 'transparent';
+  const borderColor = isActive ? 'transparent' : '#e6e6e6' // light grey
 
-  render() {
-    const { color, rule, count, onClick } = this.props;
-    const { isActive } = this.state;
-    const backgroundColor = isActive ? color : 'transparent';
-    const borderColor = isActive ? 'transparent' : '#e6e6e6' // light grey
-    return (
-      <div
-        style={{...styles.label, backgroundColor, borderColor }}
-        onClick={() => { 
-          this.setState({ isActive: !isActive });
-          onClick();
-        }}
-      >
-        {rule}
-        <span style={styles.countSpan}>{`(${count})`}</span>
-      </div>
-    );
-  }
+  return (
+    <div
+      style={{...styles.label, backgroundColor, borderColor }}
+      onClick={onClick}
+    >
+      {rule}
+      <span style={styles.countSpan}>{`(${count})`}</span>
+    </div>
+  );
 }
 
 export default RuleLabel
@@ -53,5 +40,6 @@ RuleLabel.propTypes = {
   color: PropTypes.string.isRequired,
   rule: PropTypes.string.isRequired,
   count: PropTypes.string.isRequired,
+  isActive: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
 }

src/components/RulesSelector.jsx

@@ -17,15 +17,16 @@ const makeListItems = (filters, onRuleSelected) => {
         color,
         count,
         prettyTokenName,
+        selected,
       } = filters[filterName];
       return (
         <RuleLabel
           key={filterName}
-          // text={`${prettyTokenName (${count})`}
           rule={prettyTokenName}
           count={count}
           color={color}
-          onClick={() => { onRuleSelected(filterName) }}
+          isActive={selected}
+          onClick={() => onRuleSelected(filterName)}
         />
       );
     });

src/containers/AppBody.jsx

@@ -36,7 +36,7 @@ export class AppBody extends React.Component {
           <div className='col-lg-2'>
             <Card><FilterArea /></Card>
           </div>
-          <div className='col-lg-4 col-md-7'>
+          <div className='col-lg-5 col-md-7'>
             <Card>
               <SnippetArea
                 id={id}

src/containers/SnippetArea.jsx

@@ -89,7 +89,7 @@ export class SnippetArea extends React.Component {
     const { snippetTitle, appState } = this.props;
     if (!snippetTitle) {
       this.setState({ titleErrorText: 'This field is required' });
-      this.showSnackbar('Please the title field before saving.');
+      this.showSnackbar('Please populate the title field before saving.');
       return;
     }
     this.setState({ titleErrorText: '' });
@@ -120,7 +120,7 @@ export class SnippetArea extends React.Component {
     const { snippetTitle, appState } = this.props;
     if (!snippetTitle) {
       this.setState({ titleErrorText: 'This field is required' });
-      this.showSnackbar('Please the title field before saving.');
+      this.showSnackbar('Please populate the title field before saving.');
       return;
     }
     this.setState({ titleErrorText: '' });