@primer/components 29.1.0-rc.79e8b21e → 29.1.0

package/src/__tests__/CircleOcticon.tsx

@@ -1,52 +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 {COMMON, FLEX, LAYOUT} from '../constants'
-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,
-    systemPropArray: [COMMON, FLEX, LAYOUT],
-    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.bg?.danger
-    )
-  })
-
-  it('has a default size', () => {
-    const result = render(<CircleOcticon icon={CheckIcon} />)
-    expect(result).toHaveStyleRule('width', '32px')
-    expect(result).toHaveStyleRule('height', '32px')
-  })
-})

package/src/__tests__/CounterLabel.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import {CounterLabel} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {COMMON} from '../constants'
-import theme from '../theme'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-
-expect.extend(toHaveNoViolations)
-
-describe('CounterLabel', () => {
-  behavesAsComponent({Component: CounterLabel, systemPropArray: [COMMON]})
-
-  checkExports('CounterLabel', {
-    default: CounterLabel
-  })
-
-  it('renders a <span>', () => {
-    expect(render(<CounterLabel />).type).toEqual('span')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<CounterLabel />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('respects the primary "scheme" prop', () => {
-    expect(render(<CounterLabel scheme="primary" />)).toHaveStyleRule(
-      'color',
-      theme.colorSchemes.light.colors.counter?.primary.text.trim()
-    )
-    expect(render(<CounterLabel scheme="primary" />)).toHaveStyleRule(
-      'background-color',
-      theme.colorSchemes.light.colors.counter?.primary.bg.trim()
-    )
-  })
-
-  it('respects the secondary "scheme" prop', () => {
-    expect(render(<CounterLabel scheme="secondary" />)).toHaveStyleRule(
-      'color',
-      theme.colorSchemes.light.colors.counter?.text.trim()
-    )
-    expect(render(<CounterLabel scheme="secondary" />)).toHaveStyleRule(
-      'background-color',
-      theme.colorSchemes.light.colors.counter?.bg
-    )
-  })
-})

package/src/__tests__/Details.tsx

@@ -1,116 +0,0 @@
-import React from 'react'
-import {Details, useDetails, Button, ButtonPrimary, Box} from '..'
-import {ButtonProps} from '../Button/Button'
-import {mount, behavesAsComponent, checkExports} from '../utils/testing'
-import {COMMON} from '../constants'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('Details', () => {
-  behavesAsComponent({Component: Details, systemPropArray: [COMMON]})
-
-  checkExports('Details', {
-    default: Details
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Details />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('Toggles when you click outside', () => {
-    const Component = () => {
-      const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
-      return (
-        <Details {...getDetailsProps()}>
-          <summary>hi</summary>
-        </Details>
-      )
-    }
-
-    const wrapper = mount(<Component />)
-
-    document.body.click()
-
-    const dom = wrapper.getDOMNode()
-
-    expect(dom.hasAttribute('open')).toEqual(false)
-
-    wrapper.unmount()
-  })
-
-  it('Accurately passes down open state', () => {
-    const Component = () => {
-      const {getDetailsProps, open} = useDetails({closeOnOutsideClick: true})
-      return (
-        <Details {...getDetailsProps()}>
-          <Button as="summary">{open ? 'Open' : 'Closed'}</Button>
-        </Details>
-      )
-    }
-
-    const wrapper = mount(<Component />)
-
-    document.body.click()
-
-    const dom = wrapper.getDOMNode()
-    const summary = wrapper.find('summary')
-    expect(summary.text()).toEqual('Closed')
-
-    expect(dom.hasAttribute('open')).toEqual(false)
-
-    wrapper.unmount()
-  })
-
-  it('Can manipulate state with setOpen', () => {
-    const CloseButton = (props: ButtonProps) => <Button {...props} />
-    const Component = () => {
-      const {getDetailsProps, setOpen, open} = useDetails({closeOnOutsideClick: true, defaultOpen: true})
-      return (
-        <Details {...getDetailsProps()}>
-          <Button as="summary">{open ? 'Open' : 'Closed'}</Button>
-          <CloseButton onClick={() => setOpen(false)} />
-        </Details>
-      )
-    }
-
-    const wrapper = mount(<Component />)
-
-    wrapper.find(CloseButton).simulate('click')
-
-    const dom = wrapper.getDOMNode()
-    const summary = wrapper.find('summary')
-    expect(summary.text()).toEqual('Closed')
-
-    expect(dom.hasAttribute('open')).toEqual(false)
-
-    wrapper.unmount()
-  })
-
-  it('Does not toggle when you click inside', () => {
-    const Component = () => {
-      const {getDetailsProps, open} = useDetails({closeOnOutsideClick: true, defaultOpen: true})
-      return (
-        <Details {...getDetailsProps()}>
-          <Button as="summary">{open ? 'Open' : 'Closed'}</Button>
-          <Box>
-            <ButtonPrimary>hi</ButtonPrimary>
-          </Box>
-        </Details>
-      )
-    }
-
-    const wrapper = mount(<Component />)
-    const summary = wrapper.find('summary')
-
-    wrapper.find(ButtonPrimary).simulate('click')
-
-    expect(summary.text()).toEqual('Open')
-
-    wrapper.unmount()
-  })
-})

package/src/__tests__/Dialog.tsx

@@ -1,157 +0,0 @@
-import React, {useState, useRef} from 'react'
-import {Dialog, Box, Text, Button} from '..'
-import {COMMON, FLEX, LAYOUT} from '../constants'
-import {render as HTMLRender, cleanup, act, fireEvent} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-expect.extend(toHaveNoViolations)
-
-const comp = (
-  <Dialog isOpen onDismiss={() => null} aria-labelledby="header">
-    <Dialog.Header id="header">Title</Dialog.Header>
-    <Box p={3}>
-      <Text fontFamily="sans-serif">Some content</Text>
-    </Box>
-  </Dialog>
-)
-
-const Component = () => {
-  const [isOpen, setIsOpen] = useState(true)
-  const returnFocusRef = useRef(null)
-  return (
-    <div>
-      <Button data-testid="trigger-button" ref={returnFocusRef} onClick={() => setIsOpen(true)}>
-        Show Dialog
-      </Button>
-      <Dialog
-        returnFocusRef={returnFocusRef}
-        isOpen={isOpen}
-        onDismiss={() => setIsOpen(false)}
-        aria-labelledby="header"
-      >
-        <div data-testid="inner">
-          <Dialog.Header id="header">Title</Dialog.Header>
-          <Box p={3}>
-            <Text fontFamily="sans-serif">Some content</Text>
-          </Box>
-        </div>
-      </Dialog>
-    </div>
-  )
-}
-
-const ClosedDialog = () => {
-  return (
-    <Dialog isOpen={false} onDismiss={() => null} aria-labelledby="header">
-      <div data-testid="inner">
-        <Dialog.Header id="header">Title</Dialog.Header>
-        <Box p={3}>
-          <Text fontFamily="sans-serif">Some content</Text>
-        </Box>
-      </div>
-    </Dialog>
-  )
-}
-
-const DialogWithCustomFocusRef = () => {
-  const buttonRef = useRef(null)
-  return (
-    <Dialog isOpen initialFocusRef={buttonRef} onDismiss={() => null} aria-labelledby="header">
-      <div data-testid="inner">
-        <Dialog.Header id="header">Title</Dialog.Header>
-        <Box p={3}>
-          <Text fontFamily="sans-serif">Some content</Text>
-          <button data-testid="inner-button" ref={buttonRef}>
-            hi
-          </button>
-        </Box>
-      </div>
-    </Dialog>
-  )
-}
-
-describe('Dialog', () => {
-  // because Dialog returns a React fragment the as and sx tests fail always, so they are skipped
-  behavesAsComponent({
-    Component: Dialog,
-    systemPropArray: [COMMON, LAYOUT],
-    toRender: () => comp,
-    options: {skipAs: true, skipSx: true}
-  })
-
-  checkExports('Dialog', {
-    default: Dialog
-  })
-
-  describe('Dialog.Header', () => {
-    behavesAsComponent({Component: Dialog.Header, systemPropArray: [COMMON, FLEX, LAYOUT]})
-  })
-
-  it('should have no axe violations', async () => {
-    const spy = jest.spyOn(console, 'warn').mockImplementation()
-    const {container} = HTMLRender(comp)
-    spy.mockRestore()
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('Toggles when you click close button', async () => {
-    const {getByLabelText, getByTestId, queryByTestId} = HTMLRender(<Component />)
-
-    expect(getByTestId('inner')).toBeTruthy()
-    act(() => {
-      fireEvent.click(getByLabelText('Close'))
-    })
-
-    expect(queryByTestId('inner')).toBeNull()
-
-    cleanup()
-  })
-
-  it('Renders dialog when isOpen is true', async () => {
-    const {getByTestId} = HTMLRender(<Component />)
-
-    expect(getByTestId('inner')).toBeTruthy()
-
-    cleanup()
-  })
-
-  it('Does not render dialog when isOpen is false', async () => {
-    const {queryByTestId} = HTMLRender(<ClosedDialog />)
-
-    expect(queryByTestId('inner')).toBeNull()
-
-    cleanup()
-  })
-
-  it('Focuses close button when Dialog is opened', async () => {
-    const {getByLabelText} = HTMLRender(<Component />)
-    const closeButton = getByLabelText('Close')
-    expect(document.activeElement).toEqual(closeButton)
-    cleanup()
-  })
-
-  it('Focuses custom ref when Dialog is opened', async () => {
-    const {getByTestId} = HTMLRender(<DialogWithCustomFocusRef />)
-    const innerButton = getByTestId('inner-button')
-    expect(document.activeElement).toEqual(innerButton)
-    cleanup()
-  })
-
-  it('Returns focus to returnFocusRef', async () => {
-    const {getByLabelText, getByTestId, queryByTestId} = HTMLRender(<Component />)
-
-    expect(getByTestId('inner')).toBeTruthy()
-    act(() => {
-      fireEvent.click(getByLabelText('Close'))
-    })
-
-    expect(queryByTestId('inner')).toBeNull()
-    const triggerButton = getByTestId('trigger-button')
-    expect(document.activeElement).toEqual(triggerButton)
-
-    cleanup()
-  })
-})

package/src/__tests__/Dropdown.tsx

@@ -1,57 +0,0 @@
-import React from 'react'
-import {Dropdown} from '..'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {COMMON} from '../constants'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('Dropdown', () => {
-  behavesAsComponent({Component: Dropdown, systemPropArray: [COMMON], toRender: () => <Dropdown>Hello!</Dropdown>})
-
-  checkExports('Dropdown', {
-    default: Dropdown
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Dropdown />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-})
-
-describe('Dropdown.Item', () => {
-  behavesAsComponent({
-    Component: Dropdown.Item,
-    systemPropArray: [COMMON],
-    toRender: () => <Dropdown.Item>Hello!</Dropdown.Item>
-  })
-})
-
-describe('Dropdown.Button', () => {
-  behavesAsComponent({
-    Component: Dropdown.Button,
-    systemPropArray: [COMMON],
-    toRender: () => <Dropdown.Button>Hello!</Dropdown.Button>
-  })
-})
-
-describe('Dropdown.Caret', () => {
-  behavesAsComponent({Component: Dropdown.Caret, systemPropArray: [COMMON]})
-})
-
-describe('Dropdown.Menu', () => {
-  behavesAsComponent({
-    Component: Dropdown.Menu,
-    systemPropArray: [COMMON],
-    toRender: () => (
-      <Dropdown.Menu>
-        <li key="a">1</li>
-        <li key="b">2</li>
-        <li key="c">3</li>
-      </Dropdown.Menu>
-    )
-  })
-})

package/src/__tests__/DropdownMenu.tsx

@@ -1,138 +0,0 @@
-import {cleanup, render as HTMLRender, act, fireEvent} from '@testing-library/react'
-import 'babel-polyfill'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import React from 'react'
-import theme from '../theme'
-import {DropdownMenu, DropdownButton} from '../DropdownMenu'
-import {COMMON} from '../constants'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {BaseStyles, ThemeProvider, SSRProvider} from '..'
-import {ItemInput} from '../ActionList/List'
-
-expect.extend(toHaveNoViolations)
-
-const items = [{text: 'Foo'}, {text: 'Bar'}, {text: 'Baz'}, {text: 'Bon'}] as ItemInput[]
-
-function SimpleDropdownMenu(): JSX.Element {
-  const [selectedItem, setSelectedItem] = React.useState<ItemInput | undefined>()
-
-  return (
-    <ThemeProvider theme={theme}>
-      <SSRProvider>
-        <BaseStyles>
-          <div id="something-else">X</div>
-          <DropdownMenu
-            items={items}
-            placeholder="Select an Option"
-            selectedItem={selectedItem}
-            onChange={setSelectedItem}
-          />
-          <div id="portal-root"></div>
-        </BaseStyles>
-      </SSRProvider>
-    </ThemeProvider>
-  )
-}
-
-describe('DropdownMenu', () => {
-  afterEach(() => {
-    jest.clearAllMocks()
-  })
-
-  behavesAsComponent({
-    Component: DropdownMenu,
-    systemPropArray: [COMMON],
-    options: {skipAs: true, skipSx: true},
-    toRender: () => (
-      <SSRProvider>
-        <DropdownMenu items={[]} />
-      </SSRProvider>
-    )
-  })
-
-  checkExports('DropdownMenu', {
-    default: undefined,
-    DropdownMenu,
-    DropdownButton
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<SimpleDropdownMenu />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('should trigger the overlay on trigger click', async () => {
-    const menu = HTMLRender(<SimpleDropdownMenu />)
-    let portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeNull()
-    const anchor = await menu.findByText('Select an Option')
-    act(() => {
-      fireEvent.click(anchor)
-    })
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeTruthy()
-    const itemText = items
-      .map((i: ItemInput) => {
-        if (i.hasOwnProperty('text')) {
-          return i.text
-        }
-      })
-      .join('')
-    expect(portalRoot?.textContent?.trim()).toEqual(itemText)
-  })
-
-  it('should dismiss the overlay on dropdown item click', async () => {
-    const menu = HTMLRender(<SimpleDropdownMenu />)
-    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeNull()
-    const anchor = await menu.findByText('Select an Option')
-    act(() => {
-      fireEvent.click(anchor)
-    })
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeTruthy()
-    const menuItem = await menu.queryByText('Baz')
-    act(() => {
-      fireEvent.click(menuItem as Element)
-    })
-    // portal is closed after click
-    expect(portalRoot?.textContent).toEqual('') // menu items are hidden
-  })
-
-  it('option should be selected when chosen from the dropdown menu', async () => {
-    const menu = HTMLRender(<SimpleDropdownMenu />)
-    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeNull()
-    const anchor = await menu.findByText('Select an Option')
-    act(() => {
-      fireEvent.click(anchor)
-    })
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeTruthy()
-    const menuItem = await menu.queryByText('Baz')
-    act(() => {
-      fireEvent.click(menuItem as Element)
-    })
-    expect(anchor.textContent).toEqual('Baz')
-  })
-
-  it('should dismiss the overlay on clicking outside overlay', async () => {
-    const menu = HTMLRender(<SimpleDropdownMenu />)
-    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeNull()
-    const anchor = await menu.findByText('Select an Option')
-    act(() => {
-      fireEvent.click(anchor)
-    })
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeTruthy()
-    const somethingElse = (await menu.baseElement.querySelector('#something-else')) as HTMLElement
-    act(() => {
-      fireEvent.mouseDown(somethingElse)
-    })
-    // portal is closed after click
-    expect(portalRoot?.textContent).toEqual('') // menu items are hidden
-  })
-})

package/src/__tests__/FilterList.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import {FilterList} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {COMMON} from '../constants'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('FilterList', () => {
-  behavesAsComponent({Component: FilterList, systemPropArray: [COMMON]})
-
-  checkExports('FilterList', {
-    default: FilterList
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<FilterList>Hello</FilterList>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders a <ul>', () => {
-    expect(render(<FilterList />).type).toEqual('ul')
-  })
-})

package/src/__tests__/FilterListItem.tsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import {FilterList} from '..'
-import {render, behavesAsComponent} from '../utils/testing'
-import {COMMON} from '../constants'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('FilterList.Item', () => {
-  behavesAsComponent({Component: FilterList.Item, systemPropArray: [COMMON]})
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<FilterList.Item>stuff</FilterList.Item>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders an <a> by default', () => {
-    expect(render(<FilterList.Item />).type).toEqual('a')
-  })
-
-  it('respects the "selected" prop', () => {
-    expect(render(<FilterList.Item selected />)).toMatchSnapshot()
-  })
-
-  it('respects "count" prop', () => {
-    const {getByText} = HTMLRender(<FilterList.Item count={400} />)
-    expect(getByText('400')).toBeTruthy()
-  })
-})

package/src/__tests__/FilteredSearch.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import {FilteredSearch} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {COMMON} from '../constants'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('FilteredSearch', () => {
-  behavesAsComponent({Component: FilteredSearch, systemPropArray: [COMMON]})
-
-  checkExports('FilteredSearch', {
-    default: FilteredSearch
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<FilteredSearch>Hello</FilteredSearch>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders a <div>', () => {
-    expect(render(<FilteredSearch />).type).toEqual('div')
-  })
-})