@primer/components 33.1.0-rc.6856bcf5 → 33.1.0

package/src/__tests__/Breadcrumbs.test.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import {Breadcrumbs, Breadcrumb} 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('Breadcrumbs', () => {
-  behavesAsComponent({Component: Breadcrumbs, options: {skipAs: true}})
-
-  checkExports('Breadcrumbs', {
-    default: Breadcrumbs,
-    Breadcrumb
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Breadcrumbs />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders a <nav>', () => {
-    expect(render(<Breadcrumbs />).type).toEqual('nav')
-  })
-})

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

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

package/src/__tests__/BreadcrumbsItem.test.tsx

@@ -1,31 +0,0 @@
-import {cleanup, render as HTMLRender} from '@testing-library/react'
-import 'babel-polyfill'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import React from 'react'
-import {Breadcrumbs} from '..'
-import {behavesAsComponent, render} from '../utils/testing'
-expect.extend(toHaveNoViolations)
-
-describe('Breadcrumbs.Item', () => {
-  behavesAsComponent({Component: Breadcrumbs.Item})
-
-  it('renders an <a> by default', () => {
-    expect(render(<Breadcrumbs.Item />).type).toEqual('a')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Breadcrumbs.Item />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('respects the "selected" prop', () => {
-    expect(render(<Breadcrumbs.Item 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(<Breadcrumbs.Item as={Link} to="#" />)).toMatchSnapshot()
-  })
-})

package/src/__tests__/Button.test.tsx

@@ -1,128 +0,0 @@
-import React from 'react'
-import {
-  Button,
-  ButtonPrimary,
-  ButtonClose,
-  ButtonDanger,
-  ButtonOutline,
-  ButtonInvisible,
-  ButtonGroup,
-  ButtonTableList
-} 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)
-
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-function noop() {}
-
-describe('Button', () => {
-  behavesAsComponent({Component: Button})
-
-  checkExports('Button', {
-    default: Button,
-    ButtonPrimary,
-    ButtonDanger,
-    ButtonOutline,
-    ButtonInvisible,
-    ButtonGroup,
-    ButtonTableList,
-    ButtonClose
-  })
-
-  it('renders a <button>', () => {
-    expect(render(<Button />).type).toEqual('button')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Button>Click here</Button>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('preserves "onClick" prop', () => {
-    expect(render(<Button onClick={noop} />).props.onClick).toEqual(noop)
-  })
-
-  it('respects width props', () => {
-    expect(render(<Button sx={{width: 200}} />)).toHaveStyleRule('width', '200px')
-  })
-
-  it('respects the "disabled" prop', () => {
-    const item = render(<Button disabled />)
-    expect(item.props.disabled).toEqual(true)
-    expect(item).toMatchSnapshot()
-  })
-
-  it('respects the "variant" prop', () => {
-    expect(render(<Button variant="small" />)).toHaveStyleRule('font-size', '12px')
-    expect(render(<Button variant="large" />)).toHaveStyleRule('font-size', '16px')
-  })
-
-  it('respects the "fontSize" prop over the "variant" prop', () => {
-    expect(render(<Button variant="small" sx={{fontSize: 20}} />)).toHaveStyleRule('font-size', '20px')
-  })
-})
-
-describe('ButtonPrimary', () => {
-  behavesAsComponent({Component: ButtonPrimary})
-
-  it('renders a <button>', () => {
-    expect(render(<ButtonPrimary />).type).toEqual('button')
-  })
-
-  it('renders correct disabled styles', () => {
-    const item = render(<ButtonPrimary disabled />)
-    expect(item).toMatchSnapshot()
-  })
-})
-
-describe('ButtonDanger', () => {
-  behavesAsComponent({Component: ButtonDanger})
-
-  it('renders a <button>', () => {
-    expect(render(<ButtonDanger />).type).toEqual('button')
-  })
-
-  it('renders correct disabled styles', () => {
-    const item = render(<ButtonDanger disabled />)
-    expect(item).toMatchSnapshot()
-  })
-})
-
-describe('ButtonOutline', () => {
-  behavesAsComponent({Component: ButtonOutline})
-
-  it('renders a <button> by default', () => {
-    expect(render(<ButtonOutline />).type).toEqual('button')
-  })
-
-  it('renders correct disabled styles', () => {
-    const item = render(<ButtonOutline disabled />)
-    expect(item).toMatchSnapshot()
-  })
-})
-
-describe('ButtonInvisible', () => {
-  behavesAsComponent({Component: ButtonOutline})
-
-  it('renders a <button> by default', () => {
-    expect(render(<ButtonInvisible />).type).toEqual('button')
-  })
-
-  it('renders correct disabled styles', () => {
-    const item = render(<ButtonInvisible disabled />)
-    expect(item).toMatchSnapshot()
-  })
-})
-
-describe('ButtonGroup', () => {
-  behavesAsComponent({Component: ButtonGroup})
-})
-
-describe('ButtonTableList', () => {
-  behavesAsComponent({Component: ButtonTableList})
-})

package/src/__tests__/Caret.test.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import Caret, {CaretProps} from '../Caret'
-import {render, 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('Caret', () => {
-  it('renders <svg>', () => {
-    expect(render(<Caret />).type).toEqual('svg')
-  })
-
-  checkExports('Caret', {
-    default: Caret
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Caret />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders cardinal directions', () => {
-    for (const location of ['top', 'right', 'bottom', 'left']) {
-      expect(render(<Caret location={location as CaretProps['location']} />)).toMatchSnapshot()
-    }
-    for (const location of ['top-left', 'top-right', 'bottom-left', 'bottom-right']) {
-      expect(render(<Caret location={location as CaretProps['location']} />)).toMatchSnapshot()
-    }
-    for (const location of ['left-top', 'left-bottom', 'right-top', 'right-bottom']) {
-      expect(render(<Caret location={location as CaretProps['location']} />)).toMatchSnapshot()
-    }
-  })
-})

package/src/__tests__/Checkbox.test.tsx

@@ -1,155 +0,0 @@
-import React from 'react'
-import {Checkbox} from '..'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {render, cleanup} from '@testing-library/react'
-import {toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-import '@testing-library/jest-dom'
-import userEvent from '@testing-library/user-event'
-
-expect.extend(toHaveNoViolations)
-
-describe('Checkbox', () => {
-  beforeEach(() => {
-    jest.resetAllMocks()
-    cleanup()
-  })
-  behavesAsComponent({Component: Checkbox})
-
-  checkExports('Checkbox', {
-    default: Checkbox
-  })
-
-  it('renders a valid checkbox input', () => {
-    const {getByRole} = render(<Checkbox />)
-
-    const checkbox = getByRole('checkbox')
-
-    expect(checkbox).toBeDefined()
-  })
-
-  it('renders an unchecked checkbox by default', () => {
-    const {getByRole} = render(<Checkbox />)
-
-    const checkbox = getByRole('checkbox') as HTMLInputElement
-
-    expect(checkbox.checked).toEqual(false)
-  })
-
-  it('renders an active checkbox when checked attribute is passed', () => {
-    const handleChange = jest.fn()
-    const {getByRole} = render(<Checkbox checked onChange={handleChange} />)
-
-    const checkbox = getByRole('checkbox') as HTMLInputElement
-
-    expect(checkbox.checked).toEqual(true)
-  })
-
-  it('accepts a change handler that can alter the checkbox state', () => {
-    const handleChange = jest.fn()
-    const {getByRole} = render(<Checkbox onChange={handleChange} />)
-
-    const checkbox = getByRole('checkbox') as HTMLInputElement
-
-    expect(checkbox.checked).toEqual(false)
-
-    userEvent.click(checkbox)
-    expect(handleChange).toHaveBeenCalled()
-    expect(checkbox.checked).toEqual(true)
-
-    userEvent.click(checkbox)
-    expect(handleChange).toHaveBeenCalled()
-    expect(checkbox.checked).toEqual(false)
-  })
-
-  it('renders an indeterminate prop correctly', () => {
-    const handleChange = jest.fn()
-    const {getByRole} = render(<Checkbox indeterminate checked onChange={handleChange} />)
-
-    const checkbox = getByRole('checkbox') as HTMLInputElement
-
-    expect(checkbox.indeterminate).toEqual(true)
-    expect(checkbox.checked).toEqual(false)
-  })
-
-  it('renders an inactive checkbox state correctly', () => {
-    const handleChange = jest.fn()
-    const {getByRole, rerender} = render(<Checkbox disabled onChange={handleChange} />)
-
-    const checkbox = getByRole('checkbox') as HTMLInputElement
-
-    expect(checkbox.disabled).toEqual(true)
-    expect(checkbox.checked).toEqual(false)
-    expect(checkbox).toHaveAttribute('aria-disabled', 'true')
-
-    userEvent.click(checkbox)
-
-    expect(checkbox.disabled).toEqual(true)
-    expect(checkbox.checked).toEqual(false)
-    expect(checkbox).toHaveAttribute('aria-disabled', 'true')
-
-    // remove disabled attribute and retest
-    rerender(<Checkbox onChange={handleChange} />)
-
-    expect(checkbox).toHaveAttribute('aria-disabled', 'false')
-  })
-
-  it('renders an uncontrolled component correctly', () => {
-    const {getByRole} = render(<Checkbox defaultChecked />)
-
-    const checkbox = getByRole('checkbox') as HTMLInputElement
-
-    expect(checkbox.checked).toEqual(true)
-
-    userEvent.click(checkbox)
-
-    expect(checkbox.checked).toEqual(false)
-  })
-
-  it('renders an aria-checked attribute correctly', () => {
-    const handleChange = jest.fn()
-    const {getByRole, rerender} = render(<Checkbox checked={false} onChange={handleChange} />)
-
-    const checkbox = getByRole('checkbox') as HTMLInputElement
-
-    expect(checkbox).toHaveAttribute('aria-checked', 'false')
-
-    rerender(<Checkbox checked={true} onChange={handleChange} />)
-
-    expect(checkbox).toHaveAttribute('aria-checked', 'true')
-
-    rerender(<Checkbox indeterminate checked onChange={handleChange} />)
-
-    expect(checkbox).toHaveAttribute('aria-checked', 'mixed')
-  })
-
-  it('renders an invalid aria state when validation prop indicates an error', () => {
-    const handleChange = jest.fn()
-    const {getByRole, rerender} = render(<Checkbox onChange={handleChange} />)
-
-    const checkbox = getByRole('checkbox') as HTMLInputElement
-
-    expect(checkbox).toHaveAttribute('aria-invalid', 'false')
-
-    rerender(<Checkbox onChange={handleChange} validationStatus="success" />)
-
-    expect(checkbox).toHaveAttribute('aria-invalid', 'false')
-
-    rerender(<Checkbox onChange={handleChange} validationStatus="error" />)
-
-    expect(checkbox).toHaveAttribute('aria-invalid', 'true')
-  })
-
-  it('renders an aria state indicating the field is required', () => {
-    const handleChange = jest.fn()
-    const {getByRole, rerender} = render(<Checkbox onChange={handleChange} />)
-
-    const checkbox = getByRole('checkbox') as HTMLInputElement
-
-    expect(checkbox).toHaveAttribute('aria-required', 'false')
-
-    rerender(<Checkbox onChange={handleChange} required />)
-
-    expect(checkbox).toHaveAttribute('aria-required', 'true')
-  })
-})

package/src/__tests__/CircleBadge.test.tsx

@@ -1,66 +0,0 @@
-import React from 'react'
-import {CircleBadge} from '..'
-import {CheckIcon} from '@primer/octicons-react'
-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)
-
-const imgInput = <img alt="" src="primer.jpg" />
-
-describe('CircleBadge', () => {
-  behavesAsComponent({
-    Component: CircleBadge,
-    toRender: () => <CircleBadge>{imgInput}</CircleBadge>
-  })
-
-  checkExports('CircleBadge', {
-    default: CircleBadge
-  })
-
-  describe('CircleBadge.Icon', () => {
-    behavesAsComponent({
-      Component: CircleBadge.Icon,
-      toRender: () => <CircleBadge.Icon icon={CheckIcon} />
-    })
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<CircleBadge variant="large" size={20} />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('respects the inline prop', () => {
-    expect(render(<CircleBadge inline />)).toMatchSnapshot()
-  })
-
-  it('respects the variant prop', () => {
-    expect(render(<CircleBadge variant="large" />)).toMatchSnapshot()
-  })
-
-  it('uses the size prop to override the variant prop', () => {
-    expect(render(<CircleBadge variant="large" size={20} />)).toMatchSnapshot()
-  })
-
-  it('applies title', () => {
-    expect(
-      render(
-        <CircleBadge as="a" title="primer logo">
-          {imgInput}
-        </CircleBadge>
-      ).props['title']
-    ).toEqual('primer logo')
-  })
-
-  it('preserves child class names', () => {
-    const comp = mount(
-      <CircleBadge>
-        <img className="primer" alt="" src="primer.jpg" />
-      </CircleBadge>
-    )
-    expect(comp.find('img').hasClass('primer')).toEqual(true)
-  })
-})

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

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

package/src/__tests__/CircleOcticon.test.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import {CheckIcon} from '@primer/octicons-react'
-import theme from '../theme'
-import {CircleOcticon} 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('CircleOcticon', () => {
-  behavesAsComponent({
-    Component: CircleOcticon,
-    toRender: () => <CircleOcticon icon={CheckIcon} />
-  })
-
-  checkExports('CircleOcticon', {
-    default: CircleOcticon
-  })
-
-  it('renders a <div> with width and height', () => {
-    const result = render(<CircleOcticon icon={CheckIcon} size={10} />)
-    expect(result).toHaveStyleRule('width', '10px')
-    expect(result).toHaveStyleRule('height', '10px')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<CircleOcticon icon={CheckIcon} size={10} />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders {borderRadius: 50%}', () => {
-    expect(render(<CircleOcticon icon={CheckIcon} />)).toHaveStyleRule('border-radius', '50%')
-  })
-
-  it('respects the bg prop', () => {
-    expect(render(<CircleOcticon icon={CheckIcon} bg="danger.subtle" />)).toHaveStyleRule(
-      'background-color',
-      theme.colorSchemes.light.colors.danger?.subtle
-    )
-  })
-
-  it('has a default size', () => {
-    const result = render(<CircleOcticon icon={CheckIcon} />)
-    expect(result).toHaveStyleRule('width', '32px')
-    expect(result).toHaveStyleRule('height', '32px')
-  })
-})

package/src/__tests__/ConfirmationDialog.test.tsx

@@ -1,120 +0,0 @@
-import 'babel-polyfill'
-import {render as HTMLRender, cleanup, act, fireEvent} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import React, {useCallback, useRef, useState} from 'react'
-
-import {ActionMenu} from '../ActionMenu'
-import BaseStyles from '../BaseStyles'
-import Box from '../Box'
-import Button from '../Button/Button'
-import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog'
-import theme from '../theme'
-import {ThemeProvider} from '../ThemeProvider'
-import {SSRProvider} from '../utils/ssr'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-
-expect.extend(toHaveNoViolations)
-
-const Basic = () => {
-  const [isOpen, setIsOpen] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const onDialogClose = useCallback(() => setIsOpen(false), [])
-  return (
-    <ThemeProvider theme={theme}>
-      <SSRProvider>
-        <BaseStyles>
-          <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
-            Show dialog
-          </Button>
-          {isOpen && (
-            <ConfirmationDialog
-              title="Confirm"
-              onClose={onDialogClose}
-              cancelButtonContent="Secondary"
-              confirmButtonContent="Primary"
-            >
-              Lorem ipsum dolor sit Pippin good dog.
-            </ConfirmationDialog>
-          )}
-        </BaseStyles>
-      </SSRProvider>
-    </ThemeProvider>
-  )
-}
-
-const ShorthandHookFromActionMenu = () => {
-  const confirm = useConfirm()
-  const [text, setText] = useState('Show menu')
-  const onButtonClick = useCallback(async () => {
-    if (
-      await confirm({
-        title: 'Confirm',
-        content: 'Confirm',
-        cancelButtonContent: 'Secondary',
-        confirmButtonContent: 'Primary'
-      })
-    ) {
-      setText('Confirmed')
-    }
-  }, [confirm])
-  return (
-    <ThemeProvider theme={theme}>
-      <SSRProvider>
-        <BaseStyles>
-          <Box display="flex" flexDirection="column" alignItems="flex-start">
-            <ActionMenu
-              renderAnchor={props => <Button {...props}>{text}</Button>}
-              items={[{text: 'Show dialog', onAction: onButtonClick}]}
-            />
-          </Box>
-        </BaseStyles>
-      </SSRProvider>
-    </ThemeProvider>
-  )
-}
-
-describe('ConfirmationDialog', () => {
-  behavesAsComponent({
-    Component: ConfirmationDialog,
-    toRender: () => <Basic />,
-    options: {skipAs: true, skipSx: true}
-  })
-
-  checkExports('Dialog/ConfirmationDialog', {
-    default: undefined,
-    useConfirm,
-    ConfirmationDialog
-  })
-
-  it('should have no axe violations', async () => {
-    const spy = jest.spyOn(console, 'warn').mockImplementation()
-    const {container} = HTMLRender(<Basic />)
-    spy.mockRestore()
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('focuses the primary action when opened', async () => {
-    const {getByText} = HTMLRender(<Basic />)
-    act(() => {
-      fireEvent.click(getByText('Show dialog'))
-    })
-    expect(getByText('Primary')).toEqual(document.activeElement)
-    expect(getByText('Secondary')).not.toEqual(document.activeElement)
-    cleanup()
-  })
-
-  it('supports nested `focusTrap`s', async () => {
-    const {getByText} = HTMLRender(<ShorthandHookFromActionMenu />)
-    act(() => {
-      fireEvent.click(getByText('Show menu'))
-    })
-    act(() => {
-      fireEvent.click(getByText('Show dialog'))
-    })
-    expect(getByText('Primary')).toEqual(document.activeElement)
-    expect(getByText('Secondary')).not.toEqual(document.activeElement)
-    cleanup()
-  })
-})