@veltra/sheet 2.0.1 → 2.2.0

package/src/components/sheet/__test__/insert-count-menu-item.test.ts

@@ -0,0 +1,123 @@
+import { ContextmenuRootDIKey } from '@veltra/desktop'
+import { describe, expect, it, vi } from 'vitest'
+import { createApp, h, nextTick } from 'vue'
+
+import InsertCountMenuItem from '../insert-count-menu-item.vue'
+
+function mountItem(options?: { defaultValue?: number }) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+  const onConfirm = vi.fn()
+  const onItemClickEnd = vi.fn()
+
+  const app = createApp({
+    setup() {
+      return () =>
+        h(InsertCountMenuItem, {
+          prefix: '在上方插入',
+          suffix: '行',
+          defaultValue: options?.defaultValue ?? 2,
+          min: 1,
+          max: 1000,
+          onConfirm
+        })
+    }
+  })
+  app.provide(ContextmenuRootDIKey, {
+    cls: { b: '', e: () => '', m: () => '' } as never,
+    onItemClickStart: () => {},
+    onItemClickEnd
+  })
+  app.mount(host)
+
+  return {
+    host,
+    onConfirm,
+    onItemClickEnd,
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+describe('InsertCountMenuItem', () => {
+  it('无确认按钮', async () => {
+    const { host, unmount } = mountItem()
+    try {
+      await nextTick()
+      expect(host.querySelector('button')?.textContent).not.toBe('确认')
+      expect(
+        Array.from(host.querySelectorAll('button')).some((b) => b.textContent === '确认')
+      ).toBe(false)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('点击菜单项本体按当前值执行并关闭', async () => {
+    const { host, onConfirm, onItemClickEnd, unmount } = mountItem({ defaultValue: 3 })
+    try {
+      await nextTick()
+      host.querySelector<HTMLElement>('.u-sheet__insert-count-menu')!.click()
+      expect(onConfirm).toHaveBeenCalledWith(3)
+      expect(onItemClickEnd).toHaveBeenCalledOnce()
+    } finally {
+      unmount()
+    }
+  })
+
+  it('点击输入框区域不执行', async () => {
+    const { host, onConfirm, onItemClickEnd, unmount } = mountItem({ defaultValue: 3 })
+    try {
+      await nextTick()
+      host.querySelector<HTMLElement>('.u-sheet__insert-count-input')!.click()
+      expect(onConfirm).not.toHaveBeenCalled()
+      expect(onItemClickEnd).not.toHaveBeenCalled()
+    } finally {
+      unmount()
+    }
+  })
+
+  it('UNumberInput clearable=false（无清除钮）', async () => {
+    const { host, unmount } = mountItem({ defaultValue: 3 })
+    try {
+      await nextTick()
+      expect(host.querySelector('.u-number-input__clear')).toBeNull()
+    } finally {
+      unmount()
+    }
+  })
+
+  it('输入框内 Enter 提交（穿透 UNumberInput keydown.stop）', async () => {
+    const { host, onConfirm, onItemClickEnd, unmount } = mountItem({ defaultValue: 4 })
+    try {
+      await nextTick()
+      const input = host.querySelector<HTMLInputElement>('input')
+      expect(input).toBeTruthy()
+      input!.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true })
+      )
+      expect(onConfirm).toHaveBeenCalledWith(4)
+      expect(onItemClickEnd).toHaveBeenCalledOnce()
+    } finally {
+      unmount()
+    }
+  })
+
+  it('输入框内 Esc 关闭且不提交', async () => {
+    const { host, onConfirm, onItemClickEnd, unmount } = mountItem()
+    try {
+      await nextTick()
+      const input = host.querySelector<HTMLInputElement>('input')
+      expect(input).toBeTruthy()
+      input!.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })
+      )
+      expect(onConfirm).not.toHaveBeenCalled()
+      expect(onItemClickEnd).toHaveBeenCalledOnce()
+    } finally {
+      unmount()
+    }
+  })
+})

