@primer/components 33.0.0-rc.dcc047ad → 33.0.0

package/src/__tests__/SideNav.types.test.tsx

@@ -1,11 +0,0 @@
-import React from 'react'
-import SideNav from '../SideNav'
-
-export function shouldAcceptCallWithNoProps() {
-  return <SideNav />
-}
-
-export function shouldNotAcceptSystemProps() {
-  // @ts-expect-error system props should not be accepted
-  return <SideNav backgroundColor="aliceblue" />
-}

package/src/__tests__/Spinner.test.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import {Spinner, SpinnerProps} from '..'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('Spinner', () => {
-  afterEach(() => {
-    cleanup()
-  })
-
-  behavesAsComponent({
-    Component: Spinner
-  })
-
-  checkExports('Spinner', {
-    default: Spinner
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Spinner />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-  })
-
-  it('should respect size arguments', () => {
-    const expectSize = (input: SpinnerProps['size'] | undefined, expectedSize: string) => {
-      const {container} = HTMLRender(<Spinner size={input} />)
-      const svg = container.querySelector('svg')!
-      expect(svg.getAttribute('height')).toEqual(expectedSize)
-      expect(svg.getAttribute('width')).toEqual(expectedSize)
-    }
-
-    // default: medium
-    expectSize(undefined, '32px')
-    expectSize('small', '16px')
-    expectSize('medium', '32px')
-    expectSize('large', '64px')
-  })
-})

