@primer/components 33.0.0-rc.dcc047ad → 33.0.0

package/src/__tests__/ThemeProvider.test.tsx

@@ -1,441 +0,0 @@
-import {render, screen, waitFor} from '@testing-library/react'
-import 'jest-styled-components'
-import React from 'react'
-import {Text, ThemeProvider, useColorSchemeVar, useTheme} from '..'
-
-// window.matchMedia() is not implmented by JSDOM so we have to create a mock:
-// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation(query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn()
-  }))
-})
-
-const exampleTheme = {
-  colors: {
-    text: '#f00'
-  },
-  colorSchemes: {
-    light: {
-      colors: {
-        text: 'black'
-      }
-    },
-    dark: {
-      colors: {
-        text: 'white'
-      }
-    },
-    dark_dimmed: {
-      colors: {
-        text: 'gray'
-      }
-    }
-  }
-}
-
-it('respects theme prop', () => {
-  const theme = {
-    colors: {
-      text: '#f00'
-    },
-    space: ['0', '0.25rem']
-  }
-
-  render(
-    <ThemeProvider theme={theme}>
-      <Text color="text" mb={1}>
-        Hello
-      </Text>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyleRule('color', '#f00')
-  expect(screen.getByText('Hello')).toHaveStyleRule('margin-bottom', '0.25rem')
-})
-
-it('has default theme', () => {
-  render(
-    <ThemeProvider>
-      <Text color="fg.default" mb={1}>
-        Hello
-      </Text>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toMatchSnapshot()
-})
-
-it('inherits theme from parent', () => {
-  render(
-    <ThemeProvider theme={exampleTheme}>
-      <ThemeProvider>
-        <Text color="text">Hello</Text>
-      </ThemeProvider>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'black')
-})
-
-it('defaults to light color scheme', () => {
-  render(
-    <ThemeProvider theme={exampleTheme}>
-      <Text color="text">Hello</Text>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'black')
-})
-
-it('defaults to dark color scheme in night mode', () => {
-  render(
-    <ThemeProvider theme={exampleTheme} colorMode="night">
-      <Text color="text">Hello</Text>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'white')
-})
-
-it('defaults to first color scheme when passed an invalid color scheme name', () => {
-  render(
-    <ThemeProvider theme={exampleTheme} dayScheme="foo">
-      <Text color="text">Hello</Text>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'black')
-})
-
-it('respects nightScheme prop', () => {
-  render(
-    <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme="dark_dimmed">
-      <Text color="text">Hello</Text>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'gray')
-})
-
-it('respects dayScheme prop', () => {
-  render(
-    <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme="dark" nightScheme="dark_dimmed">
-      <Text color="text">Hello</Text>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'white')
-})
-
-it('works in auto mode', () => {
-  render(
-    <ThemeProvider theme={exampleTheme} colorMode="auto">
-      <Text color="text">Hello</Text>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'black')
-})
-
-it('works in auto mode (dark)', () => {
-  const matchMediaSpy = jest.spyOn(window, 'matchMedia').mockImplementation(query => ({
-    matches: true, // enable dark mode
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn()
-  }))
-
-  render(
-    <ThemeProvider theme={exampleTheme} colorMode="auto">
-      <Text color="text">Hello</Text>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'white')
-
-  matchMediaSpy.mockRestore()
-})
-
-it('updates when colorMode prop changes', async () => {
-  function App() {
-    const [colorMode, setColorMode] = React.useState<'day' | 'night'>('day')
-    return (
-      <ThemeProvider theme={exampleTheme} colorMode={colorMode}>
-        <Text color="text">{colorMode}</Text>
-        <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
-      </ThemeProvider>
-    )
-  }
-
-  render(<App />)
-
-  // starts in day mode (light scheme)
-  expect(screen.getByText('day')).toHaveStyleRule('color', 'black')
-
-  screen.getByRole('button').click()
-
-  await waitFor(() =>
-    // clicking the toggle button enables night mode (dark scheme)
-    expect(screen.getByText('night')).toHaveStyleRule('color', 'white')
-  )
-})
-
-it('updates when dayScheme prop changes', async () => {
-  function App() {
-    const [dayScheme, setDayScheme] = React.useState('light')
-    return (
-      <ThemeProvider theme={exampleTheme} dayScheme={dayScheme}>
-        <Text color="text">{dayScheme}</Text>
-        <button onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>Toggle</button>
-      </ThemeProvider>
-    )
-  }
-
-  render(<App />)
-
-  // starts in day mode (light scheme)
-  expect(screen.getByText('light')).toHaveStyleRule('color', 'black')
-
-  screen.getByRole('button').click()
-
-  await waitFor(() =>
-    // clicking the toggle sets the day scheme to dark_dimmed
-    expect(screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray')
-  )
-})
-
-it('updates when nightScheme prop changes', async () => {
-  function App() {
-    const [nightScheme, setNightScheme] = React.useState('dark')
-    return (
-      <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme={nightScheme}>
-        <Text color="text">{nightScheme}</Text>
-        <button onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>Toggle</button>
-      </ThemeProvider>
-    )
-  }
-
-  render(<App />)
-
-  // starts in night mode (dark scheme)
-  expect(screen.getByText('dark')).toHaveStyleRule('color', 'white')
-
-  screen.getByRole('button').click()
-
-  await waitFor(() =>
-    // clicking the toggle button sets the night scheme to dark_dimmed
-    expect(screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray')
-  )
-})
-
-it('inherits colorMode from parent', async () => {
-  function App() {
-    const [colorMode, setcolorMode] = React.useState<'day' | 'night'>('day')
-    return (
-      <ThemeProvider theme={exampleTheme} colorMode={colorMode}>
-        <button onClick={() => setcolorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
-        <ThemeProvider>
-          <Text color="text">{colorMode}</Text>
-        </ThemeProvider>
-      </ThemeProvider>
-    )
-  }
-
-  render(<App />)
-
-  expect(screen.getByText('day')).toHaveStyleRule('color', 'black')
-
-  screen.getByRole('button').click()
-
-  await waitFor(() => expect(screen.getByText('night')).toHaveStyleRule('color', 'white'))
-})
-
-it('inherits dayScheme from parent', async () => {
-  function App() {
-    const [dayScheme, setDayScheme] = React.useState('light')
-    return (
-      <ThemeProvider theme={exampleTheme} colorMode="night" dayScheme={dayScheme}>
-        <button onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>Toggle</button>
-        <ThemeProvider colorMode="day">
-          <Text color="text">{dayScheme}</Text>
-        </ThemeProvider>
-      </ThemeProvider>
-    )
-  }
-
-  render(<App />)
-
-  expect(screen.getByText('light')).toHaveStyleRule('color', 'black')
-
-  screen.getByRole('button').click()
-
-  await waitFor(() => expect(screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray'))
-})
-
-it('inherits nightScheme from parent', async () => {
-  function App() {
-    const [nightScheme, setNightScheme] = React.useState('dark')
-    return (
-      <ThemeProvider theme={exampleTheme} colorMode="day" nightScheme={nightScheme}>
-        <button onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>Toggle</button>
-        <ThemeProvider colorMode="night">
-          <Text color="text">{nightScheme}</Text>
-        </ThemeProvider>
-      </ThemeProvider>
-    )
-  }
-
-  render(<App />)
-
-  expect(screen.getByText('dark')).toHaveStyleRule('color', 'white')
-
-  screen.getByRole('button').click()
-
-  await waitFor(() => expect(screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray'))
-})
-
-describe('setColorMode', () => {
-  it('changes the color mode', () => {
-    function ToggleMode() {
-      const {colorMode, setColorMode} = useTheme()
-      return <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
-    }
-
-    render(
-      <ThemeProvider theme={exampleTheme} colorMode="day">
-        <Text color="text">Hello</Text>
-        <ToggleMode />
-      </ThemeProvider>
-    )
-
-    // starts in day mode (light scheme)
-    expect(screen.getByText('Hello')).toHaveStyleRule('color', 'black')
-
-    screen.getByRole('button').click()
-
-    // clicking the toggle button enables night mode (dark scheme)
-    expect(screen.getByText('Hello')).toHaveStyleRule('color', 'white')
-  })
-})
-
-describe('setDayScheme', () => {
-  it('changes the day scheme', () => {
-    function ToggleDayScheme() {
-      const {dayScheme, setDayScheme} = useTheme()
-      return <button onClick={() => setDayScheme(dayScheme === 'light' ? 'dark' : 'light')}>Toggle</button>
-    }
-
-    render(
-      <ThemeProvider theme={exampleTheme} colorMode="day">
-        <Text color="text">Hello</Text>
-        <ToggleDayScheme />
-      </ThemeProvider>
-    )
-
-    // starts in day mode (light scheme)
-    expect(screen.getByText('Hello')).toHaveStyleRule('color', 'black')
-
-    screen.getByRole('button').click()
-
-    // clicking the toggle button sets day scheme to dark
-    expect(screen.getByText('Hello')).toHaveStyleRule('color', 'white')
-  })
-})
-
-describe('setNightScheme', () => {
-  it('changes the night scheme', () => {
-    function ToggleNightScheme() {
-      const {nightScheme, setNightScheme} = useTheme()
-      return <button onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>Toggle</button>
-    }
-
-    render(
-      <ThemeProvider theme={exampleTheme} colorMode="night">
-        <Text color="text">Hello</Text>
-        <ToggleNightScheme />
-      </ThemeProvider>
-    )
-
-    // starts in night mode (dark scheme)
-    expect(screen.getByText('Hello')).toHaveStyleRule('color', 'white')
-
-    screen.getByRole('button').click()
-
-    // clicking the toggle button sets night scheme to dark_dimmed
-    expect(screen.getByText('Hello')).toHaveStyleRule('color', 'gray')
-  })
-})
-
-describe('useColorSchemeVar', () => {
-  it('updates value when scheme changes', () => {
-    function ToggleMode() {
-      const {colorMode, setColorMode} = useTheme()
-      return <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
-    }
-
-    function CustomBg() {
-      const customBg = useColorSchemeVar(
-        {
-          light: 'red',
-          dark: 'blue',
-          dark_dimmed: 'green'
-        },
-        'inherit'
-      )
-
-      return <Text bg={customBg}>Hello</Text>
-    }
-
-    render(
-      <ThemeProvider theme={exampleTheme} nightScheme="dark_dimmed">
-        <CustomBg />
-        <ToggleMode />
-      </ThemeProvider>
-    )
-
-    expect(screen.getByText('Hello')).toHaveStyleRule('background-color', 'red')
-
-    screen.getByRole('button').click()
-
-    expect(screen.getByText('Hello')).toHaveStyleRule('background-color', 'green')
-  })
-
-  it('supports fallback value', () => {
-    function ToggleMode() {
-      const {colorMode, setColorMode} = useTheme()
-      return <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
-    }
-
-    function CustomBg() {
-      const customBg = useColorSchemeVar({dark: 'blue'}, 'red')
-
-      return <Text bg={customBg}>Hello</Text>
-    }
-
-    render(
-      <ThemeProvider theme={exampleTheme}>
-        <CustomBg />
-        <ToggleMode />
-      </ThemeProvider>
-    )
-
-    expect(screen.getByText('Hello')).toHaveStyleRule('background-color', 'red')
-
-    screen.getByRole('button').click()
-
-    expect(screen.getByText('Hello')).toHaveStyleRule('background-color', 'blue')
-  })
-})

package/src/__tests__/Timeline.test.tsx

@@ -1,58 +0,0 @@
-import 'babel-polyfill'
-
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import {render, rendersClass, behavesAsComponent, checkExports} from '../utils/testing'
-
-import React from 'react'
-import {Timeline} from '..'
-expect.extend(toHaveNoViolations)
-
-describe('Timeline', () => {
-  behavesAsComponent({Component: Timeline})
-
-  checkExports('Timeline', {
-    default: Timeline
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Timeline />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders with clipSidebar prop', () => {
-    expect(render(<Timeline clipSidebar />)).toMatchSnapshot()
-  })
-})
-
-describe('Timeline.Item', () => {
-  behavesAsComponent({Component: Timeline.Item})
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Timeline.Item />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders with condensed prop', () => {
-    expect(render(<Timeline.Item condensed />)).toMatchSnapshot()
-  })
-
-  it('adds the Timeline-Item class', () => {
-    expect(rendersClass(<Timeline.Item />, 'Timeline-Item')).toEqual(true)
-  })
-})
-
-describe('Timeline.Badge', () => {
-  behavesAsComponent({Component: Timeline.Badge, options: {skipAs: true}})
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Timeline.Badge />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-})

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

@@ -1,31 +0,0 @@
-import React from 'react'
-import Timeline from '../Timeline'
-
-export function shouldAcceptCallWithNoProps() {
-  return (
-    <>
-      <Timeline />
-      <Timeline.Item />
-      <Timeline.Badge />
-      <Timeline.Body />
-      <Timeline.Break />
-    </>
-  )
-}
-
-export function shouldNotAcceptSystemProps() {
-  return (
-    <>
-      {/* @ts-expect-error system props should not be accepted */}
-      <Timeline backgroundColor="red" />
-      {/* @ts-expect-error system props should not be accepted */}
-      <Timeline.Item backgroundColor="orange" />
-      {/* @ts-expect-error system props should not be accepted */}
-      <Timeline.Badge backgroundColor="yellow" />
-      {/* @ts-expect-error system props should not be accepted */}
-      <Timeline.Body backgroundColor="green" />
-      {/* @ts-expect-error system props should not be accepted */}
-      <Timeline.Break backgroundColor="blue" />
-    </>
-  )
-}

package/src/__tests__/Token.test.tsx

@@ -1,118 +0,0 @@
-import React from 'react'
-import Token from '../Token/Token'
-import {render, behavesAsComponent, mount} from '../utils/testing'
-import {render as HTMLRender, cleanup, fireEvent} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-import {TokenSizeKeys, tokenSizes} from '../Token/TokenBase'
-import {IssueLabelToken, AvatarToken} from '../Token'
-import {AvatarTokenProps} from '../Token/AvatarToken'
-expect.extend(toHaveNoViolations)
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const testTokenComponent = (Component: React.ComponentType<any>) => {
-  behavesAsComponent({Component: Token})
-
-  it('renders a <span>', () => {
-    expect(render(<Component text="token" />).type).toEqual('span')
-  })
-
-  it('renders a <button> or <a> when specified', () => {
-    expect(render(<Component as="button" text="token" />).type).toEqual('button')
-    expect(render(<Component as="a" text="token" />).type).toEqual('a')
-  })
-
-  it('renders with a remove button', () => {
-    const onRemoveMock = jest.fn()
-    expect(render(<Component text="token" onRemove={onRemoveMock} />)).toMatchSnapshot()
-  })
-
-  it('renders button inside the token when the token also has a remove button', () => {
-    const onRemoveMock = jest.fn()
-    const {getByText} = HTMLRender(<Component as="button" text="token" onRemove={onRemoveMock} />)
-
-    expect(render(<Component as="button" text="token" onRemove={onRemoveMock} />).type).not.toEqual('button')
-    expect(getByText('token').tagName.toLowerCase()).toEqual('button')
-  })
-
-  it('renders anchor inside the token when the token also has a remove button', () => {
-    const onRemoveMock = jest.fn()
-    const {getByText} = HTMLRender(<Component as="a" text="token" onRemove={onRemoveMock} />)
-
-    expect(render(<Component as="a" text="token" onRemove={onRemoveMock} />).type).not.toEqual('a')
-    expect(getByText('token').tagName.toLowerCase()).toEqual('a')
-  })
-
-  it('renders isSelected', () => {
-    expect(render(<Component text="token" isSelected />)).toMatchSnapshot()
-  })
-
-  it('renders all sizes', () => {
-    const onRemoveMock = jest.fn()
-    const tokenSizeKeys = Object.keys(tokenSizes)
-
-    for (const tokenSizeKey of tokenSizeKeys) {
-      expect(
-        render(<Component text="token" size={tokenSizeKey as TokenSizeKeys} onRemove={onRemoveMock} />)
-      ).toMatchSnapshot()
-    }
-  })
-
-  it('calls onRemove when the user clicks the remove button', () => {
-    const onRemoveMock = jest.fn()
-    const component = mount(<Component text="token" onRemove={onRemoveMock} />)
-    component.find('button').simulate('click')
-    expect(onRemoveMock).toHaveBeenCalled()
-  })
-
-  it('calls onRemove when the user keys Backspace on a focused Token', () => {
-    const onRemoveMock = jest.fn()
-    const {getByText} = HTMLRender(<Component text="token" onRemove={onRemoveMock} />)
-    const domNode = getByText('token')
-    fireEvent.keyDown(domNode, {key: 'Backspace'})
-
-    expect(onRemoveMock).toHaveBeenCalled()
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Component text="token" />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-}
-
-describe('Token components', () => {
-  describe('Token', () => {
-    testTokenComponent(Token)
-
-    it('renders with a leadingVisual', () => {
-      expect(
-        render(<Token text="token" leadingVisual={() => <div style={{backgroundColor: 'blue'}} />} />)
-      ).toMatchSnapshot()
-    })
-  })
-
-  describe('IssueLabelToken', () => {
-    testTokenComponent(IssueLabelToken)
-
-    it('renders default fill color', () => {
-      const onRemoveMock = jest.fn()
-      expect(render(<IssueLabelToken text="token" onRemove={onRemoveMock} />)).toMatchSnapshot()
-    })
-
-    it('renders custom fill color', () => {
-      const onRemoveMock = jest.fn()
-      expect(render(<IssueLabelToken text="token" fillColor="#0366d6" onRemove={onRemoveMock} />)).toMatchSnapshot()
-    })
-  })
-
-  describe('AvatarToken', () => {
-    const AvatarTokenWithDefaultAvatar = ({
-      avatarSrc = 'https://avatars.githubusercontent.com/mperrotti',
-      ...rest
-    }: Omit<AvatarTokenProps, 'ref'>) => <AvatarToken avatarSrc={avatarSrc} {...rest} />
-
-    testTokenComponent(AvatarTokenWithDefaultAvatar)
-  })
-})

package/src/__tests__/Tooltip.test.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import Tooltip, {TooltipProps} from '../Tooltip'
-import {render, renderClasses, rendersClass, 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('Tooltip', () => {
-  behavesAsComponent({Component: Tooltip})
-
-  checkExports('Tooltip', {
-    default: Tooltip
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Tooltip text="hi" />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders a <span> with the "tooltipped" class', () => {
-    expect(render(<Tooltip />).type).toEqual('span')
-    expect(renderClasses(<Tooltip />)).toContain('tooltipped-n')
-  })
-
-  it('respects the "align" prop', () => {
-    expect(rendersClass(<Tooltip align="left" />, 'tooltipped-align-left-2')).toBe(true)
-    expect(rendersClass(<Tooltip align="right" />, 'tooltipped-align-right-2')).toBe(true)
-  })
-
-  it('respects the "direction" prop', () => {
-    for (const direction of Tooltip.directions) {
-      expect(
-        rendersClass(<Tooltip direction={direction as TooltipProps['direction']} />, `tooltipped-${direction}`)
-      ).toBe(true)
-    }
-  })
-
-  it('respects the "noDelay" prop', () => {
-    expect(rendersClass(<Tooltip noDelay />, 'tooltipped-no-delay')).toBe(true)
-  })
-
-  it('respects the "text" prop', () => {
-    expect(render(<Tooltip text="hi" />).props['aria-label']).toEqual('hi')
-  })
-
-  it('respects the "wrap" prop', () => {
-    expect(rendersClass(<Tooltip wrap />, 'tooltipped-multiline')).toBe(true)
-  })
-})