message: test(clickable): add a11y test, streamline tests
diff: import * as React from "react"
  -import { render, userEvent, fireEvent } from "@chakra-ui/test-utils"
  +import { render, userEvent, fireEvent, screen } from "@chakra-ui/test-utils"
  import { chakra, forwardRef } from "@chakra-ui/system"
  import { ClickableProps } from "../stories/use-clickable.stories"
  import { useClickable } from "../src"
  @@ -9,9 +9,10 @@ const Clickable: React.FC<ClickableProps> = forwardRef((props, ref) => {
  return <chakra.button display="inline-flex" {...clickable} />
  })
  +describe("<Clickable />", () => {
  test("should render correctly", () => {
  - const tools = render(<Clickable>clickable</Clickable>)
  - expect(tools.getByText("clickable")).toMatchInlineSnapshot(`
  + render(<Clickable>clickable</Clickable>)
  + expect(screen.getByText("clickable")).toMatchInlineSnapshot(`
  .emotion-0 {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  @@ -29,12 +30,12 @@ test("should render correctly", () => {
  })
  test("should render when disabled and focusable", () => {
  - const tools = render(
  + render(
  <Clickable isDisabled isFocusable>
  clickable
  </Clickable>,
  )
  - expect(tools.getByText("clickable")).toMatchInlineSnapshot(`
  + expect(screen.getByText("clickable")).toMatchInlineSnapshot(`
  .emotion-0 {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  @@ -54,8 +55,8 @@ test("should render when disabled and focusable", () => {
  test("should click correctly", () => {
  const fn = jest.fn()
  - const tools = render(<Clickable onClick={fn}>clickable</Clickable>)
  - const clickable = tools.getByText("clickable")
  + render(<Clickable onClick={fn}>clickable</Clickable>)
  + const clickable = screen.getByText("clickable")
  expect(fn).toHaveBeenCalledTimes(0)
  userEvent.click(clickable)
  @@ -65,20 +66,20 @@ test("should click correctly", () => {
  test("should not click if disabled", () => {
  const fn = jest.fn()
  - const tools = render(
  + render(
  <Clickable onClick={fn} isDisabled>
  clickable
  </Clickable>,
  )
  - const clickable = tools.getByText("clickable")
  + const clickable = screen.getByText("clickable")
  userEvent.click(clickable)
  expect(fn).toHaveBeenCalledTimes(0)
  })
  test("should not focus if disabled", () => {
  - const tools = render(<Clickable isDisabled>clickable</Clickable>)
  - const clickable = tools.getByText("clickable")
  + render(<Clickable isDisabled>clickable</Clickable>)
  + const clickable = screen.getByText("clickable")
  expect(clickable).not.toHaveFocus()
  fireEvent.focus(clickable)
  @@ -87,13 +88,13 @@ test("should not focus if disabled", () => {
  test("non-native: should click on press `space` or `enter`", () => {
  const fn = jest.fn()
  - const tools = render(
  + render(
  <Clickable as="div" onClick={fn}>
  clickable
  </Clickable>,
  )
  - const clickable = tools.getByText("clickable")
  + const clickable = screen.getByText("clickable")
  fireEvent.keyDown(clickable, { key: "Enter" })
  expect(fn).toHaveBeenCalledTimes(1)
  @@ -103,3 +104,4 @@ test("non-native: should click on press `space` or `enter`", () => {
  expect(fn).toHaveBeenCalledTimes(2)
  })
  +})
  