@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/src/__tests__/ThemeProvider.tsx

@@ -0,0 +1,441 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,32 @@
+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()
+  })
+})