Merge pull request #10 from rpearce/redo-all-the-things

Rewrite all the things for latest react

Author: rpearce

.eslintrc

@@ -14,7 +14,8 @@
     "sourceType": "module"
   },
   "plugins": [
-    "react"
+    "react",
+    "react-hooks"
   ],
   "rules": {
     "array-bracket-spacing": [ "error", "always" ],
@@ -24,32 +25,33 @@
     "comma-dangle": [ "error", "never" ],
     "computed-property-spacing": [ "error", "never" ],
     "curly": [ "error", "all" ],
-    "eqeqeq": [ "error", "always" ],
     "eol-last": [ "error", "always" ],
+    "eqeqeq": [ "error", "always" ],
     "func-call-spacing": [ "error", "never" ],
     "indent": [ "error", 2 ],
     "linebreak-style": [ "error", "unix" ],
     "no-console": "off",
     "no-else-return": [ "error" ],
     "no-empty-function": [ "error" ],
-    "no-multiple-empty-lines": [2, { "max": 1, "maxEOF": 1 }],
     "no-extra-parens": [ "error" ],
     "no-lone-blocks": [ "error" ],
     "no-multi-assign": [ "error" ],
+    "no-multiple-empty-lines": [2, { "max": 1, "maxEOF": 1 }],
     "no-new": [ "error" ],
     "no-new-func": [ "error" ],
     "no-param-reassign": [ "error" ],
     "no-return-assign": [ "error" ],
     "no-sequences": [ "error" ],
     "no-trailing-spaces": [ "error" ],
+    "no-useless-return": [ "error" ],
     "no-void": [ "error" ],
     "no-with": [ "error" ],
-    "no-useless-return": [ "error" ],
     "object-curly-spacing": [ "error", "always" ],
     "quotes": [ "error", "single" ],
+    "react-hooks/rules-of-hooks": "error",
+    "react/jsx-no-undef": "error",
     "react/jsx-uses-react": "error",
     "react/jsx-uses-vars": "error",
-    "react/jsx-no-undef": "error",
     "react/prop-types": 0,
     "semi": [ "error", "never" ],
     "yoda": [ "error" ]

__tests__/index.js

@@ -0,0 +1,323 @@
+import React, { createRef } from 'react'
+import { fireEvent, render } from 'react-testing-library'
+import 'jest-dom/extend-expect'
+
+import ButtonA11y from '../source'
+
+test('renders with aria-label, handles click', () => {
+  const onClick = jest.fn()
+  const { getByLabelText } = render(
+    <ButtonA11y
+      aria-label="Mock Label"
+      className="mock-className"
+      onClick={onClick}
+    />
+  )
+  const el = getByLabelText('Mock Label')
+
+  expect(el).toBeInTheDocument()
+
+  fireEvent.click(el)
+
+  expect(onClick).toHaveBeenCalledWith(expect.any(Object))
+})
+
+test('renders with children, handles click', () => {
+  const onClick = jest.fn()
+  const { getByText } = render(
+    <ButtonA11y
+      className="mock-className"
+      onClick={onClick}
+    >
+      Click Me
+    </ButtonA11y>
+  )
+  const el = getByText('Click Me')
+
+  expect(el).toBeInTheDocument()
+
+  fireEvent.click(el)
+
+  expect(onClick).toHaveBeenCalledWith(expect.any(Object))
+})
+
+test('renders with button role and tabIndex 0', () => {
+  const onClick = jest.fn()
+  const { getByText } = render(
+    <ButtonA11y
+      className="mock-className"
+      onClick={onClick}
+    >
+      Click Me
+    </ButtonA11y>
+  )
+  const el = getByText('Click Me')
+
+  expect(el).toBeInTheDocument()
+  expect(el.getAttribute('role')).toEqual('button')
+  expect(el.getAttribute('tabindex')).toEqual('0')
+})
+
+test('calls onKeyDown and onClick when key is Enter', () => {
+  const onClick = jest.fn()
+  const onKeyDown = jest.fn()
+  const { getByText } = render(
+    <ButtonA11y
+      className="mock-className"
+      onKeyDown={onKeyDown}
+      onClick={onClick}
+      type=""
+    >
+      Click Me
+    </ButtonA11y>
+  )
+  const el = getByText('Click Me')
+
+  expect(el).toBeInTheDocument()
+
+  fireEvent.keyDown(el, { key: 'Enter' })
+
+  expect(onKeyDown).toHaveBeenCalledWith(expect.any(Object))
+  expect(onClick).toHaveBeenCalledWith(expect.any(Object))
+})
+
+test('calls onKeyDown and onClick when key is empty space', () => {
+  const onClick = jest.fn()
+  const onKeyDown = jest.fn()
+  const { getByText } = render(
+    <ButtonA11y
+      className="mock-className"
+      onKeyDown={onKeyDown}
+      onClick={onClick}
+      type=""
+    >
+      Click Me
+    </ButtonA11y>
+  )
+  const el = getByText('Click Me')
+
+  expect(el).toBeInTheDocument()
+
+  fireEvent.keyDown(el, { key: ' ' })
+
+  expect(onKeyDown).toHaveBeenCalledWith(expect.any(Object))
+  expect(onClick).toHaveBeenCalledWith(expect.any(Object))
+})
+
+test('calls onKeyDown and onClick when key is Spacebar', () => {
+  const onClick = jest.fn()
+  const onKeyDown = jest.fn()
+  const onScroll = jest.fn()
+  const { getByText } = render(
+    <ButtonA11y
+      className="mock-className"
+      onKeyDown={onKeyDown}
+      onClick={onClick}
+      type=""
+    >
+      Click Me
+    </ButtonA11y>
+  )
+  const el = getByText('Click Me')
+
+  global.document.addEventListener('scroll', onScroll)
+
+  expect(el).toBeInTheDocument()
+
+  fireEvent.keyDown(el, { key: 'Spacebar' })
+
+  expect(onKeyDown).toHaveBeenCalledWith(expect.any(Object))
+  expect(onClick).toHaveBeenCalledWith(expect.any(Object))
+  expect(onScroll).not.toHaveBeenCalled()
+})
+
+test('calls onKeyDown and onClick when keyCode is 13', () => {
+  const onClick = jest.fn()
+  const onKeyDown = jest.fn()
+  const { getByText } = render(
+    <ButtonA11y
+      className="mock-className"
+      onKeyDown={onKeyDown}
+      onClick={onClick}
+      type=""
+    >
+      Click Me
+    </ButtonA11y>
+  )
+  const el = getByText('Click Me')
+
+  expect(el).toBeInTheDocument()
+
+  fireEvent.keyDown(el, { keyCode: 13 })
+
+  expect(onKeyDown).toHaveBeenCalledWith(expect.any(Object))
+  expect(onClick).toHaveBeenCalledWith(expect.any(Object))
+})
+
+test('calls onKeyDown and onClick when keyCode is 32', () => {
+  const onClick = jest.fn()
+  const onKeyDown = jest.fn()
+  const { getByText } = render(
+    <ButtonA11y
+      className="mock-className"
+      onKeyDown={onKeyDown}
+      onClick={onClick}
+      type=""
+    >
+      Click Me
+    </ButtonA11y>
+  )
+  const el = getByText('Click Me')
+
+  expect(el).toBeInTheDocument()
+
+  fireEvent.keyDown(el, { keyCode: 32 })
+
+  expect(onKeyDown).toHaveBeenCalledWith(expect.any(Object))
+  expect(onClick).toHaveBeenCalledWith(expect.any(Object))
+})
+
+test('only calls onKeyDown when random key', () => {
+  const onClick = jest.fn()
+  const onKeyDown = jest.fn()
+  const { getByText } = render(
+    <ButtonA11y
+      className="mock-className"
+      onKeyDown={onKeyDown}
+      onClick={onClick}
+      type=""
+    >
+      Click Me
+    </ButtonA11y>
+  )
+  const el = getByText('Click Me')
+
+  expect(el).toBeInTheDocument()
+
+  fireEvent.keyDown(el, { key: 'Delete' })
+
+  expect(onKeyDown).toHaveBeenCalledWith(expect.any(Object))
+  expect(onClick).not.toHaveBeenCalled()
+})
+
+test('only calls onKeyDown when random keyCode', () => {
+  const onClick = jest.fn()
+  const onKeyDown = jest.fn()
+  const { getByText } = render(
+    <ButtonA11y
+      className="mock-className"
+      onKeyDown={onKeyDown}
+      onClick={onClick}
+      type=""
+    >
+      Click Me
+    </ButtonA11y>
+  )
+  const el = getByText('Click Me')
+
+  expect(el).toBeInTheDocument()
+
+  fireEvent.keyDown(el, { keyCode: 17 })
+
+  expect(onKeyDown).toHaveBeenCalledWith(expect.any(Object))
+  expect(onClick).not.toHaveBeenCalled()
+})
+
+test('does not break when onKeyDown not passed', () => {
+  const onClick = jest.fn()
+  const { getByText } = render(
+    <ButtonA11y
+      className="mock-className"
+      onClick={onClick}
+      type=""
+    >
+      Click Me
+    </ButtonA11y>
+  )
+  const el = getByText('Click Me')
+
+  expect(el).toBeInTheDocument()
+
+  fireEvent.keyDown(el, { key: 'Enter' })
+
+  expect(onClick).toHaveBeenCalledWith(expect.any(Object))
+})
+
+test('does not break when onClick not passed', () => {
+  const onKeyDown = jest.fn()
+  const { getByText } = render(
+    <ButtonA11y
+      className="mock-className"
+      onKeyDown={onKeyDown}
+      type=""
+    >
+      Click Me
+    </ButtonA11y>
+  )
+  const el = getByText('Click Me')
+
+  expect(el).toBeInTheDocument()
+
+  fireEvent.keyDown(el, { key: 'Enter' })
+
+  expect(onKeyDown).toHaveBeenCalledWith(expect.any(Object))
+})
+
+test('renders as div element', () => {
+  const { container, getByText } = render(
+    <ButtonA11y
+      className="mock-className"
+      element="div"
+      onClick={jest.fn()}
+    >
+      Click Me
+    </ButtonA11y>
+  )
+
+  expect(getByText('Click Me')).toBeInTheDocument()
+  expect(container.firstChild.tagName).toEqual('DIV')
+})
+
+test('forwards a ref', () => {
+  const ref = createRef()
+  render(
+    <ButtonA11y
+      className="mock-className"
+      onClick={jest.fn()}
+      ref={ref}
+    >
+      Click Me
+    </ButtonA11y>
+  )
+
+  expect(ref.current).toBeInTheDocument()
+})
+
+test('errors when no children & no aria-label', () => {
+  expect(() => {
+    render(
+      <ButtonA11y
+        className="mock-className"
+        element="span"
+        onClick={jest.fn()}
+      />
+    )
+  }).toThrow(
+    'react-button-a11y: `aria-label` required for accessibility'
+  )
+})
+
+// This is allowed but is unwise for accessibility
+test('renders when not strictMode, no children & no aria-label', () => {
+  const { getByRole } = render(
+    <ButtonA11y
+      className="mock-className"
+      element="span"
+      onClick={jest.fn()}
+      strictMode={false}
+    />
+  )
+  const el = getByRole('button')
+
+  expect(el).toBeInTheDocument()
+})