@primer/components 33.0.0-rc.cface7dc → 33.1.0

package/src/__tests__/Autocomplete.test.tsx

@@ -1,444 +0,0 @@
-import React from 'react'
-import {render} from '../utils/testing'
-import {render as HTMLRender, fireEvent} from '@testing-library/react'
-import {toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-import Autocomplete, {AutocompleteInputProps} from '../Autocomplete'
-import {SSRProvider} from '../index'
-import theme from '../theme'
-import BaseStyles from '../BaseStyles'
-import {ThemeProvider} from '../ThemeProvider'
-import userEvent from '@testing-library/user-event'
-import {AutocompleteMenuInternalProps} from '../Autocomplete/AutocompleteMenu'
-import {ItemProps} from '../ActionList'
-import {MandateProps} from '../utils/types'
-expect.extend(toHaveNoViolations)
-
-const mockItems = [
-  {text: 'zero', id: 0},
-  {text: 'one', id: 1},
-  {text: 'two', id: 2},
-  {text: 'three', id: 3},
-  {text: 'four', id: 4},
-  {text: 'five', id: 5},
-  {text: 'six', id: 6},
-  {text: 'seven', id: 7},
-  {text: 'twenty', id: 20},
-  {text: 'twentyone', id: 21}
-]
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type AutocompleteItemProps<T = Record<string, any>> = MandateProps<ItemProps, 'id'> & {metadata?: T}
-
-const AUTOCOMPLETE_LABEL = 'Autocomplete field'
-const LabelledAutocomplete = <T extends AutocompleteItemProps>({
-  inputProps = {},
-  menuProps
-}: {
-  inputProps?: AutocompleteInputProps
-  menuProps: AutocompleteMenuInternalProps<T>
-}) => {
-  const {['aria-labelledby']: ariaLabelledBy = 'autocompleteLabel', ...menuPropsRest} = menuProps
-  const {id = 'autocompleteInput', ...inputPropsRest} = inputProps
-  return (
-    <ThemeProvider theme={theme}>
-      <SSRProvider>
-        <BaseStyles>
-          {/* eslint-disable-next-line jsx-a11y/label-has-for */}
-          <label htmlFor={id} id={ariaLabelledBy}>
-            Autocomplete field
-          </label>
-          <Autocomplete id="autocompleteId">
-            <Autocomplete.Input id={id} {...inputPropsRest} />
-            <Autocomplete.Overlay>
-              <Autocomplete.Menu aria-labelledby={ariaLabelledBy} {...menuPropsRest} />
-            </Autocomplete.Overlay>
-          </Autocomplete>
-        </BaseStyles>
-      </SSRProvider>
-    </ThemeProvider>
-  )
-}
-
-describe('Autocomplete', () => {
-  describe('snapshots', () => {
-    it('renders a single select input', () => {
-      expect(
-        render(
-          <SSRProvider>
-            <Autocomplete id="autocompleteId">
-              <Autocomplete.Input />
-              <Autocomplete.Menu aria-labelledby="labelId" items={mockItems} selectedItemIds={[]} />
-            </Autocomplete>
-          </SSRProvider>
-        )
-      ).toMatchSnapshot()
-    })
-
-    it('renders a multiselect input', () => {
-      expect(
-        render(
-          <SSRProvider>
-            <Autocomplete id="autocompleteId">
-              <Autocomplete.Input />
-              <Autocomplete.Menu
-                aria-labelledby="labelId"
-                items={mockItems}
-                selectedItemIds={[]}
-                selectionVariant="multiple"
-              />
-            </Autocomplete>
-          </SSRProvider>
-        )
-      ).toMatchSnapshot()
-    })
-
-    it('renders a multiselect input with selected menu items', () => {
-      expect(
-        render(
-          <SSRProvider>
-            <Autocomplete id="autocompleteId">
-              <Autocomplete.Input />
-              <Autocomplete.Menu
-                aria-labelledby="labelId"
-                items={mockItems}
-                selectedItemIds={[0, 1, 2]}
-                selectionVariant="multiple"
-              />
-            </Autocomplete>
-          </SSRProvider>
-        )
-      ).toMatchSnapshot()
-    })
-
-    it('renders a menu that contains an item to add to the menu', () => {
-      const handleAddItemMock = jest.fn()
-      expect(
-        render(
-          <SSRProvider>
-            <Autocomplete id="autocompleteId">
-              <Autocomplete.Input />
-              <Autocomplete.Menu
-                aria-labelledby="labelId"
-                items={mockItems}
-                selectionVariant="multiple"
-                selectedItemIds={[]}
-                addNewItem={{
-                  text: 'Add new item',
-                  handleAddItem: handleAddItemMock
-                }}
-              />
-            </Autocomplete>
-          </SSRProvider>
-        )
-      ).toMatchSnapshot()
-    })
-
-    it('renders a custom empty state message', () => {
-      expect(
-        render(
-          <SSRProvider>
-            <Autocomplete id="autocompleteId">
-              <Autocomplete.Input />
-              <Autocomplete.Menu
-                aria-labelledby="labelId"
-                items={[]}
-                selectedItemIds={[]}
-                emptyStateText="No results"
-              />
-            </Autocomplete>
-          </SSRProvider>
-        )
-      ).toMatchSnapshot()
-    })
-
-    it('renders a loading state', () => {
-      expect(
-        render(
-          <SSRProvider>
-            <Autocomplete id="autocompleteId">
-              <Autocomplete.Input />
-              <Autocomplete.Menu aria-labelledby="labelId" loading items={[]} selectedItemIds={[]} />
-            </Autocomplete>
-          </SSRProvider>
-        )
-      ).toMatchSnapshot()
-    })
-
-    it('renders with a custom text input component', () => {
-      expect(
-        render(
-          <SSRProvider>
-            <Autocomplete id="autocompleteId">
-              <Autocomplete.Input as={() => <input type="text" id="customInput" />} />
-              <Autocomplete.Menu aria-labelledby="labelId" items={mockItems} selectedItemIds={[]} />
-            </Autocomplete>
-          </SSRProvider>
-        )
-      ).toMatchSnapshot()
-    })
-
-    it('renders with an input value', () => {
-      expect(
-        render(
-          <SSRProvider>
-            <Autocomplete id="autocompleteId">
-              <Autocomplete.Input value="test" />
-              <Autocomplete.Menu aria-labelledby="labelId" items={mockItems} selectedItemIds={[]} />
-            </Autocomplete>
-          </SSRProvider>
-        )
-      ).toMatchSnapshot()
-    })
-  })
-
-  describe('Autocomplete.Input', () => {
-    it('calls onChange', () => {
-      const onChangeMock = jest.fn()
-      const {container} = HTMLRender(
-        <LabelledAutocomplete
-          inputProps={{onChange: onChangeMock}}
-          menuProps={{items: mockItems, selectedItemIds: []}}
-        />
-      )
-      const inputNode = container.querySelector('#autocompleteInput')
-
-      expect(onChangeMock).not.toHaveBeenCalled()
-      inputNode && userEvent.type(inputNode, 'z')
-      expect(onChangeMock).toHaveBeenCalled()
-    })
-
-    it('calls onFocus', () => {
-      const onFocusMock = jest.fn()
-      const {container} = HTMLRender(
-        <LabelledAutocomplete inputProps={{onFocus: onFocusMock}} menuProps={{items: mockItems, selectedItemIds: []}} />
-      )
-      const inputNode = container.querySelector('#autocompleteInput')
-
-      expect(onFocusMock).not.toHaveBeenCalled()
-      inputNode && fireEvent.focus(inputNode)
-      expect(onFocusMock).toHaveBeenCalled()
-    })
-
-    it('calls onKeyDown', () => {
-      const onKeyDownMock = jest.fn()
-      const {getByLabelText} = HTMLRender(
-        <LabelledAutocomplete inputProps={{onKeyDown: onKeyDownMock}} menuProps={{items: [], selectedItemIds: []}} />
-      )
-      const inputNode = getByLabelText(AUTOCOMPLETE_LABEL)
-
-      expect(onKeyDownMock).not.toHaveBeenCalled()
-      fireEvent.keyDown(inputNode, {key: 'Shift'})
-      expect(onKeyDownMock).toHaveBeenCalled()
-    })
-
-    it('calls onKeyUp', () => {
-      const onKeyUpMock = jest.fn()
-      const {getByLabelText} = HTMLRender(
-        <LabelledAutocomplete inputProps={{onKeyUp: onKeyUpMock}} menuProps={{items: [], selectedItemIds: []}} />
-      )
-      const inputNode = getByLabelText(AUTOCOMPLETE_LABEL)
-
-      expect(onKeyUpMock).not.toHaveBeenCalled()
-      fireEvent.keyUp(inputNode, {key: 'Shift'})
-      expect(onKeyUpMock).toHaveBeenCalled()
-    })
-
-    it('calls onKeyPress', () => {
-      const onKeyPressMock = jest.fn()
-      const {getByLabelText} = HTMLRender(
-        <LabelledAutocomplete inputProps={{onKeyPress: onKeyPressMock}} menuProps={{items: [], selectedItemIds: []}} />
-      )
-      const inputNode = getByLabelText(AUTOCOMPLETE_LABEL)
-
-      expect(onKeyPressMock).not.toHaveBeenCalled()
-      userEvent.type(inputNode, '{enter}')
-      expect(onKeyPressMock).toHaveBeenCalled()
-    })
-
-    it('opens the menu when the input is focused', () => {
-      const {getByLabelText} = HTMLRender(<LabelledAutocomplete menuProps={{items: [], selectedItemIds: []}} />)
-      const inputNode = getByLabelText(AUTOCOMPLETE_LABEL)
-
-      expect(inputNode.getAttribute('aria-expanded')).not.toBe('true')
-      fireEvent.focus(inputNode)
-      expect(inputNode.getAttribute('aria-expanded')).toBe('true')
-    })
-
-    it('closes the menu when the input is blurred', () => {
-      const {getByLabelText} = HTMLRender(<LabelledAutocomplete menuProps={{items: [], selectedItemIds: []}} />)
-      const inputNode = getByLabelText(AUTOCOMPLETE_LABEL)
-
-      expect(inputNode.getAttribute('aria-expanded')).not.toBe('true')
-      fireEvent.focus(inputNode)
-      expect(inputNode.getAttribute('aria-expanded')).toBe('true')
-      // eslint-disable-next-line github/no-blur
-      fireEvent.blur(inputNode)
-
-      // wait a tick for blur to finish
-      setTimeout(() => {
-        expect(inputNode.getAttribute('aria-expanded')).not.toBe('true')
-      }, 0)
-    })
-
-    it('sets the input value to the suggested item text and highlights the untyped part of the word', () => {
-      const {container, getByDisplayValue} = HTMLRender(
-        <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: []}} />
-      )
-      const inputNode = container.querySelector('#autocompleteInput')
-
-      inputNode && userEvent.type(inputNode, 'ze')
-      expect(getByDisplayValue('zero')).toBeDefined()
-    })
-
-    it('does not show or highlight suggestion text after the user hits Backspace until they hit another key', () => {
-      const {container, getByDisplayValue} = HTMLRender(
-        <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: []}} />
-      )
-      const inputNode = container.querySelector('#autocompleteInput')
-
-      expect((inputNode as HTMLInputElement).selectionStart).toBe(0)
-      inputNode && userEvent.type(inputNode, 'ze')
-      expect(getByDisplayValue('zero')).toBeDefined()
-      expect((inputNode as HTMLInputElement).selectionStart).toBe(2)
-      expect((inputNode as HTMLInputElement).selectionEnd).toBe(4)
-      inputNode && userEvent.type(inputNode, '{backspace}')
-      expect((inputNode as HTMLInputElement).selectionStart).toBe(2)
-      expect(getByDisplayValue('ze')).toBeDefined()
-      inputNode && userEvent.type(inputNode, 'r')
-      expect((inputNode as HTMLInputElement).selectionStart).toBe(3)
-      expect((inputNode as HTMLInputElement).selectionEnd).toBe(4)
-      expect(getByDisplayValue('zero')).toBeDefined()
-    })
-
-    it('clears the input value when when the user hits Escape', () => {
-      const {container} = HTMLRender(<LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: []}} />)
-      const inputNode = container.querySelector('#autocompleteInput')
-
-      expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true')
-      inputNode && userEvent.type(inputNode, 'ze')
-      expect(inputNode?.getAttribute('aria-expanded')).toBe('true')
-      inputNode && userEvent.type(inputNode, '{esc}')
-      expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true')
-    })
-  })
-
-  describe('Autocomplete.Menu', () => {
-    it('calls a custom filter function', () => {
-      const filterFnMock = jest.fn()
-      const {container} = HTMLRender(
-        <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: [], filterFn: filterFnMock}} />
-      )
-      const inputNode = container.querySelector('#autocompleteInput')
-
-      inputNode && userEvent.type(inputNode, 'ze')
-      expect(filterFnMock).toHaveBeenCalled()
-    })
-
-    it('calls a custom sort function when the menu closes', () => {
-      const sortOnCloseFnMock = jest.fn()
-      const {container} = HTMLRender(
-        <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: [], sortOnCloseFn: sortOnCloseFnMock}} />
-      )
-      const inputNode = container.querySelector('#autocompleteInput')
-
-      // `sortOnCloseFnMock` will be called in a `.sort()` on render to check if the
-      // current sort order matches the result of `sortOnCloseFnMock`
-      expect(sortOnCloseFnMock).toHaveBeenCalledTimes(mockItems.length - 1)
-      if (inputNode) {
-        userEvent.type(inputNode, 'ze')
-        // eslint-disable-next-line github/no-blur
-        fireEvent.blur(inputNode)
-      }
-
-      // wait a tick for blur to finish
-      setTimeout(() => {
-        expect(sortOnCloseFnMock).toHaveBeenCalledTimes(mockItems.length)
-      }, 0)
-    })
-
-    it("calls onOpenChange with the menu's open state", () => {
-      const onOpenChangeMock = jest.fn()
-      const {container} = HTMLRender(
-        <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: [], onOpenChange: onOpenChangeMock}} />
-      )
-      const inputNode = container.querySelector('#autocompleteInput')
-
-      inputNode && userEvent.type(inputNode, 'ze')
-      expect(onOpenChangeMock).toHaveBeenCalled()
-    })
-
-    it('calls onSelectedChange with the data for the selected items', () => {
-      const onSelectedChangeMock = jest.fn()
-      const {container} = HTMLRender(
-        <LabelledAutocomplete
-          menuProps={{items: mockItems, selectedItemIds: [], onSelectedChange: onSelectedChangeMock}}
-        />
-      )
-      const inputNode = container.querySelector('#autocompleteInput')
-
-      expect(onSelectedChangeMock).not.toHaveBeenCalled()
-      if (inputNode) {
-        fireEvent.focus(inputNode)
-        userEvent.type(inputNode, '{enter}')
-      }
-
-      // wait a tick for the keyboard event to be dispatched to the menu item
-      setTimeout(() => {
-        expect(onSelectedChangeMock).toHaveBeenCalledWith([mockItems[0]])
-      }, 0)
-    })
-
-    it('does not close the menu when clicking an item in the menu if selectionVariant=multiple', () => {
-      const {getByText, container} = HTMLRender(
-        <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: [], selectionVariant: 'multiple'}} />
-      )
-      const inputNode = container.querySelector('#autocompleteInput')
-      const itemToClickNode = getByText(mockItems[1].text)
-
-      expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true')
-      inputNode && fireEvent.focus(inputNode)
-      expect(inputNode?.getAttribute('aria-expanded')).toBe('true')
-      fireEvent.click(itemToClickNode)
-      inputNode && userEvent.type(inputNode, '{enter}')
-      expect(inputNode?.getAttribute('aria-expanded')).toBe('true')
-    })
-
-    it('closes the menu when clicking an item in the menu if selectionVariant=single', () => {
-      const {getByText, container} = HTMLRender(
-        <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: [], selectionVariant: 'single'}} />
-      )
-      const inputNode = container.querySelector('#autocompleteInput')
-      const itemToClickNode = getByText(mockItems[1].text)
-
-      expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true')
-      inputNode && fireEvent.focus(inputNode)
-      expect(inputNode?.getAttribute('aria-expanded')).toBe('true')
-      fireEvent.click(itemToClickNode)
-      expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true')
-    })
-
-    it('calls handleAddItem with new item data when passing addNewItem', () => {
-      const handleAddItemMock = jest.fn()
-      const {getByText} = HTMLRender(
-        <LabelledAutocomplete
-          menuProps={{
-            items: mockItems,
-            selectedItemIds: [],
-            selectionVariant: 'multiple',
-            addNewItem: {
-              text: 'Add new item',
-              handleAddItem: handleAddItemMock
-            }
-          }}
-        />
-      )
-
-      const addNewItemNode = getByText('Add new item')
-
-      expect(handleAddItemMock).not.toHaveBeenCalled()
-      fireEvent.click(addNewItemNode)
-      expect(handleAddItemMock).toHaveBeenCalled()
-    })
-  })
-})

