@primer/components 32.0.0-rc.7200a6a6 → 32.0.0

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

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

package/src/__tests__/SubNavLink.test.tsx

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

package/src/__tests__/TabNav.test.tsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import {TabNav} from '..'
-import {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('TabNav', () => {
-  behavesAsComponent({Component: TabNav})
-
-  checkExports('TabNav', {
-    default: TabNav
-  })
-
-  describe('TabNav.Link', () => {
-    behavesAsComponent({Component: TabNav.Link})
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<TabNav aria-label="main" />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('sets aria-label appropriately', () => {
-    const {getByLabelText} = HTMLRender(<TabNav aria-label="stuff" />)
-    expect(getByLabelText('stuff')).toBeTruthy()
-    expect(getByLabelText('stuff').tagName).toEqual('NAV')
-  })
-})

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

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

package/src/__tests__/Text.test.tsx

@@ -1,78 +0,0 @@
-import React from 'react'
-import {Text} from '..'
-import theme from '../theme'
-import {px, render, renderStyles, 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('Text', () => {
-  behavesAsComponent({Component: Text})
-
-  checkExports('Text', {
-    default: Text
-  })
-
-  it('renders a <span> by default', () => {
-    expect(render(<Text />).type).toEqual('span')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Text>hello</Text>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders fontSize', () => {
-    for (const fontSize of theme.fontSizes) {
-      expect(render(<Text fontSize={fontSize} />)).toHaveStyleRule('font-size', px(fontSize))
-    }
-  })
-
-  it('renders responsive fontSize', () => {
-    expect(renderStyles(<Text fontSize={[1, 2]} />)).toEqual({
-      'font-size': px(theme.fontSizes[1]),
-      [`@media screen and (min-width:${px(theme.breakpoints[0])})`]: {
-        'font-size': px(theme.fontSizes[2])
-      }
-    })
-  })
-
-  it('renders responsive lineHeight', () => {
-    expect(renderStyles(<Text lineHeight={['condensed', 'default']} />)).toEqual({
-      'line-height': String(theme.lineHeights.condensed),
-      [`@media screen and (min-width:${px(theme.breakpoints[0])})`]: {
-        'line-height': String(theme.lineHeights.default)
-      }
-    })
-  })
-
-  it('respects fontWeight', () => {
-    expect(render(<Text fontWeight="bold" />)).toHaveStyleRule('font-weight', '600')
-    expect(render(<Text fontWeight="normal" />)).toHaveStyleRule('font-weight', '400')
-  })
-
-  it('respects the "fontStyle" prop', () => {
-    expect(render(<Text fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
-    expect(render(<Text as="i" fontStyle="normal" />)).toHaveStyleRule('font-style', 'normal')
-  })
-
-  it('respects lineHeight', () => {
-    for (const [name, value] of Object.entries(theme.lineHeights)) {
-      expect(render(<Text lineHeight={name} />)).toHaveStyleRule('line-height', String(value))
-    }
-  })
-
-  it('respects fontFamily="mono"', () => {
-    // styled-components removes the whitespace between font-family values
-    const mono = theme.fonts.mono.replace(/, /g, ',')
-    expect(render(<Text fontFamily="mono" />)).toHaveStyleRule('font-family', mono)
-  })
-
-  it('respects other values for fontSize', () => {
-    expect(render(<Text fontSize="2em" />)).toHaveStyleRule('font-size', '2em')
-    expect(render(<Text fontSize={100} />)).toHaveStyleRule('font-size', '100px')
-  })
-})

package/src/__tests__/TextInput.test.tsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import {TextInput} from '..'
-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)
-
-describe('TextInput', () => {
-  behavesAsComponent({Component: TextInput, options: {skipAs: true}})
-
-  checkExports('TextInput', {
-    default: TextInput
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<TextInput aria-label="zipcode" name="zipcode" variant="small" />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders', () => {
-    expect(render(<TextInput name="zipcode" />)).toMatchSnapshot()
-  })
-
-  it('renders small', () => {
-    expect(render(<TextInput name="zipcode" variant="small" />)).toMatchSnapshot()
-  })
-
-  it('renders large', () => {
-    expect(render(<TextInput name="zipcode" variant="large" />)).toMatchSnapshot()
-  })
-
-  it('renders block', () => {
-    expect(render(<TextInput name="zipcode" block />)).toMatchSnapshot()
-  })
-
-  it('should call onChange prop with input value', () => {
-    const onChangeMock = jest.fn()
-    const component = mount(<TextInput onChange={onChangeMock} value="test" />)
-    component.find('input').simulate('change')
-    expect(onChangeMock).toHaveBeenCalled()
-  })
-
-  it('should render a password input', () => {
-    expect(render(<TextInput name="password" type="password" />)).toMatchSnapshot()
-  })
-})

package/src/__tests__/TextInputWithTokens.test.tsx

@@ -1,422 +0,0 @@
-import React from 'react'
-import {render} from '../utils/testing'
-import {render as HTMLRender, fireEvent, act, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-import {TokenSizeKeys, tokenSizes} from '../Token/TokenBase'
-import {IssueLabelToken} from '../Token'
-import TextInputWithTokens, {TextInputWithTokensProps} from '../TextInputWithTokens'
-expect.extend(toHaveNoViolations)
-
-const mockTokens = [
-  {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}
-]
-
-const LabelledTextInputWithTokens: React.FC<TextInputWithTokensProps> = ({onTokenRemove, tokens, ...rest}) => (
-  <>
-    {/* eslint-disable-next-line jsx-a11y/label-has-for */}
-    <label htmlFor="tokenInput" id="tokenLabel">
-      Tokens
-    </label>
-    <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} id="tokenInput" {...rest} />
-  </>
-)
-
-jest.useFakeTimers()
-
-describe('TextInputWithTokens', () => {
-  it('renders without tokens', () => {
-    const onRemoveMock = jest.fn()
-    expect(render(<TextInputWithTokens tokens={[]} onTokenRemove={onRemoveMock} />)).toMatchSnapshot()
-  })
-
-  it('renders as block layout', () => {
-    const onRemoveMock = jest.fn()
-    expect(render(<TextInputWithTokens block tokens={[]} onTokenRemove={onRemoveMock} />)).toMatchSnapshot()
-  })
-
-  it('renders with tokens', () => {
-    const onRemoveMock = jest.fn()
-    expect(render(<TextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />)).toMatchSnapshot()
-  })
-
-  it('renders with tokens using a custom token component', () => {
-    const onRemoveMock = jest.fn()
-    expect(
-      render(<TextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} tokenComponent={IssueLabelToken} />)
-    ).toMatchSnapshot()
-  })
-
-  it('renders at a maximum height when specified', () => {
-    const onRemoveMock = jest.fn()
-    expect(
-      render(<TextInputWithTokens maxHeight="20px" tokens={mockTokens} onTokenRemove={onRemoveMock} />)
-    ).toMatchSnapshot()
-  })
-
-  it('renders tokens on a single line when specified', () => {
-    const onRemoveMock = jest.fn()
-    expect(
-      render(<TextInputWithTokens preventTokenWrapping tokens={mockTokens} onTokenRemove={onRemoveMock} />)
-    ).toMatchSnapshot()
-  })
-
-  it('renders tokens at the specified sizes', () => {
-    const onRemoveMock = jest.fn()
-    const tokenSizeKeys = Object.keys(tokenSizes)
-    for (const tokenSizeKey of tokenSizeKeys) {
-      expect(
-        render(
-          <TextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} size={tokenSizeKey as TokenSizeKeys} />
-        )
-      ).toMatchSnapshot()
-    }
-  })
-
-  it('renders tokens without a remove button when specified', () => {
-    const onRemoveMock = jest.fn()
-    expect(
-      render(<TextInputWithTokens hideTokenRemoveButtons tokens={mockTokens} onTokenRemove={onRemoveMock} />)
-    ).toMatchSnapshot()
-  })
-
-  it('renders a truncated set of tokens', () => {
-    const onRemoveMock = jest.fn()
-    expect(
-      render(<TextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} visibleTokenCount={2} />)
-    ).toMatchSnapshot()
-  })
-
-  it('focuses the previous token when keying ArrowLeft', () => {
-    const onRemoveMock = jest.fn()
-    const {getByLabelText, getByText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />
-    )
-    const inputNode = getByLabelText('Tokens')
-    const lastTokenIndex = mockTokens.length - 1
-    const lastTokenNode = getByText(mockTokens[lastTokenIndex].text)
-
-    expect(document.activeElement).not.toEqual(lastTokenNode)
-
-    fireEvent.focus(inputNode)
-    fireEvent.keyDown(inputNode, {key: 'ArrowLeft'})
-    expect(document.activeElement?.id).toEqual(lastTokenNode.id)
-
-    fireEvent.keyDown(lastTokenNode, {key: 'ArrowLeft'})
-    expect(document.activeElement?.id).toEqual(getByText(mockTokens[lastTokenIndex - 1].text).id)
-  })
-
-  it('focuses the next token when keying ArrowRight', () => {
-    const onRemoveMock = jest.fn()
-    const {getByText} = HTMLRender(<TextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />)
-    const tokenNode = getByText(mockTokens[4].text)
-
-    expect(onRemoveMock).not.toHaveBeenCalled()
-
-    fireEvent.focus(tokenNode)
-    fireEvent.keyDown(tokenNode, {key: 'ArrowRight'})
-
-    expect(document.activeElement?.id).toEqual(getByText(mockTokens[5].text).id)
-  })
-
-  it('focuses the input when keying ArrowLeft on the first token', () => {
-    const onRemoveMock = jest.fn()
-    const {getByLabelText, getByText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />
-    )
-    const inputNode = getByLabelText('Tokens')
-    const firstTokenNode = getByText(mockTokens[0].text)
-
-    expect(document.activeElement).not.toEqual(firstTokenNode)
-
-    fireEvent.focus(firstTokenNode)
-    fireEvent.keyDown(firstTokenNode, {key: 'ArrowLeft'})
-    expect(document.activeElement?.id).toEqual(inputNode.id)
-  })
-
-  it('focuses the input when keying ArrowRight on the last token', () => {
-    const onRemoveMock = jest.fn()
-    const {getByLabelText, getByText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />
-    )
-    const inputNode = getByLabelText('Tokens')
-    const lastTokenNode = getByText(mockTokens[mockTokens.length - 1].text)
-
-    expect(document.activeElement).not.toEqual(lastTokenNode)
-
-    fireEvent.focus(lastTokenNode)
-    fireEvent.keyDown(lastTokenNode, {key: 'ArrowRight'})
-    expect(document.activeElement?.id).toEqual(inputNode.id)
-  })
-
-  it('focuses the input when keying Escape when focused on a token', () => {
-    const onRemoveMock = jest.fn()
-    const {getByLabelText, getByText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />
-    )
-    const inputNode = getByLabelText('Tokens')
-    const lastTokenNode = getByText(mockTokens[mockTokens.length - 1].text)
-
-    expect(document.activeElement?.id).not.toEqual(inputNode.id)
-
-    fireEvent.focus(lastTokenNode)
-    expect(document.activeElement?.id).toEqual(lastTokenNode.id)
-    fireEvent.keyUp(lastTokenNode, {key: 'Escape'})
-
-    expect(document.activeElement?.id).not.toEqual(lastTokenNode.id)
-    expect(document.activeElement?.id).toEqual(inputNode.id)
-  })
-
-  it('does not focus the input when clicking a token', () => {
-    const onRemoveMock = jest.fn()
-    const {getByLabelText, getByText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} visibleTokenCount={2} />
-    )
-    const inputNode = getByLabelText('Tokens')
-    const tokenNode = getByText(mockTokens[0].text)
-
-    expect(document.activeElement).not.toEqual(inputNode.id)
-    fireEvent.click(tokenNode)
-    expect(document.activeElement?.id).not.toEqual(inputNode.id)
-  })
-
-  it('focuses the input when clicking somewhere in the component besides the tokens', () => {
-    const onRemoveMock = jest.fn()
-    const {getByLabelText, getByText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} visibleTokenCount={2} />
-    )
-    const inputNode = getByLabelText('Tokens')
-    const truncatedTokenCount = getByText('+6')
-
-    expect(document.activeElement).not.toEqual(inputNode.id)
-    fireEvent.click(truncatedTokenCount)
-    expect(document.activeElement?.id).toEqual(inputNode.id)
-  })
-
-  it('shows all tokens when the input is focused and hides them when it is blurred (when visibleTokenCount is set)', () => {
-    const onRemoveMock = jest.fn()
-    const visibleTokenCount = 2
-    const {getByLabelText, getByText} = HTMLRender(
-      <>
-        <LabelledTextInputWithTokens
-          tokens={mockTokens}
-          onTokenRemove={onRemoveMock}
-          visibleTokenCount={visibleTokenCount}
-        />
-        <button id="focusableOutsideComponent">Focus me</button>
-      </>
-    )
-    const inputNode = getByLabelText('Tokens')
-    const focusableOutsideComponentNode = getByText('Focus me')
-    const allTokenLabels = mockTokens.map(token => token.text)
-    const truncatedTokenCountNode = getByText('+6')
-
-    act(() => {
-      jest.runAllTimers()
-      fireEvent.focus(inputNode)
-    })
-
-    setTimeout(() => {
-      for (const tokenLabel of allTokenLabels) {
-        const tokenNode = getByText(tokenLabel)
-        expect(tokenNode).toBeDefined()
-      }
-    }, 0)
-
-    act(() => {
-      jest.runAllTimers()
-      // onBlur isn't called on input unless we specifically fire the "blur" event
-      // eslint-disable-next-line github/no-blur
-      fireEvent.blur(inputNode)
-      fireEvent.focus(focusableOutsideComponentNode)
-    })
-
-    setTimeout(() => {
-      expect(truncatedTokenCountNode).toBeDefined()
-
-      for (const tokenLabel of allTokenLabels) {
-        const tokenNode = getByText(tokenLabel)
-        if (allTokenLabels.indexOf(tokenLabel) > visibleTokenCount) {
-          // eslint-disable-next-line jest/no-conditional-expect
-          expect(tokenNode).toBeDefined()
-        } else {
-          // eslint-disable-next-line jest/no-conditional-expect
-          expect(tokenNode).not.toBeDefined()
-        }
-      }
-    }, 0)
-
-    jest.useRealTimers()
-  })
-
-  it('does not hide tokens when blurring the input to focus within the component (when visibleTokenCount is set)', () => {
-    const onRemoveMock = jest.fn()
-    const visibleTokenCount = 2
-    const {getByLabelText, getByText} = HTMLRender(
-      <>
-        <LabelledTextInputWithTokens
-          tokens={mockTokens}
-          onTokenRemove={onRemoveMock}
-          visibleTokenCount={visibleTokenCount}
-        />
-        <button id="focusableOutsideComponent">Focus me</button>
-      </>
-    )
-    const inputNode = getByLabelText('Tokens')
-    const firstTokenNode = getByText(mockTokens[visibleTokenCount - 1].text)
-    const allTokenLabels = mockTokens.map(token => token.text)
-    const truncatedTokenCountNode = getByText('+6')
-
-    act(() => {
-      fireEvent.focus(inputNode)
-      fireEvent.focus(firstTokenNode)
-    })
-
-    expect(truncatedTokenCountNode).toBeDefined()
-
-    for (const tokenLabel of allTokenLabels) {
-      const tokenNode = getByText(tokenLabel)
-      expect(tokenNode).toBeDefined()
-    }
-  })
-
-  it('focuses the first token when keying ArrowRight in the input', () => {
-    const onRemoveMock = jest.fn()
-    const {getByLabelText, getByText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />
-    )
-    const inputNode = getByLabelText('Tokens')
-    const firstTokenNode = getByText(mockTokens[0].text)
-
-    expect(onRemoveMock).not.toHaveBeenCalled()
-
-    fireEvent.focus(inputNode)
-    fireEvent.keyDown(inputNode, {key: 'ArrowRight'})
-
-    expect(document.activeElement?.id).not.toEqual(inputNode.id)
-    expect(document.activeElement?.id).toEqual(firstTokenNode.id)
-  })
-
-  it('calls onTokenRemove on the last token when keying Backspace in an empty input', () => {
-    const onRemoveMock = jest.fn()
-    const {getByLabelText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />
-    )
-    const inputNode = getByLabelText('Tokens')
-    const lastTokenIndex = mockTokens.length - 1
-
-    expect(onRemoveMock).not.toHaveBeenCalled()
-
-    fireEvent.focus(inputNode)
-    fireEvent.keyDown(inputNode, {key: 'Backspace'})
-    expect(onRemoveMock).toHaveBeenCalledWith(mockTokens[lastTokenIndex].id)
-  })
-
-  it("sets the input text to the last token's text when keying Backspace in an empty input", () => {
-    const onRemoveMock = jest.fn()
-    const {getByDisplayValue, getByLabelText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />
-    )
-    const inputNode = getByLabelText('Tokens')
-    const lastTokenIndex = mockTokens.length - 1
-
-    expect(onRemoveMock).not.toHaveBeenCalled()
-
-    fireEvent.focus(inputNode)
-    fireEvent.keyDown(inputNode, {key: 'Backspace'})
-
-    expect(getByDisplayValue(mockTokens[lastTokenIndex].text).id).toEqual(inputNode.id)
-  })
-
-  it('does not call onTokenRemove on the last token when keying Backspace in an input that has a value', () => {
-    const onRemoveMock = jest.fn()
-    const {getByLabelText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} defaultValue="test" />
-    )
-    const inputNode = getByLabelText('Tokens')
-
-    fireEvent.focus(inputNode)
-    fireEvent.keyDown(inputNode, {key: 'Backspace'})
-    expect(onRemoveMock).not.toHaveBeenCalled()
-  })
-
-  it('calls onTokenRemove on the focused token when keying Backspace and moves focus to the next token', () => {
-    const onRemoveMock = jest.fn()
-    const {getByText} = HTMLRender(<TextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />)
-    const tokenNode = getByText(mockTokens[4].text)
-
-    expect(onRemoveMock).not.toHaveBeenCalled()
-
-    fireEvent.focus(tokenNode)
-    fireEvent.keyDown(tokenNode, {key: 'Backspace'})
-
-    expect(onRemoveMock).toHaveBeenCalledWith(mockTokens[4].id)
-  })
-
-  it('moves focus to the next token when removing the first token', () => {
-    jest.useFakeTimers()
-    const onRemoveMock = jest.fn()
-    const {getByText} = HTMLRender(
-      <TextInputWithTokens tokens={[...mockTokens].slice(0, 2)} onTokenRemove={onRemoveMock} />
-    )
-    const tokenNode = getByText(mockTokens[0].text)
-
-    fireEvent.focus(tokenNode)
-    fireEvent.keyDown(tokenNode, {key: 'Backspace'})
-
-    jest.runAllTimers()
-    setTimeout(() => {
-      expect(document.activeElement?.textContent).toBe(mockTokens[1].text)
-    }, 0)
-
-    jest.useRealTimers()
-  })
-
-  it('moves focus to the input when the last token is removed', () => {
-    jest.useFakeTimers()
-    const onRemoveMock = jest.fn()
-    const {getByText, getByLabelText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={[mockTokens[0]]} onTokenRemove={onRemoveMock} />
-    )
-    const tokenNode = getByText(mockTokens[0].text)
-    const inputNode = getByLabelText('Tokens')
-
-    fireEvent.focus(tokenNode)
-    fireEvent.keyDown(tokenNode, {key: 'Backspace'})
-
-    jest.runAllTimers()
-    setTimeout(() => {
-      expect(document.activeElement?.id).toBe(inputNode.id)
-    }, 0)
-    jest.useRealTimers()
-  })
-
-  it('calls onKeyDown', () => {
-    const onRemoveMock = jest.fn()
-    const onKeyDownMock = jest.fn()
-    const {getByLabelText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} onKeyDown={onKeyDownMock} />
-    )
-    const inputNode = getByLabelText('Tokens')
-
-    expect(onKeyDownMock).not.toHaveBeenCalled()
-    fireEvent.focus(inputNode)
-    fireEvent.keyDown(inputNode, {key: 'a'})
-    expect(onKeyDownMock).toHaveBeenCalled()
-  })
-
-  it('should have no axe violations', async () => {
-    const onRemoveMock = jest.fn()
-    const {container} = HTMLRender(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-})