niuma-ui 1.0.0

package/src/__tests__/RsSteps.spec.ts

@@ -0,0 +1,125 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RsSteps from '../components/RsSteps.vue'
+import { isStepSeparatorCompleted, resolveStepStatus } from '../components/steps-utils'
+
+const items = [
+  { value: 'a', title: '步骤 A', description: '描述 A' },
+  { value: 'b', title: '步骤 B' },
+  { value: 'c', title: '步骤 C' },
+]
+
+describe('steps-utils', () => {
+  it('resolveStepStatus derives finish/process/wait from active index', () => {
+    expect(resolveStepStatus(0, 1)).toBe('finish')
+    expect(resolveStepStatus(1, 1)).toBe('process')
+    expect(resolveStepStatus(2, 1)).toBe('wait')
+  })
+
+  it('resolveStepStatus prefers explicit status', () => {
+    expect(resolveStepStatus(1, 0, 'error')).toBe('error')
+  })
+
+  it('isStepSeparatorCompleted is true only for finish', () => {
+    expect(isStepSeparatorCompleted('finish')).toBe(true)
+    expect(isStepSeparatorCompleted('process')).toBe(false)
+  })
+})
+
+describe('RsSteps', () => {
+  it('renders all step titles and descriptions', () => {
+    const wrapper = mount(RsSteps, {
+      props: { items, modelValue: 'b' },
+    })
+    expect(wrapper.text()).toContain('步骤 A')
+    expect(wrapper.text()).toContain('描述 A')
+    expect(wrapper.text()).toContain('步骤 B')
+    expect(wrapper.text()).toContain('步骤 C')
+  })
+
+  it('applies auto-derived status classes', () => {
+    const wrapper = mount(RsSteps, {
+      props: { items, modelValue: 'b' },
+    })
+    const stepItems = wrapper.findAll('.rs-steps__item')
+    expect(stepItems[0]?.classes()).toContain('rs-steps__item--finish')
+    expect(stepItems[1]?.classes()).toContain('rs-steps__item--process')
+    expect(stepItems[2]?.classes()).toContain('rs-steps__item--wait')
+  })
+
+  it('applies explicit status when provided', () => {
+    const wrapper = mount(RsSteps, {
+      props: {
+        items: [
+          { value: 'a', title: 'A', status: 'finish' as const },
+          { value: 'b', title: 'B', status: 'error' as const },
+        ],
+        modelValue: 'a',
+      },
+    })
+    const stepItems = wrapper.findAll('.rs-steps__item')
+    expect(stepItems[1]?.classes()).toContain('rs-steps__item--error')
+  })
+
+  it('renders horizontal layout and md size by default', () => {
+    const wrapper = mount(RsSteps, {
+      props: { items, modelValue: 'a' },
+    })
+    expect(wrapper.find('.rs-steps').classes()).toContain('rs-steps--horizontal')
+    expect(wrapper.find('.rs-steps').classes()).toContain('rs-steps--md')
+  })
+
+  it('renders vertical and sm modifiers', () => {
+    const wrapper = mount(RsSteps, {
+      props: { items, modelValue: 'a', orientation: 'vertical', size: 'sm' },
+    })
+    expect(wrapper.find('.rs-steps').classes()).toContain('rs-steps--vertical')
+    expect(wrapper.find('.rs-steps').classes()).toContain('rs-steps--sm')
+  })
+
+  it('renders separators between items but not after the last', () => {
+    const wrapper = mount(RsSteps, {
+      props: { items, modelValue: 'a' },
+    })
+    expect(wrapper.findAll('.rs-steps__separator')).toHaveLength(items.length - 1)
+  })
+
+  it('disables triggers when not clickable', () => {
+    const wrapper = mount(RsSteps, {
+      props: { items, modelValue: 'a' },
+    })
+    wrapper.findAll('.rs-steps__trigger').forEach((trigger) => {
+      expect((trigger.element as HTMLButtonElement).disabled).toBe(true)
+    })
+  })
+
+  it('updates model when a clickable step is selected', async () => {
+    const wrapper = mount(RsSteps, {
+      props: { items, modelValue: 'a', clickable: true },
+    })
+    await wrapper.findAll('.rs-steps__trigger')[1]?.trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['b'])
+  })
+
+  it('does not update model when disabled step is clicked', async () => {
+    const wrapper = mount(RsSteps, {
+      props: {
+        items: [
+          { value: 'a', title: 'A' },
+          { value: 'b', title: 'B', disabled: true },
+        ],
+        modelValue: 'a',
+        clickable: true,
+      },
+    })
+    await wrapper.findAll('.rs-steps__trigger')[1]?.trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('falls back to first step when model value is unknown', () => {
+    const wrapper = mount(RsSteps, {
+      props: { items, modelValue: 'missing' },
+    })
+    expect(wrapper.findAll('.rs-steps__item')[0]?.classes()).toContain('rs-steps__item--process')
+  })
+})

package/src/__tests__/RsTable.perf.spec.ts

@@ -0,0 +1,103 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import RsTable from '../components/RsTable.vue'
+
+function makeRows(count: number) {
+  return Array.from({ length: count }, (_, i) => ({
+    id: String(i),
+    name: `row-${i}`,
+    count: i % 100,
+    status: i % 2 === 0 ? 'ok' : 'wait',
+  }))
+}
+
+const columns = [
+  { key: 'name', title: '名称', width: 120 },
+  { key: 'count', title: '数量', width: 80, align: 'right' as const },
+  { key: 'status', title: '状态', width: 80 },
+]
+
+const editableColumns = [
+  { key: 'name', title: '名称', width: 120, editable: true },
+  { key: 'count', title: '数量', width: 80, align: 'right' as const, editable: true, valueType: 'number' as const },
+  {
+    key: 'status',
+    title: '状态',
+    width: 100,
+    editable: true,
+    valueType: 'select' as const,
+    editorOptions: {
+      options: [
+        { value: 'ok', label: 'OK' },
+        { value: 'wait', label: 'Wait' },
+      ],
+    },
+  },
+]
+
+describe('RsTable performance baselines', () => {
+  it('mounts 3000 readonly rows within budget', () => {
+    const data = makeRows(3000)
+    const started = performance.now()
+    const wrapper = mount(RsTable, {
+      props: {
+        columns,
+        data,
+        rowKey: 'id',
+        virtual: true,
+        height: 480,
+      },
+    })
+    const elapsed = performance.now() - started
+    expect(wrapper.find('.rs-table').exists()).toBe(true)
+    // jsdom 下偏松：主要防止回归爆炸（本机通常远低于此）
+    expect(elapsed).toBeLessThan(8000)
+    wrapper.unmount()
+  })
+
+  it('editable flag does not explode mount cost vs readonly', () => {
+    const data = makeRows(2000)
+    const readonlyStart = performance.now()
+    const readonlyWrapper = mount(RsTable, {
+      props: { columns, data, rowKey: 'id', virtual: true, height: 480 },
+    })
+    const readonlyElapsed = performance.now() - readonlyStart
+    readonlyWrapper.unmount()
+
+    const editableStart = performance.now()
+    const editableWrapper = mount(RsTable, {
+      props: {
+        columns: editableColumns,
+        data,
+        rowKey: 'id',
+        editable: true,
+        virtual: true,
+        height: 480,
+      },
+    })
+    const editableElapsed = performance.now() - editableStart
+    // 编辑关闭时不挂编辑器，成本应接近只读（允许一定抖动）
+    expect(editableElapsed).toBeLessThan(readonlyElapsed * 3 + 2000)
+    expect(editableWrapper.find('.rs-table-cell-editor').exists()).toBe(false)
+    editableWrapper.unmount()
+  })
+
+  it('opening one editor keeps editor count at 1', async () => {
+    const data = makeRows(500)
+    const wrapper = mount(RsTable, {
+      props: {
+        columns: editableColumns,
+        data,
+        rowKey: 'id',
+        editable: true,
+        virtual: true,
+        height: 480,
+      },
+    })
+    const cells = wrapper.findAll('.rs-table__cell-body--editable')
+    expect(cells.length).toBeGreaterThan(0)
+    await cells[0]!.trigger('dblclick')
+    expect(wrapper.findAll('.rs-table-cell-editor')).toHaveLength(1)
+    wrapper.unmount()
+  })
+})