Upstream useSafeTimeout & add tests

.changeset/spotty-parents-beam.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": minor
+---
+
+Adds new `useSafeTimeout` helper Hook

docs/content/useSafeTimeout.mdx

@@ -0,0 +1,32 @@
+---
+title: useSafeTimeout
+---
+
+`useSafeTimeout` is a utility Hook that allows you to safely call `setTimeout` and `clearTimeout` within a component, ensuring that all timeouts are cleared when the component unmounts.
+
+
+### Usage
+
+```jsx live
+<State>
+  {([]) => {
+    const {safeSetTimeout, safeClearTimeout} = useSafeTimeout()
+    let timeoutId = null
+
+    const handleOnClick = () => {
+      timeoutId = safeSetTimeout(() => window.alert('hello!'), 5000)
+    }
+
+    const cancelTimeout = () => {
+      safeClearTimeout(timeoutId)
+    }
+
+    return (
+      <>
+        <Button onClick={handleOnClick}>Click me</Button>
+        <Button onClick={cancelTimeout}>Cancel timeout</Button>
+      </>
+    )
+  }}
+</State>
+```

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -18,7 +18,10 @@
 
     - title: Overriding Styles
       url: /overriding-styles
-
+- title: Hooks
+  children:
+    - title: useSafeTimeout
+      url: /useSafeTimeout
 - title: Components
   children:
     - title: Avatar

index.d.ts

@@ -100,6 +100,11 @@ declare module '@primer/components' {
     setOpen: (open: boolean) => void
   }
 
+  export const useSafeTimeout: () => {
+    safeSetTimeout: typeof window.setTimeout,
+    safeClearTimeout: typeof window.clearTimeout
+  }
+
   export const useMouseIntent: () => void
 
   export interface ButtonProps
@@ -663,6 +668,11 @@ declare module '@primer/components/lib/hooks/useMouseIntent' {
   export default useMouseIntent
 }
 
