@primer/components 29.1.0-rc.79e8b21e → 29.1.0

package/src/__tests__/ThemeProvider.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.tsx

@@ -1,59 +0,0 @@
-import 'babel-polyfill'
-
-import {COMMON, FLEX, LAYOUT} from '../constants'
-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, systemPropArray: [COMMON, FLEX, LAYOUT]})
-
-  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, systemPropArray: [COMMON, FLEX, LAYOUT]})
-
-  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, systemPropArray: [COMMON, LAYOUT], 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__/Tooltip.tsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import Tooltip, {TooltipProps} from '../Tooltip'
-import {render, renderClasses, rendersClass, 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('Tooltip', () => {
-  behavesAsComponent({Component: Tooltip, systemPropArray: [COMMON]})
-
-  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)
-  })
-})

package/src/__tests__/Truncate.tsx

@@ -1,45 +0,0 @@
-import React from 'react'
-import {Truncate} from '..'
-import {COMMON, TYPOGRAPHY} from '../constants'
-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('Truncate', () => {
-  behavesAsComponent({
-    Component: Truncate,
-    systemPropArray: [COMMON, TYPOGRAPHY],
-    toRender: () => <Truncate title="a-long-branch-name" />
-  })
-
-  checkExports('Truncate', {
-    default: Truncate
-  })
-
-  it('renders a <div> by default', () => {
-    expect(render(<Truncate title="a-long-branch-name" />).type).toEqual('div')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Truncate title="a-long-branch-name">a-long-branch-name</Truncate>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('respects the maxWidth prop', () => {
-    expect(render(<Truncate maxWidth={250} title="a-long-branch-name" />)).toHaveStyleRule('max-width', '250px')
-  })
-
-  it('respects the inline prop', () => {
-    expect(render(<Truncate inline title="a-long-branch-name" />)).toHaveStyleRule('display', 'inline-block')
-  })
-
-  it('respects the expandable prop', () => {
-    expect(render(<Truncate expandable title="a-long-branch-name" />)).toHaveStyleRule('max-width', '10000px', {
-      modifier: ':hover'
-    })
-  })
-})

package/src/__tests__/UnderlineNav.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import {UnderlineNav} from '..'
-import {mount, render, rendersClass, 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('UnderlineNav', () => {
-  behavesAsComponent({Component: UnderlineNav, systemPropArray: [COMMON]})
-
-  checkExports('UnderlineNav', {
-    default: UnderlineNav
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<UnderlineNav />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders a <nav>', () => {
-    expect(render(<UnderlineNav />).type).toEqual('nav')
-  })
-
-  it('adds the UnderlineNav class', () => {
-    expect(rendersClass(<UnderlineNav />, 'UnderlineNav')).toEqual(true)
-  })
-
-  it('respects the "align" prop', () => {
-    expect(rendersClass(<UnderlineNav align="right" />, 'UnderlineNav--right')).toEqual(true)
-  })
-
-  it('respects the "full" prop', () => {
-    expect(rendersClass(<UnderlineNav full />, 'UnderlineNav--full')).toEqual(true)
-  })
-
-  it('sets aria-label to the "label" prop', () => {
-    expect(render(<UnderlineNav label="foo" />).props['aria-label']).toEqual('foo')
-  })
-
-  it('wraps its children in an "UnderlineNav-body" div', () => {
-    const children = <b>yo</b>
-    const wrapper = mount(<UnderlineNav>{children}</UnderlineNav>)
-    const body = wrapper.find('.UnderlineNav-body')
-    expect(body.exists()).toEqual(true)
-    expect(body.childAt(0).type()).toEqual('b')
-  })
-
-  it('respects the "actions" prop', () => {
-    const content = <h1>hi!</h1>
-    const wrapper = mount(<UnderlineNav actions={content} />)
-    const actions = wrapper.find('.UnderlineNav-actions')
-    expect(actions.exists()).toEqual(true)
-    expect(actions.text()).toEqual('hi!')
-  })
-})

package/src/__tests__/UnderlineNavLink.tsx

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