Fixed and added test for memoization bug

docs/src/components/Grid.js

@@ -0,0 +1,30 @@
+import React, { Component, PropTypes } from 'react';
+import { Row, Col } from '../../../dist';
+
+export default class Grid extends Component {
+
+  static propTypes = {
+    value: PropTypes.string
+  };
+
+  render () {
+    const { value } = this.props;
+
+    return (
+      <Row>
+        <Col size={3}>
+          <button>{value}</button>
+        </Col>
+        <Col size={3}>
+          <button>{value}</button>
+        </Col>
+        <Col size={6}>
+          <Row>
+            <Col size={6}>YAR!</Col>
+            <Col size={6}>{value}</Col>
+          </Row>
+        </Col>
+      </Row>
+    );
+  }
+}

docs/src/components/Intro.js

@@ -1,67 +1,26 @@
 import React, { Component } from 'react';
 import Typography from '../utils/typography';
 import RandomWords from 'random-words';
-import { Row, Col } from '../../../dist';
-
-// DO NOT CHECK IN!! :)
-import Perf from 'react-addons-perf';
-window.Perf = Perf;
+import Grid from './Grid';
+import PerfTest from './PerfTest';
 
 export default class Intro extends Component {
 
-  state = {
-    woof: 'meow'
-  };
-
-  componentDidMount () {
-    let i = 0;
-
-    Perf.start();
-
-    const woof = () => {
-      i++;
-      setTimeout(() => {
-        if (i < 100) {
-          this.randomize(woof);
-        } else {
-          Perf.stop();
-          Perf.printInclusive();
-          Perf.printExclusive();
-          Perf.printWasted();
-        }
-      }, 10);
-    };
-
-    woof();
-  }
-
-  randomize (cb) {
-    this.setState({
-      woof: RandomWords(1)
-    }, cb);
-  }
-
   render () {
-    const { woof } = this.state;
 
     return (
       <div>
         <h1 style={Typography.display3}>react-flexlayout</h1>
 
-        <Row>
-          <Col size={3}>
-            <button onClick={() => this.randomize()}>{woof}</button>
-          </Col>
-          <Col size={3}>
-            <button onClick={() => this.randomize()}>{woof}</button>
-          </Col>
-          <Col size={6}>
-            <Row onClick={() => this.randomize()}>
-              <Col size={6}>YAR!</Col>
-              <Col size={6}>{woof}</Col>
-            </Row>
-          </Col>
-        </Row>
+        <PerfTest
+          onComplete={(wat) => {
+            console.log(wat);
+          }}
+          testFn={() => RandomWords(1)[0]}
+          testProp="value"
+        >
+          <Grid />
+        </PerfTest>
 
       </div>
     );

docs/src/components/PerfTest.js

@@ -0,0 +1,69 @@
+import React, {Component, PropTypes} from 'react';
+import Perf from 'react-addons-perf';
+
+window.Perf = Perf;
+
+export default class PerfTest extends Component {
+
+  static propTypes = {
+    children: PropTypes.any,
+    loops: PropTypes.number,
+    onComplete: PropTypes.func,
+    testFn: PropTypes.func,
+    testProp: PropTypes.string
+  };
+
+  static defaultProps = {
+    loops: 100
+  };
+
+  componentWillMount () {
+    this.setTestProp();
+  }
+
+  componentDidMount () {
+    this.runTest().then(() => this.endTest());
+  }
+
+  setTestProp (cb = () => {}) {
+    const {testProp, testFn} = this.props;
+    this.setState({
+      [testProp]: testFn()
+    }, cb);
+  }
+
+  runTest () {
+    let i = 0;
+    Perf.start();
+    return new Promise(resolve => {
+      const execTest = () => {
+        i++;
+        setTimeout(() => {
+          if (i < this.props.loops) {
+            this.setTestProp(execTest);
+          } else {
+            Perf.stop();
+            resolve(Perf);
+          }
+        }, 10);
+      };
+      execTest();
+    });
+  }
+
+  endTest () {
+    const measurements = Perf.getLastMeasurements();
+    const summary = Perf.getMeasurementsSummaryMap(measurements);
+
+    return this.props.onComplete(summary);
+  }
+
+  render () {
+    const { children, testProp } = this.props;
+    const testValue = this.state[testProp];
+
+    return React.cloneElement(children, {
+      [testProp]: testValue
+    });
+  }
+}

lib/utils/style.js

@@ -43,7 +43,7 @@ export function createStyleFromProps (props) {
 }
 
 const styleReducer = _memoize(createStyleFromProps, (props) => {
-  return Object.keys(props).sort().map(key => props[key]).join('');
+  return Object.keys(props).sort().map(key => key.concat(props[key])).join('');
 });
 
 export { styleReducer };

test/utils/style.js

@@ -1,5 +1,5 @@
 import Test from 'blue-tape';
-import { createStyleFromProps } from 'lib/utils/style';
+import { createStyleFromProps, styleReducer } from 'lib/utils/style';
 
 Test('Creating style objects from prop: align', t => {
 
@@ -126,3 +126,22 @@ Test('Creating style objects from prop: flex', t => {
 
   t.end();
 });
+
+Test('Creating memoized syle objects', t => {
+
+  t.deepEquals(styleReducer({
+    align: 'start'
+  }), {
+    display: 'flex',
+    justifyContent: 'flex-start'
+  });
+
+  t.deepEquals(styleReducer({
+    alignContent: 'start'
+  }), {
+    display: 'flex',
+    alignContent: 'flex-start'
+  });
+
+  t.end();
+});