update tests

Author: skaptox

package-lock.json

@@ -32,7 +32,8 @@
     "lint-fix": "eslint --ext .js,.ts,.vue,.md,.html --fix .",
     "prepublishOnly": "npm run build",
     "release": "npm run build && np",
-    "test:unit": "vue-cli-service test:unit"
+    "test:unit": "vue-cli-service test:unit",
+    "test:watch": "npm run test:unit -- --watch"
   },
   "husky": {
     "hooks": {
@@ -61,7 +62,6 @@
     "@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",
     "@types/node": "*",
@@ -73,6 +73,7 @@
     "@vue/cli-plugin-unit-jest": "^4.5.15",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.4",
+    "@vue/test-utils": "^2.0.0-0",
     "@wessberg/rollup-plugin-ts": "^1.3.8",
     "autoprefixer": "^10.1.0",
     "babel-eslint": "^10.1.0",

package.json

@@ -1,25 +1,58 @@
-import { render, fireEvent } from '@testing-library/vue'
+import { shallowMount, mount } from '@vue/test-utils'
 import Button from './Button.vue'
 
-describe('Button.vue', () => {
+let wrapper
+
+describe('Button', () => {
+  beforeEach(() => {
+    wrapper = shallowMount(Button)
+  })
+
+  it('is called', () => {
+    expect(wrapper.exists()).toBeTruthy()
+  })
+
   it('render correctly', () => {
-    expect(render(Button).html()).toMatchSnapshot()
+    expect(wrapper.html()).toMatchSnapshot()
   })
 
-  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('emit a click event', () => {
+    wrapper = mount(Button)
+    wrapper.find('button').trigger('click')
+    expect(wrapper.emitted()).toHaveProperty('click')
+  })
+  it('should be medium', async () => {
+    wrapper.setProps({
+      size: 'is-medium',
+    })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.classes()).toContain('is-medium')
   })
-  it('should be medium', () => {
-    const wrapper = render(Button, { props: { label: 'medium', size: 'is-medium' } })
 
-    expect(wrapper.getByRole('button', { name: /medium/i })).toHaveClass('is-medium')
+  it('should be rounded when prop is set to true', async () => {
+    wrapper.setProps({
+      rounded: true,
+    })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.classes()).toContain('is-rounded')
   })
-  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')
+  it('should set tag to "button" if disabled', () => {
+    wrapper = shallowMount(Button, {
+      props: {
+        tag: 'a',
+      },
+    })
+    expect(wrapper.vm.computedTag).toBe('a')
+
+    wrapper = shallowMount(Button, {
+      props: {
+        tag: 'a',
+      },
+      attrs: {
+        disabled: true,
+      },
+    })
+    expect(wrapper.vm.computedTag).toBe('button')
   })
 })

src/components/primitives/Button/Button.spec.js

@@ -6,7 +6,7 @@ export default {
   props: {
     type: {
       type: String,
-      default: 'is-primary'
+      default: 'is-primary',
     },
     size: String,
     label: String,
@@ -21,18 +21,18 @@ export default {
     selected: Boolean,
     nativeType: {
       type: String,
-      default: 'button'
+      default: 'button',
     },
     tag: {
       type: String,
-      default: 'button'
+      default: 'button',
     },
-    light: Boolean
+    light: Boolean,
   },
   setup(props, { attrs }) {
-    const computedTag = computed(() => attrs.disabled ? 'button' : props.tag)
+    const computedTag = computed(() => (attrs.disabled ? 'button' : props.tag))
     return { computedTag }
-  }
+  },
 }
 </script>
 
@@ -55,7 +55,7 @@ export default {
         'is-hovered': hovered,
         'is-selected': selected,
         'is-light': light,
-      }
+      },
     ]">
     <span v-if="label">{{ label }}</span>
     <slot />

src/components/primitives/Button/Button.vue

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Button.vue render correctly 1`] = `
+exports[`Button render correctly 1`] = `
 <button class="button is-primary" type="button">
   <!--v-if-->
 </button>