Updates for React v15

.babelrc

@@ -1,8 +1,9 @@
 {
-  "optional": [
-    "es7.classProperties",
-    "es7.exportExtensions",
-    "es7.objectRestSpread",
-    "runtime"
+  "presets": ["es2015", "react", "stage-0"],
+  "plugins": [
+    ["transform-runtime", {
+      "polyfill": false,
+      "regenerator": false
+    }]
   ]
 }

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v0.4.0
+
+- Removed React v0.13 support / added v15 support.
+- Updated Babel to v6.
+- Updated dependencies.
+
 ## v0.3.1 (01/06/15)
 
 Updated dependencies and code style.

__tests__/Button.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { renderIntoDocument } from 'react-addons-test-utils';
+import { findDOMNode } from 'react-dom';
+
+jest.dontMock('../src/Button');
+import Button from '../src/Button';
+
+describe('Button', () => {
+    it('renders a button by default', () => {
+        const component = renderIntoDocument(<Button />);
+        expect(findDOMNode(component)).toBeDefined();
+    });
+
+    it('renders an anchor the `href` property is set', () => {
+        const component = renderIntoDocument(<Button href='#' />);
+        const node = findDOMNode(component);
+        expect(node.tagName).toBe('A');
+    });
+
+    it('transfers the `href` property to the anchor', () => {
+        const component = renderIntoDocument(<Button href='#test' />);
+        const node = findDOMNode(component);
+        expect(node.href).toMatch(/#test$/);
+    });
+
+    it('adds the `pure-button` class', () => {
+        const component = renderIntoDocument(<Button className='my-button' />);
+        const node = findDOMNode(component);
+        expect(node.className).toBe('pure-button my-button');
+    });
+
+    it('adds the `pure-button-active` class if the `active` property if set', () => {
+        const component = renderIntoDocument(<Button active />);
+        const node = findDOMNode(component);
+        expect(node.className).toBe('pure-button pure-button-active');
+    });
+
+    it('adds the `pure-button-disabled` class if the `disabled` property if set', () => {
+        const component = renderIntoDocument(<Button disabled />);
+        const node = findDOMNode(component);
+        expect(node.className).toBe('pure-button pure-button-disabled');
+    });
+
+    it('transfers the `disabled` property to the button', () => {
+        const component = renderIntoDocument(<Button disabled />);
+        const node = findDOMNode(component);
+        expect(node.disabled).toBe(true);
+    });
+
+    it('adds the `pure-button-primary` class if the `primary` property if set', () => {
+        const component = renderIntoDocument(<Button primary />);
+        const node = findDOMNode(component);
+        expect(node.className).toBe('pure-button pure-button-primary');
+    });
+});

__tests__/Cell.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { renderIntoDocument } from 'react-addons-test-utils';
+import { findDOMNode } from 'react-dom';
+
+jest.dontMock('../src/Cell');
+import Cell from '../src/Cell';
+
+describe('Cell', () => {
+    it('renders a div with class `pure-u-1` by default', () => {
+        const component = renderIntoDocument(<Cell className='my-cell' />);
+        const node = findDOMNode(component);
+        expect(node.className).toBe('pure-u-1 my-cell');
+    });
+
+    it('applies the class based on the `size` property', () => {
+        const component = renderIntoDocument(<Cell size='1/2' />);
+        const node = findDOMNode(component);
+        expect(node.className).toBe('pure-u-1-2');
+    });
+
+    it('adds the `pure-u-sm-*` class based on the `sm` property', () => {
+        const component = renderIntoDocument(<Cell size='1/2' sm='1' />);
+        const node = findDOMNode(component);
+        expect(node.className).toBe('pure-u-1-2 pure-u-sm-1');
+    });
+
+    it('adds the `pure-u-md-*` class based on the `md` property', () => {
+        const component = renderIntoDocument(<Cell size='1/2' md='1' />);
+        const node = findDOMNode(component);
+        expect(node.className).toBe('pure-u-1-2 pure-u-md-1');
+    });
+
+    it('adds the `pure-u-lg-*` class based on the `lg` property', () => {
+        const component = renderIntoDocument(<Cell size='1/2' lg='1/3' />);
+        const node = findDOMNode(component);
+        expect(node.className).toBe('pure-u-1-2 pure-u-lg-1-3');
+    });
+
+    it('adds the `pure-u-xl-*` class based on the `xl` property', () => {
+        const component = renderIntoDocument(<Cell size='1/2' lg='2/3' xl='1/4' />);
+        const node = findDOMNode(component);
+        expect(node.className).toBe('pure-u-1-2 pure-u-lg-2-3 pure-u-xl-1-4');
+    });
+});

__tests__/Menu.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { renderIntoDocument } from 'react-addons-test-utils';
+import { findDOMNode } from 'react-dom';
+
+jest.dontMock('../src/Menu');
+import Menu from '../src/Menu';
+
+describe('Menu', () => {
+    it('renders a div with class `pure-menu` by default', () => {
+        const component = renderIntoDocument(<Menu className='my-menu' />);
+        const node = findDOMNode(component);
+        expect(node.className).toBe('pure-menu my-menu');
+    });
+
+    it('adds the `pure-menu-horizontal` class if the `horizontal` property is set', () => {
+        const component = renderIntoDocument(<Menu horizontal />);
+        const node = findDOMNode(component);
+        expect(node.className).toBe('pure-menu pure-menu-horizontal');
+    });
+
+    it('adds the `pure-menu-scrollable` class if the `scrollable` property is set', () => {
+        const component = renderIntoDocument(<Menu scrollable />);
+        const node = findDOMNode(component);
+        expect(node.className).toBe('pure-menu pure-menu-scrollable');
+    });
+});

src/__tests__/MenuItem.js → __tests__/MenuItem.js

@@ -1,37 +1,38 @@
-import React from 'react/addons';
-const { TestUtils } = React.addons;
+import React from 'react';
+import { renderIntoDocument } from 'react-addons-test-utils';
+import { findDOMNode } from 'react-dom';
 
-jest.dontMock('../MenuItem');
-const MenuItem = require('../MenuItem');
+jest.dontMock('../src/MenuItem');
+import MenuItem from '../src/MenuItem';
 
 describe('MenuItem', () => {
     it('renders a li with class `pure-menu-item` by default', () => {
-        const component = TestUtils.renderIntoDocument(<MenuItem className='my-item' />);
-        const node = React.findDOMNode(component);
+        const component = renderIntoDocument(<MenuItem className='my-item' />);
+        const node = findDOMNode(component);
         expect(node.className).toBe('pure-menu-item my-item');
     });
 
     it('adds the `pure-menu-selected` class if the `selected` property is set', () => {
-        const component = TestUtils.renderIntoDocument(<MenuItem selected />);
-        const node = React.findDOMNode(component);
+        const component = renderIntoDocument(<MenuItem selected />);
+        const node = findDOMNode(component);
         expect(node.className).toBe('pure-menu-item pure-menu-selected');
     });
 
     it('adds the `pure-menu-disabled` class if the `disabled` property is set', () => {
-        const component = TestUtils.renderIntoDocument(<MenuItem disabled />);
-        const node = React.findDOMNode(component);
+        const component = renderIntoDocument(<MenuItem disabled />);
+        const node = findDOMNode(component);
         expect(node.className).toBe('pure-menu-item pure-menu-disabled');
     });
 
     it('adds the `pure-menu-has-children` class if the `hasChildren` property is set', () => {
-        const component = TestUtils.renderIntoDocument(<MenuItem hasChildren />);
-        const node = React.findDOMNode(component);
+        const component = renderIntoDocument(<MenuItem hasChildren />);
+        const node = findDOMNode(component);
         expect(node.className).toBe('pure-menu-item pure-menu-has-children');
     });
 
     it('adds the `pure-menu-allow-hover` class if the `allowHover` property is set', () => {
-        const component = TestUtils.renderIntoDocument(<MenuItem allowHover />);
-        const node = React.findDOMNode(component);
+        const component = renderIntoDocument(<MenuItem allowHover />);
+        const node = findDOMNode(component);
         expect(node.className).toBe('pure-menu-item pure-menu-allow-hover');
     });
 });

src/__tests__/Table.js → __tests__/Table.js

@@ -1,31 +1,32 @@
-import React from 'react/addons';
-const { TestUtils } = React.addons;
+import React from 'react';
+import { renderIntoDocument } from 'react-addons-test-utils';
+import { findDOMNode } from 'react-dom';
 
-jest.dontMock('../Table');
-const Table = require('../Table');
+jest.dontMock('../src/Table');
+import Table from '../src/Table';
 
 describe('Table', () => {
     it('renders a table with class `pure-table` by default', () => {
-        const component = TestUtils.renderIntoDocument(<Table className='my-table' />);
-        const node = React.findDOMNode(component);
+        const component = renderIntoDocument(<Table className='my-table' />);
+        const node = findDOMNode(component);
         expect(node.className).toBe('pure-table my-table');
     });
 
     it('adds the `pure-table-bordered` class if the `bordered` property is set', () => {
-        const component = TestUtils.renderIntoDocument(<Table bordered />);
-        const node = React.findDOMNode(component);
+        const component = renderIntoDocument(<Table bordered />);
+        const node = findDOMNode(component);
         expect(node.className).toBe('pure-table pure-table-bordered');
     });
 
     it('adds the `pure-table-horizontal` class if the `horizontal` property is set', () => {
-        const component = TestUtils.renderIntoDocument(<Table horizontal />);
-        const node = React.findDOMNode(component);
+        const component = renderIntoDocument(<Table horizontal />);
+        const node = findDOMNode(component);
         expect(node.className).toBe('pure-table pure-table-horizontal');
     });
 
     it('adds the `pure-table-striped` class if the `striped` property is set to true', () => {
-        const component = TestUtils.renderIntoDocument(<Table striped />);
-        const node = React.findDOMNode(component);
+        const component = renderIntoDocument(<Table striped />);
+        const node = findDOMNode(component);
         expect(node.className).toBe('pure-table pure-table-striped');
     });
 });

src/__tests__/index.js → __tests__/index.js

@@ -1,5 +1,5 @@
-jest.dontMock('../index');
-const Pure = require('../index');
+jest.dontMock('../src/index');
+import * as Pure from '../src/index';
 
 describe('lib', () => {
     it('exposes the `Button`, `Cell`, `Menu`, `MenuItem` and `Table` components', () => {