Add tests

Author: skaptox

jest-setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

jest.config.js

@@ -7,4 +7,5 @@ module.exports = {
   },
   testMatch: ['**/*.spec.js'],
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
 }

package-lock.json

@@ -41,7 +41,10 @@
   },
   "lint-staged": {
     "**/*.{css,vue}": "stylelint",
-    "**/*.{js,ts,vue,md,html}": "npm run lint-arg --"
+    "**/*.{js,ts,vue,md,html}": [
+      "npm run test:unit",
+      "npm run lint-arg --"
+    ]
   },
   "browserslist": [
     "last 2 versions",
@@ -57,6 +60,7 @@
     "@pathscale/eslint-plugin-vue3": "0.0.1",
     "@rollup/plugin-node-resolve": "^11.0.1",
     "@rollup/plugin-replace": "^2.3.4",
+    "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/vue": "^6.4.2",
     "@types/babel__traverse": "^7.11.0",
     "@types/fs-extra": "^9.0.5",

package.json

@@ -1,18 +1,25 @@
-import { render } from '@testing-library/vue'
+import { render, fireEvent } from '@testing-library/vue'
 import Button from './Button.vue'
 
-let wrapper
-
 describe('Button.vue', () => {
-  beforeEach(() => {
-    wrapper = render(Button)
+  it('render correctly', () => {
+    expect(render(Button).html()).toMatchSnapshot()
   })
 
-  it('is called', () => {
-    wrapper.getByRole('button')
+  it('emit a click event', async () => {
+    const handleClick = jest.fn()
+    const wrapper = render(<Button onClick={handleClick}>Click Me</Button>)
+    await fireEvent.click(wrapper.getByText(/click me/i))
+    expect(handleClick).toHaveBeenCalledTimes(1)
   })
+  it('should be medium', () => {
+    const wrapper = render(Button, { props: { label: 'medium', size: 'is-medium' } })
 
-  it('render correctly', () => {
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.getByRole('button', { name: /medium/i })).toHaveClass('is-medium')
+  })
+  it('should be rounded when prop is set to true', () => {
+    const wrapper = render(Button, { props: { label: 'rounded', rounded: true } })
+
+    expect(wrapper.getByRole('button', { name: /rounded/i })).toHaveClass('is-rounded')
   })
 })