package/src/components/sheet/__test__/insert-image-popup.test.ts

@@ -0,0 +1,89 @@
+import { Sheet } from '@veltra/sheet-core/core/sheet'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createApp, h, type App } from 'vue'
+
+import { createSheetContext } from '../../../tools/context'
+import USheetInsertImagePopup from '../popups/insert-image-popup.vue'
+
+const mocks = vi.hoisted(() => {
+  const message = Object.assign(vi.fn(), {
+    success: vi.fn(),
+    warn: vi.fn(),
+    info: vi.fn(),
+    error: vi.fn(),
+    default: vi.fn()
+  })
+  return { message }
+})
+
+vi.mock('@veltra/desktop', async () => {
+  const { defineComponent, h } = await import('vue')
+  return {
+    message: mocks.message,
+    UFilePicker: defineComponent({
+      name: 'UFilePickerStub',
+      props: ['accept'],
+      emits: ['pick'],
+      setup(props, { emit }) {
+        return () =>
+          h(
+            'button',
+            {
+              class: 'picker-stub-btn',
+              'data-accept': props.accept as string,
+              onClick: () =>
+                emit('pick', [
+                  new File([new Uint8Array([9, 8, 7])], 'pic.png', { type: 'image/png' })
+                ])
+            },
+            'pick'
+          )
+      }
+    })
+  }
+})
+
+const apps: App[] = []
+const containers: HTMLElement[] = []
+
+function mountPopup(onClose?: () => void) {
+  const sheet = new Sheet()
+  sheet.selectCell({ row: 1, col: 1 })
+  const context = createSheetContext(sheet)
+  const el = document.createElement('div')
+  document.body.appendChild(el)
+  containers.push(el)
+  const app = createApp({
+    setup() {
+      return () => h(USheetInsertImagePopup, { context, onClose })
+    }
+  })
+  app.mount(el)
+  apps.push(app)
+  return { el, sheet, context }
+}
+
+afterEach(() => {
+  apps.splice(0).forEach((app) => app.unmount())
+  containers.splice(0).forEach((el) => el.remove())
+  vi.clearAllMocks()
+})
+
+describe('USheetInsertImagePopup', () => {
+  it('accept 限定扩展名；pick 后关闭并调用 insertImage', async () => {
+    const closed = vi.fn()
+    const { el, sheet } = mountPopup(closed)
+    const btn = el.querySelector<HTMLButtonElement>('.picker-stub-btn')!
+    expect(btn.getAttribute('data-accept')).toBe('.png,.jpg,.jpeg,.gif,.svg,.webp')
+
+    btn.click()
+    await Promise.resolve()
+    await Promise.resolve()
+
+    expect(closed).toHaveBeenCalledTimes(1)
+    expect(sheet.getImages()).toHaveLength(1)
+    expect(sheet.getImages()[0]?.anchor.from).toEqual({ row: 1, col: 1 })
+    expect(sheet.getImages()[0]?.type).toBe('png')
+    expect([...sheet.getImages()[0]!.data]).toEqual([9, 8, 7])
+  })
+})

package/src/components/sheet/__test__/insert-image.test.ts

