@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/src/__tests__/SelectMenu.tsx

@@ -0,0 +1,142 @@
+import React from 'react'
+import {SelectMenu, Button} from '..'
+import {mount, render, renderRoot, COMPONENT_DISPLAY_NAME_REGEX, checkExports} from '../utils/testing'
+import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+import {SelectMenuModalProps, SelectMenuItemProps, SelectMenuTabProps} from '../SelectMenu'
+expect.extend(toHaveNoViolations)
+
+const BasicSelectMenu = ({
+  onClick,
+  as,
+  align = 'left'
+}: {
+  onClick?: SelectMenuItemProps['onClick']
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  as?: any
+  align?: SelectMenuModalProps['align']
+}) => {
+  return (
+    <SelectMenu as={as}>
+      <Button as="summary">Projects</Button>
+      <SelectMenu.Modal title="Projects" align={align}>
+        <SelectMenu.List>
+          <SelectMenu.Item selected href="#">
+            Primer Components bugs
+          </SelectMenu.Item>
+          <SelectMenu.Item onClick={onClick} as={as} data-test="menu-item" href="#">
+            Primer Components roadmap
+          </SelectMenu.Item>
+          <SelectMenu.Divider>stuff</SelectMenu.Divider>
+          <SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
+          <SelectMenu.Item href="#">Project 4</SelectMenu.Item>
+          <SelectMenu.Footer>footer</SelectMenu.Footer>
+        </SelectMenu.List>
+      </SelectMenu.Modal>
+    </SelectMenu>
+  )
+}
+
+const MenuWithTabs = ({onClick}: {onClick?: SelectMenuTabProps['onClick']}) => {
+  return (
+    <SelectMenu initialTab="Organization">
+      <Button as="summary">Projects</Button>
+      <SelectMenu.Modal title="Projects">
+        <SelectMenu.Tabs>
+          <SelectMenu.Tab index={0} onClick={onClick} data-test="repo-tab" tabName="Repository" />
+          <SelectMenu.Tab index={1} tabName="Organization" />
+        </SelectMenu.Tabs>
+        <SelectMenu.TabPanel tabName="Repository">
+          <SelectMenu.Item href="#">Primer Components bugs</SelectMenu.Item>
+          <SelectMenu.Item href="#">Primer Components roadmap</SelectMenu.Item>
+          <SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
+          <SelectMenu.Item href="#">Project 4</SelectMenu.Item>
+        </SelectMenu.TabPanel>
+        <SelectMenu.TabPanel tabName="Organization">
+          <SelectMenu.Item href="#"> Project 2</SelectMenu.Item>
+        </SelectMenu.TabPanel>
+        <SelectMenu.Footer>Showing 3 of 3</SelectMenu.Footer>
+      </SelectMenu.Modal>
+    </SelectMenu>
+  )
+}
+
+describe('SelectMenu', () => {
+  checkExports('SelectMenu', {
+    default: SelectMenu
+  })
+
+  for (const Comp of [
+    SelectMenu.List,
+    SelectMenu.Divider,
+    SelectMenu.Filter,
+    SelectMenu.Item,
+    SelectMenu.List,
+    SelectMenu.Modal,
+    SelectMenu.Tabs,
+    SelectMenu.Tab,
+    SelectMenu.TabPanel,
+    SelectMenu.Header
+  ]) {
+    it('sets a valid displayName', () => {
+      expect(Comp.displayName).toMatch(COMPONENT_DISPLAY_NAME_REGEX)
+    })
+  }
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<BasicSelectMenu />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('does not allow the "as" prop on SelectMenu', () => {
+    const component = mount(<BasicSelectMenu as="span" />)
+    expect(component.find('details').length).toEqual(1)
+  })
+
+  it('shows correct initial tab', () => {
+    const testInstance = renderRoot(<MenuWithTabs />)
+    expect(testInstance.findByProps({'aria-selected': true}).props.children).toBe('Organization')
+  })
+
+  it('clicking on a tab opens the tab', () => {
+    const component = mount(<MenuWithTabs />)
+    const tab = component.find("[data-test='repo-tab']").first()
+    tab.simulate('click')
+    expect(tab.getDOMNode().attributes.getNamedItem('aria-selected')).toBeTruthy()
+  })
+
+  it('selected items have aria-checked', () => {
+    const testInstance = renderRoot(<BasicSelectMenu />)
+    expect(testInstance.findByProps({'aria-checked': true}).props.children[1]).toBe('Primer Components bugs')
+  })
+
+  it('clicking on a list item calls user provided onClick handler', () => {
+    const mockClick = jest.fn()
+    const component = mount(<BasicSelectMenu onClick={mockClick} />)
+    const item = component.find("[data-test='menu-item']").first()
+    item.simulate('click')
+    expect(mockClick.mock.calls.length).toEqual(1)
+  })
+
+  it('clicking on a tab calls user provided onClick handler', () => {
+    const mockClick = jest.fn()
+    const component = mount(<MenuWithTabs onClick={mockClick} />)
+    const item = component.find("[data-test='repo-tab']").first()
+    item.simulate('click')
+    expect(mockClick.mock.calls.length).toEqual(1)
+  })
+
+  it('clicking on an item closes the modal', () => {
+    const component = mount(<BasicSelectMenu />)
+    const item = component.find("[data-test='menu-item']").first()
+    item.simulate('click')
+    expect(component.getDOMNode().attributes.getNamedItem('open')).toBeFalsy()
+  })
+
+  it('right-aligned modal has right: 0px', () => {
+    expect(render(<BasicSelectMenu align="right" />)).toMatchSnapshot()
+  })
+})

