Update tests

examples/component-examples/Box.js

@@ -30,7 +30,10 @@ export default {
               <Box pb={4}>color</Box>
             </th>
             <th colSpan={textColors.length}>
-              <Mono pb={4}>bg={`{color}`}</Mono>
+              <Mono pb={4}>
+                bg=
+                {`{color}`}
+              </Mono>
             </th>
             <th>
               <Mono pb={4}>borderColor</Mono>

src/__tests__/BorderBox.js

@@ -1,8 +1,8 @@
 import React from 'react'
-import theme, {colors} from '../theme'
+import {colors} from '../theme'
 import BorderBox from '../BorderBox'
 import Box from '../Box'
-import {px, render, renderStyles} from '../utils/testing'
+import {render} from '../utils/testing'
 
 describe('BorderBox', () => {
   it('is a system component', () => {
@@ -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

@@ -1,10 +1,10 @@
 import React from 'react'
 import BranchName from '../BranchName'
-import {render, rendersClass} from '../utils/testing'
+import {render} from '../utils/testing'
 import {COMMON} from '../system-props'
 
 describe('BranchName', () => {
-  xit('is a system component', () => {
+  it('is a system component', () => {
     expect(BranchName.systemComponent).toEqual(true)
   })
 
@@ -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

@@ -1,13 +1,12 @@
 import React from 'react'
 import {Button, ButtonPrimary, ButtonDanger, ButtonLink, ButtonOutline} from '..'
-import theme from '../theme'
 import {render} from '../utils/testing'
 import {COMMON} from '../system-props'
 
 function noop() {}
 
 describe('Button', () => {
-  xit('is a system component', () => {
+  it('is a system component', () => {
     expect(Button.systemComponent).toEqual(true)
   })
 
@@ -75,10 +74,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 +82,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 +104,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__/CircleBadge.js

@@ -6,7 +6,7 @@ import {render, mount} from '../utils/testing'
 const imgInput = <img alt="" src="primer.jpg" />
 
 describe('CircleBadge', () => {
-  xit('is a system component', () => {
+  it('is a system component', () => {
     expect(CircleBadge.systemComponent).toEqual(true)
   })
 

src/__tests__/CircleOcticon.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import {Check} from '@githubprimer/octicons-react'
-import theme, {colors} from '../theme'
+import {colors} from '../theme'
 import CircleOcticon from '../CircleOcticon'
 import {render} from '../utils/testing'
 
@@ -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__/CounterLabel.js

@@ -4,7 +4,7 @@ import {render} from '../utils/testing'
 import {COMMON} from '../system-props'
 
 describe('CounterLabel', () => {
-  xit('is a system component', () => {
+  it('is a system component', () => {
     expect(CounterLabel.systemComponent).toEqual(true)
   })
 

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)
   })
@@ -35,13 +27,15 @@ describe('Details', () => {
     expect(
       render(
         <Details>
-          <summary>hi</summary>bye
+          <summary>hi</summary>
+          bye
         </Details>
       )
     ).toEqual(
       render(
         <details open={false} className="details-reset">
-          <summary>hi</summary>bye
+          <summary>hi</summary>
+          bye
         </details>
       )
     )

src/__tests__/DonutChart.js

@@ -5,7 +5,7 @@ import theme, {colors} from '../theme'
 import {render} from '../utils/testing'
 
 describe('DonutChart', () => {
-  xit('is a system component', () => {
+  it('is a system component', () => {
     expect(DonutChart.systemComponent).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

@@ -1,7 +1,6 @@
 import React from 'react'
 import FlexItem from '../FlexItem'
 import {FLEX_ITEM} from '../system-props'
-import theme from '../theme'
 import {render} from '../utils/testing'
 
 describe('FlexItem', () => {
@@ -17,10 +16,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 +25,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,6 +1,6 @@
 /* eslint-disable jsx-a11y/heading-has-content */
 import React from 'react'
-import Heading from '../Heading'
+import {Heading} from '..'
 import {render} from '../utils/testing'
 
 const theme = {
@@ -32,21 +32,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

@@ -1,7 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */
 import React from 'react'
 import Link from '../Link'
-import theme from '../theme'
 import {render, renderClasses} from '../utils/testing'
 import {COMMON} from '../system-props'
 
@@ -34,10 +33,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__/OcticonButton.js

@@ -16,11 +16,11 @@ describe('OcticonButton', () => {
   })
 
   it('renders a button with an Octicon', () => {
-    expect(render(<OcticonButton icon={Circle} />)).toMatchSnapshot()
+    expect(render(<OcticonButton icon={Circle} label="circle" />)).toMatchSnapshot()
   })
 
   it('respects the "disabled" prop', () => {
-    expect(render(<OcticonButton icon={Circle} disabled />).props.disabled).toBe(true)
+    expect(render(<OcticonButton icon={Circle} disabled label="circle" />).props.disabled).toBe(true)
   })
 
   it('sets "aria-label" to the "label" prop', () => {
@@ -29,10 +29,10 @@ describe('OcticonButton', () => {
 
   it('passes the onClick handler to the <button>', () => {
     function click() {}
-    expect(render(<OcticonButton icon={Circle} onClick={click} />).props.onClick).toEqual(click)
+    expect(render(<OcticonButton icon={Circle} onClick={click} label="circle" />).props.onClick).toEqual(click)
   })
 
   it('passes the "size" prop to the Octicon', () => {
-    expect(render(<OcticonButton icon={Circle} size={128} />)).toMatchSnapshot()
+    expect(render(<OcticonButton icon={Circle} size={128} label="circle" />)).toMatchSnapshot()
   })
 })