react-look-test-utils

Test utilities for react-look

Not compatible with react-look-native (for now)

Disclaimer

Before using the test utils, please note that all methods only include Look-specific classNames and are build for encapsulated styling tests without side-effects. They do not return third-party or global classNames.
For such use-case you might want to use window.getComputedStyle.

react-look-native support?

If you're wondering why there's no support for react-look-native? The answer is simple. You just don't need any helper to gather the styles as React Native Components provide all styles using the props.style so you can simply check those. There are no outsourced styles such as CSS classes.

Usage

getResolvedStyle requires the Component to be rendered correctly. Therefore a shallow renderer is used in the examples down. I recommend using enzyme build by Airbnb.

API

• getStaticStyle
• getPseudoStyle
• getMediaStyle
• getResolvedStyle

getStaticStyle(element [, pseudoClass, mediaConfig])

Returns all static CSS styles applied to an element. Optionally pass additional information on simulated pseudo classes and device configuration to match media queries. Uses getPseudoStyle and getMediaStyle to get those.

getPseudoStyle(element, pseudoClass [, mediaConfig])

Returns pseudo class specific static CSS styles applied to an element. Pass either a string e.g. :hover or an array of strings e.g. [':hover', ':active'] to simulate pseudo classes. Optionally add media configuration to also include pseudo classes within media queries.

const styles = StyleSheet.create({
  box: {
    color: 'red',
    ':hover': {
      color: 'blue',
      ':active': {
        fontSize: 13
      }
    },
    ':active': {
      fontSize: 15
    },

    // also supports pseudo classes within media queries
    '@media (min-height: 300px)': {
      ':active': {
        lineHeight: 1.5
      }
    }
  }
})

// finally a simple JSX-rendered element with our styles
const element = <div className={styles.box}></div>

getPseudoStyle(element, ':hover') // => {color: 'blue'}
getPseudoStyle(element, ':active') // => {fontSize: 15}
getPseudoStyle(element, ':hover:active') // => {fontSize: 13}
getPseudoStyle(element, [':hover', ':active']) // => {color: 'blue', fontSize: 15}
getPseudoStyle(element, ':active', { height: 400 }) // => {fontSize: 15, lineHeight: 1.5}

getMediaStyle(element, mediaConfig)

Returns static CSS styles applied to an element within media queries. It uses match-media-mock to resolve media query expressions using device configuration passed with mediaConfig such as screen, width or orientation.

const styles = StyleSheet.create({
  box: {
    color: 'red',
    '@media (orientation: landscape)': {
      color: 'blue'
    },
    '@media (min-width: 300px)': {
      fontSize: 15,
      '@media (min-height: 400px)': {
        lineHeight: 13
      }
    }
  }
})
// finally a simple JSX-rendered element with our styles
const element = <div className={styles.box}></div>

getMediaStyle(element, { orientation: 'landscape' }) // => {color: 'blue'}
getMediaStyle(element, { width: 400 }) // => {fontSize: 15}
getMediaStyle(element, { width: 400, orientation: 'landscape' }) // => {color: 'blue', fontSize: 15}
getMediaStyle(element, { width: 400, height: 500 }) // => {fontSize: 15, lineHeight: 13}

getResolvedStyle(element, Component, config [, pseudoClass, mediaConfig])

Returns an object containing all resolved styles as they'd be applied within a real application. In order to get correct output, you need to pass the right Component and your whole Look config. It uses getStaticStyle to get all the static styles including pseudo classes and media queries.

const styles = StyleSheet.create({
  box: {
    color: 'red',
    'isActive=true': {
      color: 'blue'
    },
    fontSize: props => props.fontSize
  }
})

// This time we can't just render a simple element
// but need to have the whole Component in order to
// get the props, state, etc. to resolve dynamic styles
// Using props only you can also use stateless Components
class Test extends Component {
  static defaultProps = { fontSize: 10 };
  render() {
    return (
      <div className={styles.box}></div>
    )
  }
}

// enhance your Component with look to inject
// the Look resolver into the render method
Test = look(Test)

// uses any kind of shallow renderer to render the Component
// I recommend enzyme's shallow renderer to do this
const wrapperA = shallow(<Test />)
getResolvedStyle(wrapperA.find('div'), wrapperA, Presets['react-dom']) // => {color: 'red', fontSize: 10}
const wrapperB = shallow(<Test isActive/>)
getResolvedStyle(wrapperB.find('div'), wrapperB, Presets['react-dom']) // => {color: 'blue', fontSize: 10}
const wrapperC = shallow(<Test fontSize={15} />)
getResolvedStyle(wrapperC.find('div'), wrapperC, Presets['react-dom']) // => {color: 'red', fontSize: 15}

Global instance

You most likely want to use the same Look config all the time. For this case you might want add a global custom instance of getResolvedStyle.

import { getResolvedStyle } from 'react-look-test-utils'
import { Presets } from 'react-look'

// makes it available for all tests as a global method
global.getLookStyle = (element, Component) => {
  return getResolvedStyle(element, Component, Presets['react-dom'])
}

Now add --require path/to/your/test-setup.js to your mocha options (optionally create a mocha.opts file).

License

Look is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann.