Skip to content

Create test utility for system props #225

@emplums

Description

@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?
    })
}

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions