test: follow testing-library best practices

babel.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  plugins: ['@ant-design-vue/babel-plugin-jsx'],
   presets: [
     [
       '@babel/preset-env',

package.json

@@ -10,9 +10,12 @@
     "vue": "^3.0.0-beta.15"
   },
   "devDependencies": {
+    "@ant-design-vue/babel-plugin-jsx": "^1.0.0-beta.3",
     "@babel/core": "^7.10.4",
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
+    "@testing-library/dom": "^7.21.4",
+    "@testing-library/user-event": "^12.0.11",
     "@types/jest": "^26.0.4",
     "@vue/compiler-sfc": "^3.0.0-beta.15",
     "@vue/test-utils": "^2.0.0-alpha.7",

prettier.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  trailingComma: 'es5',
+  semi: false,
+  singleQuote: true,
+}

src/box/box.spec.tsx

@@ -0,0 +1,39 @@
+import { Box } from '.'
+import { renderJsx, getByText } from '../../test/utils'
+
+describe('Box', () => {
+  it('renders correctly', () => {
+    renderJsx(<Box>foo</Box>)
+    expect(getByText('foo')).toMatchInlineSnapshot(`
+      <div>
+        foo
+      </div>
+    `)
+  })
+
+  it('renders passed attributes', () => {
+    renderJsx(
+      <Box tabIndex="0" class="bar" unicorn>
+        foo
+      </Box>
+    )
+    expect(getByText('foo')).toMatchInlineSnapshot(`
+      <div
+        class="bar"
+        tabindex="0"
+        unicorn="true"
+      >
+        foo
+      </div>
+    `)
+  })
+
+  it('can render as other element types', () => {
+    renderJsx(<Box as="span">foo</Box>)
+    expect(getByText('foo')).toMatchInlineSnapshot(`
+      <span>
+        foo
+      </span>
+    `)
+  })
+})

src/clickable/clickable.spec.tsx

@@ -0,0 +1,73 @@
+import { Clickable } from '.'
+import { renderJsx, getByText, pressSpace, pressEnter } from '../../test/utils'
+
+describe('Clickable', () => {
+  it('renders correctly', () => {
+    renderJsx(<Clickable>foo</Clickable>)
+    expect(getByText('foo')).toMatchInlineSnapshot(`
+      <div
+        tabindex="0"
+      >
+        foo
+      </div>
+    `)
+  })
+
+  it('emits click event on press space', () => {
+    const clickHandler = jest.fn()
+    renderJsx(<Clickable onClick={clickHandler}>foo</Clickable>)
+    pressSpace(getByText('foo'))
+    expect(clickHandler).toBeCalledTimes(1)
+  })
+
+  it('emits no click event on keydown space when disabled', () => {
+    const clickHandler = jest.fn()
+    renderJsx(
+      <Clickable onClick={clickHandler} disabled>
+        foo
+      </Clickable>
+    )
+    pressSpace(getByText('foo'))
+    expect(clickHandler).toBeCalledTimes(0)
+  })
+
+  it('emits only one click event on press space as button', () => {
+    const clickHandler = jest.fn()
+    renderJsx(
+      <Clickable onClick={clickHandler} as="button">
+        foo
+      </Clickable>
+    )
+    pressSpace(getByText('foo'))
+    expect(clickHandler).toBeCalledTimes(1)
+  })
+
+  it('emits click event on press enter', () => {
+    const clickHandler = jest.fn()
+    renderJsx(<Clickable onClick={clickHandler}>foo</Clickable>)
+    pressEnter(getByText('foo'))
+    expect(clickHandler).toBeCalledTimes(1)
+  })
+
+  it('emits no click event on press enter when disabled', () => {
+    const clickHandler = jest.fn()
+    renderJsx(
+      <Clickable onClick={clickHandler} disabled>
+        foo
+      </Clickable>
+    )
+    pressEnter(getByText('foo'))
+    expect(clickHandler).toBeCalledTimes(0)
+  })
+
+  it('emits only one click event on press enter as button', async () => {
+    const clickHandler = jest.fn()
+    renderJsx(
+      <Clickable onClick={clickHandler} as="button">
+        foo
+      </Clickable>
+    )
+    pressEnter(getByText('foo'))
+    expect(clickHandler).toBeCalledTimes(1)
+  })
+})

src/clickable/clickable.ts

@@ -11,8 +11,11 @@ export const clickableProps: ComponentObjectPropsOptions<ClickableProps> = {
 export function useClickable(props: ClickableProps) {
   const tabbable = useTabbable(props)
 
-  function handleKeydown(event: KeyboardEvent) {
-    if (['space', 'enter'].includes(event.key)) {
+  function handleKeydown(event: KeyboardEvent & { target: HTMLElement }) {
+    if (
+      event.target?.tagName !== 'BUTTON' &&
+      [' ', 'Enter'].includes(event.key)
+    ) {
       tabbable.onClick(event)
     }
   }