migrate all dynamic styles tests to use createStyledComponent

packages/react-jss/src/createUseStyles.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 
 import createUseStyles from './createUseStyles'
-import createHocAndHooksTests from '../test-utils/createHocAndHooksTests'
+import createBasicTests from '../test-utils/createBasicTests'
 
 const createStyledComponent = (styles, options) => {
   const useStyles = createUseStyles(styles, options)
@@ -13,5 +13,5 @@ const createStyledComponent = (styles, options) => {
 }
 
 describe('React-JSS: createUseStyles', () => {
-  createHocAndHooksTests({createStyledComponent})
+  createBasicTests({createStyledComponent})
 })

packages/react-jss/src/withStyles.test.js

@@ -6,7 +6,7 @@ import {spy} from 'sinon'
 import TestRenderer from 'react-test-renderer'
 
 import {withStyles, JssProvider} from '.'
-import createHocAndHooksTests from '../test-utils/createHocAndHooksTests'
+import createBasicTests from '../test-utils/createBasicTests'
 
 const createGenerateId = () => {
   let counter = 0
@@ -20,7 +20,7 @@ const createStyledComponent = (styles, options = {}) => {
 }
 
 describe('React-JSS: withStyles', () => {
-  createHocAndHooksTests({createStyledComponent})
+  createBasicTests({createStyledComponent})
 
   describe('should merge the classes', () => {
     const styles = {

packages/react-jss/test-utils/createDynamicStylesTests.js

@@ -5,16 +5,14 @@ import React from 'react'
 import TestRenderer from 'react-test-renderer'
 import {stripIndent} from 'common-tags'
 
-import injectSheet, {JssProvider, SheetsRegistry} from '../src'
+import {JssProvider, SheetsRegistry} from '../src'
 
 const createGenerateId = () => {
   let counter = 0
   return rule => `${rule.key}-${counter++}`
 }
 
 export default ({createStyledComponent}) => {
-  const NoRenderer = () => null
-  NoRenderer.displayName = 'NoRenderer'
   let registry
 
   beforeEach(() => {
@@ -151,12 +149,14 @@ export default ({createStyledComponent}) => {
 
     it('should unset values when null is returned from fn value', () => {
       const generateId = createGenerateId()
-      MyComponent = injectSheet({
+
+      MyComponent = createStyledComponent({
         button: {
           width: 10,
           height: ({height}) => height
         }
-      })(NoRenderer)
+      })
+
       const Container = ({height}) => (
         <JssProvider registry={registry} generateId={generateId}>
           <MyComponent height={height} />
@@ -186,14 +186,15 @@ export default ({createStyledComponent}) => {
 
     it('should unset values when null is returned from fn rule', () => {
       const generateId = createGenerateId()
-      MyComponent = injectSheet({
+      MyComponent = createStyledComponent({
         button0: {
           width: 10
         },
         button1: ({height}) => ({
           height
         })
-      })(NoRenderer)
+      })
+
       const Container = ({height}) => (
         <JssProvider registry={registry} generateId={generateId}>
           <MyComponent height={height} />
@@ -234,13 +235,13 @@ export default ({createStyledComponent}) => {
           }
         }
       }
-      const InnerComponent = () => null
-      InnerComponent.defaultProps = {
+
+      MyComponent = createStyledComponent(styles)
+      MyComponent.defaultProps = {
         color: 'rgb(255, 0, 0)'
       }
-      const StyledComponent = injectSheet(styles)(InnerComponent)
 
-      TestRenderer.create(<StyledComponent height={20} />)
+      TestRenderer.create(<MyComponent height={20} />)
 
       expect(passedProps.color).to.equal('rgb(255, 0, 0)')
       expect(passedProps.height).to.equal(20)
@@ -249,14 +250,23 @@ export default ({createStyledComponent}) => {
 
   describe('function rules', () => {
     let MyComponent
+    let classes
 
     beforeEach(() => {
-      MyComponent = injectSheet({
-        button: ({height = 1}) => ({
-          color: 'rgb(255, 255, 255)',
-          height: `${height}px`
-        })
-      })(NoRenderer)
+      MyComponent = createStyledComponent(
+        {
+          button: ({height = 1}) => ({
+            color: 'rgb(255, 255, 255)',
+            height: `${height}px`
+          })
+        },
+        {name: 'NoRenderer'}
+      )
+      MyComponent.defaultProps = {
+        getClasses: cls => {
+          classes = cls
+        }
+      }
     })
 
     it('should attach and detach a sheet', () => {
@@ -296,14 +306,12 @@ export default ({createStyledComponent}) => {
     })
 
     it('should have dynamic and static styles', () => {
-      const renderer = TestRenderer.create(
+      TestRenderer.create(
         <JssProvider generateId={createGenerateId()}>
           <MyComponent />
         </JssProvider>
       )
-      const props = renderer.root.findByType(NoRenderer).props
-
-      expect(props.classes.button).to.equal('button-0 button-0-1')
+      expect(classes.button).to.equal('button-0 button-0-1')
     })
 
     it('should generate different dynamic values', () => {
@@ -375,13 +383,12 @@ export default ({createStyledComponent}) => {
           return {color: 'rgb(255, 255, 255)'}
         }
       }
-      const InnerComponent = () => null
-      InnerComponent.defaultProps = {
+
+      MyComponent = createStyledComponent(styles)
+      MyComponent.defaultProps = {
         color: 'rgb(255, 0, 0)'
       }
-      const StyledComponent = injectSheet(styles)(InnerComponent)
-
-      TestRenderer.create(<StyledComponent height={20} />)
+      TestRenderer.create(<MyComponent height={20} />)
 
       expect(passedProps.color).to.equal('rgb(255, 0, 0)')
       expect(passedProps.height).to.equal(20)

packages/react-jss/tests/dynamicStyles.js

@@ -9,7 +9,7 @@ describe('React-JSS: dynamic styles', () => {
       const useStyles = createUseStyles(styles, options)
       const Comp = props => {
         const classes = useStyles(props)
-        props.getClasses(classes)
+        if (props.getClasses) props.getClasses(classes)
         return null
       }
       Comp.displayName = options.name
@@ -21,8 +21,8 @@ describe('React-JSS: dynamic styles', () => {
 
   describe('using withStyles', () => {
     const createStyledComponent = (styles, options = {}) => {
-      const Comp = props => {
-        props.getClasses(props.classes)
+      const Comp = ({getClasses, classes}) => {
+        if (getClasses) getClasses(classes)
         return null
       }
       Comp.displayName = options.name