test: button

README.md

@@ -1,52 +1 @@
 # elenext
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```
-
-### Run Unit Tests with [Vitest](https://vitest.dev/)
-
-```sh
-npm run test:unit
-```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-npm run lint
-```

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "tailv",
+  "name": "elenext",
   "author": "jaskang",
   "version": "0.1.11",
   "license": "MIT",

src/Button/button.test.ts

@@ -1,27 +1,101 @@
+import { h } from 'vue'
 import { mount } from '@vue/test-utils'
-import { describe, expect, test } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
+import CheckIcon from '../Icon/CheckIcon.vue'
+import Loading from '../Icon/Loading.vue'
 import Button from './index.vue'
 
 describe('Button', () => {
-  test('default', async () => {
+  test('slots: default', async () => {
     const wrapper = mount(Button, {
-      props: {},
-      slots: { default: 'Hello world' },
+      slots: { default: 'content' },
     })
-    const el = wrapper.element as HTMLButtonElement
+    expect(wrapper.find('button').exists()).toBe(true)
+    expect(wrapper.text()).toContain('content')
+  })
 
-    // Assert the rendered text of the component
-    expect(wrapper.text()).toContain('Hello world')
+  test('slots: icon', async () => {
+    const wrapper = mount(Button, {
+      slots: {
+        icon: () => h(CheckIcon),
+      },
+    })
+    expect(wrapper.findComponent(CheckIcon).element.tagName).toBe('svg')
+  })
 
-    expect(el.className.split(' ').includes('bg-input-background')).toBe(true)
+  test('props: disabled', async () => {
+    const wrapper = mount(Button, {
+      props: { disabled: true },
+    })
+    expect(wrapper.attributes('disabled')).toBeDefined()
   })
 
-  test('variant', async () => {
+  test('props: variant', async () => {
     const wrapper = mount(Button, {
       props: { variant: 'outline' },
-      slots: { default: 'Hello world' },
+      slots: { default: 'content' },
     })
     const el = wrapper.element as HTMLButtonElement
     expect(el.className.split(' ').includes('border-primary-border')).toBe(true)
   })
+
+  test('props: color', async () => {
+    let wrapper = mount(Button, {
+      props: { color: 'success', variant: 'solid' },
+    })
+    expect(wrapper.classes().includes('bg-success-solid')).toBe(true)
+
+    wrapper = mount(Button, {
+      props: { color: 'success' },
+    })
+    expect(wrapper.classes().includes('bg-success-solid')).toBe(false)
+  })
+
+  test('props: size', async () => {
+    const wrapper = mount(Button, {
+      props: { size: 'lg' },
+    })
+    expect(wrapper.classes()).toContain('h-11')
+  })
+
+  test('props: pill', async () => {
+    const wrapper = mount(Button, {
+      props: { pill: true },
+    })
+    expect(wrapper.classes()).toContain('rounded-full')
+  })
+
+  test('props: square', async () => {
+    const wrapper = mount(Button, {
+      props: { square: true },
+      slots: { default: 'content' },
+    })
+    expect(wrapper.classes()).toContain('h-9')
+    expect(wrapper.classes()).toContain('w-9')
+  })
+
+  test('props: block', async () => {
+    const wrapper = mount(Button, {
+      props: { block: true },
+      slots: { default: 'content' },
+    })
+    expect(wrapper.classes()).toContain('w-full')
+  })
+
+  test('props: loading', async () => {
+    const wrapper = mount(Button, {
+      props: { loading: true },
+    })
+    expect(wrapper.findComponent(Loading).exists()).toBe(true)
+  })
+
+  test('emits: click', async () => {
+    const clickHandler = vi.fn()
+    const wrapper = mount(Button, {
+      slots: { default: 'content' },
+      attrs: { onClick: clickHandler },
+    })
+    await wrapper.trigger('click')
+    expect(clickHandler).toBeCalledTimes(1)
+  })
 })

src/Button/index.vue

@@ -77,10 +77,13 @@ const props = defineProps({
     :disabled
     @click="emit('click', $event)"
   >
-    <template v-if="loading">
-      <Loading class="h-[1em] w-[1em] animate-spin" :class="slots.default && !square ? 'mr-1.5' : ''" />
+    <template v-if="loading || slots.icon">
+      <span class="[:where(&_>_*)]:h-[1em] [:where(&_>_*)]:w-[1em]" :class="slots.default && !square ? 'mr-1.5' : ''">
+        <Loading v-if="loading" class="animate-spin" />
+        <slot v-else name="icon" />
+      </span>
     </template>
-
+    <!-- 一比一样式 loading 时不展示内容 -->
     <slot v-if="!square || !loading"></slot>
   </button>
 </template>