[POC] Styled render callback component and refactored withStyles

.prettierrc

@@ -0,0 +1,7 @@
+printWidth: 100
+singleQuote: true
+trailingComma: all
+bracketSpacing: true
+jsxBracketSameLine: false
+parser: babylon
+semi: true

docs/src/modules/styles/getContext.js

@@ -2,7 +2,7 @@
 
 import { create, SheetsRegistry } from 'jss';
 import rtl from 'jss-rtl';
-import { preset } from 'material-ui/styles/withStyles';
+import { preset } from 'material-ui/styles/Styled';
 import { createMuiTheme } from 'material-ui/styles';
 import blue from 'material-ui/colors/blue';
 import pink from 'material-ui/colors/pink';

src/Paper/Paper.spec.js

@@ -1,45 +1,57 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createShallow, getClasses } from '../test-utils';
+import { createMount, createShallow, getClasses } from '../test-utils';
 import Paper from './Paper';
 
 describe('<Paper />', () => {
+  let mount;
   let shallow;
   let classes;
 
   before(() => {
     shallow = createShallow({ dive: true });
+    mount = createMount();
     classes = getClasses(<Paper />);
   });
 
   it('should render a div', () => {
     const wrapper = shallow(<Paper>Hello World</Paper>);
-    assert.strictEqual(wrapper.name(), 'div');
+    assert.strictEqual(wrapper.name(), 'Paper');
+    assert.strictEqual(wrapper.dive().name(), 'div');
   });
 
   it('should render with the root class, default depth class, and rounded', () => {
-    const wrapper = shallow(<Paper>Hello World</Paper>);
+    const wrapper = mount(<Paper>Hello World</Paper>)
+      .find('Paper')
+      .childAt(0);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
     assert.strictEqual(wrapper.hasClass(classes.rounded), true, 'should be rounded by default');
   });
 
   it('should disable the rounded class', () => {
-    const wrapper = shallow(<Paper square>Hello World</Paper>);
+    const wrapper = mount(<Paper square>Hello World</Paper>)
+      .find('Paper')
+      .childAt(0);
     assert.strictEqual(wrapper.hasClass(classes.rounded), false, 'should not be rounded');
   });
 
   it('should set the elevation shadow class', () => {
-    const wrapper = shallow(<Paper elevation={16}>Hello World</Paper>);
+    const root = mount(<Paper elevation={16}>Hello World</Paper>);
+    let wrapper = root.find('Paper').childAt(0);
     assert.strictEqual(wrapper.hasClass(classes.shadow16), true, 'should have the 16 shadow class');
-    wrapper.setProps({ elevation: 24 });
+    root.setProps({ elevation: 24 });
+    wrapper = root.find('Paper').childAt(0);
     assert.strictEqual(wrapper.hasClass(classes.shadow24), true, 'should have the 24 shadow class');
-    wrapper.setProps({ elevation: 2 });
+    root.setProps({ elevation: 2 });
+    wrapper = root.find('Paper').childAt(0);
     assert.strictEqual(wrapper.hasClass(classes.shadow2), true, 'should have the 2 shadow class');
   });
 
   describe('prop: component', () => {
     it('should render a header', () => {
-      const wrapper = shallow(<Paper component="header">Hello World</Paper>);
+      const wrapper = mount(<Paper component="header">Hello World</Paper>)
+        .find('Paper')
+        .childAt(0);
       assert.strictEqual(wrapper.name(), 'header');
     });
   });

src/styles/MuiThemeProvider.spec.js

@@ -1,5 +1,3 @@
-// @flow
-
 import { spy } from 'sinon';
 import { assert } from 'chai';
 import React from 'react';
@@ -9,7 +7,7 @@ import JssProvider from 'react-jss/lib/JssProvider';
 import { renderToString } from 'react-dom/server';
 import { createMount } from '../test-utils';
 import createMuiTheme from './createMuiTheme';
-import { preset } from './withStyles';
+import { preset } from './Styled';
 import Button from '../Button';
 import createGenerateClassName from './createGenerateClassName';
 import withTheme from './withTheme';