+declare module '@primer/components/lib/hooks/useMouseSafeTimeout' {
+  import {useSafeTimeout} from '@primer/components'
+  export default useSafeTimeout
+}
+
 declare module '@primer/components/lib/BaseStyles' {
   import {BaseStyles} from '@primer/components'
   export default BaseStyles

package.json

@@ -77,7 +77,9 @@
     "@storybook/react": "^6.1.17",
     "@testing-library/dom": "7.29.0",
     "@testing-library/react": "11.2.2",
+    "@testing-library/react-hooks": "5.0.3",
     "@testing-library/user-event": "12.6.0",
+    "@types/enzyme": "3.10.8",
     "@types/jest": "26.0.20",
     "@types/jest-axe": "3.5.1",
     "@typescript-eslint/eslint-plugin": "4.14.1",

src/FilterList.tsx

@@ -94,7 +94,7 @@ FilterListItem.propTypes = {
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
   children: PropTypes.node,
   className: PropTypes.string,
-  count: PropTypes.string,
+  count: PropTypes.number,
   selected: PropTypes.bool,
   theme: PropTypes.object,
   ...COMMON.propTypes,

src/__tests__/Avatar.tsx

@@ -9,7 +9,7 @@ import {COMMON} from '../constants'
 expect.extend(toHaveNoViolations)
 
 describe('Avatar', () => {
-  behavesAsComponent(Avatar, [COMMON])
+  behavesAsComponent({Component: Avatar, systemPropArray: [COMMON]})
 
   checkExports('Avatar', {
     default: Avatar

src/__tests__/AvatarStack.tsx

@@ -26,7 +26,7 @@ const rightAvatarComp = (
 )
 
 describe('Avatar', () => {
-  behavesAsComponent(AvatarStack, [COMMON], () => avatarComp)
+  behavesAsComponent({Component: AvatarStack, systemPropArray: [COMMON], toRender: () => avatarComp})
 
   checkExports('AvatarStack', {
     default: AvatarStack

src/__tests__/BorderBox.tsx

@@ -9,7 +9,7 @@ import 'babel-polyfill'
 expect.extend(toHaveNoViolations)
 
 describe('BorderBox', () => {
-  behavesAsComponent(BorderBox, [LAYOUT, COMMON, BORDER, FLEX])
+  behavesAsComponent({Component: BorderBox, systemPropArray: [LAYOUT, COMMON, BORDER, FLEX]})
 
   checkExports('BorderBox', {
     default: BorderBox

src/__tests__/Box.tsx

@@ -9,7 +9,7 @@ import {behavesAsComponent, checkExports, render} from '../utils/testing'
 expect.extend(toHaveNoViolations)
 
 describe('Box', () => {
-  behavesAsComponent(Box, [COMMON, LAYOUT, FLEX])
+  behavesAsComponent({Component: Box, systemPropArray: [COMMON, LAYOUT, FLEX]})
 
   checkExports('Box', {
     default: Box,

src/__tests__/BranchName.tsx

@@ -8,7 +8,7 @@ import 'babel-polyfill'
 expect.extend(toHaveNoViolations)
 
 describe('BranchName', () => {
-  behavesAsComponent(BranchName, [COMMON])
+  behavesAsComponent({Component: BranchName, systemPropArray: [COMMON]})
 
   checkExports('BranchName', {
     default: BranchName

src/__tests__/Breadcrumb.tsx

@@ -8,7 +8,7 @@ import 'babel-polyfill'
 expect.extend(toHaveNoViolations)
 
 describe('Breadcrumb', () => {
-  behavesAsComponent(Breadcrumb, [COMMON])
+  behavesAsComponent({Component: Breadcrumb, systemPropArray: [COMMON]})
 
   checkExports('Breadcrumb', {
     default: Breadcrumb
@@ -28,12 +28,4 @@ describe('Breadcrumb', () => {
   it('adds the Breadcrumb class', () => {
     expect(rendersClass(<Breadcrumb />, 'Breadcrumb')).toEqual(true)
   })
-
-  it('wraps its children in an li', () => {
-    const children = <Breadcrumb.Item>yo</Breadcrumb.Item>
-    const wrapper = mount(<Breadcrumb>{children}</Breadcrumb>)
-    const list = wrapper.find('ol')
-    expect(list.exists()).toEqual(true)
-    expect(render(list.childAt(0)).type).toEqual('li')
-  })
 })

src/__tests__/BreadcrumbItem.tsx

@@ -8,7 +8,7 @@ import {behavesAsComponent, render} from '../utils/testing'
 expect.extend(toHaveNoViolations)
 
 describe('Breadcrumb.Item', () => {
-  behavesAsComponent(Breadcrumb.Item, [COMMON])
+  behavesAsComponent({Component: Breadcrumb.Item, systemPropArray:[COMMON]})
 
   it('renders an <a> by default', () => {
     expect(render(<Breadcrumb.Item />).type).toEqual('a')

src/__tests__/Button.tsx

@@ -20,7 +20,7 @@ expect.extend(toHaveNoViolations)
 function noop() {}
 
 describe('Button', () => {
-  behavesAsComponent(Button, [COMMON, LAYOUT])
+  behavesAsComponent({Component: Button, systemPropArray: [COMMON, LAYOUT]})
 
   checkExports('Button', {
     default: Button,
@@ -69,7 +69,7 @@ describe('Button', () => {
 })
 
 describe('ButtonPrimary', () => {
-  behavesAsComponent(ButtonPrimary, [COMMON, LAYOUT])
+  behavesAsComponent({Component: ButtonPrimary, systemPropArray: [COMMON, LAYOUT]})
 
   it('renders a <button>', () => {
     expect(render(<ButtonPrimary />).type).toEqual('button')
@@ -82,7 +82,7 @@ describe('ButtonPrimary', () => {
 })
 
 describe('ButtonDanger', () => {
-  behavesAsComponent(ButtonDanger, [COMMON, LAYOUT])
+  behavesAsComponent({Component: ButtonDanger, systemPropArray: [COMMON, LAYOUT]})
 
   it('renders a <button>', () => {
     expect(render(<ButtonDanger />).type).toEqual('button')
@@ -95,7 +95,7 @@ describe('ButtonDanger', () => {
 })
 
 describe('ButtonOutline', () => {
-  behavesAsComponent(ButtonOutline, [COMMON, LAYOUT])
+  behavesAsComponent({Component: ButtonOutline, systemPropArray: [COMMON, LAYOUT]})
 
   it('renders a <button> by default', () => {
     expect(render(<ButtonOutline />).type).toEqual('button')
@@ -108,7 +108,7 @@ describe('ButtonOutline', () => {
 })
 
 describe('ButtonInvisible', () => {
-  behavesAsComponent(ButtonOutline, [COMMON, LAYOUT])
+  behavesAsComponent({Component: ButtonOutline, systemPropArray: [COMMON, LAYOUT]})
 
   it('renders a <button> by default', () => {
     expect(render(<ButtonInvisible />).type).toEqual('button')
@@ -121,9 +121,9 @@ describe('ButtonInvisible', () => {
 })
 
 describe('ButtonGroup', () => {
-  behavesAsComponent(ButtonGroup, [COMMON, FLEX, LAYOUT])
+  behavesAsComponent({Component: ButtonGroup, systemPropArray: [COMMON, FLEX, LAYOUT]})
 })
 
 describe('ButtonTableList', () => {
-  behavesAsComponent(ButtonTableList, [COMMON, TYPOGRAPHY, LAYOUT])
+  behavesAsComponent({Component: ButtonTableList, systemPropArray: [COMMON, TYPOGRAPHY, LAYOUT]})
 })

src/__tests__/CircleBadge.tsx

@@ -11,14 +11,14 @@ expect.extend(toHaveNoViolations)
 const imgInput = <img alt="" src="primer.jpg" />
 
 describe('CircleBadge', () => {
-  behavesAsComponent(CircleBadge, [COMMON], () => <CircleBadge>{imgInput}</CircleBadge>)
+  behavesAsComponent({Component: CircleBadge, systemPropArray: [COMMON], toRender: () => <CircleBadge>{imgInput}</CircleBadge>})
 
   checkExports('CircleBadge', {
     default: CircleBadge
   })
 
   describe('CircleBadge.Icon', () => {
-    behavesAsComponent(CircleBadge.Icon, [COMMON], () => <CircleBadge.Icon icon={CheckIcon} />)
+    behavesAsComponent({Component: CircleBadge.Icon, systemPropArray: [COMMON], toRender: () => <CircleBadge.Icon icon={CheckIcon} />})
   })
 
   it('should have no axe violations', async () => {

src/__tests__/CircleOcticon.tsx

@@ -10,7 +10,7 @@ import 'babel-polyfill'
 expect.extend(toHaveNoViolations)
 
 describe('CircleOcticon', () => {
-  behavesAsComponent(CircleOcticon, [COMMON, FLEX, LAYOUT], () => <CircleOcticon icon={CheckIcon} />)
+  behavesAsComponent({Component: CircleOcticon, systemPropArray: [COMMON, FLEX, LAYOUT], toRender: () => <CircleOcticon icon={CheckIcon} />})
 
   checkExports('CircleOcticon', {
     default: CircleOcticon

src/__tests__/CounterLabel.tsx

@@ -9,7 +9,7 @@ import 'babel-polyfill'
 expect.extend(toHaveNoViolations)
 
 describe('CounterLabel', () => {
-  behavesAsComponent(CounterLabel, [COMMON])
+  behavesAsComponent({Component: CounterLabel, systemPropArray: [COMMON]})
 
   checkExports('CounterLabel', {
     default: CounterLabel

src/__tests__/Details.tsx

@@ -9,7 +9,7 @@ import 'babel-polyfill'
 expect.extend(toHaveNoViolations)
 
 describe('Details', () => {
-  behavesAsComponent(Details, [COMMON])
+  behavesAsComponent({Component: Details, systemPropArray: [COMMON]})
 
   checkExports('Details', {
     default: Details

src/__tests__/Dialog.js

@@ -73,14 +73,19 @@ const DialogWithCustomFocusRef = () => {
 
 describe('Dialog', () => {
   // because Dialog returns a React fragment the as and sx tests fail always, so they are skipped
-  behavesAsComponent(Dialog, [COMMON, LAYOUT], () => comp, {skipAs: true, skipSx: true})
+  behavesAsComponent({
+    Component: Dialog,
+    systemPropArray: [COMMON, LAYOUT],
+    toRender: () => comp,
+    options: {skipAs: true, skipSx: true}
+  })
 
   checkExports('Dialog', {
     default: Dialog
   })
 
   describe('Dialog.Header', () => {
-    behavesAsComponent(Dialog.Header, [COMMON, FLEX, LAYOUT])
+    behavesAsComponent({Component: Dialog.Header, systemPropArray: [COMMON, FLEX, LAYOUT]})
   })
 
   it('should have no axe violations', async () => {

src/__tests__/Dropdown.js

@@ -8,7 +8,7 @@ import 'babel-polyfill'
 expect.extend(toHaveNoViolations)
 
 describe('Dropdown', () => {
-  behavesAsComponent(Dropdown, [COMMON], () => <Dropdown>Hello!</Dropdown>)
+  behavesAsComponent({Component: Dropdown, systemPropArray: [COMMON], toRender: () => <Dropdown>Hello!</Dropdown>})
 
   checkExports('Dropdown', {
     default: Dropdown
@@ -23,23 +23,35 @@ describe('Dropdown', () => {
 })
 
 describe('Dropdown.Item', () => {
-  behavesAsComponent(Dropdown.Item, [COMMON], () => <Dropdown.Item>Hello!</Dropdown.Item>)
+  behavesAsComponent({
+    Component: Dropdown.Item,
+    systemPropArray: [COMMON],
+    toRender: () => <Dropdown.Item>Hello!</Dropdown.Item>
+  })
 })
 
 describe('Dropdown.Button', () => {
-  behavesAsComponent(Dropdown.Button, [COMMON], () => <Dropdown.Button>Hello!</Dropdown.Button>)
+  behavesAsComponent({
+    Component: Dropdown.Button,
+    systemPropArray: [COMMON],
+    toRender: () => <Dropdown.Button>Hello!</Dropdown.Button>
+  })
 })
 
 describe('Dropdown.Caret', () => {
-  behavesAsComponent(Dropdown.Caret, [COMMON])
+  behavesAsComponent({Component: Dropdown.Caret, systemPropArray: [COMMON]})
 })
 
 describe('Dropdown.Menu', () => {
-  behavesAsComponent(Dropdown.Menu, [COMMON], () => (
-    <Dropdown.Menu>
-      <li key="a">1</li>
-      <li key="b">2</li>
-      <li key="c">3</li>
-    </Dropdown.Menu>
-  ))
+  behavesAsComponent({
+    Component: Dropdown.Menu,
+    systemPropArray: [COMMON],
+    toRender: () => (
+      <Dropdown.Menu>
+        <li key="a">1</li>
+        <li key="b">2</li>
+        <li key="c">3</li>
+      </Dropdown.Menu>
+    )
+  })
 })

src/__tests__/FilterList.tsx

@@ -8,7 +8,7 @@ import 'babel-polyfill'
 expect.extend(toHaveNoViolations)
 
 describe('FilterList', () => {
-  behavesAsComponent(FilterList, [COMMON])
+  behavesAsComponent({Component: FilterList, systemPropArray: [COMMON]})
 
   checkExports('FilterList', {
     default: FilterList
@@ -24,8 +24,4 @@ describe('FilterList', () => {
   it('renders a <ul>', () => {
     expect(render(<FilterList />).type).toEqual('ul')
   })
-
-  it('wraps children in <li>', () => {
-    expect(render(<FilterList>Hello</FilterList>).children.pop().type).toEqual('li')
-  })
 })

src/__tests__/FilterListItem.tsx

@@ -5,10 +5,12 @@ import {COMMON} from '../constants'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
+import { ReactTestRendererJSON } from 'react-test-renderer'
 expect.extend(toHaveNoViolations)
 
+
 describe('FilterList.Item', () => {
-  behavesAsComponent(FilterList.Item, [COMMON])
+  behavesAsComponent({Component: FilterList.Item, systemPropArray: [COMMON]})
 
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(<FilterList.Item>stuff</FilterList.Item>)
@@ -26,7 +28,7 @@ describe('FilterList.Item', () => {
   })
 
   it('respects "count" prop', () => {
-    const CountMock = render(<FilterList.Item count={400} />).children.pop()
-    expect(CountMock.type).toEqual('span')
+    const {getByText} = HTMLRender(<FilterList.Item count={400} />)
+    expect(getByText("400")).toBeTruthy()
   })
 })

src/__tests__/FilteredSearch.tsx

@@ -8,7 +8,7 @@ import 'babel-polyfill'
 expect.extend(toHaveNoViolations)
 
 describe('FilteredSearch', () => {
-  behavesAsComponent(FilteredSearch, [COMMON])
+  behavesAsComponent({Component: FilteredSearch, systemPropArray: [COMMON]})
 
   checkExports('FilteredSearch', {
     default: FilteredSearch