Update tests

src/__tests__/BorderBox.js

@@ -13,26 +13,6 @@ describe('BorderBox', () => {
     expect(render(<BorderBox />)).toEqual(render(<Box {...BorderBox.defaultProps} />))
   })
 
-  it('renders margin', () => {
-    expect(render(<BorderBox m={1} />)).toHaveStyleRule('margin', px(theme.space[1]))
-    expect(renderStyles(<BorderBox m={[0, 1]} />)).toMatchKeys({
-      margin: px(theme.space[0]),
-      [`@media screen and (min-width:${px(theme.breakpoints[0])})`]: {
-        margin: px(theme.space[1])
-      }
-    })
-  })
-
-  it('renders padding', () => {
-    expect(render(<BorderBox p={1} />)).toHaveStyleRule('padding', px(theme.space[1]))
-    expect(renderStyles(<BorderBox p={[0, 1]} />)).toMatchKeys({
-      padding: px(theme.space[0]),
-      [`@media screen and (min-width:${px(theme.breakpoints[0])})`]: {
-        padding: px(theme.space[1])
-      }
-    })
-  })
-
   it('renders borders', () => {
     expect(render(<BorderBox borderColor="green.5" />)).toHaveStyleRule('border-color', colors.green[5])
     expect(render(<BorderBox borderBottom={0} />)).toHaveStyleRule('border-bottom', '0')

src/__tests__/Box.js

@@ -57,14 +57,6 @@ describe('Box', () => {
     expect(render(<Box position="relative" />)).toMatchSnapshot()
   })
 
-  it('respects bg', () => {
-    expect(render(<Box bg="yellow.2" theme={theme} />)).toMatchSnapshot()
-  })
-
-  it('respects color', () => {
-    expect(render(<Box color="red.5" theme={theme} />)).toMatchSnapshot()
-  })
-
   it('renders shadow', () => {
     expect(render(<Box boxShadow="small" theme={theme} />)).toMatchSnapshot()
     expect(render(<Box boxShadow="medium" theme={theme} />)).toMatchSnapshot()

src/__tests__/BranchName.js

@@ -24,13 +24,6 @@ describe('BranchName', () => {
     expect(render(<BranchName is="span" href="#" />).props.href).toEqual(null)
   })
 
-  xit('respects margin utility prop', () => {
-    expect(rendersClass(<BranchName m={1} />, 'm-1')).toEqual(true)
-  })
-
-  xit('respects padding utility prop', () => {
-    expect(rendersClass(<BranchName p={1} />, 'p-1')).toEqual(true)
-  })
   it('implements common system props', () => {
     expect(BranchName).toImplementSystemProps(COMMON)
   })

src/__tests__/Button.js

@@ -75,10 +75,6 @@ describe('ButtonPrimary', () => {
     expect(render(<ButtonPrimary />).type).toEqual('button')
     expect(render(<ButtonPrimary />).props.className).toContain('btn-primary')
   })
-
-  it('implements common system props', () => {
-    expect(render(<ButtonPrimary m={2} theme={theme} />)).toHaveStyleRule('margin', '8px')
-  })
 })
 
 describe('ButtonDanger', () => {
@@ -87,10 +83,6 @@ describe('ButtonDanger', () => {
     expect(render(<ButtonDanger />).props.className).toContain('btn-danger')
   })
 
-  it('implements common system props', () => {
-    expect(render(<ButtonDanger m={2} theme={theme} />)).toHaveStyleRule('margin', '8px')
-  })
-
   xit('renders children', () => {
     expect(
       render(
@@ -113,19 +105,11 @@ describe('ButtonLink', () => {
     expect(render(<ButtonLink />).type).toEqual('button')
     expect(render(<ButtonLink />).props.className).toContain('btn-link')
   })
-
-  it('implements common system props', () => {
-    expect(render(<ButtonLink m={2} theme={theme} />)).toHaveStyleRule('margin', '8px')
-  })
 })
 
 describe('ButtonOutline', () => {
   it('renders a <button> by default', () => {
     expect(render(<ButtonOutline />).type).toEqual('button')
     expect(render(<ButtonOutline />).props.className).toContain('btn-outline')
   })
-
-  it('implements common system props', () => {
-    expect(render(<ButtonOutline m={2} theme={theme} />)).toHaveStyleRule('margin', '8px')
-  })
 })

src/__tests__/CircleOcticon.js

@@ -28,12 +28,4 @@ describe('CircleOcticon', () => {
     expect(result).toHaveStyleRule('width', '32px')
     expect(result).toHaveStyleRule('height', '32px')
   })
-
-  it('respects margin utility prop', () => {
-    expect(render(<CircleOcticon icon={Check} m={4} />)).toHaveStyleRule('margin', `${theme.space[4]}px`)
-  })
-
-  it('respects padding utility prop', () => {
-    expect(render(<CircleOcticon icon={Check} p={4} />)).toHaveStyleRule('padding', `${theme.space[4]}px`)
-  })
 })

src/__tests__/Details.js

@@ -12,14 +12,6 @@ describe('Details', () => {
     expect(render(<Details />)).toHaveClass('details-reset')
   })
 
-  it('respects margin utility prop', () => {
-    expect(render(<Details m={1} />)).toHaveStyleRule('margin', '4px')
-  })
-
-  it('respects padding utility prop', () => {
-    expect(render(<Details p={1} />)).toHaveStyleRule('padding', '4px')
-  })
-
   it('Respects the open prop', () => {
     expect(mount(<Details open />).props().open).toEqual(true)
   })

src/__tests__/Dropdown.js

@@ -17,12 +17,4 @@ describe('Dropdown', () => {
     expect(rendered.type).toEqual('div')
     expect(rendered.props.className).toContain('BtnGroup')
   })
-
-  it('respects margin utility prop', () => {
-    expect(render(<Dropdown m={1} />)).toHaveStyleRule('margin', '4px')
-  })
-
-  it('respects padding utility prop', () => {
-    expect(render(<Dropdown p={1} />)).toHaveStyleRule('padding', '4px')
-  })
 })

src/__tests__/Flash.js

@@ -1,8 +1,7 @@
 import React from 'react'
 import Flash from '../Flash'
-import theme from '../theme'
 import {COMMON} from '../system-props'
-import {render, renderStyles} from '../utils/testing'
+import {render} from '../utils/testing'
 
 describe('Flash', () => {
   it('is a system component', () => {
@@ -28,16 +27,4 @@ describe('Flash', () => {
     expect(render(<Flash scheme="red" />)).toHaveClasses(['flash', 'flash-error'])
     expect(render(<Flash scheme="green" />)).toHaveClasses(['flash', 'flash-success'])
   })
-
-  it('respects margin utility prop', () => {
-    expect(renderStyles(<Flash m={4} />)).toMatchKeys({
-      'margin': `${theme.space[4]}px`
-    })
-  })
-
-  it('respects padding utility prop', () => {
-    expect(renderStyles(<Flash p={4} />)).toMatchKeys({
-      'padding': `${theme.space[4]}px`
-    })
-  })
 })

src/__tests__/FlexItem.js

@@ -26,16 +26,4 @@ describe('FlexItem', () => {
     expect(item.type).toEqual('button')
     expect(item).toMatchSnapshot()
   })
-
-  it('respects margin utility prop', () => {
-    expect(renderStyles(<FlexItem m={4} />)).toMatchKeys({
-      'margin': `${theme.space[4]}px`
-    })
-  })
-
-  it('respects padding utility prop', () => {
-    expect(renderStyles(<FlexItem p={4} />)).toMatchKeys({
-      'padding': `${theme.space[4]}px`
-    })
-  })
 })

src/__tests__/Heading.js

@@ -15,16 +15,6 @@ describe('Heading', () => {
   it('respects the is prop', () => {
     expect(render(<Heading is="h6" />).type).toEqual('h6')
   })
-  it('renders margin & padding', () => {
-    expect(renderStyles(<Heading m={4} p={4} />)).toMatchKeys({
-      'margin': `${theme.space[4]}px`,
-      'padding': `${theme.space[4]}px`
-    })
-  })
-
-  it('respects color', () => {
-    expect(render(<Heading color="green.5" theme={theme} />)).toHaveStyleRule('color', theme.colors.green[5])
-  })
 
   it('respects fontWeight', () => {
     expect(render(<Heading fontWeight="bold" theme={theme} />)).toHaveStyleRule('font-weight', 'bold')

src/__tests__/Label.js

@@ -32,12 +32,4 @@ describe('Label', () => {
   it('implements space system props', () => {
     expect(Label).toImplementSystemProps(['space'])
   })
-
-  it('respects margin utility prop', () => {
-    expect(render(<Label m={4} />)).toMatchSnapshot()
-  })
-
-  it('respects padding utility prop', () => {
-    expect(render(<Label p={4} />)).toMatchSnapshot()
-  })
 })

src/__tests__/Link.js

@@ -34,10 +34,4 @@ describe('Link', () => {
   it('renders without any props', () => {
     expect(render(<Link />)).toMatchSnapshot()
   })
-
-  it('renders margin', () => {
-    expect(render(<Link m={1} theme={theme} />)).toMatchSnapshot()
-    expect(render(<Link m={[0, 1, 2, 3]} theme={theme} />)).toMatchSnapshot()
-    expect(render(<Link m={[1, 1, 1, 3]} theme={theme} />)).toMatchSnapshot()
-  })
 })

src/__tests__/Text.js

@@ -40,23 +40,6 @@ describe('Text', () => {
     })
   })
 
-  it('renders margin', () => {
-    expect(render(<Text m={1} />)).toHaveStyleRule('margin', px(theme.space[1]))
-    expect(render(<Text m={[0, 1, 2, 3, 4]} />)).toMatchSnapshot()
-    expect(render(<Text m={[1, 1, 3, 3]} />)).toMatchSnapshot()
-  })
-
-  it('renders padding', () => {
-    expect(render(<Text p={1} />)).toHaveStyleRule('padding', px(theme.space[1]))
-    expect(render(<Text p={[0, 1, 2, 3, 4]} />)).toMatchSnapshot()
-    expect(render(<Text p={[1, 1, 3, 3]} />)).toMatchSnapshot()
-  })
-
-  it('respects color', () => {
-    expect(render(<Text color="green.5" />)).toHaveStyleRule('color', colors.green[5])
-    expect(render(<Text color="#f0f" />)).toHaveStyleRule('color', '#f0f')
-  })
-
   it('respects fontWeight', () => {
     expect(render(<Text fontWeight="bold" />)).toHaveStyleRule('font-weight', 'bold')
     expect(render(<Text fontWeight="normal" />)).toHaveStyleRule('font-weight', 'normal')

src/__tests__/UtilitySystemProps.js

@@ -0,0 +1,70 @@
+import React from 'react'
+import theme from '../theme'
+import * as Components from '../index.js'
+import {renderStyles} from '../utils/testing'
+
+// TODO: These components need required props,
+// Not sure how to set default props for required ones
+const blacklist = ['OcticonButton', 'DonutChart', 'MergeStatus']
+
+describe('UtilitySystemProps', () => {
+  for (const Component of Object.values(Components)) {
+    // Skip any components that don't have displayName yet
+    if (!Component.displayName || !Component.systemProps || blacklist.includes(Component.displayName)) {
+      continue
+    }
+
+    if (Component.systemProps.includes('space')) {
+      it(`${Component.displayName} renders spacing props properly`, () => {
+        for (const i in theme.space) {
+          expect(
+            renderStyles(
+              <Component
+                m={i}
+                mt={i}
+                mr={i}
+                mb={i}
+                ml={i}
+                mx={i}
+                my={i}
+                p={i}
+                pt={i}
+                pr={i}
+                pb={i}
+                pl={i}
+                px={i}
+                py={i}
+              />
+            )
+          ).toMatchKeys({
+            margin: `${theme.space[i]}px`,
+            'margin-bottom': `${theme.space[i]}px`,
+            'margin-left': `${theme.space[i]}px`,
+            'margin-right': `${theme.space[i]}px`,
+            'margin-top': `${theme.space[i]}px`,
+            padding: `${theme.space[i]}px`,
+            'padding-bottom': `${theme.space[i]}px`,
+            'padding-left': `${theme.space[i]}px`,
+            'padding-right': `${theme.space[i]}px`,
+            'padding-top': `${theme.space[i]}px`
+          })
+        }
+      })
+    }
+
+    if (Component.systemProps.includes('color')) {
+      it(`${Component.displayName} renders color props properly`, () => {
+        for (const color of Object.keys(theme.colors)) {
+          if (typeof theme.colors[color] === 'object' && color != 'state') {
+            for (const i in theme.colors[color]) {
+              expect(renderStyles(<Component bg={`${color}.${i}`} color={`${color}.${i}`} />)).toMatchKeys({
+                'background-color': theme.colors[color][i],
+                color: theme.colors[color][i]
+              })
+            }
+          }
+        }
+      })
+    }
+  }
+})

src/system-props.js

@@ -104,6 +104,9 @@ export function withSystemProps(Component, props = COMMON) {
   Wrapped.displayName = Component.displayName
   Object.assign(Wrapped.propTypes, Component.propTypes)
 
+  // Set what system props we use on this component
+  Wrapped.systemProps = props
+
   // Copy over non-system keys from components
   // eg. Tooltip.js => Tooltip.directions Tooltip.alignments
   for (const key of Object.keys(Component)) {