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,6 +1,5 @@
 import React from 'react'
 import Flash from '../Flash'
-import theme from '../theme'
 import {COMMON} from '../system-props'
 import {render} from '../utils/testing'
 
@@ -28,14 +27,4 @@ describe('Flash', () => {
     expect(render(<Flash scheme="red" />)).toHaveClasses(['flash', 'flash-error'])
     expect(render(<Flash scheme="green" />)).toHaveClasses(['flash', 'flash-success'])
   })
-
-  // TODO: understand why these aren't working
-
-  xit('respects margin utility prop', () => {
-    expect(render(<Flash m={1} theme={theme} />)).toHaveStyleRule('margin', '4px')
-  })
-
-  xit('respects padding utility prop', () => {
-    expect(render(<Flash p={2} theme={theme} />)).toHaveStyleRule('padding', '8px')
-  })
 })

src/__tests__/FlexItem.js

@@ -2,7 +2,7 @@ import React from 'react'
 import FlexItem from '../FlexItem'
 import {FLEX_ITEM} from '../system-props'
 import theme from '../theme'
-import {render} from '../utils/testing'
+import {render, renderStyles} from '../utils/testing'
 
 describe('FlexItem', () => {
   it('is a system component', () => {
@@ -17,10 +17,6 @@ describe('FlexItem', () => {
     expect(render(<FlexItem alignSelf="center" />)).toMatchSnapshot()
   })
 
-  xit('respects flexAuto', () => {
-    expect(render(<FlexItem flexAuto />)).toMatchSnapshot()
-  })
-
   it('renders as correct tag', () => {
     const item = render(
       <FlexItem is="button" alignSelf="center">
@@ -30,12 +26,4 @@ describe('FlexItem', () => {
     expect(item.type).toEqual('button')
     expect(item).toMatchSnapshot()
   })
-
-  xit('margin utility', () => {
-    expect(render(<FlexItem m={2} them={theme} />)).toMatchSnapshot()
-  })
-
-  xit('padding utility', () => {
-    expect(render(<FlexItem p={1} them={theme} />)).toMatchSnapshot()
-  })
 })

src/__tests__/Heading.js

@@ -1,24 +1,7 @@
 /* eslint-disable jsx-a11y/heading-has-content */
 import React from 'react'
-import Heading from '../Heading'
-import {render} from '../utils/testing'
-
-const theme = {
-  breakpoints: ['400px', '640px', '960px', '1280px'],
-  colors: {
-    green: ['#010', '#020', '#030', '#040', '#050', '#060']
-  },
-  fontSizes: [12, 14, 16, 20, 24, 32, 40, 48],
-  fonts: {
-    normal: 'Helvetica,sans-serif',
-    mono: 'Consolas,monospace'
-  },
-  lineHeights: {
-    normal: 1.5,
-    condensed: 1.25,
-    condensedUltra: 1
-  }
-}
+import {Heading, theme} from '..'
+import {render, renderStyles} from '../utils/testing'
 
 describe('Heading', () => {
   it('is a system component', () => {
@@ -32,21 +15,6 @@ describe('Heading', () => {
   it('respects the is prop', () => {
     expect(render(<Heading is="h6" />).type).toEqual('h6')
   })
-  it('renders margin', () => {
-    expect(render(<Heading m={1} theme={theme} />)).toHaveStyleRule('margin', '4px')
-    expect(render(<Heading m={[0, 1, 2, 3, 4]} theme={theme} />)).toMatchSnapshot()
-    expect(render(<Heading m={[1, 1, 3, 3]} theme={theme} />)).toMatchSnapshot()
-  })
-
-  it('renders padding', () => {
-    expect(render(<Heading p={1} theme={theme} />)).toHaveStyleRule('padding', '4px')
-    expect(render(<Heading p={[0, 1, 2, 3, 4]} theme={theme} />)).toMatchSnapshot()
-    expect(render(<Heading p={[1, 1, 3, 3]} theme={theme} />)).toMatchSnapshot()
-  })
-
-  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/__tests__/__snapshots__/FlexItem.js.snap

@@ -25,10 +25,3 @@ exports[`FlexItem respects alignSelf 1`] = `
   className="emotion-0"
 />
 `;
-
-exports[`FlexItem respects flexAuto 1`] = `
-<div
-  className="emotion-0"
-  flexAuto={true}
-/>
-`;