@primer/components 32.0.2-rc.859381a1 → 32.1.1-rc.b4502a34

package/src/__tests__/ActionList2.test.tsx

@@ -1,11 +1,12 @@
-import {cleanup, render as HTMLRender} from '@testing-library/react'
+import {cleanup, render as HTMLRender, waitFor, fireEvent} from '@testing-library/react'
 import 'babel-polyfill'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import React from 'react'
 import theme from '../theme'
 import {ActionList} from '../ActionList2'
-import {behavesAsComponent, checkExports} from '../utils/testing'
+import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing'
 import {BaseStyles, ThemeProvider, SSRProvider} from '..'
+import '@testing-library/jest-dom'
 expect.extend(toHaveNoViolations)
 
 function SimpleActionList(): JSX.Element {
@@ -26,6 +27,31 @@ function SimpleActionList(): JSX.Element {
   )
 }
 
+const projects = [
+  {name: 'Primer Backlog', scope: 'GitHub'},
+  {name: 'Primer React', scope: 'github/primer'},
+  {name: 'Disabled Project', scope: 'github/primer', disabled: true}
+]
+function SingleSelectListStory(): JSX.Element {
+  const [selectedIndex, setSelectedIndex] = React.useState(0)
+
+  return (
+    <ActionList selectionVariant="single" showDividers role="listbox" aria-label="Select a project">
+      {projects.map((project, index) => (
+        <ActionList.Item
+          key={index}
+          role="option"
+          selected={index === selectedIndex}
+          onSelect={() => setSelectedIndex(index)}
+          disabled={project.disabled}
+        >
+          {project.name}
+        </ActionList.Item>
+      ))}
+    </ActionList>
+  )
+}
+
 describe('ActionList', () => {
   behavesAsComponent({
     Component: ActionList,
@@ -44,4 +70,87 @@ describe('ActionList', () => {
     expect(results).toHaveNoViolations()
     cleanup()
   })
+
+  it('should fire onSelect on click and keypress', async () => {
+    const component = HTMLRender(<SingleSelectListStory />)
+    const options = await waitFor(() => component.getAllByRole('option'))
+
+    expect(options[0]).toHaveAttribute('aria-selected', 'true')
+    expect(options[1]).toHaveAttribute('aria-selected', 'false')
+
+    fireEvent.click(options[1])
+
+    expect(options[0]).toHaveAttribute('aria-selected', 'false')
+    expect(options[1]).toHaveAttribute('aria-selected', 'true')
+
+    // We pass keycode here to navigate a implementation detail in react-testing-library
+    // https://github.com/testing-library/react-testing-library/issues/269#issuecomment-455854112
+    fireEvent.keyPress(options[0], {key: 'Enter', charCode: 13})
+
+    expect(options[0]).toHaveAttribute('aria-selected', 'true')
+    expect(options[1]).toHaveAttribute('aria-selected', 'false')
+
+    fireEvent.keyPress(options[1], {key: ' ', charCode: 32})
+
+    expect(options[0]).toHaveAttribute('aria-selected', 'false')
+    expect(options[1]).toHaveAttribute('aria-selected', 'true')
+
+    cleanup()
+  })
+
+  it('should skip onSelect on disabled items', async () => {
+    const component = HTMLRender(<SingleSelectListStory />)
+    const options = await waitFor(() => component.getAllByRole('option'))
+
+    expect(options[0]).toHaveAttribute('aria-selected', 'true')
+    expect(options[2]).toHaveAttribute('aria-selected', 'false')
+
+    fireEvent.click(options[2])
+
+    expect(options[0]).toHaveAttribute('aria-selected', 'true')
+    expect(options[2]).toHaveAttribute('aria-selected', 'false')
+
+    fireEvent.keyPress(options[2], {key: 'Enter', charCode: 13})
+
+    expect(options[0]).toHaveAttribute('aria-selected', 'true')
+    expect(options[2]).toHaveAttribute('aria-selected', 'false')
+
+    cleanup()
+  })
+
+  it('should throw when selected is provided without a selectionVariant on parent', async () => {
+    // we expect console.error to be called, so we suppress that in the test
+    const mockError = jest.spyOn(console, 'error').mockImplementation(() => jest.fn())
+
+    expect(() => {
+      HTMLRender(
+        <ActionList showDividers role="listbox" aria-label="Select a project">
+          <ActionList.Item role="option" selected={true}>
+            Primer React
+          </ActionList.Item>
+        </ActionList>
+      )
+    }).toThrow('For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined')
+
+    cleanup()
+    mockError.mockRestore()
+  })
+
+  it('should not crash when clicking an item without an onSelect', async () => {
+    const component = HTMLRender(
+      <ActionList role="listbox">
+        <ActionList.Item role="option">Primer React</ActionList.Item>
+      </ActionList>
+    )
+    const option = await waitFor(() => component.getByRole('option'))
+    expect(option).toBeInTheDocument()
+
+    fireEvent.click(option)
+    fireEvent.keyPress(option, {key: 'Enter', charCode: 13})
+    expect(option).toBeInTheDocument()
+
+    cleanup()
+  })
+
+  checkStoriesForAxeViolations('ActionList2')
 })

package/src/__tests__/Checkbox.test.tsx

@@ -0,0 +1,155 @@
+import React from 'react'
+import {Checkbox} from '..'
+import {behavesAsComponent, checkExports} from '../utils/testing'
+import {render, cleanup} from '@testing-library/react'
+import {toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+import '@testing-library/jest-dom'
+import userEvent from '@testing-library/user-event'
+
+expect.extend(toHaveNoViolations)
+
+describe('Checkbox', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+    cleanup()
+  })
+  behavesAsComponent({Component: Checkbox})
+
+  checkExports('Checkbox', {
+    default: Checkbox
+  })
+
+  it('renders a valid checkbox input', () => {
+    const {getByRole} = render(<Checkbox />)
+
+    const checkbox = getByRole('checkbox')
+
+    expect(checkbox).toBeDefined()
+  })
+
+  it('renders an unchecked checkbox by default', () => {
+    const {getByRole} = render(<Checkbox />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox.checked).toEqual(false)
+  })
+
+  it('renders an active checkbox when checked attribute is passed', () => {
+    const handleChange = jest.fn()
+    const {getByRole} = render(<Checkbox checked onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox.checked).toEqual(true)
+  })
+
+  it('accepts a change handler that can alter the checkbox state', () => {
+    const handleChange = jest.fn()
+    const {getByRole} = render(<Checkbox onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox.checked).toEqual(false)
+
+    userEvent.click(checkbox)
+    expect(handleChange).toHaveBeenCalled()
+    expect(checkbox.checked).toEqual(true)
+
+    userEvent.click(checkbox)
+    expect(handleChange).toHaveBeenCalled()
+    expect(checkbox.checked).toEqual(false)
+  })
+
+  it('renders an indeterminate prop correctly', () => {
+    const handleChange = jest.fn()
+    const {getByRole} = render(<Checkbox indeterminate checked onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox.indeterminate).toEqual(true)
+    expect(checkbox.checked).toEqual(false)
+  })
+
+  it('renders an inactive checkbox state correctly', () => {
+    const handleChange = jest.fn()
+    const {getByRole, rerender} = render(<Checkbox disabled onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox.disabled).toEqual(true)
+    expect(checkbox.checked).toEqual(false)
+    expect(checkbox).toHaveAttribute('aria-disabled', 'true')
+
+    userEvent.click(checkbox)
+
+    expect(checkbox.disabled).toEqual(true)
+    expect(checkbox.checked).toEqual(false)
+    expect(checkbox).toHaveAttribute('aria-disabled', 'true')
+
+    // remove disabled attribute and retest
+    rerender(<Checkbox onChange={handleChange} />)
+
+    expect(checkbox).toHaveAttribute('aria-disabled', 'false')
+  })
+
+  it('renders an uncontrolled component correctly', () => {
+    const {getByRole} = render(<Checkbox defaultChecked />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox.checked).toEqual(true)
+
+    userEvent.click(checkbox)
+
+    expect(checkbox.checked).toEqual(false)
+  })
+
+  it('renders an aria-checked attribute correctly', () => {
+    const handleChange = jest.fn()
+    const {getByRole, rerender} = render(<Checkbox checked={false} onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox).toHaveAttribute('aria-checked', 'false')
+
+    rerender(<Checkbox checked={true} onChange={handleChange} />)
+
+    expect(checkbox).toHaveAttribute('aria-checked', 'true')
+
+    rerender(<Checkbox indeterminate checked onChange={handleChange} />)
+
+    expect(checkbox).toHaveAttribute('aria-checked', 'mixed')
+  })
+
+  it('renders an invalid aria state when validation prop indicates an error', () => {
+    const handleChange = jest.fn()
+    const {getByRole, rerender} = render(<Checkbox onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox).toHaveAttribute('aria-invalid', 'false')
+
+    rerender(<Checkbox onChange={handleChange} validationStatus="success" />)
+
+    expect(checkbox).toHaveAttribute('aria-invalid', 'false')
+
+    rerender(<Checkbox onChange={handleChange} validationStatus="error" />)
+
+    expect(checkbox).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('renders an aria state indicating the field is required', () => {
+    const handleChange = jest.fn()
+    const {getByRole, rerender} = render(<Checkbox onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox).toHaveAttribute('aria-required', 'false')
+
+    rerender(<Checkbox onChange={handleChange} required />)
+
+    expect(checkbox).toHaveAttribute('aria-required', 'true')
+  })
+})

package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap

@@ -468,6 +468,9 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .c10 {
@@ -510,6 +513,7 @@ Array [
 .c6 rect {
   fill: #ffffff;
   stroke: #d0d7de;
+  shape-rendering: auto;
 }
 
 .c6 path {
@@ -1375,11 +1379,15 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .c6 rect {
   fill: #ffffff;
   stroke: #d0d7de;
+  shape-rendering: auto;
 }
 
 .c6 path {
@@ -2192,11 +2200,15 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .c10 rect {
   fill: #ffffff;
   stroke: #d0d7de;
+  shape-rendering: auto;
 }
 
 .c10 path {
@@ -2207,6 +2219,7 @@ Array [
 .c6 rect {
   fill: #0969da;
   stroke: #0969da;
+  shape-rendering: auto;
 }
 
 .c6 path {

package/src/__tests__/__snapshots__/Checkbox.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox renders consistently 1`] = `
+.c0 {
+  cursor: pointer;
+}
+
+<input
+  aria-checked="false"
+  aria-disabled="false"
+  aria-invalid="false"
+  aria-required="false"
+  className="c0"
+  type="checkbox"
+/>
+`;