package/src/__tests__/StateLabel.test.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import {StateLabel} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-
-expect.extend(toHaveNoViolations)
-
-describe('StateLabel', () => {
-  behavesAsComponent({
-    Component: StateLabel,
-    toRender: () => <StateLabel status="issueOpened">Open</StateLabel>,
-    options: {
-      // Rendering a StyledOcticon seems to break getComputedStyles, which
-      // the sx prop implementation test uses to make sure the prop is working correctly.
-      // Despite my best efforts, I cannot figure out why this is happening. So,
-      // unfortunately, we will simply skip this test.
-      skipSx: true
-    }
-  })
-
-  checkExports('StateLabel', {
-    default: StateLabel
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<StateLabel status="issueOpened" />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('respects the status prop', () => {
-    expect(render(<StateLabel status="issueOpened" />)).toMatchSnapshot()
-    expect(render(<StateLabel status="issueClosed" />)).toMatchSnapshot()
-    expect(render(<StateLabel status="pullMerged" />)).toMatchSnapshot()
-  })
-
-  it('respects the variant prop', () => {
-    expect(render(<StateLabel variant="small" status="issueOpened" />)).toMatchSnapshot()
-    expect(render(<StateLabel variant="normal" status="issueOpened" />)).toMatchSnapshot()
-  })
-
-  it('renders children', () => {
-    expect(render(<StateLabel status="issueOpened">hi</StateLabel>)).toMatchSnapshot()
-  })
-})

package/src/__tests__/StateLabel.types.test.tsx

@@ -1,11 +0,0 @@
-import React from 'react'
-import StateLabel from '../StateLabel'
-
-export function shouldAcceptCallWithNoProps() {
-  return <StateLabel />
-}
-
-export function shouldNotAcceptSystemProps() {
-  // @ts-expect-error system props should not be accepted
-  return <StateLabel backgroundColor="bisque" />
-}

package/src/__tests__/StyledOcticon.test.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import {XIcon} from '@primer/octicons-react'
-import {StyledOcticon} from '..'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('StyledOcticon', () => {
-  behavesAsComponent({
-    Component: StyledOcticon,
-    toRender: () => <StyledOcticon icon={XIcon} />
-  })
-
-  checkExports('StyledOcticon', {
-    default: StyledOcticon
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<StyledOcticon icon={XIcon} />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-})

package/src/__tests__/StyledOcticon.types.test.tsx

@@ -1,12 +0,0 @@
-import {MoonIcon} from '@primer/octicons-react'
-import React from 'react'
-import StyledOcticon from '../StyledOcticon'
-
-export function shouldAcceptCallWithNoProps() {
-  return <StyledOcticon icon={MoonIcon} />
-}
-
-export function shouldNotAcceptSystemProps() {
-  // @ts-expect-error system props should not be accepted
-  return <StyledOcticon backgroundColor="wheat" />
-}

package/src/__tests__/SubNav.test.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import {SubNav} from '..'
-import {mount, render, rendersClass, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('SubNav', () => {
-  behavesAsComponent({Component: SubNav})
-
-  checkExports('SubNav', {
-    default: SubNav
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<SubNav />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders a <nav>', () => {
-    expect(render(<SubNav />).type).toEqual('nav')
-  })
-
-  it('adds the SubNav class', () => {
-    expect(rendersClass(<SubNav />, 'SubNav')).toEqual(true)
-  })
-
-  it('sets aria-label to the "label" prop', () => {
-    expect(render(<SubNav label="foo" />).props['aria-label']).toEqual('foo')
-  })
-
-  it('wraps its children in an "SubNav-body" div', () => {
-    const children = <b>yo</b>
-    const wrapper = mount(<SubNav>{children}</SubNav>)
-    const body = wrapper.find('.SubNav-body')
-    expect(body.exists()).toEqual(true)
-    expect(body.childAt(0).type()).toEqual('b')
-  })
-
-  it('respects the "actions" prop', () => {
-    const content = <h1>hi!</h1>
-    const wrapper = mount(<SubNav actions={content} />)
-    const actions = wrapper.find('.SubNav-actions')
-    expect(actions.exists()).toEqual(true)
-    expect(actions.text()).toEqual('hi!')
-  })
-})

package/src/__tests__/SubNav.types.test.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import SubNav from '../SubNav'
-
-export function shouldAcceptCallWithNoProps() {
-  return (
-    <>
-      <SubNav />
-      <SubNav.Link />
-      <SubNav.Links />
-    </>
-  )
-}
-
-export function shouldNotAcceptSystemProps() {
-  return (
-    <>
-      {/* @ts-expect-error system props should not be accepted */}
-      <SubNav backgroundColor="thistle" />
-      {/* @ts-expect-error system props should not be accepted */}
-      <SubNav.Link backgroundColor="thistle" />
-      {/* @ts-expect-error system props should not be accepted */}
-      <SubNav.Links backgroundColor="thistle" />
-    </>
-  )
-}

package/src/__tests__/SubNavLink.test.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import {SubNav} from '..'
-import {render, behavesAsComponent} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('SubNav.Link', () => {
-  behavesAsComponent({Component: SubNav.Link})
-
-  it('renders an <a> by default', () => {
-    expect(render(<SubNav.Link />).type).toEqual('a')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<SubNav.Link />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('respects the "selected" prop', () => {
-    expect(render(<SubNav.Link selected />)).toMatchSnapshot()
-  })
-
-  it('adds activeClassName={SELECTED_CLASS} when it gets a "to" prop', () => {
-    const Link = ({theme: _ignoredTheme, ...props}: Record<string, unknown>) => <div {...props} />
-    expect(render(<SubNav.Link as={Link} to="#" />)).toMatchSnapshot()
-  })
-})

package/src/__tests__/TabNav.test.tsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import {TabNav} from '..'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('TabNav', () => {
-  behavesAsComponent({Component: TabNav})
-
-  checkExports('TabNav', {
-    default: TabNav
-  })
-
-  describe('TabNav.Link', () => {
-    behavesAsComponent({Component: TabNav.Link})
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<TabNav aria-label="main" />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('sets aria-label appropriately', () => {
-    const {getByLabelText} = HTMLRender(<TabNav aria-label="stuff" />)
-    expect(getByLabelText('stuff')).toBeTruthy()
-    expect(getByLabelText('stuff').tagName).toEqual('NAV')
-  })
-})

package/src/__tests__/TabNav.types.test.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import TabNav from '../TabNav'
-
-export function shouldAcceptCallWithNoProps() {
-  return (
-    <>
-      <TabNav />
-      <TabNav.Link />
-    </>
-  )
-}
-
-export function shouldNotAcceptSystemProps() {
-  return (
-    <>
-      {/* @ts-expect-error system props should not be accepted */}
-      <TabNav backgroundColor="maroon" />
-      {/* @ts-expect-error system props should not be accepted */}
-      <TabNav.Link backgroundColor="fuchsia" />
-    </>
-  )
-}

package/src/__tests__/Text.test.tsx

@@ -1,78 +0,0 @@
-import React from 'react'
-import {Text} from '..'
-import theme from '../theme'
-import {px, render, renderStyles, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('Text', () => {
-  behavesAsComponent({Component: Text})
-
-  checkExports('Text', {
-    default: Text
-  })
-
-  it('renders a <span> by default', () => {
-    expect(render(<Text />).type).toEqual('span')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Text>hello</Text>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders fontSize', () => {
-    for (const fontSize of theme.fontSizes) {
-      expect(render(<Text fontSize={fontSize} />)).toHaveStyleRule('font-size', px(fontSize))
-    }
-  })
-
-  it('renders responsive fontSize', () => {
-    expect(renderStyles(<Text fontSize={[1, 2]} />)).toEqual({
-      'font-size': px(theme.fontSizes[1]),
-      [`@media screen and (min-width:${px(theme.breakpoints[0])})`]: {
-        'font-size': px(theme.fontSizes[2])
-      }
-    })
-  })
-
-  it('renders responsive lineHeight', () => {
-    expect(renderStyles(<Text lineHeight={['condensed', 'default']} />)).toEqual({
-      'line-height': String(theme.lineHeights.condensed),
-      [`@media screen and (min-width:${px(theme.breakpoints[0])})`]: {
-        'line-height': String(theme.lineHeights.default)
-      }
-    })
-  })
-
-  it('respects fontWeight', () => {
-    expect(render(<Text fontWeight="bold" />)).toHaveStyleRule('font-weight', '600')
-    expect(render(<Text fontWeight="normal" />)).toHaveStyleRule('font-weight', '400')
-  })
-
-  it('respects the "fontStyle" prop', () => {
-    expect(render(<Text fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
-    expect(render(<Text as="i" fontStyle="normal" />)).toHaveStyleRule('font-style', 'normal')
-  })
-
-  it('respects lineHeight', () => {
-    for (const [name, value] of Object.entries(theme.lineHeights)) {
-      expect(render(<Text lineHeight={name} />)).toHaveStyleRule('line-height', String(value))
-    }
-  })
-
-  it('respects fontFamily="mono"', () => {
-    // styled-components removes the whitespace between font-family values
-    const mono = theme.fonts.mono.replace(/, /g, ',')
-    expect(render(<Text fontFamily="mono" />)).toHaveStyleRule('font-family', mono)
-  })
-
-  it('respects other values for fontSize', () => {
-    expect(render(<Text fontSize="2em" />)).toHaveStyleRule('font-size', '2em')
-    expect(render(<Text fontSize={100} />)).toHaveStyleRule('font-size', '100px')
-  })
-})

package/src/__tests__/TextInput.test.tsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import {TextInput} from '..'
-import {render, mount, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('TextInput', () => {
-  behavesAsComponent({Component: TextInput, options: {skipAs: true}})
-
-  checkExports('TextInput', {
-    default: TextInput
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<TextInput aria-label="zipcode" name="zipcode" variant="small" />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders', () => {
-    expect(render(<TextInput name="zipcode" />)).toMatchSnapshot()
-  })
-
-  it('renders small', () => {
-    expect(render(<TextInput name="zipcode" variant="small" />)).toMatchSnapshot()
-  })
-
-  it('renders large', () => {
-    expect(render(<TextInput name="zipcode" variant="large" />)).toMatchSnapshot()
-  })
-
-  it('renders block', () => {
-    expect(render(<TextInput name="zipcode" block />)).toMatchSnapshot()
-  })
-
-  it('should call onChange prop with input value', () => {
-    const onChangeMock = jest.fn()
-    const component = mount(<TextInput onChange={onChangeMock} value="test" />)
-    component.find('input').simulate('change')
-    expect(onChangeMock).toHaveBeenCalled()
-  })
-
-  it('should render a password input', () => {
-    expect(render(<TextInput name="password" type="password" />)).toMatchSnapshot()
-  })
-})