@primer/components 31.0.0 → 31.0.2-rc.c7dafefb

package/src/__tests__/Header.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import {Header} from '..'
+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('Header', () => {
+  behavesAsComponent({Component: Header})
+
+  checkExports('Header', {
+    default: Header
+  })
+
+  describe('Header.Item', () => {
+    behavesAsComponent({Component: Header.Item})
+  })
+
+  describe('Header.Link', () => {
+    behavesAsComponent({Component: Header.Link})
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(
+      <Header>
+        <Header.Item full>
+          <Header.Link href="#">One</Header.Link>
+        </Header.Item>
+        <Header.Item>
+          <Header.Link href="#">Two</Header.Link>
+        </Header.Item>
+        <Header.Item>Three</Header.Item>
+      </Header>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('renders a <div> and <a>', () => {
+    expect(render(<Header />).type).toEqual('div')
+    expect(render(<Header.Link />).type).toEqual('a')
+  })
+
+  it('sets aria-label appropriately', () => {
+    expect(render(<Header aria-label="foo" />).props['aria-label']).toEqual('foo')
+  })
+})

package/src/__tests__/Heading.test.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+import {Heading} from '..'
+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)
+
+const theme = {
+  breakpoints: ['400px', '640px', '960px', '1280px'],
+  colors: {
+    green: ['#010', '#020', '#030', '#040', '#050', '#060']
+  },
+  fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px'],
+  fonts: {
+    normal: 'Helvetica,sans-serif',
+    mono: 'Consolas,monospace'
+  },
+  lineHeights: {
+    normal: 1.5,
+    condensed: 1.25,
+    condensedUltra: 1
+  },
+  fontWeights: {
+    light: '300',
+    normal: '400',
+    semibold: '500',
+    bold: '600'
+  }
+}
+
+describe('Heading', () => {
+  behavesAsComponent({Component: Heading})
+
+  checkExports('Heading', {
+    default: Heading
+  })
+
+  it('renders <h2> by default', () => {
+    expect(render(<Heading />).type).toEqual('h2')
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<Heading>Hello</Heading>)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('respects fontWeight', () => {
+    expect(render(<Heading fontWeight="bold" theme={theme} />)).toHaveStyleRule('font-weight', theme.fontWeights.bold)
+    expect(render(<Heading fontWeight="normal" theme={theme} />)).toHaveStyleRule(
+      'font-weight',
+      theme.fontWeights.normal
+    )
+    expect(render(<Heading fontWeight="semibold" theme={theme} />)).toHaveStyleRule(
+      'font-weight',
+      theme.fontWeights.semibold
+    )
+    expect(render(<Heading fontWeight="light" theme={theme} />)).toHaveStyleRule('font-weight', theme.fontWeights.light)
+  })
+
+  it('respects lineHeight', () => {
+    expect(render(<Heading lineHeight="normal" theme={theme} />)).toHaveStyleRule(
+      'line-height',
+      String(theme.lineHeights.normal)
+    )
+    expect(render(<Heading lineHeight="condensed" theme={theme} />)).toHaveStyleRule(
+      'line-height',
+      String(theme.lineHeights.condensed)
+    )
+    expect(render(<Heading lineHeight="condensedUltra" theme={theme} />)).toHaveStyleRule(
+      'line-height',
+      String(theme.lineHeights.condensedUltra)
+    )
+  })
+
+  it('respects fontFamily="mono"', () => {
+    expect(render(<Heading fontFamily="mono" theme={theme} />)).toHaveStyleRule('font-family', theme.fonts.mono)
+  })
+
+  it('renders fontSize', () => {
+    for (const fontSize of theme.fontSizes) {
+      expect(render(<Heading fontSize={fontSize} theme={theme} />)).toHaveStyleRule('font-size', `${fontSize}`)
+    }
+  })
+
+  it('respects the "fontStyle" prop', () => {
+    expect(render(<Heading fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
+  })
+})

package/src/__tests__/Label.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import {Label} from '..'
+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('Label', () => {
+  behavesAsComponent({Component: Label})
+
+  checkExports('Label', {
+    default: Label
+  })
+
+  it('renders a <span>', () => {
+    expect(render(<Label />).type).toEqual('span')
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<Label>hello</Label>)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('respects the "outline" prop', () => {
+    expect(render(<Label outline />)).toMatchSnapshot()
+  })
+
+  it('respects the "variant" prop', () => {
+    expect(render(<Label variant="xl" />)).toMatchSnapshot()
+  })
+})

package/src/__tests__/LabelGroup.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import {LabelGroup, Label} 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)
+
+const comp = (
+  <LabelGroup>
+    <Label>Default label</Label>
+    <Label>Darker gray label</Label>
+    <Label outline>Default outline label</Label>
+  </LabelGroup>
+)
+
+describe('LabelGroup', () => {
+  behavesAsComponent({Component: LabelGroup})
+
+  checkExports('LabelGroup', {
+    default: LabelGroup
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(comp)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+})

package/src/__tests__/Link.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import {Link} from '..'
+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('Link', () => {
+  behavesAsComponent({Component: Link})
+
+  checkExports('Link', {
+    default: Link
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<Link href="www.github.com">GitHub</Link>)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('passes href down to link element', () => {
+    expect(render(<Link href="https://github.com" />)).toMatchSnapshot()
+  })
+
+  it('respects hoverColor prop', () => {
+    expect(render(<Link hoverColor="accent.fg" />)).toMatchSnapshot()
+  })
+
+  it('respects the "fontStyle" prop', () => {
+    expect(render(<Link fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
+    expect(render(<Link as="i" fontStyle="normal" />)).toHaveStyleRule('font-style', 'normal')
+  })
+
+  it('applies button styles when rendering a button element', () => {
+    expect(render(<Link as="button" />)).toMatchSnapshot()
+  })
+
+  it('respectes the "muted" prop', () => {
+    expect(render(<Link muted />)).toMatchSnapshot()
+  })
+
+  it('respectes the "color" prop when "muted" prop is also passed', () => {
+    expect(render(<Link muted color="fg.onEmphasis" />)).toMatchSnapshot()
+  })
+})

package/src/__tests__/Merge.types.test.ts

@@ -0,0 +1,39 @@
+import {Merge} from '../utils/types/Merge'
+
+type AString = {
+  a: string
+}
+
+type BString = {
+  b: string
+}
+
+type CString = {
+  c: string
+}
+
+type CNumber = {
+  c: number
+}
+
+type DOptionalString = {
+  d?: string
+}
+
+export function canMergeTwoTypes(x: Merge<AString, BString>): {a: string; b: string} {
+  return x
+}
+
+export function overridesAsExpected(x: Merge<CString, CNumber>): {c: number} {
+  return x
+}
+
+export function optionalityIsPreservedInFirstParameter(x: Merge<DOptionalString, AString>): {d: number} {
+  // @ts-expect-error: d is optional
+  return x
+}
+
+export function optionalityIsPreservedInSecondParameter(x: Merge<DOptionalString, AString>): {d: number} {
+  // @ts-expect-error: d is optional
+  return x
+}

package/src/__tests__/Overlay.test.tsx

@@ -0,0 +1,103 @@
+import React, {useRef, useState} from 'react'
+import {Overlay, Box, Text, ButtonDanger, Button} from '..'
+import {render, cleanup, waitFor, fireEvent, act} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import theme from '../theme'
+import BaseStyles from '../BaseStyles'
+import {ThemeProvider} from '../ThemeProvider'
+
+expect.extend(toHaveNoViolations)
+
+type TestComponentSettings = {
+  initialFocus?: 'button'
+  callback?: () => void
+}
+const TestComponent = ({initialFocus, callback}: TestComponentSettings) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const confirmButtonRef = useRef<HTMLButtonElement>(null)
+  const anchorRef = useRef<HTMLDivElement>(null)
+  const closeOverlay = () => {
+    setIsOpen(false)
+    if (callback) {
+      callback()
+    }
+  }
+  return (
+    <ThemeProvider theme={theme}>
+      <BaseStyles>
+        <Box position="absolute" top={0} left={0} bottom={0} right={0} ref={anchorRef}>
+          <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+            open overlay
+          </Button>
+          <Button>outside</Button>
+          {isOpen ? (
+            <Overlay
+              initialFocusRef={initialFocus === 'button' ? confirmButtonRef : undefined}
+              returnFocusRef={buttonRef}
+              ignoreClickRefs={[buttonRef]}
+              onEscape={closeOverlay}
+              onClickOutside={closeOverlay}
+              width="small"
+            >
+              <Box display="flex" flexDirection="column" p={2}>
+                <Text>Are you sure?</Text>
+                <ButtonDanger onClick={closeOverlay}>Cancel</ButtonDanger>
+                <Button onClick={closeOverlay} ref={confirmButtonRef}>
+                  Confirm
+                </Button>
+              </Box>
+            </Overlay>
+          ) : null}
+        </Box>
+      </BaseStyles>
+    </ThemeProvider>
+  )
+}
+
+describe('Overlay', () => {
+  it('should have no axe violations', async () => {
+    const {container} = render(<TestComponent />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('should focus element passed into function', async () => {
+    const {getByText} = render(<TestComponent initialFocus="button" />)
+    userEvent.click(getByText('open overlay'))
+    await waitFor(() => getByText('Confirm'))
+    const confirmButton = getByText('Confirm')
+    expect(document.activeElement).toEqual(confirmButton)
+  })
+
+  it('should focus first element when nothing is passed', async () => {
+    const {getByText} = render(<TestComponent />)
+    userEvent.click(getByText('open overlay'))
+    await waitFor(() => getByText('Cancel'))
+    const cancelButton = getByText('Cancel')
+    expect(document.activeElement).toEqual(cancelButton)
+  })
+
+  it('should call function when user clicks outside container', () => {
+    const mockFunction = jest.fn()
+    const {getByText, queryAllByText} = render(<TestComponent callback={mockFunction} />)
+    act(() => userEvent.click(getByText('open overlay')))
+    act(() => userEvent.click(getByText('outside')))
+    expect(mockFunction).toHaveBeenCalledTimes(1)
+    const cancelButtons = queryAllByText('Cancel')
+    expect(cancelButtons).toHaveLength(0)
+  })
+
+  it('should call function when user presses escape', () => {
+    const mockFunction = jest.fn()
+    const {getByText, queryAllByText} = render(<TestComponent callback={mockFunction} />)
+    act(() => userEvent.click(getByText('open overlay')))
+    const domNode = getByText('Are you sure?')
+    fireEvent.keyDown(domNode, {key: 'Escape', code: 'Escape', keyCode: 27, charCode: 27})
+    expect(mockFunction).toHaveBeenCalledTimes(1)
+    const cancelButtons = queryAllByText('Cancel')
+    expect(cancelButtons).toHaveLength(0)
+  })
+})

package/src/__tests__/Pagehead.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import {Pagehead} from '..'
+import theme from '../theme'
+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('Pagehead', () => {
+  behavesAsComponent({Component: Pagehead})
+
+  checkExports('Pagehead', {
+    default: Pagehead
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<Pagehead theme={theme}>Pagehead</Pagehead>)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+})

package/src/__tests__/Pagination/Pagination.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import Pagination from '../../Pagination'
+import {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)
+
+const reqProps = {pageCount: 10, currentPage: 1}
+const comp = <Pagination {...reqProps} />
+
+describe('Pagination', () => {
+  behavesAsComponent({Component: Pagination, toRender: () => comp})
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(comp)
+    const results = await axe(container, {
+      rules: {
+        // The skip-link rule has to do with entire documents
+        // and is not relevant to this component.
+        // See https://dequeuniversity.com/rules/axe/3.3/skip-link?application=axeAPI
+        'skip-link': {
+          enabled: false
+        }
+      }
+    })
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+})

package/src/__tests__/Pagination/PaginationModel.test.tsx

@@ -0,0 +1,133 @@
+import 'babel-polyfill'
+import {buildPaginationModel} from '../../Pagination/model'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function first(array: Array<any>, count = 1) {
+  const slice = array.slice(0, count)
+  return count === 1 ? slice[0] : slice
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function last(array: Array<any>, count = 1) {
+  const len = array.length
+  const slice = array.slice(len - count, len)
+  return count === 1 ? slice[0] : slice
+}
+
+describe('Pagination model', () => {
+  it('sets disabled on prev links', () => {
+    const model1 = buildPaginationModel(10, 1, true, 1, 2)
+    expect(first(model1).type).toEqual('PREV')
+    expect(first(model1).disabled).toBe(true)
+
+    const model2 = buildPaginationModel(10, 2, true, 1, 2)
+    expect(first(model2).type).toEqual('PREV')
+    expect(first(model2).disabled).toBe(false)
+  })
+
+  it('sets disabled on next links', () => {
+    const model1 = buildPaginationModel(10, 10, true, 1, 2)
+    expect(last(model1).type).toEqual('NEXT')
+    expect(last(model1).disabled).toBe(true)
+
+    const model2 = buildPaginationModel(10, 9, true, 1, 2)
+    expect(last(model2).type).toEqual('NEXT')
+    expect(last(model2).disabled).toBe(false)
+  })
+
+  it('sets the page number for prev and next links', () => {
+    const model = buildPaginationModel(10, 5, true, 1, 2)
+    expect(first(model).num).toEqual(4)
+    expect(last(model).num).toEqual(6)
+  })
+
+  it('ensures margin pages on the left', () => {
+    const model = buildPaginationModel(10, 10, true, 2, 0)
+    const slice = first(model, 5)
+
+    const expected = [
+      {type: 'PREV', num: 9},
+      {type: 'NUM', num: 1},
+      {type: 'NUM', num: 2},
+      {type: 'BREAK'},
+      {type: 'NUM'}
+    ]
+
+    expect(slice).toMatchObject(expected)
+  })
+
+  it('ensures margin pages on the right', () => {
+    const model = buildPaginationModel(10, 1, true, 2, 0)
+    const slice = last(model, 5)
+
+    const expected = [
+      {type: 'NUM'},
+      {type: 'BREAK'},
+      {type: 'NUM', num: 9},
+      {type: 'NUM', num: 10},
+      {type: 'NEXT', num: 2}
+    ]
+
+    expect(slice).toMatchObject(expected)
+  })
+
+  it('ensures that the current page is surrounded by the right number of pages', () => {
+    const model = buildPaginationModel(10, 5, true, 1, 1)
+    const expected = [
+      {type: 'PREV', num: 4},
+      {type: 'NUM', num: 1},
+      {type: 'BREAK'},
+      {type: 'NUM', num: 4},
+      {type: 'NUM', num: 5, selected: true},
+      {type: 'NUM', num: 6},
+      {type: 'BREAK'},
+      {type: 'NUM', num: 10},
+      {type: 'NEXT', num: 6}
+    ]
+    expect(model).toMatchObject(expected)
+  })
+
+  it('adds items to the right if it hits bounds to the left', () => {
+    const model = buildPaginationModel(15, 2, true, 1, 1)
+    const expected = [
+      {type: 'PREV', num: 1},
+      {type: 'NUM', num: 1},
+      {type: 'NUM', num: 2, selected: true},
+      {type: 'NUM', num: 3},
+      // normally with a surround of 1, only 1 and 3 would be shown
+      // however, since 1 was already shown, we extend to 4
+      {type: 'NUM', num: 4},
+      {type: 'BREAK'}
+    ]
+    expect(first(model, 6)).toMatchObject(expected)
+  })
+
+  it('adds items to the left if it hits bounds to the right', () => {
+    const model = buildPaginationModel(15, 14, true, 1, 1)
+    const expected = [
+      // normally with a surround of 1, only 13 and 15 would be shown
+      // however, since 15 was already shown, we extend to 12
+      {type: 'BREAK'},
+      {type: 'NUM', num: 12},
+      {type: 'NUM', num: 13},
+      {type: 'NUM', num: 14, selected: true},
+      {type: 'NUM', num: 15},
+      {type: 'NEXT', num: 15}
+    ]
+    expect(last(model, 6)).toMatchObject(expected)
+  })
+
+  it('correctly creates breaks next to the next/prev links when margin is 0', () => {
+    const model = buildPaginationModel(10, 5, true, 0, 1)
+    const expected = [
+      {type: 'PREV'},
+      {type: 'BREAK', num: 1},
+      {type: 'NUM', num: 4},
+      {type: 'NUM', num: 5, selected: true},
+      {type: 'NUM', num: 6},
+      {type: 'BREAK', num: 10},
+      {type: 'NEXT'}
+    ]
+    expect(model).toMatchObject(expected)
+  })
+})