@@ -0,0 +1,100 @@
+import { Sheet } from '@veltra/sheet-core/core/sheet'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { createSheetContext } from '../../../tools/context'
+import {
+  INSERT_IMAGE_ACCEPT,
+  insertImageFromFile,
+  pickAndInsertImage,
+  resolveImageType
+} from '../insert-image'
+
+const mocks = vi.hoisted(() => {
+  const message = Object.assign(vi.fn(), {
+    success: vi.fn(),
+    warn: vi.fn(),
+    info: vi.fn(),
+    error: vi.fn(),
+    default: vi.fn()
+  })
+  return { message }
+})
+
+vi.mock('@veltra/desktop', () => ({ message: mocks.message }))
+
+function makeFile(name: string, type: string, bytes: number[] = [0x89, 0x50]): File {
+  return new File([new Uint8Array(bytes)], name, { type })
+}
+
+afterEach(() => {
+  vi.clearAllMocks()
+  document.body.querySelectorAll('input[type="file"]').forEach((el) => el.remove())
+})
+
+describe('resolveImageType', () => {
+  it('按 MIME 映射 png/jpeg/gif/svg/webp', () => {
+    expect(resolveImageType(makeFile('a.png', 'image/png'))).toBe('png')
+    expect(resolveImageType(makeFile('a.jpg', 'image/jpeg'))).toBe('jpeg')
+    expect(resolveImageType(makeFile('a.gif', 'image/gif'))).toBe('gif')
+    expect(resolveImageType(makeFile('a.svg', 'image/svg+xml'))).toBe('svg')
+    expect(resolveImageType(makeFile('a.webp', 'image/webp'))).toBe('webp')
+  })
+
+  it('MIME 为空时回落扩展名；不支持则 undefined', () => {
+    expect(resolveImageType(makeFile('logo.PNG', ''))).toBe('png')
+    expect(resolveImageType(makeFile('photo.jpg', ''))).toBe('jpeg')
+    expect(resolveImageType(makeFile('x.bmp', 'image/bmp'))).toBeUndefined()
+    expect(resolveImageType(makeFile('x.txt', 'text/plain'))).toBeUndefined()
+  })
+})
+
+describe('insertImageFromFile', () => {
+  it('支持格式 → 锚定活动格并经 ctx.insertImage 写入', async () => {
+    const sheet = new Sheet()
+    const ctx = createSheetContext(sheet)
+    ctx.selectCell({ row: 2, col: 3 })
+    const bytes = [1, 2, 3, 4]
+    const id = await insertImageFromFile(ctx, makeFile('logo.png', 'image/png', bytes))
+    expect(id).toBeTruthy()
+    const images = ctx.getImages()
+    expect(images).toHaveLength(1)
+    expect(images[0]?.type).toBe('png')
+    expect(images[0]?.anchor.from).toEqual({ row: 2, col: 3 })
+    expect([...images[0]!.data]).toEqual(bytes)
+    expect(mocks.message.error).not.toHaveBeenCalled()
+  })
+
+  it('不支持格式 → message.error，不写入', async () => {
+    const sheet = new Sheet()
+    const ctx = createSheetContext(sheet)
+    const id = await insertImageFromFile(ctx, makeFile('x.bmp', 'image/bmp'))
+    expect(id).toBeUndefined()
+    expect(ctx.getImages()).toHaveLength(0)
+    expect(mocks.message.error).toHaveBeenCalledWith(expect.stringContaining('不支持的图片格式'))
+  })
+
+  it('无活动格 → message.error，不写入', async () => {
+    const sheet = new Sheet()
+    const ctx = createSheetContext(sheet)
+    sheet.selection.clear()
+    const id = await insertImageFromFile(ctx, makeFile('a.png', 'image/png'))
+    expect(id).toBeUndefined()
+    expect(ctx.getImages()).toHaveLength(0)
+    expect(mocks.message.error).toHaveBeenCalledWith('请先选择单元格')
+  })
+})
+
+describe('pickAndInsertImage', () => {
+  it('创建隐藏 file input（同一 accept）并 click', () => {
+    const sheet = new Sheet()
+    const ctx = createSheetContext(sheet)
+    const click = vi.spyOn(HTMLInputElement.prototype, 'click').mockImplementation(() => {})
+    pickAndInsertImage(ctx)
+    const input = document.body.querySelector<HTMLInputElement>('input[type="file"]')
+    expect(input).toBeTruthy()
+    expect(input!.accept).toBe(INSERT_IMAGE_ACCEPT)
+    expect(input!.hidden).toBe(true)
+    expect(click).toHaveBeenCalled()
+    click.mockRestore()
+  })
+})