Create test utility for system props

[emplums]

I'd like us to have a test utility that we can reused across all of our component's tests that will take a component & a group of system props and return whether or not those system props render expected styles correctly 🎉

pseudo code:

const rendersSystemStyles(component, props) => {
// takes every prop from the group of props and applies them to the component? 
// might be easier to not have props as a parameter and manually add the common props
// so we'd have a different test for each group of props!

// then tests whether or not those props translated to styles
    expect(renderStyles(<Avatar m={4} p={2} bg={blue.4} color={yellow.4} />)).toEqual({
      'margin: ${theme.space[4]}px,
       'padding: ${theme.space[4])px,
       'background-color': ${theme.colors.blue[4]},
       'color': ${theme.colors.blue[4])},
       // maybe test responsive breakpoints here too?
    })
}

[emplums]

@jonrohan let me know if this makes sense!

[shawnbot]

How about something like this:

expect(Component).toRenderSystemProps(COMMON)

This would then do something under the hood like:

const systemPropFixtures = {
  space: {
    props: {m: [0, 2], p: [2, 4]},
    styles: { /* responsive style fixture */ }
  }
}
toRenderSystemProps(Component, systemProps) {
  const pass = systemProps.every(prop => {
    const {props, styles} = systemPropFixtures[prop]
    return this.equals(renderStyles(<Component {...props} />), styles)
  })
  return {pass, message: () => `It didn't do the right thing (TODO)`}
}

[emplums]

Shipped via #227