package/src/__tests__/SelectPanel.tsx

@@ -0,0 +1,65 @@
+import {cleanup, render as HTMLRender} from '@testing-library/react'
+import 'babel-polyfill'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import React from 'react'
+import theme from '../theme'
+import {SelectPanel} from '../SelectPanel'
+import {COMMON} from '../constants'
+import {behavesAsComponent, checkExports} from '../utils/testing'
+import {BaseStyles, SSRProvider, ThemeProvider} from '..'
+import {ItemInput} from '../ActionList/List'
+
+expect.extend(toHaveNoViolations)
+
+const items = [{text: 'Foo'}, {text: 'Bar'}, {text: 'Baz'}, {text: 'Bon'}] as ItemInput[]
+
+function SimpleSelectPanel(): JSX.Element {
+  const [selected, setSelected] = React.useState<ItemInput[]>([])
+  const [, setFilter] = React.useState('')
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <ThemeProvider theme={theme}>
+      <SSRProvider>
+        <BaseStyles>
+          <SelectPanel
+            items={items}
+            placeholder="Select Items"
+            placeholderText="Filter Items"
+            selected={selected}
+            onSelectedChange={setSelected}
+            onFilterChange={setFilter}
+            open={open}
+            onOpenChange={setOpen}
+          />
+          <div id="portal-root"></div>
+        </BaseStyles>
+      </SSRProvider>
+    </ThemeProvider>
+  )
+}
+
+describe('SelectPanel', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  behavesAsComponent({
+    Component: SelectPanel,
+    systemPropArray: [COMMON],
+    options: {skipAs: true, skipSx: true},
+    toRender: () => <SimpleSelectPanel />
+  })
+
+  checkExports('SelectPanel', {
+    default: undefined,
+    SelectPanel
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<SimpleSelectPanel />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+})

package/src/__tests__/SideNav.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import {SideNav} from '..'
+import {render, behavesAsComponent, mount, checkExports} from '../utils/testing'
+import {BORDER, COMMON, LAYOUT, FLEX, TYPOGRAPHY} from '../constants'
+import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+expect.extend(toHaveNoViolations)
+
+describe('SideNav', () => {
+  behavesAsComponent({Component: SideNav, systemPropArray: [BORDER, LAYOUT, COMMON, FLEX]})
+
+  checkExports('SideNav', {
+    default: SideNav
+  })
+
+  describe('SideNav.Link', () => {
+    behavesAsComponent({Component: SideNav.Link, systemPropArray: [COMMON, TYPOGRAPHY]})
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(
+      <SideNav>
+        <SideNav.Link href="#">One</SideNav.Link>
+        <SideNav.Link href="#" selected>
+          Two
+        </SideNav.Link>
+      </SideNav>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('renders a <nav> and <a>', () => {
+    expect(render(<SideNav />).type).toEqual('nav')
+    expect(render(<SideNav.Link />).type).toEqual('a')
+  })
+
+  it('sets aria-label appropriately', () => {
+    expect(render(<SideNav aria-label="foo" />).props['aria-label']).toEqual('foo')
+  })
+
+  it('sets aria-current on a selected link', () => {
+    const elem = (
+      <SideNav>
+        <SideNav.Link href="#one">One</SideNav.Link>
+        <SideNav.Link href="#two" selected>
+          Two
+        </SideNav.Link>
+      </SideNav>
+    )
+    const wrapper = mount(elem)
+    expect(wrapper.find('[aria-current="page"]').text()).toEqual('Two')
+  })
+
+  it('sets different styles for SideNavs with the lightweight variant', () => {
+    const regular = render(<SideNav />)
+    const lightweight = render(<SideNav variant="lightweight" />)
+    expect(regular.props.className).toEqual(expect.stringContaining('variant-normal'))
+    expect(lightweight.props.className).toEqual(expect.stringContaining('variant-lightweight'))
+  })
+})

package/src/__tests__/Spinner.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import {Spinner, SpinnerProps} from '..'
+import {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('Spinner', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  behavesAsComponent({
+    Component: Spinner,
+    systemPropArray: [COMMON]
+  })
+
+  checkExports('Spinner', {
+    default: Spinner
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<Spinner />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it('should respect size arguments', () => {
+    const expectSize = (input: SpinnerProps['size'] | undefined, expectedSize: string) => {
+      const {container} = HTMLRender(<Spinner size={input} />)
+      const svg = container.querySelector('svg')!
+      expect(svg.getAttribute('height')).toEqual(expectedSize)
+      expect(svg.getAttribute('width')).toEqual(expectedSize)
+    }
+
+    // default: medium
+    expectSize(undefined, '32px')
+    expectSize('small', '16px')
+    expectSize('medium', '32px')
+    expectSize('large', '64px')
+  })
+})

package/src/__tests__/StateLabel.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import {StateLabel} from '..'
+import {render, 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('StateLabel', () => {
+  behavesAsComponent({
+    Component: StateLabel,
+    systemPropArray: [COMMON],
+    toRender: () => <StateLabel status="issueOpened">Open</StateLabel>,
+    options: {
+      // Rendering a StyledOcticon seems to break getComputedStyles, which
+      // the sx prop implementation test uses to make sure the prop is working correctly.
+      // Despite my best efforts, I cannot figure out why this is happening. So,
+      // unfortunately, we will simply skip this test.
+      skipSx: true
+    }
+  })
+
+  checkExports('StateLabel', {
+    default: StateLabel
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<StateLabel status="issueOpened" />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('respects the status prop', () => {
+    expect(render(<StateLabel status="issueOpened" />)).toMatchSnapshot()
+    expect(render(<StateLabel status="issueClosed" />)).toMatchSnapshot()
+    expect(render(<StateLabel status="pullMerged" />)).toMatchSnapshot()
+  })
+
+  it('respects the variant prop', () => {
+    expect(render(<StateLabel variant="small" status="issueOpened" />)).toMatchSnapshot()
+    expect(render(<StateLabel variant="normal" status="issueOpened" />)).toMatchSnapshot()
+  })
+
+  it('renders children', () => {
+    expect(render(<StateLabel status="issueOpened">hi</StateLabel>)).toMatchSnapshot()
+  })
+})

package/src/__tests__/StyledOcticon.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import {XIcon} from '@primer/octicons-react'
+import {StyledOcticon} from '..'
+import {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('StyledOcticon', () => {
+  behavesAsComponent({
+    Component: StyledOcticon,
+    systemPropArray: [COMMON],
+    toRender: () => <StyledOcticon icon={XIcon} />
+  })
+
+  checkExports('StyledOcticon', {
+    default: StyledOcticon
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<StyledOcticon icon={XIcon} />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+})

package/src/__tests__/SubNav.tsx

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

package/src/__tests__/SubNavLink.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import {SubNav} 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('SubNav.Link', () => {
+  behavesAsComponent({Component: SubNav.Link, systemPropArray: [COMMON]})
+
+  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.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import {TabNav} from '..'
+import {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('TabNav', () => {
+  behavesAsComponent({Component: TabNav, systemPropArray: [COMMON]})
+
+  checkExports('TabNav', {
+    default: TabNav
+  })
+
+  describe('TabNav.Link', () => {
+    behavesAsComponent({Component: TabNav.Link, systemPropArray: [COMMON]})
+  })
+
+  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__/Text.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import {Text} from '..'
+import theme from '../theme'
+import {px, render, renderStyles, behavesAsComponent, checkExports} from '../utils/testing'
+import {COMMON, TYPOGRAPHY} from '../constants'
+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, systemPropArray: [COMMON, TYPOGRAPHY]})
+
+  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.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import {TextInput} from '..'
+import {render, mount, 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('TextInput', () => {
+  behavesAsComponent({Component: TextInput, systemPropArray: [COMMON], 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()
+  })
+})