Test cases.

gajus · gajus · commit 0296a96a86e6 · 2015-08-26T00:40:22.000+01:00
diff --git a/README.md b/README.md
@@ -1,39 +1,4 @@
-# react-css-modules
+# React CSS Modules
 
-`index.css`:
-
-```css
-.foo {
-    color: #f00;
-}
-```
-
-`Rainbow.js`:
-
-```js
-import React from 'react';
-import styles from './index.css';
-import CSSModules from 'react-css-modules';
-
-class Rainbow extends React.Component {
-    render () {
-        return <div>
-            <span className='foo'>I am rainbow!</span>
-            <span className='bar'>I am rainbow!</span>
-        </div>;
-    }
-}
-
-export default CSSModules(Rainbow, styles);
-```
-
-When used, this component will generate:
-
-```html
-<div data-reactid=".0">
-    <div data-reactid=".0.0">
-        <span class="foo index__foo___1fSgh" data-reactid=".0.0.0">I am rainbow!</span>
-        <span class="bar" data-reactid=".0.0.1">I am rainbow!</span>
-    </div>
-</div>
-```
+[![Travis build status](http://img.shields.io/travis/gajus/react-css-modules/master.svg?style=flat)](https://travis-ci.org/gajus/react-css-modules)
+[![NPM version](http://img.shields.io/npm/v/react-css-modules.svg?style=flat)](https://www.npmjs.org/package/react-css-modules)
diff --git a/dist/linkClass.js b/dist/linkClass.js
@@ -14,46 +14,27 @@ var _lodashLangIsArray = require('lodash/lang/isArray');
 
 var _lodashLangIsArray2 = _interopRequireDefault(_lodashLangIsArray);
 
-var linkClass = undefined,
-    unfreeze = undefined;
+var _lodashLangToarray = require('lodash/lang/toarray');
 
-/**
- * Make a shallow copy of the object.
- *
- * @param {Object} source Frozen object.
- * @return {Object}
- */
-unfreeze = function (source) {
-    var property = undefined,
-        target = undefined;
-
-    target = {};
+var _lodashLangToarray2 = _interopRequireDefault(_lodashLangToarray);
 
-    for (property in source) {
-        target[property] = source[property];
-    }
-
-    return target;
-};
+var linkClass = undefined;
 
 /**
  * @param {ReactElement} element
  * @param {Object} styles
  * @return {ReactElement}
  */
-linkClass = function (element, styles) {
-    var isFrozen = undefined;
+linkClass = function (element) {
+    var styles = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
 
-    if (Object.isFrozen && Object.isFrozen(element)) {
-        isFrozen = true;
-
-        // https://github.com/facebook/react/blob/v0.13.3/src/classic/element/ReactElement.js#L131
-        element = unfreeze(element);
-        element.props = unfreeze(element.props);
-    }
+    var newProps = undefined,
+        newClassName = undefined,
+        newChildren = undefined,
+        childrenCount = undefined;
 
     if (element.props.className) {
-        element.props.className = element.props.className.split(' ').map(function (className) {
+        newClassName = element.props.className.split(' ').map(function (className) {
             if (styles[className]) {
                 return className + ' ' + styles[className];
             } else {
@@ -62,19 +43,36 @@ linkClass = function (element, styles) {
         }).join(' ');
     }
 
-    if ((0, _lodashLangIsArray2['default'])(element.props.children)) {
-        element.props.children = element.props.children.map(function (node) {
+    childrenCount = _react2['default'].Children.count(element.props.children);
+
+    if (childrenCount > 1) {
+        newChildren = [];
+
+        _react2['default'].Children.forEach(element.props.children, function (node) {
             if (_react2['default'].isValidElement(node)) {
-                return linkClass(node, styles);
+                newChildren.push(linkClass(node, styles));
             } else {
-                return node;
+                newChildren.push(node);
             }
         });
+
+        // Do not use React.Children.map.
+        // For whatever reason React render multiple children as an array, while
+        // React.Children.map generates an object.
+    } else if (childrenCount === 1) {
+            newChildren = linkClass(_react2['default'].Children.only(element.props.children), styles);
+        } else {}
+
+    if (newClassName) {
+        newProps = {
+            className: newClassName
+        };
     }
 
-    if (isFrozen) {
-        Object.freeze(element);
-        Object.freeze(element.props);
+    if (newChildren) {
+        element = _react2['default'].cloneElement(element, newProps, newChildren);
+    } else {
+        element = _react2['default'].cloneElement(element, newProps);
     }
 
     return element;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-css-modules",
-  "description": "",
+  "description": "Seamless CSS modules for React.",
   "main": "dist/index.js",
   "repository": {
     "type": "git",
@@ -23,5 +23,17 @@
   },
   "dependencies": {
     "lodash": "^3.10.1"
+  },
+  "devDependencies": {
+    "chai": "^3.2.0",
+    "jsdom": "^6.2.0",
+    "mocha": "^2.2.5",
+    "react": "^0.14.0-beta3",
+    "react-addons-test-utils": "^0.14.0-beta3"
+  },
+  "scripts": {
+    "test": "mocha",
+    "build": "babel ./src/ --out-dir ./dist/",
+    "watch": "babel --watch ./src/ --out-dir ./dist/"
   }
 }
diff --git a/src/linkClass.js b/src/linkClass.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import isArray from 'lodash/lang/isArray';
-import _ from 'lodash';
+import toArray from 'lodash/lang/toarray';
 
 let linkClass;
 
@@ -9,9 +9,11 @@ let linkClass;
  * @param {Object} styles
  * @return {ReactElement}
  */
-linkClass = (element, styles) => {
-    let newClassName,
-        newChildren;
+linkClass = (element, styles = {}) => {
+    let newProps,
+        newClassName,
+        newChildren,
+        childrenCount;
 
     if (element.props.className) {
         newClassName = element.props.className.split(' ').map((className) => {
@@ -23,21 +25,42 @@ linkClass = (element, styles) => {
         }).join(' ');
     }
 
-    if (isArray(element.props.children)) {
-        newChildren = React.Children.map(element.props.children, (node) => {
+    childrenCount = React.Children.count(element.props.children);
+
+    if (childrenCount > 1) {
+        newChildren = [];
+
+        React.Children.forEach(element.props.children, (node) => {
             if (React.isValidElement(node)) {
-                return linkClass(node, styles);
+                newChildren.push(linkClass(node, styles));
             } else {
-                return node;
+                newChildren.push(node);
             }
         });
+
+        // Do not use React.Children.map.
+        // For whatever reason React render multiple children as an array, while
+        // React.Children.map generates an object.
+
+    } else if (childrenCount === 1) {
+        newChildren = linkClass(React.Children.only(element.props.children), styles);
+    } else {
+
+    }
+
+    if (newClassName) {
+        newProps = {
+            className: newClassName
+        };
+    }
+
+    if (newChildren) {
+        element = React.cloneElement(element, newProps, newChildren);
     } else {
-        newChildren = element.props.children;
+        element = React.cloneElement(element, newProps);
     }
 
-    return React.cloneElement(element, {
-        className: newClassName
-    }, newChildren);
+    return element;
 };
 
 export default linkClass;
diff --git a/test/linkClass.js b/test/linkClass.js
@@ -0,0 +1,124 @@
+import {
+    expect
+} from 'chai';
+
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
+import jsdom from 'jsdom';
+import linkClass from './../dist/linkClass';
+
+describe('linkClass', () => {
+    describe('when elements do not define className', () => {
+        it('does not affect the element declaration', () => {
+            expect(linkClass(<div></div>)).to.deep.equal(<div></div>);
+        });
+
+        it('does not affect element with a single child', () => {
+            expect(linkClass(<div><p></p></div>)).to.deep.equal(<div><p></p></div>);
+        });
+
+        it('does not affect element with multiple children', () => {
+            expect(linkClass(<div><p></p><p></p></div>)).to.deep.equal(<div><p></p><p></p></div>);
+        });
+    });
+
+    describe('when element className does not match an existing CSS class', () => {
+        it('does not affect element className', () => {
+            let subject;
+
+            subject = <div className='foo'></div>;
+
+            subject = linkClass(subject, {});
+
+            expect(subject.props.className).to.deep.equal('foo');
+        });
+    });
+
+    describe('when element className matches an existing CSS class', () => {
+        it('appends the generated class name to the className property', () => {
+            let subject;
+
+            subject = <div className='foo'></div>;
+
+            subject = linkClass(subject, {
+                foo: 'foo-1'
+            });
+
+            expect(subject.props.className).to.deep.equal('foo foo-1');
+        });
+    });
+
+    describe('when element classNames refers to multiple CSS classes', () => {
+        describe('when all referenced CSS classes exist', () => {
+            it('appends a generated class name for every referenced CSS class', () => {
+                let subject;
+
+                subject = <div className='foo bar'></div>;
+
+                subject = linkClass(subject, {
+                    foo: 'foo-1',
+                    bar: 'bar-1'
+                });
+
+                expect(subject.props.className).to.deep.equal('foo foo-1 bar bar-1');
+            });
+        });
+        describe('when some referenced CSS classes exist', () => {
+            it('appends a generated class name for the matched CSS classes', () => {
+                let subject;
+
+                subject = <div className='foo bar'></div>;
+
+                subject = linkClass(subject, {
+                    foo: 'foo-1'
+                });
+
+                expect(subject.props.className).to.deep.equal('foo foo-1 bar');
+            });
+        });
+        describe('when none of the referenced CSS classes exist', () => {
+            it('does not append anything', () => {
+                let subject;
+
+                subject = <div className='foo bar'></div>;
+
+                subject = linkClass(subject, {});
+
+                expect(subject.props.className).to.deep.equal('foo bar');
+            });
+        });
+    });
+
+    describe('when ReactElement includes ReactComponent', () => {
+        let Foo,
+            nodeList;
+
+        beforeEach(() => {
+            global.document = jsdom.jsdom(`
+                <!DOCTYPE html>
+                <html>
+                <head>
+                </head>
+                <body>
+                </body>
+                </html>
+            `);
+
+            global.window = document.defaultView;
+
+            Foo = class extends React.Component {
+                render () {
+                    return <div className='foo'>Hello</div>;
+                }
+            };
+
+            nodeList = TestUtils.renderIntoDocument(linkClass(<div className='foo'><Foo /></div>, {foo: 'foo-1'}));
+        });
+        it('processes ReactElement nodes', () => {
+            expect(nodeList.className).to.equal('foo foo-1');
+        });
+        it('does not process ReactComponent nodes', () => {
+            expect(nodeList.firstChild.className).to.equal('foo');
+        });
+    });
+});
diff --git a/test/mocha.opts b/test/mocha.opts
@@ -0,0 +1 @@
+--compilers js:babel/register
