test: add button test

.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
     camelcase: ['error', { properties: 'never' }],
     semi: ['error', 'never'],
     indent: ['error', 2, { SwitchCase: 1 }],
+    'object-curly-spacing': ['error', 'always'],
     // vue
     'vue/singleline-html-element-content-newline': 'off',
     'vue/html-self-closing': ['error', {

packages/button/__tests__/button.spec.ts

@@ -1,4 +1,4 @@
-import {mount} from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Button from '../src/index.vue'
 
 const AXIOM = 'Rem is the best girl'
@@ -12,6 +12,82 @@ const COMMON_CONFIG = {
 }
 
 describe('Button.vue', () => {
+  it('create', () => {
+    const instance = mount(Button, {
+      props: { type: 'primary' },
+      ...COMMON_CONFIG,
+    })
+    const buttonElm = instance.element
+    expect(buttonElm.classList.contains('el-button--primary')).toBeTruthy()
+  })
+
+  it('icon', () => {
+    const instance = mount(Button, {
+      props: { icon: 'el-icon-search' },
+      ...COMMON_CONFIG,
+    })
+    const buttonElm = instance.element
+    expect(buttonElm.querySelector('.el-icon-search')).not.toBeUndefined()
+  })
+  it('nativeType', () => {
+    const instance = mount(Button, {
+      props: { nativeType: 'submit' },
+      ...COMMON_CONFIG,
+    })
+    const buttonElm = instance.element
+    expect(buttonElm.getAttribute('type')).toBe('submit')
+  })
+  it('loading', () => {
+    const instance = mount(Button, {
+      props: { loading: true },
+      ...COMMON_CONFIG,
+    })
+    const buttonElm = instance.element
+    expect(buttonElm.querySelector('.el-icon-search')).not.toBeUndefined()
+    expect(buttonElm.classList.contains('is-loading')).toBeTruthy()
+    expect(buttonElm.querySelector('.el-icon-loading')).not.toBeUndefined()
+  })
+  it('disabled', () => {
+    const instance = mount(Button, {
+      props: { disabled: true },
+      ...COMMON_CONFIG,
+    })
+    const buttonElm = instance.element
+    expect(buttonElm.classList.contains('is-disabled')).toBeTruthy()
+  })
+  it('size', () => {
+    const instance = mount(Button, {
+      props: { size: 'medium' },
+      ...COMMON_CONFIG,
+    })
+    const buttonElm = instance.element
+    expect(buttonElm.classList.contains('el-button--medium')).toBeTruthy()
+  })
+  it('plain', () => {
+    const instance = mount(Button, {
+      props: { plain: true },
+      ...COMMON_CONFIG,
+    })
+    const buttonElm = instance.element
+    expect(buttonElm.classList.contains('is-plain')).toBeTruthy()
+  })
+  it('round', () => {
+    const instance = mount(Button, {
+      props: { round: true },
+      ...COMMON_CONFIG,
+    })
+    const buttonElm = instance.element
+    expect(buttonElm.classList.contains('is-round')).toBeTruthy()
+  })
+  it('circle', () => {
+    const instance = mount(Button, {
+      props: { circle: true },
+      ...COMMON_CONFIG,
+    })
+    const buttonElm = instance.element
+    expect(buttonElm.classList.contains('is-circle')).toBeTruthy()
+  })
+
   test('render text', () => {
     const instance = mount(Button, {
       slots: {
@@ -33,4 +109,28 @@ describe('Button.vue', () => {
     expect(instance.emitted()).toBeDefined()
 
   })
+
+  test('handle click inside', async () => {
+    const instance = mount(Button, {
+      slots: {
+        default: '<span class="inner-slot"></span>',
+      },
+      ...COMMON_CONFIG,
+    })
+    await (<HTMLElement>instance.element.querySelector('.inner-slot')).click()
+    expect(instance.emitted()).toBeDefined()
+  })
+
+  test('loading implies disabled', async () => {
+    const instance = mount(Button, {
+      slots: {
+        default: AXIOM,
+      },
+      props: { loading: true },
+      ...COMMON_CONFIG,
+    })
+    await instance.trigger('click')
+    expect(instance.emitted('click')).toBeUndefined()
+  })
+
 })

tsconfig.json

@@ -9,7 +9,7 @@
    "target": "es6",
    "sourceMap": true,
    "lib": [
-     "es2020"
+     "es2020", "dom"
    ]
  },
  "exclude": [