package/src/__tests__/Avatar.test.tsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import {Avatar} from '..'
-import theme from '../theme'
-import {px, 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('Avatar', () => {
-  behavesAsComponent({Component: Avatar})
-
-  checkExports('Avatar', {
-    default: Avatar
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Avatar src="primer.png" />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders small by default', () => {
-    const size = 20
-    const result = render(<Avatar src="primer.png" />)
-    expect(result.props.width).toEqual(size)
-    expect(result.props.height).toEqual(size)
-  })
-
-  it('respects the size prop', () => {
-    const result = render(<Avatar size={40} src="primer.png" alt="github" />)
-    expect(result.props.width).toEqual(40)
-    expect(result.props.height).toEqual(40)
-  })
-
-  it('passes through the src prop', () => {
-    expect(render(<Avatar src="primer.png" alt="" />).props.src).toEqual('primer.png')
-  })
-
-  it('respects margin props', () => {
-    expect(render(<Avatar src="primer.png" alt="" sx={{m: 2}} />)).toHaveStyleRule('margin', px(theme.space[2]))
-  })
-})

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

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

package/src/__tests__/AvatarStack.test.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import {AvatarStack} 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)
-
-const avatarComp = (
-  <AvatarStack>
-    <img src="https://avatars.githubusercontent.com/primer" alt="" />
-    <img src="https://avatars.githubusercontent.com/github" alt="" />
-    <img src="https://avatars.githubusercontent.com/primer" alt="" />
-    <img src="https://avatars.githubusercontent.com/github" alt="" />
-  </AvatarStack>
-)
-
-const rightAvatarComp = (
-  <AvatarStack alignRight>
-    <img src="https://avatars.githubusercontent.com/primer" alt="" />
-    <img src="https://avatars.githubusercontent.com/github" alt="" />
-    <img src="https://avatars.githubusercontent.com/primer" alt="" />
-    <img src="https://avatars.githubusercontent.com/github" alt="" />
-  </AvatarStack>
-)
-
-describe('Avatar', () => {
-  behavesAsComponent({
-    Component: AvatarStack,
-    toRender: () => avatarComp,
-    options: {skipAs: true}
-  })
-
-  checkExports('AvatarStack', {
-    default: AvatarStack
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(avatarComp)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('respects alignRight props', () => {
-    expect(render(rightAvatarComp)).toMatchSnapshot()
-  })
-})

package/src/__tests__/BorderBox.test.tsx

@@ -1,43 +0,0 @@
-import React from 'react'
-import theme from '../theme'
-import {BorderBox} 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('BorderBox', () => {
-  behavesAsComponent({Component: BorderBox})
-
-  checkExports('BorderBox', {
-    default: BorderBox
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<BorderBox />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders borders', () => {
-    expect(render(<BorderBox borderColor="success.emphasis" />)).toHaveStyleRule(
-      'border-color',
-      theme.colorSchemes.light.colors.success?.emphasis
-    )
-    expect(render(<BorderBox borderBottom={0} />)).toHaveStyleRule('border-bottom', '0')
-  })
-
-  it('renders border radius', () => {
-    expect(render(<BorderBox borderRadius={2} />)).toHaveStyleRule('border-radius', theme.radii[2])
-  })
-
-  // the test returns the box shadow value without spaces, so had to manually provide the expected string here
-  it('renders box shadow', () => {
-    expect(render(<BorderBox boxShadow="shadow.small" />)).toHaveStyleRule(
-      'box-shadow',
-      theme.colorSchemes.light.shadows.shadow?.small
-    )
-  })
-})

package/src/__tests__/Box.test.tsx

@@ -1,42 +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 {Box} from '..'
-import theme from '../theme'
-import {behavesAsComponent, checkExports, render} from '../utils/testing'
-expect.extend(toHaveNoViolations)
-
-describe('Box', () => {
-  behavesAsComponent({Component: Box})
-
-  checkExports('Box', {
-    default: Box
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Box />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders margin', () => {
-    expect(render(<Box m={1} theme={theme} />)).toMatchSnapshot()
-    expect(render(<Box m={[0, 1, 2, 3]} theme={theme} />)).toMatchSnapshot()
-    expect(render(<Box m={[1, 1, 1, 3]} theme={theme} />)).toMatchSnapshot()
-  })
-
-  it('renders padding', () => {
-    expect(render(<Box p={1} theme={theme} />)).toMatchSnapshot()
-    expect(render(<Box p={[0, 1, 2, 3]} theme={theme} />)).toMatchSnapshot()
-    expect(render(<Box p={[1, 1, 1, 3]} theme={theme} />)).toMatchSnapshot()
-  })
-
-  it('respects display', () => {
-    expect(render(<Box display="inline" />)).toMatchSnapshot()
-    expect(render(<Box display="inline-block" />)).toMatchSnapshot()
-    expect(render(<Box display="none" />)).toMatchSnapshot()
-    expect(render(<Box display={['none', 'none', 'block']} theme={theme} />)).toMatchSnapshot()
-  })
-})

package/src/__tests__/BranchName.test.tsx

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

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

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