@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/src/__tests__/CircleOcticon.tsx

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,116 @@
+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

@@ -0,0 +1,157 @@
+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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,138 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,27 @@
+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')
+  })
+})