niuma-ui 1.0.0

package/src/__tests__/RsToaster.spec.ts

@@ -0,0 +1,95 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import RsToaster from '../components/RsToaster.vue'
+import { RS_TOAST_DEFAULT_POSITION } from '../components/overlay-utils'
+import { useRsToast } from '../composables/useRsToast'
+
+describe('RsToaster', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('renders sonner toaster with rs-toaster class', async () => {
+    const wrapper = mount(RsToaster, { attachTo: document.body })
+    await flushPromises()
+    expect(document.body.querySelector('.rs-toaster')).toBeTruthy()
+    wrapper.unmount()
+  })
+
+  it('defaults position to top-center', () => {
+    const wrapper = mount(RsToaster)
+    expect(wrapper.props('position')).toBe(RS_TOAST_DEFAULT_POSITION)
+    wrapper.unmount()
+  })
+
+  it('defaults closeButton to true and richColors to false', () => {
+    const wrapper = mount(RsToaster)
+    expect(wrapper.props('closeButton')).toBe(true)
+    expect(wrapper.props('richColors')).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('accepts custom position and closeButton props', async () => {
+    const wrapper = mount(RsToaster, {
+      props: { position: 'bottom-right', closeButton: false, richColors: true },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(wrapper.props('position')).toBe('bottom-right')
+    expect(wrapper.props('closeButton')).toBe(false)
+    expect(wrapper.props('richColors')).toBe(true)
+    expect(document.body.querySelector('[data-sonner-toaster]')).toBeTruthy()
+    wrapper.unmount()
+  })
+})
+
+describe('useRsToast', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it.each(['success', 'error', 'info', 'warning'] as const)(
+    'shows %s toast with semantic class',
+    async (type) => {
+      mount(RsToaster, { attachTo: document.body })
+      const api = useRsToast()
+      api[type](`${type} 消息`)
+      await flushPromises()
+      const toastEl = document.body.querySelector(`.rs-toast--${type}`)
+      expect(toastEl?.textContent).toContain(`${type} 消息`)
+    },
+  )
+
+  it('shows title and description', async () => {
+    mount(RsToaster, { attachTo: document.body })
+    const { success } = useRsToast()
+    success({
+      title: '保存成功',
+      description: '更改已同步到云端。',
+    })
+    await flushPromises()
+    const root = document.body.querySelector('.rs-toast--success')
+    expect(root?.querySelector('.rs-toast__title')?.textContent).toBe('保存成功')
+    expect(root?.querySelector('.rs-toast__description')?.textContent).toBe('更改已同步到云端。')
+  })
+
+  it('accepts string shorthand', async () => {
+    mount(RsToaster, { attachTo: document.body })
+    const { info } = useRsToast()
+    info('简短提示')
+    await flushPromises()
+    expect(document.body.querySelector('.rs-toast--info')?.textContent).toContain('简短提示')
+  })
+
+  it('dismiss removes visible toasts', async () => {
+    mount(RsToaster, { attachTo: document.body })
+    const { success, dismiss } = useRsToast()
+    success('待关闭')
+    await flushPromises()
+    expect(document.body.querySelector('.rs-toast')).toBeTruthy()
+    dismiss()
+    await new Promise((resolve) => setTimeout(resolve, 400))
+    await flushPromises()
+    expect(document.body.querySelector('.rs-toast[data-visible="true"]')).toBeFalsy()
+  })
+})

package/src/__tests__/RsToolbar.spec.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RsToolbar from '../components/RsToolbar.vue'
+
+const sizes = ['sm', 'md', 'lg'] as const
+const borders = ['bottom', 'top', 'both', 'none'] as const
+
+describe('RsToolbar', () => {
+  it('renders as header with base class by default', () => {
+    const wrapper = mount(RsToolbar)
+    expect(wrapper.element.tagName).toBe('HEADER')
+    expect(wrapper.classes()).toContain('rs-toolbar')
+    expect(wrapper.classes()).toContain('rs-toolbar--md')
+    expect(wrapper.classes()).toContain('rs-toolbar--border-bottom')
+    expect(wrapper.attributes('role')).toBe('toolbar')
+  })
+
+  it('renders custom root tag', () => {
+    const wrapper = mount(RsToolbar, { props: { tag: 'div' } })
+    expect(wrapper.element.tagName).toBe('DIV')
+  })
+
+  it.each(sizes)('applies %s size class', (size) => {
+    const wrapper = mount(RsToolbar, { props: { size } })
+    expect(wrapper.classes()).toContain(`rs-toolbar--${size}`)
+  })
+
+  it.each(borders)('applies %s border class', (border) => {
+    const wrapper = mount(RsToolbar, { props: { border } })
+    expect(wrapper.classes()).toContain(`rs-toolbar--border-${border}`)
+  })
+
+  it('applies elevated and compact modifiers', () => {
+    const wrapper = mount(RsToolbar, {
+      props: { elevated: true, compact: true },
+    })
+    expect(wrapper.classes()).toContain('rs-toolbar--elevated')
+    expect(wrapper.classes()).toContain('rs-toolbar--compact')
+  })
+
+  it('sets aria-label when provided', () => {
+    const wrapper = mount(RsToolbar, { props: { label: '查询工具栏' } })
+    expect(wrapper.attributes('aria-label')).toBe('查询工具栏')
+  })
+
+  it('renders default slot into start region', () => {
+    const wrapper = mount(RsToolbar, {
+      slots: { default: '<span class="title">标题</span>' },
+    })
+    expect(wrapper.find('.rs-toolbar__start .title').text()).toBe('标题')
+    expect(wrapper.find('.rs-toolbar__end').exists()).toBe(false)
+    expect(wrapper.find('.rs-toolbar__center').exists()).toBe(false)
+  })
+
+  it('renders left / center / right slots', () => {
+    const wrapper = mount(RsToolbar, {
+      slots: {
+        left: '<span class="left">左</span>',
+        center: '<span class="center">中</span>',
+        right: '<span class="right">右</span>',
+      },
+    })
+    expect(wrapper.find('.rs-toolbar__start .left').text()).toBe('左')
+    expect(wrapper.find('.rs-toolbar__center .center').text()).toBe('中')
+    expect(wrapper.find('.rs-toolbar__end .right').text()).toBe('右')
+  })
+
+  it('omits start region when no left or default slot', () => {
+    const wrapper = mount(RsToolbar, {
+      slots: { right: '<button type="button" class="run">运行</button>' },
+    })
+    expect(wrapper.find('.rs-toolbar__start').exists()).toBe(false)
+    expect(wrapper.find('.rs-toolbar__end .run').text()).toBe('运行')
+  })
+})

package/src/__tests__/RsTooltip.spec.ts

@@ -0,0 +1,111 @@
+import { describe, expect, it, vi, afterEach, beforeEach } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import RsTooltip from '../components/RsTooltip.vue'
+import RsTooltipProvider from '../components/RsTooltipProvider.vue'
+
+function mountTooltip(
+  template: string,
+  props: Record<string, unknown> = {},
+) {
+  return mount(
+    {
+      components: { RsTooltip, RsTooltipProvider },
+      template: `<RsTooltipProvider :delay-duration="0"><RsTooltip v-bind="props">${template}</RsTooltip></RsTooltipProvider>`,
+      data() {
+        return { props }
+      },
+    },
+    { attachTo: document.body },
+  )
+}
+
+describe('RsTooltip', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('shows content on pointer enter', async () => {
+    const wrapper = mountTooltip(
+      '<button type="button" class="trigger">Hover</button>',
+      { content: 'Tooltip text' },
+    )
+    expect(document.body.querySelector('.rs-tooltip__content')).toBeNull()
+    await wrapper.find('.trigger').trigger('pointermove', { pointerType: 'mouse' })
+    await vi.runAllTimersAsync()
+    await flushPromises()
+    expect(document.body.querySelector('.rs-tooltip__content')).not.toBeNull()
+    expect(document.body.textContent).toContain('Tooltip text')
+    wrapper.unmount()
+  })
+
+  it('does not show when disabled', async () => {
+    const wrapper = mountTooltip(
+      '<button type="button" class="trigger">Hover</button>',
+      { content: 'Hidden', disabled: true },
+    )
+    await wrapper.find('.trigger').trigger('pointermove', { pointerType: 'mouse' })
+    await vi.runAllTimersAsync()
+    await flushPromises()
+    expect(document.body.querySelector('.rs-tooltip__content')).toBeNull()
+    wrapper.unmount()
+  })
+
+  it('renders custom content slot', async () => {
+    const wrapper = mount(
+      {
+        components: { RsTooltip, RsTooltipProvider },
+        template: `
+          <RsTooltipProvider :delay-duration="0">
+            <RsTooltip>
+              <button type="button" class="trigger">Hover</button>
+              <template #content>
+                <span class="custom-tip">Custom body</span>
+              </template>
+            </RsTooltip>
+          </RsTooltipProvider>
+        `,
+      },
+      { attachTo: document.body },
+    )
+    await wrapper.find('.trigger').trigger('pointermove', { pointerType: 'mouse' })
+    await vi.runAllTimersAsync()
+    await flushPromises()
+    expect(document.body.querySelector('.custom-tip')).not.toBeNull()
+    wrapper.unmount()
+  })
+
+  it('unmounts without leaving tooltip content in body', async () => {
+    const wrapper = mountTooltip(
+      '<button type="button" class="trigger">Hover</button>',
+      { content: 'Cleanup' },
+    )
+    await wrapper.find('.trigger').trigger('pointermove', { pointerType: 'mouse' })
+    await vi.runAllTimersAsync()
+    await flushPromises()
+    wrapper.unmount()
+    expect(document.body.querySelector('.rs-tooltip__content')).toBeNull()
+  })
+
+  it('renders suffix help icon when icon=true', async () => {
+    const wrapper = mountTooltip('<span class="field-label">Database</span>', {
+      content: 'Initial database hint',
+      icon: true,
+    })
+    expect(wrapper.find('.rs-tooltip__with-icon').exists()).toBe(true)
+    expect(wrapper.find('.field-label').exists()).toBe(true)
+    const trigger = wrapper.find('.rs-tooltip__icon-trigger')
+    expect(trigger.exists()).toBe(true)
+    expect(trigger.attributes('aria-label')).toBe('Initial database hint')
+    expect(document.body.querySelector('.rs-tooltip__content')).toBeNull()
+    await trigger.trigger('pointermove', { pointerType: 'mouse' })
+    await vi.runAllTimersAsync()
+    await flushPromises()
+    expect(document.body.querySelector('.rs-tooltip__content')).not.toBeNull()
+    expect(document.body.textContent).toContain('Initial database hint')
+    wrapper.unmount()
+  })
+})