jss/packages/react-jss/src/withStyles.test.js at 26e98466fa2e76730ae61947f0befb73b0abe4b9 · cssinjs/jss · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
/* eslint-disable  react/prop-types */

import expect from 'expect.js'
import * as React from 'react'
import {spy} from 'sinon'
import TestRenderer from 'react-test-renderer'

import {withStyles, JssProvider} from '.'
import createCommonBaseTests from '../test-utils/createCommonBaseTests'

const createGenerateId = () => {
  let counter = 0
  return rule => `${rule.key}-${counter++}`
}

const createStyledComponent = (styles, options = {}) => {
  const Comp = () => null
  Comp.displayName = options.name
  return withStyles(styles, options)(Comp)
}

describe('React-JSS: withStyles', () => {
  createCommonBaseTests({createStyledComponent})

  describe('should merge the classes', () => {
    const styles = {
      button: {color: 'red'}
    }

    it('no default props + no user classes -> sheet classes', () => {
      const Comp = () => null
      const StyledComponent = withStyles(styles)(Comp)
      const renderer = TestRenderer.create(
        <JssProvider generateId={createGenerateId()}>
          <StyledComponent />
        </JssProvider>
      )
      const injectedClasses = renderer.root.findByType(Comp).props.classes

      expect(injectedClasses.button).to.be('button-0')
    })

    it('default props + no user classes -> merge sheet classes with default props classes', () => {
      const Comp = () => null
      Comp.defaultProps = {classes: {button: 'default-button'}}
      const StyledComponent = withStyles(styles)(Comp)
      const renderer = TestRenderer.create(
        <JssProvider generateId={createGenerateId()}>
          <StyledComponent />
        </JssProvider>
      )
      const injectedClasses = renderer.root.findByType(Comp).props.classes

      expect(injectedClasses.button).to.be('button-0 default-button')
    })

    it('default props + user classes -> merge sheet classes with user classes prop', () => {
      const Comp = () => null
      Comp.defaultProps = {
        classes: {
          button: 'default-button',
          test: 'test'
        }
      }
      const StyledComponent = withStyles(styles)(Comp)
      const renderer = TestRenderer.create(
        <JssProvider generateId={createGenerateId()}>
          <StyledComponent classes={{button: 'custom-button'}} />
        </JssProvider>
      )
      const injectedClasses = renderer.root.findByType(Comp).props.classes

      expect(injectedClasses.button).to.be('button-0 custom-button')
      expect(injectedClasses.test).to.be(undefined)
    })

    it('no default props + user classes -> merge sheet classes with user classes prop', () => {
      const Comp = () => null
      const StyledComponent = withStyles(styles)(Comp)
      const renderer = TestRenderer.create(
        <JssProvider generateId={createGenerateId()}>
          <StyledComponent classes={{button: 'custom-button'}} />
        </JssProvider>
      )
      const injectedClasses = renderer.root.findByType(Comp).props.classes

      expect(injectedClasses.button).to.be('button-0 custom-button')
    })
  })

  describe('access inner component', () => {
    it('should be exposed using "InnerComponent" property', () => {
      const Comp = () => null
      const ComponentOuter = withStyles({
        button: {color: 'red'}
      })(Comp)

      expect(ComponentOuter.InnerComponent).to.be(Comp)
    })
  })

  describe('access inner element', () => {
    it('should provide a ref to the inner element', () => {
      const innerRef = spy()

      /* eslint-disable-next-line react/no-multi-comp, react/prefer-stateless-function */
      class InnerComponent extends React.PureComponent {
        render() {
          return <div />
        }
      }

      const StyledComponent = withStyles()(InnerComponent)
      TestRenderer.create(<StyledComponent ref={innerRef} />)

      expect(innerRef.callCount).to.be(1)
    })
  })
})