@primer/components 33.0.0-rc.cface7dc → 33.1.0

package/src/__tests__/ActionList.test.tsx

@@ -1,53 +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 theme from '../theme'
-import {ActionList} from '../ActionList'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {BaseStyles, ThemeProvider} from '..'
-expect.extend(toHaveNoViolations)
-
-function SimpleActionList(): JSX.Element {
-  return (
-    <ThemeProvider theme={theme}>
-      <BaseStyles>
-        <ActionList
-          items={[
-            {text: 'New file'},
-            ActionList.Divider,
-            {text: 'Copy link'},
-            {text: 'Edit file'},
-            {text: 'Delete file', variant: 'danger'}
-          ]}
-        />
-      </BaseStyles>
-    </ThemeProvider>
-  )
-}
-
-describe('ActionList', () => {
-  behavesAsComponent({
-    Component: ActionList,
-    options: {skipAs: true, skipSx: true},
-    toRender: () => <ActionList items={[]} />
-  })
-
-  checkExports('ActionList', {
-    default: undefined,
-    ActionList
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<SimpleActionList />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-})
-
-describe('ActionList.Item', () => {
-  behavesAsComponent({
-    Component: ActionList.Item
-  })
-})

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

@@ -1,51 +0,0 @@
-import React from 'react'
-import {ActionList} from '..'
-
-export function emptyList() {
-  return <ActionList items={[]} />
-}
-
-export function listWithSingleItem() {
-  return <ActionList items={[{text: 'One'}]} />
-}
-
-export function canUseDivDOMProps() {
-  return (
-    <ActionList
-      items={[
-        {
-          text: 'One',
-          onMouseDown: () => undefined
-        }
-      ]}
-    />
-  )
-}
-
-export function cannotUseAnchorDOMProps() {
-  return (
-    <ActionList
-      items={[
-        {
-          text: 'One',
-          // @ts-expect-error href is not a div DOM prop
-          href: '#'
-        }
-      ]}
-    />
-  )
-}
-
-export function cannotUseAsWithoutRenderProp() {
-  return (
-    <ActionList
-      items={[
-        {
-          text: 'One',
-          // @ts-expect-error as is only available via manual rendering of items
-          as: 'a'
-        }
-      ]}
-    />
-  )
-}

package/src/__tests__/ActionList2.test.tsx

@@ -1,156 +0,0 @@
-import {cleanup, render as HTMLRender, waitFor, fireEvent} from '@testing-library/react'
-import 'babel-polyfill'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import React from 'react'
-import theme from '../theme'
-import {ActionList} from '../ActionList2'
-import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing'
-import {BaseStyles, ThemeProvider, SSRProvider} from '..'
-import '@testing-library/jest-dom'
-expect.extend(toHaveNoViolations)
-
-function SimpleActionList(): JSX.Element {
-  return (
-    <ThemeProvider theme={theme}>
-      <SSRProvider>
-        <BaseStyles>
-          <ActionList>
-            <ActionList.Item>New file</ActionList.Item>
-            <ActionList.Divider />
-            <ActionList.Item>Copy link</ActionList.Item>
-            <ActionList.Item>Edit file</ActionList.Item>
-            <ActionList.Item variant="danger">Delete file</ActionList.Item>
-          </ActionList>
-        </BaseStyles>
-      </SSRProvider>
-    </ThemeProvider>
-  )
-}
-
-const projects = [
-  {name: 'Primer Backlog', scope: 'GitHub'},
-  {name: 'Primer React', scope: 'github/primer'},
-  {name: 'Disabled Project', scope: 'github/primer', disabled: true}
-]
-function SingleSelectListStory(): JSX.Element {
-  const [selectedIndex, setSelectedIndex] = React.useState(0)
-
-  return (
-    <ActionList selectionVariant="single" showDividers role="listbox" aria-label="Select a project">
-      {projects.map((project, index) => (
-        <ActionList.Item
-          key={index}
-          role="option"
-          selected={index === selectedIndex}
-          onSelect={() => setSelectedIndex(index)}
-          disabled={project.disabled}
-        >
-          {project.name}
-        </ActionList.Item>
-      ))}
-    </ActionList>
-  )
-}
-
-describe('ActionList', () => {
-  behavesAsComponent({
-    Component: ActionList,
-    options: {skipAs: true, skipSx: true},
-    toRender: () => <ActionList />
-  })
-
-  checkExports('ActionList2', {
-    default: undefined,
-    ActionList
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<SimpleActionList />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('should fire onSelect on click and keypress', async () => {
-    const component = HTMLRender(<SingleSelectListStory />)
-    const options = await waitFor(() => component.getAllByRole('option'))
-
-    expect(options[0]).toHaveAttribute('aria-selected', 'true')
-    expect(options[1]).toHaveAttribute('aria-selected', 'false')
-
-    fireEvent.click(options[1])
-
-    expect(options[0]).toHaveAttribute('aria-selected', 'false')
-    expect(options[1]).toHaveAttribute('aria-selected', 'true')
-
-    // We pass keycode here to navigate a implementation detail in react-testing-library
-    // https://github.com/testing-library/react-testing-library/issues/269#issuecomment-455854112
-    fireEvent.keyPress(options[0], {key: 'Enter', charCode: 13})
-
-    expect(options[0]).toHaveAttribute('aria-selected', 'true')
-    expect(options[1]).toHaveAttribute('aria-selected', 'false')
-
-    fireEvent.keyPress(options[1], {key: ' ', charCode: 32})
-
-    expect(options[0]).toHaveAttribute('aria-selected', 'false')
-    expect(options[1]).toHaveAttribute('aria-selected', 'true')
-
-    cleanup()
-  })
-
-  it('should skip onSelect on disabled items', async () => {
-    const component = HTMLRender(<SingleSelectListStory />)
-    const options = await waitFor(() => component.getAllByRole('option'))
-
-    expect(options[0]).toHaveAttribute('aria-selected', 'true')
-    expect(options[2]).toHaveAttribute('aria-selected', 'false')
-
-    fireEvent.click(options[2])
-
-    expect(options[0]).toHaveAttribute('aria-selected', 'true')
-    expect(options[2]).toHaveAttribute('aria-selected', 'false')
-
-    fireEvent.keyPress(options[2], {key: 'Enter', charCode: 13})
-
-    expect(options[0]).toHaveAttribute('aria-selected', 'true')
-    expect(options[2]).toHaveAttribute('aria-selected', 'false')
-
-    cleanup()
-  })
-
-  it('should throw when selected is provided without a selectionVariant on parent', async () => {
-    // we expect console.error to be called, so we suppress that in the test
-    const mockError = jest.spyOn(console, 'error').mockImplementation(() => jest.fn())
-
-    expect(() => {
-      HTMLRender(
-        <ActionList showDividers role="listbox" aria-label="Select a project">
-          <ActionList.Item role="option" selected={true}>
-            Primer React
-          </ActionList.Item>
-        </ActionList>
-      )
-    }).toThrow('For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined')
-
-    cleanup()
-    mockError.mockRestore()
-  })
-
-  it('should not crash when clicking an item without an onSelect', async () => {
-    const component = HTMLRender(
-      <ActionList role="listbox">
-        <ActionList.Item role="option">Primer React</ActionList.Item>
-      </ActionList>
-    )
-    const option = await waitFor(() => component.getByRole('option'))
-    expect(option).toBeInTheDocument()
-
-    fireEvent.click(option)
-    fireEvent.keyPress(option, {key: 'Enter', charCode: 13})
-    expect(option).toBeInTheDocument()
-
-    cleanup()
-  })
-
-  checkStoriesForAxeViolations('ActionList2')
-})

package/src/__tests__/ActionMenu.test.tsx

@@ -1,136 +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 {ActionMenu} from '../ActionMenu'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {BaseStyles, SSRProvider, ThemeProvider} from '..'
-import {ItemProps} from '../ActionList/Item'
-expect.extend(toHaveNoViolations)
-
-const items = [
-  {text: 'New file'},
-  {text: 'Copy link'},
-  {text: 'Edit file'},
-  {text: 'Delete file', variant: 'danger'}
-] as ItemProps[]
-
-const mockOnActivate = jest.fn()
-
-function SimpleActionMenu(): JSX.Element {
-  return (
-    <ThemeProvider theme={theme}>
-      <SSRProvider>
-        <BaseStyles>
-          <div id="something-else">X</div>
-          <ActionMenu onAction={mockOnActivate} anchorContent="Menu" items={items} />
-          <div id="portal-root"></div>
-        </BaseStyles>
-      </SSRProvider>
-    </ThemeProvider>
-  )
-}
-
-describe('ActionMenu', () => {
-  afterEach(() => {
-    jest.clearAllMocks()
-  })
-
-  behavesAsComponent({
-    Component: ActionMenu,
-    options: {skipAs: true, skipSx: true},
-    toRender: () => (
-      <SSRProvider>
-        <ActionMenu items={[]} />
-      </SSRProvider>
-    )
-  })
-
-  checkExports('ActionMenu', {
-    default: undefined,
-    ActionMenu
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<SimpleActionMenu />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('should trigger the overlay on trigger click', async () => {
-    const menu = HTMLRender(<SimpleActionMenu />)
-    let portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeNull()
-    const anchor = await menu.findByText('Menu')
-    act(() => {
-      fireEvent.click(anchor)
-    })
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeTruthy()
-    const itemText = items
-      .map((i: ItemProps) => {
-        if (i.hasOwnProperty('text')) {
-          return i.text
-        }
-      })
-      .join('')
-    expect(portalRoot?.textContent?.trim()).toEqual(itemText)
-  })
-
-  it('should dismiss the overlay on menuitem click', async () => {
-    const menu = HTMLRender(<SimpleActionMenu />)
-    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeNull()
-    const anchor = await menu.findByText('Menu')
-    act(() => {
-      fireEvent.click(anchor)
-    })
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeTruthy()
-    const menuItem = await menu.queryByText(items[0].text!)
-    act(() => {
-      fireEvent.click(menuItem as Element)
-    })
-    expect(portalRoot?.textContent).toEqual('') // menu items are hidden
-  })
-
-  it('should dismiss the overlay on clicking outside overlay', async () => {
-    const menu = HTMLRender(<SimpleActionMenu />)
-    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeNull()
-    const anchor = await menu.findByText('Menu')
-    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)
-    })
-    expect(portalRoot?.textContent).toEqual('') // menu items are hidden
-  })
-
-  it('should pass correct values to onAction on menu click', async () => {
-    const menu = HTMLRender(<SimpleActionMenu />)
-    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeNull()
-    const anchor = await menu.findByText('Menu')
-    act(() => {
-      fireEvent.click(anchor)
-    })
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeTruthy()
-    const menuItem = (await portalRoot?.querySelector("[role='menuitem']")) as HTMLElement
-    act(() => {
-      fireEvent.click(menuItem)
-    })
-
-    // onAction has been called with correct argument
-    expect(mockOnActivate).toHaveBeenCalledTimes(1)
-    const arg = mockOnActivate.mock.calls[0][0]
-    expect(arg.text).toEqual(items[0].text)
-  })
-})

package/src/__tests__/AnchoredOverlay.test.tsx

@@ -1,150 +0,0 @@
-import React, {useCallback, useState} from 'react'
-import {AnchoredOverlay} from '../AnchoredOverlay'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup, fireEvent} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-import {Button, SSRProvider} from '../index'
-import theme from '../theme'
-import BaseStyles from '../BaseStyles'
-import {ThemeProvider} from '../ThemeProvider'
-expect.extend(toHaveNoViolations)
-
-type TestComponentSettings = {
-  initiallyOpen?: boolean
-  onOpenCallback?: (gesture: string) => void
-  onCloseCallback?: (gesture: string) => void
-}
-
-const AnchoredOverlayTestComponent = ({
-  initiallyOpen = false,
-  onOpenCallback,
-  onCloseCallback
-}: TestComponentSettings = {}) => {
-  const [open, setOpen] = useState(initiallyOpen)
-  const onOpen = useCallback(
-    (gesture: string) => {
-      setOpen(true)
-      onOpenCallback?.(gesture)
-    },
-    [onOpenCallback]
-  )
-  const onClose = useCallback(
-    (gesture: string) => {
-      setOpen(true)
-      onCloseCallback?.(gesture)
-    },
-    [onCloseCallback]
-  )
-  return (
-    <ThemeProvider theme={theme}>
-      <SSRProvider>
-        <BaseStyles>
-          <AnchoredOverlay
-            open={open}
-            onOpen={onOpen}
-            onClose={onClose}
-            renderAnchor={props => <Button {...props}>Anchor Button</Button>}
-          >
-            <button type="button">Focusable Child</button>
-          </AnchoredOverlay>
-        </BaseStyles>
-      </SSRProvider>
-    </ThemeProvider>
-  )
-}
-
-describe('AnchoredOverlay', () => {
-  behavesAsComponent({
-    Component: AnchoredOverlay,
-    options: {skipAs: true, skipSx: true},
-    toRender: () => <AnchoredOverlayTestComponent />
-  })
-
-  checkExports('AnchoredOverlay', {
-    default: undefined,
-    AnchoredOverlay
-  })
-
-  it('should have no axe violations when open', async () => {
-    const {container} = HTMLRender(<AnchoredOverlayTestComponent initiallyOpen={true}></AnchoredOverlayTestComponent>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('should have no axe violations when closed', async () => {
-    const {container} = HTMLRender(<AnchoredOverlayTestComponent></AnchoredOverlayTestComponent>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('should call onOpen when the anchor is clicked', () => {
-    const mockOpenCallback = jest.fn()
-    const mockCloseCallback = jest.fn()
-    const anchoredOverlay = HTMLRender(
-      <AnchoredOverlayTestComponent onOpenCallback={mockOpenCallback} onCloseCallback={mockCloseCallback} />
-    )
-    const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]')!
-    fireEvent.click(anchor)
-
-    expect(mockOpenCallback).toHaveBeenCalledTimes(1)
-    expect(mockOpenCallback).toHaveBeenCalledWith('anchor-click')
-    expect(mockCloseCallback).toHaveBeenCalledTimes(0)
-  })
-
-  it('should call onOpen when the anchor activated by a key press', () => {
-    const mockOpenCallback = jest.fn()
-    const mockCloseCallback = jest.fn()
-    const anchoredOverlay = HTMLRender(
-      <AnchoredOverlayTestComponent onOpenCallback={mockOpenCallback} onCloseCallback={mockCloseCallback} />
-    )
-    const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]')!
-    fireEvent.keyDown(anchor, {key: ' '})
-
-    expect(mockOpenCallback).toHaveBeenCalledTimes(1)
-    expect(mockOpenCallback).toHaveBeenCalledWith('anchor-key-press')
-    expect(mockCloseCallback).toHaveBeenCalledTimes(0)
-  })
-
-  it('should call onClose when the user clicks off of the overlay', () => {
-    const mockOpenCallback = jest.fn()
-    const mockCloseCallback = jest.fn()
-    const anchoredOverlay = HTMLRender(
-      <AnchoredOverlayTestComponent
-        initiallyOpen={true}
-        onOpenCallback={mockOpenCallback}
-        onCloseCallback={mockCloseCallback}
-      />
-    )
-    fireEvent.mouseDown(anchoredOverlay.baseElement)
-
-    expect(mockOpenCallback).toHaveBeenCalledTimes(0)
-    expect(mockCloseCallback).toHaveBeenCalledTimes(1)
-    expect(mockCloseCallback).toHaveBeenCalledWith('click-outside')
-  })
-
-  it('should call onClose when the escape key is pressed', async () => {
-    const mockOpenCallback = jest.fn()
-    const mockCloseCallback = jest.fn()
-    const anchoredOverlay = HTMLRender(
-      <AnchoredOverlayTestComponent
-        initiallyOpen={true}
-        onOpenCallback={mockOpenCallback}
-        onCloseCallback={mockCloseCallback}
-      />
-    )
-    const overlay = await anchoredOverlay.findByRole('none')
-    fireEvent.keyDown(overlay, {key: 'Escape'})
-
-    expect(mockOpenCallback).toHaveBeenCalledTimes(0)
-    expect(mockCloseCallback).toHaveBeenCalledTimes(1)
-    expect(mockCloseCallback).toHaveBeenCalledWith('escape')
-  })
-
-  it('should render consistently when open', () => {
-    const {container} = HTMLRender(<AnchoredOverlayTestComponent initiallyOpen={true} />)
-    expect(container).toMatchSnapshot()
-  })
-})