niuma-ui 1.0.0

package/src/__tests__/RsTabs.spec.ts

@@ -0,0 +1,328 @@
+import { describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { h } from 'vue'
+import RsTabs from '../components/RsTabs.vue'
+import RsConfigProvider from '../components/RsConfigProvider.vue'
+import { getNextTabAfterClose, isTabClosable, isTabRenamable, reorderTabItems, resolveVisibleTabValues } from '../components/tabs-utils'
+
+const items = [
+  { value: 'a', label: '标签 A' },
+  { value: 'b', label: '标签 B', icon: 'settings' as const },
+  { value: 'c', label: '标签 C', badge: 9 },
+]
+
+function mountTabs(
+  props: Record<string, unknown> = {},
+  slots?: Record<string, () => ReturnType<typeof h>>,
+) {
+  return mount(RsTabs, {
+    props: {
+      items,
+      modelValue: 'a',
+      ...props,
+    },
+    slots: {
+      a: () => h('p', { class: 'panel-a' }, '内容 A'),
+      b: () => h('p', { class: 'panel-b' }, '内容 B'),
+      c: () => h('p', { class: 'panel-c' }, '内容 C'),
+      ...slots,
+    },
+  })
+}
+
+describe('tabs-utils', () => {
+  it('isTabClosable respects per-item override and global default', () => {
+    expect(isTabClosable({ value: 'a', label: 'A' }, true)).toBe(true)
+    expect(isTabClosable({ value: 'a', label: 'A', closable: false }, true)).toBe(false)
+    expect(isTabClosable({ value: 'a', label: 'A', closable: true }, false)).toBe(true)
+  })
+
+  it('getNextTabAfterClose prefers right neighbor then left', () => {
+    const items = [
+      { value: 'a', label: 'A' },
+      { value: 'b', label: 'B' },
+      { value: 'c', label: 'C' },
+    ]
+    expect(getNextTabAfterClose(items, 'b', 'b')).toBe('c')
+    expect(getNextTabAfterClose(items, 'c', 'c')).toBe('b')
+    expect(getNextTabAfterClose(items, 'a', 'b')).toBe('b')
+  })
+
+  it('reorderTabItems moves drag item before drop target', () => {
+    const items = [
+      { value: 'a', label: 'A' },
+      { value: 'b', label: 'B' },
+      { value: 'c', label: 'C' },
+    ]
+    const next = reorderTabItems(items, 'c', 'a')
+    expect(next.map((item) => item.value)).toEqual(['c', 'a', 'b'])
+  })
+
+  it('isTabRenamable respects per-item override', () => {
+    expect(isTabRenamable({ value: 'a', label: 'A' }, true)).toBe(true)
+    expect(isTabRenamable({ value: 'a', label: 'A', renamable: false }, true)).toBe(false)
+  })
+
+  it('resolveVisibleTabValues keeps active tab visible when keepActiveVisible is true', () => {
+    const items = [
+      { value: 'a', label: 'A' },
+      { value: 'b', label: 'B' },
+      { value: 'c', label: 'C' },
+    ]
+    const widths = new Map([
+      ['a', 80],
+      ['b', 80],
+      ['c', 80],
+    ])
+    const visible = resolveVisibleTabValues(items, widths, 100, 'c', 0, {
+      keepActiveVisible: true,
+    })
+    expect(visible.has('c')).toBe(true)
+  })
+
+  it('resolveVisibleTabValues hides active tab from bar in dropdown mode', () => {
+    const items = [
+      { value: 'a', label: 'A' },
+      { value: 'b', label: 'B' },
+      { value: 'c', label: 'C' },
+    ]
+    const widths = new Map([
+      ['a', 80],
+      ['b', 80],
+      ['c', 80],
+    ])
+    const visible = resolveVisibleTabValues(items, widths, 100, 'c', 0, {
+      keepActiveVisible: false,
+    })
+    expect(visible.has('c')).toBe(false)
+    expect(visible.has('a')).toBe(true)
+  })
+})
+
+describe('RsTabs', () => {
+  it('renders root with tabs aria-label', () => {
+    const wrapper = mountTabs()
+    expect(wrapper.find('.rs-tabs').attributes('aria-label')).toBe('标签页')
+  })
+
+  it('uses en-US aria-label when locale is en-US', () => {
+    const wrapper = mount(RsConfigProvider, {
+      props: { locale: 'en-US' },
+      slots: {
+        default: () =>
+          h(RsTabs, {
+            items,
+            modelValue: 'a',
+          }),
+      },
+    })
+    expect(wrapper.find('.rs-tabs').attributes('aria-label')).toBe('Tabs')
+  })
+
+  it('renders all tab labels', () => {
+    const wrapper = mountTabs()
+    expect(wrapper.text()).toContain('标签 A')
+    expect(wrapper.text()).toContain('标签 B')
+    expect(wrapper.text()).toContain('标签 C')
+  })
+
+  it('renders icon and badge', () => {
+    const wrapper = mountTabs()
+    expect(wrapper.find('.rs-icon').exists()).toBe(true)
+    expect(wrapper.find('.rs-tabs__badge').text()).toBe('9')
+  })
+
+  it('marks active trigger with data-state active', () => {
+    const wrapper = mountTabs({ modelValue: 'b' })
+    const triggers = wrapper.findAll('.rs-tabs__trigger')
+    expect(triggers[0]?.attributes('data-state')).toBe('inactive')
+    expect(triggers[1]?.attributes('data-state')).toBe('active')
+  })
+
+  it('emits update:modelValue when another tab is clicked', async () => {
+    const wrapper = mountTabs()
+    await wrapper.findAll('.rs-tabs__trigger')[1]?.trigger('mousedown', { button: 0 })
+    await flushPromises()
+    expect(wrapper.emitted('update:modelValue')?.pop()).toEqual(['b'])
+  })
+
+  it('does not emit update:modelValue when disabled tab is clicked', async () => {
+    const wrapper = mount(RsTabs, {
+      props: {
+        items: [
+          { value: 'a', label: 'A' },
+          { value: 'b', label: 'B', disabled: true },
+        ],
+        modelValue: 'a',
+      },
+      slots: {
+        a: () => h('p', 'A'),
+        b: () => h('p', 'B'),
+      },
+    })
+    await wrapper.findAll('.rs-tabs__trigger')[1]?.trigger('mousedown', { button: 0 })
+    await flushPromises()
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('shows active panel content', () => {
+    const wrapper = mountTabs({ modelValue: 'a' })
+    expect(wrapper.find('.panel-a').exists()).toBe(true)
+    expect(wrapper.find('.panel-b').exists()).toBe(false)
+  })
+
+  it('hides panels when panelless is true', () => {
+    const wrapper = mountTabs({ panelless: true })
+    expect(wrapper.find('.rs-tabs__panel').exists()).toBe(false)
+    expect(wrapper.find('.panel-a').exists()).toBe(false)
+  })
+
+  it('wraps list and panels in a shared body container', () => {
+    const wrapper = mountTabs()
+    expect(wrapper.find('.rs-tabs__body').exists()).toBe(true)
+    expect(wrapper.find('.rs-tabs__panel-inner').exists()).toBe(true)
+  })
+
+  it('uses line variant by default', () => {
+    const wrapper = mountTabs()
+    expect(wrapper.find('.rs-tabs').classes()).toContain('rs-tabs--line')
+  })
+
+  it('applies segmented variant class', () => {
+    const wrapper = mountTabs({ variant: 'segmented' })
+    expect(wrapper.find('.rs-tabs').classes()).toContain('rs-tabs--segmented')
+  })
+
+  it('applies sm size class on root', () => {
+    const wrapper = mountTabs({ size: 'sm' })
+    expect(wrapper.find('.rs-tabs').classes()).toContain('rs-tabs--sm')
+  })
+
+  it('applies md size class by default', () => {
+    const wrapper = mountTabs()
+    expect(wrapper.find('.rs-tabs').classes()).toContain('rs-tabs--md')
+  })
+
+  it('renders close buttons when closable is true', () => {
+    const wrapper = mountTabs({ closable: true })
+    expect(wrapper.findAll('.rs-tabs__close')).toHaveLength(items.length)
+  })
+
+  it('hides close button when item sets closable false', () => {
+    const wrapper = mount(RsTabs, {
+      props: {
+        items: [
+          { value: 'a', label: 'A', closable: false },
+          { value: 'b', label: 'B' },
+        ],
+        modelValue: 'a',
+        closable: true,
+      },
+      slots: {
+        a: () => h('p', 'A'),
+        b: () => h('p', 'B'),
+      },
+    })
+    expect(wrapper.findAll('.rs-tabs__close')).toHaveLength(1)
+  })
+
+  it('emits close and switches active tab when closing current tab', async () => {
+    const wrapper = mountTabs({ modelValue: 'b', closable: true })
+    await wrapper.findAll('.rs-tabs__close')[1]?.trigger('click')
+    await flushPromises()
+    expect(wrapper.emitted('close')?.[0]).toEqual(['b'])
+    expect(wrapper.emitted('update:modelValue')?.pop()).toEqual(['c'])
+  })
+
+  it('does not emit close when item is disabled', async () => {
+    const wrapper = mount(RsTabs, {
+      props: {
+        items: [{ value: 'a', label: 'A', disabled: true }],
+        modelValue: 'a',
+        closable: true,
+      },
+      slots: { a: () => h('p', 'A') },
+    })
+    await wrapper.find('.rs-tabs__close').trigger('click')
+    expect(wrapper.emitted('close')).toBeUndefined()
+  })
+
+  it('renders add button and emits add when addable', async () => {
+    const wrapper = mountTabs({ addable: true })
+    expect(wrapper.find('.rs-tabs__add').exists()).toBe(true)
+    await wrapper.find('.rs-tabs__add').trigger('click')
+    expect(wrapper.emitted('add')?.length).toBe(1)
+  })
+
+  it('hides add button when maxCount is reached', () => {
+    const wrapper = mountTabs({ addable: true, maxCount: items.length })
+    expect(wrapper.find('.rs-tabs__add').exists()).toBe(false)
+  })
+
+  it('uses en-US labels for close and add buttons', () => {
+    const wrapper = mount(RsConfigProvider, {
+      props: { locale: 'en-US' },
+      slots: {
+        default: () =>
+          h(RsTabs, {
+            items: [{ value: 'a', label: 'Docs' }],
+            modelValue: 'a',
+            closable: true,
+            addable: true,
+          }, {
+            a: () => h('p', 'A'),
+          }),
+      },
+    })
+    expect(wrapper.find('.rs-tabs__close').attributes('aria-label')).toBe('Close Docs')
+    expect(wrapper.find('.rs-tabs__add').attributes('aria-label')).toBe('Add tab')
+  })
+
+  it('applies card variant class', () => {
+    const wrapper = mountTabs({ variant: 'card' })
+    expect(wrapper.find('.rs-tabs').classes()).toContain('rs-tabs--card')
+  })
+
+  it('renders drag handle when draggable', () => {
+    const wrapper = mountTabs({ draggable: true })
+    expect(wrapper.find('.rs-tabs__drag-handle').exists()).toBe(true)
+  })
+
+  it('emits reorder on drop', async () => {
+    const wrapper = mountTabs({ draggable: true })
+    const triggers = wrapper.findAll('.rs-tabs__trigger')
+    await wrapper.findAll('.rs-tabs__drag-handle')[0]?.trigger('dragstart', {
+      dataTransfer: { setData: () => {}, effectAllowed: 'move' },
+    })
+    await triggers[2]?.trigger('drop', { preventDefault: () => {} })
+    expect(wrapper.emitted('reorder')?.[0]).toEqual(['a', 'c'])
+  })
+
+  it('enters rename mode on label double click when renamable', async () => {
+    const wrapper = mountTabs({ renamable: true })
+    await wrapper.find('.rs-tabs__label').trigger('dblclick')
+    await flushPromises()
+    expect(wrapper.find('.rs-tabs__rename-input').exists()).toBe(true)
+  })
+
+  it('emits rename on input blur', async () => {
+    const wrapper = mountTabs({ renamable: true })
+    await wrapper.find('.rs-tabs__label').trigger('dblclick')
+    await flushPromises()
+    const input = wrapper.find('.rs-tabs__rename-input')
+    await input.setValue('新标签 A')
+    await input.trigger('blur')
+    await flushPromises()
+    expect(wrapper.emitted('rename')?.[0]).toEqual(['a', '新标签 A'])
+  })
+
+  it('applies scrollable class when overflow is scroll', () => {
+    const wrapper = mountTabs({ overflow: 'scroll' })
+    expect(wrapper.find('.rs-tabs').classes()).toContain('rs-tabs--scrollable')
+  })
+
+  it('applies dropdown overflow class when overflow is dropdown', () => {
+    const wrapper = mountTabs({ overflow: 'dropdown' })
+    expect(wrapper.find('.rs-tabs').classes()).toContain('rs-tabs--dropdown-overflow')
+  })
+})

package/src/__tests__/RsTerminal.spec.ts

@@ -0,0 +1,218 @@
+import { nextTick } from 'vue'
+import { mount } from '@vue/test-utils'
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import RsTerminal from '../components/RsTerminal.vue'
+import { buildAnsiColorDemo, normalizeTerminalHexColor, resolveTerminalTheme } from '../components/terminal-utils'
+import { readDocumentTheme } from '../components/code-editor-utils'
+
+vi.mock('../utils/rs-clipboard', () => ({
+  beginClipboardPrefetch: vi.fn(),
+  copyTextToClipboard: vi.fn().mockResolvedValue(true),
+  readClipboardText: vi.fn().mockResolvedValue('pasted'),
+}))
+
+const fitMock = vi.fn()
+const writeMock = vi.fn()
+const clearMock = vi.fn()
+const focusMock = vi.fn()
+const disposeMock = vi.fn()
+const selectAllMock = vi.fn()
+const clearSelectionMock = vi.fn()
+const hasSelectionMock = vi.fn(() => false)
+const getSelectionMock = vi.fn(() => '')
+const onDataHandlers: Array<(data: string) => void> = []
+const onSelectionHandlers: Array<() => void> = []
+const onRenderHandlers: Array<() => void> = []
+const onScrollHandlers: Array<() => void> = []
+let pasteMock = vi.fn()
+let keyEventHandler: ((event: KeyboardEvent) => boolean) | null = null
+
+const bufferMock = {
+  baseY: 0,
+  cursorY: 0,
+  viewportY: 0,
+  length: 1,
+}
+
+vi.mock('@xterm/addon-fit', () => ({
+  FitAddon: class {
+    fit = fitMock
+    proposeDimensions = () => ({ cols: 80, rows: 24 })
+  },
+}))
+
+vi.mock('xterm', () => ({
+  Terminal: class {
+    cols = 80
+    rows = 24
+    options: Record<string, unknown> = {}
+    buffer = {
+      active: bufferMock,
+    }
+    loadAddon() {
+      return undefined
+    }
+    open() {
+      return undefined
+    }
+    onData(handler: (data: string) => void) {
+      onDataHandlers.push(handler)
+    }
+    onSelectionChange(handler: () => void) {
+      onSelectionHandlers.push(handler)
+    }
+    onRender(handler: () => void) {
+      onRenderHandlers.push(handler)
+      return { dispose: vi.fn() }
+    }
+    onScroll(handler: () => void) {
+      onScrollHandlers.push(handler)
+      return { dispose: vi.fn() }
+    }
+    registerMarker() {
+      return { dispose: vi.fn() }
+    }
+    registerDecoration() {
+      return { dispose: vi.fn() }
+    }
+    attachCustomKeyEventHandler(handler: (event: KeyboardEvent) => boolean) {
+      keyEventHandler = handler
+    }
+    hasSelection = hasSelectionMock
+    getSelection = getSelectionMock
+    selectAll = selectAllMock
+    clearSelection = clearSelectionMock
+    paste = pasteMock
+    element = document.createElement('div')
+    write = writeMock
+    clear = clearMock
+    focus = focusMock
+    dispose = disposeMock
+  },
+}))
+
+beforeAll(() => {
+  class ResizeObserverMock {
+    observe() {
+      return undefined
+    }
+    disconnect() {
+      return undefined
+    }
+  }
+  vi.stubGlobal('ResizeObserver', ResizeObserverMock)
+})
+
+describe('terminal-utils', () => {
+  it('builds ansi color demo text', () => {
+    const demo = buildAnsiColorDemo()
+    expect(demo).toContain('ANSI 16 colors')
+    expect(demo).toContain('\x1b[31m')
+  })
+
+  it('resolves document theme', () => {
+    document.documentElement.dataset.rsTheme = 'light'
+    expect(resolveTerminalTheme('auto')).toBe('light')
+    document.documentElement.dataset.rsTheme = 'dark'
+    expect(resolveTerminalTheme('auto')).toBe('dark')
+  })
+
+  it('normalizes terminal hex colors', () => {
+    expect(normalizeTerminalHexColor('#181818')).toBe('#181818')
+    expect(normalizeTerminalHexColor('#abc')).toBe('#aabbcc')
+    expect(normalizeTerminalHexColor('rgb(246, 246, 246)')).toBe('#f6f6f6')
+    expect(normalizeTerminalHexColor('rgb(248 248 248)')).toBe('#f8f8f8')
+    expect(normalizeTerminalHexColor('rgb(0 0 0)')).toBe('#000000')
+  })
+
+  it('detects tui refresh sequences', async () => {
+    const { containsTuiRefreshSequence } = await import('../components/terminal-utils')
+    expect(containsTuiRefreshSequence('\x1b[2J')).toBe(true)
+    expect(containsTuiRefreshSequence('\x1b[1;1H')).toBe(true)
+    expect(containsTuiRefreshSequence('plain log line')).toBe(false)
+  })
+
+  it('detects full screen clear sequences', async () => {
+    const { containsFullScreenClear, startsWithCursorHome } = await import('../components/terminal-utils')
+    expect(containsFullScreenClear('\x1b[2J')).toBe(true)
+    expect(containsFullScreenClear('\x1b[2;0H')).toBe(false)
+    expect(startsWithCursorHome('\x1b[Hsummary')).toBe(true)
+    expect(startsWithCursorHome(' \x1b[1;1H')).toBe(true)
+    expect(startsWithCursorHome('process line')).toBe(false)
+  })
+})
+
+describe('RsTerminal', () => {
+  beforeEach(() => {
+    pasteMock.mockClear()
+    selectAllMock.mockClear()
+    keyEventHandler = null
+  })
+
+  it('renders overlay text', () => {
+    const wrapper = mount(RsTerminal, {
+      props: {
+        overlay: '连接中...',
+      },
+    })
+    expect(wrapper.find('.rs-terminal__overlay').text()).toContain('连接中...')
+  })
+
+  it('emits terminal input data', async () => {
+    const wrapper = mount(RsTerminal)
+    await nextTick()
+    onDataHandlers.at(-1)?.('ls\r')
+    expect(wrapper.emitted('data')?.[0]).toEqual(['ls\r'])
+  })
+
+  it('exposes terminal helpers', async () => {
+    const wrapper = mount(RsTerminal)
+    await nextTick()
+    wrapper.vm.write('pwd\r\n')
+    wrapper.vm.clear()
+    wrapper.vm.focus()
+    wrapper.vm.selectAll()
+    expect(writeMock).toHaveBeenCalledWith('pwd\r\n')
+    expect(clearMock).toHaveBeenCalled()
+    expect(focusMock).toHaveBeenCalled()
+    expect(selectAllMock).toHaveBeenCalled()
+  })
+
+  it('handles select-all shortcut', async () => {
+    mount(RsTerminal, { props: { shortcuts: true } })
+    await nextTick()
+    const handled = keyEventHandler?.({
+      type: 'keydown',
+      metaKey: true,
+      ctrlKey: false,
+      key: 'a',
+      preventDefault: vi.fn(),
+      stopPropagation: vi.fn(),
+    } as unknown as KeyboardEvent)
+    expect(handled).toBe(false)
+    expect(selectAllMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('pastes once on ctrl+v keydown and ignores keyup', async () => {
+    mount(RsTerminal, { props: { shortcuts: true } })
+    await nextTick()
+    const preventDefault = vi.fn()
+    const stopPropagation = vi.fn()
+    keyEventHandler?.({
+      type: 'keydown',
+      ctrlKey: true,
+      key: 'v',
+      preventDefault,
+      stopPropagation,
+    } as unknown as KeyboardEvent)
+    keyEventHandler?.({
+      type: 'keyup',
+      ctrlKey: true,
+      key: 'v',
+    } as unknown as KeyboardEvent)
+    await nextTick()
+    expect(pasteMock).toHaveBeenCalledTimes(1)
+    expect(preventDefault).toHaveBeenCalled()
+    expect(stopPropagation).toHaveBeenCalled()
+  })
+})

package/src/__tests__/RsTimePicker.spec.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import RsTimePicker from '../components/RsTimePicker.vue'
+
+describe('RsTimePicker', () => {
+  it('renders popover trigger with placeholder', () => {
+    const wrapper = mount(RsTimePicker, { props: { modelValue: '' } })
+    expect(wrapper.find('.rs-time-picker__trigger').exists()).toBe(true)
+    expect(wrapper.find('.rs-time-picker__value').text()).toContain('选择时间')
+    expect(wrapper.classes()).toContain('rs-field')
+  })
+
+  it('shows preset value on trigger when model is set', () => {
+    const wrapper = mount(RsTimePicker, {
+      props: { modelValue: '14:30' },
+    })
+    expect(wrapper.find('.rs-time-picker__trigger--placeholder').exists()).toBe(false)
+    expect(wrapper.find('.rs-time-picker__value').text()).toBe('14:30')
+  })
+
+  it('renders label, hint, and required marker', () => {
+    const wrapper = mount(RsTimePicker, {
+      props: {
+        modelValue: '',
+        label: '签到时间',
+        hint: '请选择时间',
+        required: true,
+      },
+    })
+    expect(wrapper.find('.rs-field__label').text()).toContain('签到时间')
+    expect(wrapper.find('.rs-field__required').exists()).toBe(true)
+    expect(wrapper.find('.rs-field__hint').text()).toBe('请选择时间')
+  })
+
+  it('applies left label layout class', () => {
+    const wrapper = mount(RsTimePicker, {
+      props: { modelValue: '', labelPosition: 'left' },
+    })
+    expect(wrapper.classes()).toContain('rs-field--label-left')
+  })
+
+  it('uses single trigger for range mode', () => {
+    const wrapper = mount(RsTimePicker, {
+      props: { modelValue: { start: '', end: '' }, range: true },
+    })
+    expect(wrapper.findAll('.rs-time-picker__trigger')).toHaveLength(1)
+    expect(wrapper.find('.rs-time-picker__value').text()).toContain('选择时间范围')
+  })
+
+  it('shows range label when range model is set', () => {
+    const wrapper = mount(RsTimePicker, {
+      props: {
+        modelValue: { start: '09:00', end: '18:00' },
+        range: true,
+      },
+    })
+    expect(wrapper.find('.rs-time-picker__value').text()).toContain('09:00')
+    expect(wrapper.find('.rs-time-picker__value').text()).toContain('18:00')
+  })
+
+  it('opens panel with scroll columns', async () => {
+    const wrapper = mount(RsTimePicker, {
+      props: { modelValue: '', open: true },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.rs-time-columns')).not.toBeNull()
+    wrapper.unmount()
+  })
+
+  it('disables trigger when disabled', () => {
+    const wrapper = mount(RsTimePicker, {
+      props: { modelValue: '10:00', disabled: true },
+    })
+    expect(wrapper.find('.rs-time-picker__trigger').attributes('disabled')).toBeDefined()
+  })
+})