Add some tests.

Author: gudaoxuri

package.json

@@ -56,13 +56,14 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.21.1",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.6",
     "@types/sortablejs": "^1.15.8",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vitest/ui": "^1.6.0",
     "autoprefixer": "^10.4.19",
     "daisyui": "^4.12.2",
     "eslint": "^9.5.0",
+    "happy-dom": "^14.12.0",
     "octicons-css": "^19.8.0",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",

pnpm-lock.yaml

@@ -5,37 +5,37 @@ export enum AlertKind {
   SUCCESS,
 }
 
-export function showAlert(message: string, showTimeSec: number, kind: AlertKind = AlertKind.WARNING, attachEle: HTMLElement = document.body) {
+/**
+ * 消息提示
+ *
+ * Message prompt
+ *
+ * @param message 提示的消息 / Message to prompt
+ * @param showTimeSec 显示的时间（秒） / Display time (seconds)
+ * @param kind  消息类型 / Message type
+ * @param attachEle 附加到的元素 / Element to attach
+ */
+export function showAlert(message: string, showTimeSec: number = 4, kind: AlertKind = AlertKind.WARNING, attachEle: HTMLElement = document.body) {
   let alertDiv = ``
   switch (kind) {
     case AlertKind.ERROR: {
-      alertDiv = `  <div role="alert" class="iw-alert-wrap iw-alert-wrap--error">
-   ${message}
-  </div>`
+      alertDiv = `  <div role="alert" class="iw-alert-wrap iw-alert-wrap--error">${message}</div>`
       break
     }
     case AlertKind.WARNING: {
-      alertDiv = `  <div role="alert" class="iw-alert-wrap iw-alert-wrap--warning">
-   ${message}
-  </div>`
+      alertDiv = `  <div role="alert" class="iw-alert-wrap iw-alert-wrap--warning">${message}</div>`
       break
     }
     case AlertKind.INFO: {
-      alertDiv = `  <div role="alert" class="iw-alert-wrap iw-alert-wrap--info">
-   ${message}
-  </div>`
+      alertDiv = `  <div role="alert" class="iw-alert-wrap iw-alert-wrap--info">${message}</div>`
       break
     }
     case AlertKind.SUCCESS: {
-      alertDiv = `  <div role="alert" class="iw-alert-wrap iw-alert-wrap--success">
-   ${message}
-  </div>`
+      alertDiv = `  <div role="alert" class="iw-alert-wrap iw-alert-wrap--success">${message}</div>`
       break
     }
     default: {
-      alertDiv = `  <div role="alert" class="iw-alert-wrap">
-   ${message}
-  </div>`
+      alertDiv = `  <div role="alert" class="iw-alert-wrap">${message}</div>`
       break
     }
   }

src/components/common/Alert.ts

@@ -48,14 +48,15 @@ export type SimpleDataSliceProps = ChangeAllOptional<DataSliceProps>
  *
  * Generate data slice props
  *
- * @param simple 简单数据分片属性 / Simple data slice props
+ * @param tableSimple 表格级简单数据分片属性 / Table level simple data slice props
+ * @param layoutSimple 布局级简单数据分片属性 / Layout level simple data slice props
  * @returns 数据分片属性 / Data slice props
  */
-export function generateDataSliceProps(simple?: SimpleDataSliceProps): DataSliceProps {
+export function generateDataSliceProps(tableSimple?: SimpleDataSliceProps, layoutSimple?: SimpleDataSliceProps): DataSliceProps {
   return {
-    offsetNumber: simple?.offsetNumber ?? 0,
-    fetchNumber: simple?.fetchNumber ?? 10,
-    fetchNumbers: simple?.fetchNumbers ?? [5, 10, 20, 30, 50, 100],
+    offsetNumber: layoutSimple?.offsetNumber ?? tableSimple?.offsetNumber ?? 0,
+    fetchNumber: layoutSimple?.fetchNumber ?? tableSimple?.fetchNumber ?? 10,
+    fetchNumbers: layoutSimple?.fetchNumbers ?? tableSimple?.fetchNumbers ?? [5, 10, 20, 30, 50, 100],
   }
 }
 
@@ -144,13 +145,14 @@ export type SimpleAggDataProps = ChangeOptionalExcept<AggDataProps, 'enabledColu
  *
  * Generate aggregate data props
  *
- * @param simple 简单聚合数据属性 / Simple aggregate data props
+ * @param tableSimple 表格级简单聚合数据属性 / Table level simple aggregate data props
+ * @param layoutSimple 布局级简单聚合数据属性 / Layout level simple aggregate data props
  * @returns 聚合数据属性 / Aggregate data props
  */
-export function generateAggDataProps(simple: SimpleAggDataProps): AggDataProps {
+export function generateAggDataProps(tableSimple?: SimpleAggDataProps, layoutSimple?: SimpleAggDataProps): AggDataProps {
   return {
-    enabledColumnNames: simple.enabledColumnNames,
-    items: simple.items ?? [],
+    enabledColumnNames: (layoutSimple?.enabledColumnNames ?? tableSimple?.enabledColumnNames)!,
+    items: layoutSimple?.items ?? tableSimple?.items ?? [],
   }
 }
 
@@ -206,13 +208,14 @@ export type SimpleFilterDataProps = ChangeOptionalExcept<FilterDataProps, 'enabl
  *
  * Generate filter data props
  *
- * @param simple 简单过滤数据属性 / Simple filter data props
+ * @param tableSimple 表格级简单过滤数据属性 / Table level simple filter data props
+ * @param layoutSimple 布局级简单过滤数据属性 / Layout level simple filter data props
  * @returns 过滤数据属性 / Filter data props
  */
-export function generateFilterDataProps(simple: SimpleFilterDataProps): FilterDataProps {
+export function generateFilterDataProps(tableSimple?: SimpleFilterDataProps, layoutSimple?: SimpleFilterDataProps): FilterDataProps {
   return {
-    enabledColumnNames: simple.enabledColumnNames,
-    groups: simple.groups ?? [],
+    enabledColumnNames: (layoutSimple?.enabledColumnNames ?? tableSimple?.enabledColumnNames)!,
+    groups: layoutSimple?.groups ?? tableSimple?.groups ?? [],
   }
 }
 
@@ -294,14 +297,15 @@ export type SimpleGroupDataProps = ChangeOptionalExcept<GroupDataProps, 'enabled
  *
  * Generate group data props
  *
- * @param simple 简单分组数据属性 / Simple group data props
+ * @param tableSimple 表格级简单分组数据属性 / Table level simple group data props
+ * @param layoutSimple 布局级简单分组数据属性 / Layout level simple group data props
  * @returns 分组数据属性 / Group data props
  */
-export function generateGroupDataProps(simple: SimpleGroupDataProps): GroupDataProps {
+export function generateGroupDataProps(tableSimple?: SimpleGroupDataProps, layoutSimple?: SimpleGroupDataProps): GroupDataProps {
   return {
-    enabledColumnNames: simple.enabledColumnNames,
-    item: simple.item,
-    slices: simple.slices,
+    enabledColumnNames: (layoutSimple?.enabledColumnNames ?? tableSimple?.enabledColumnNames)!,
+    item: layoutSimple?.item ?? tableSimple?.item,
+    slices: layoutSimple?.slices ?? tableSimple?.slices,
   }
 }
 
@@ -359,13 +363,14 @@ export type SimpleSortDataProps = ChangeOptionalExcept<SortDataProps, 'enabledCo
  *
  * Generate sort data props
  *
- * @param simple 简单排序数据属性 / Simple sort data props
+ * @param tableSimple 表格级简单排序数据属性 / Table level simple sort data props
+ * @param layoutSimple 布局级简单排序数据属性 / Layout level simple sort data props
  * @returns 排序数据属性 / Sort data props
  */
-export function generateSortDataProps(simple: SimpleSortDataProps): SortDataProps {
+export function generateSortDataProps(tableSimple?: SimpleSortDataProps, layoutSimple?: SimpleSortDataProps): SortDataProps {
   return {
-    enabledColumnNames: simple.enabledColumnNames,
-    items: simple.items ?? [],
+    enabledColumnNames: (layoutSimple?.enabledColumnNames ?? tableSimple?.enabledColumnNames)!,
+    items: layoutSimple?.items ?? tableSimple?.items ?? [],
   }
 }
 
@@ -441,17 +446,18 @@ export type SimpleGanttLayoutProps = ChangeOptionalExcept<GanttLayoutProps, 'pla
  *
  * Generate Gantt layout props
  *
- * @param simple 简单甘特布局属性 / Simple Gantt layout props
+ * @param tableSimple 表格级简单甘特布局属性 / Table level simple Gantt layout props
+ * @param layoutSimple 布局级简单甘特布局属性 / Table level simple Gantt layout props
  * @returns 甘特布局属性 / Gantt layout props
  */
-export function generateGanttLayoutProps(simple: SimpleGanttLayoutProps): GanttLayoutProps {
+export function generateGanttLayoutProps(tableSimple?: SimpleGanttLayoutProps, layoutSimple?: SimpleGanttLayoutProps): GanttLayoutProps {
   return {
-    timelineWidth: simple.timelineWidth ?? 300,
-    showKind: simple.showKind ?? GanttShowKind.DAY,
-    planStartTimeColumnName: simple.planStartTimeColumnName,
-    planEndTimeColumnName: simple.planEndTimeColumnName,
-    actualStartTimeColumnName: simple.actualStartTimeColumnName,
-    actualEndTimeColumnName: simple.actualEndTimeColumnName,
+    timelineWidth: layoutSimple?.timelineWidth ?? tableSimple?.timelineWidth ?? 300,
+    showKind: layoutSimple?.showKind ?? tableSimple?.showKind ?? GanttShowKind.DAY,
+    planStartTimeColumnName: (layoutSimple?.planStartTimeColumnName ?? tableSimple?.planStartTimeColumnName)!,
+    planEndTimeColumnName: (layoutSimple?.planEndTimeColumnName ?? tableSimple?.planEndTimeColumnName)!,
+    actualStartTimeColumnName: layoutSimple?.actualStartTimeColumnName ?? tableSimple?.actualStartTimeColumnName,
+    actualEndTimeColumnName: layoutSimple?.actualEndTimeColumnName ?? tableSimple?.actualEndTimeColumnName,
   }
 }
 
@@ -487,12 +493,13 @@ export type SimpleEditDataProps = ChangeOptionalExcept<EditDataProps, 'enabledCo
  *
  * Generate edit data props
  *
- * @param simple 简单编辑数据属性 / Simple edit data props
+ * @param tableSimple 表格级简单编辑数据属性 / Table level simple edit data props
+ * @param layoutSimple 布局级简单编辑数据属性 / Layout level simple edit data props
  * @returns 编辑数据属性 / Edit data props
  */
-export function generateEditDataProps(simple: SimpleEditDataProps): EditDataProps {
+export function generateEditDataProps(tableSimple?: SimpleEditDataProps, layoutSimple?: SimpleEditDataProps): EditDataProps {
   return {
-    enabledColumnNames: simple.enabledColumnNames,
-    markEditable: simple.markEditable ?? false,
+    enabledColumnNames: (layoutSimple?.enabledColumnNames ?? tableSimple?.enabledColumnNames)!,
+    markEditable: layoutSimple?.markEditable ?? tableSimple?.markEditable ?? false,
   }
 }

src/props/functionProps.ts

@@ -3,7 +3,7 @@
  */
 
 import { getRandomString } from '../utils/basic'
-import type { ChangeAllOptional, ChangeOptionalExcept, ChangeOptionalExceptWithTypes } from '../utils/tsHelper'
+import type { ChangeAllOptional, ChangeOptionalExcept } from '../utils/tsHelper'
 import { DataKind, LayoutKind, SizeKind, SubDataShowKind, getDefaultIconByDataKind, getDefaultIconByLayoutKind } from './enumProps'
 
 import type { TableEventProps } from './eventProps'
@@ -164,13 +164,13 @@ function generateCommonFunctionProps(tableSimple: SimpleCommonFunctionProps, lay
     showSelectColumn: layoutSimple?.showSelectColumn ?? tableSimple.showSelectColumn ?? false,
     subDataShowKind: layoutSimple?.subDataShowKind ?? tableSimple.subDataShowKind ?? SubDataShowKind.FOLD_SUB_DATA,
     actionColumn: layoutSimple?.actionColumn ?? tableSimple.actionColumn,
-    slice: generateDataSliceProps(layoutSimple?.slice ?? tableSimple.slice),
-    gantt: (layoutSimple?.gantt ?? tableSimple.gantt) && generateGanttLayoutProps((layoutSimple?.gantt ?? tableSimple.gantt)!),
-    filter: (layoutSimple?.filter ?? tableSimple.filter) && generateFilterDataProps((layoutSimple?.filter ?? tableSimple.filter)!),
-    group: (layoutSimple?.group ?? tableSimple.group) && generateGroupDataProps((layoutSimple?.group ?? tableSimple.group)!),
-    sort: (layoutSimple?.sort ?? tableSimple.sort) && generateSortDataProps((layoutSimple?.sort ?? tableSimple.sort)!),
-    agg: (layoutSimple?.agg ?? tableSimple.agg) && generateAggDataProps((layoutSimple?.agg ?? tableSimple.agg)!),
-    edit: (layoutSimple?.edit ?? tableSimple.edit) && generateEditDataProps((layoutSimple?.edit ?? tableSimple.edit)!),
+    slice: generateDataSliceProps(tableSimple.slice, layoutSimple?.slice),
+    gantt: (layoutSimple?.gantt ?? tableSimple.gantt) && generateGanttLayoutProps(tableSimple.gantt, layoutSimple?.gantt),
+    filter: (layoutSimple?.filter ?? tableSimple.filter) && generateFilterDataProps(tableSimple.filter, layoutSimple?.filter),
+    group: (layoutSimple?.group ?? tableSimple.group) && generateGroupDataProps(tableSimple.group, layoutSimple?.group),
+    sort: (layoutSimple?.sort ?? tableSimple.sort) && generateSortDataProps(tableSimple.sort, layoutSimple?.sort),
+    agg: (layoutSimple?.agg ?? tableSimple.agg) && generateAggDataProps(tableSimple.agg, layoutSimple?.agg),
+    edit: (layoutSimple?.edit ?? tableSimple.edit) && generateEditDataProps(tableSimple.edit, layoutSimple?.edit),
   }
 }
 
@@ -761,14 +761,38 @@ export interface LayoutProps extends CommonFunctionProps {
  *
  * Simple layout props
  */
-export type SimpleLayoutProps = ChangeOptionalExceptWithTypes<LayoutProps, 'title', {
+export interface SimpleLayoutProps extends SimpleCommonFunctionProps {
+  /**
+   * ID
+   *
+   * ID
+   */
+  id?: string
+  /**
+   * 标题
+   *
+   * Title
+   */
+  title: string
+  /**
+   * 布局类型
+   *
+   * Layout kind
+   */
+  layoutKind?: LayoutKind
+  /**
+   * 图标（来自内部图标库）
+   *
+   * Icon (from internal icon library)
+   */
+  icon?: string
   /**
    * 列
    *
    * Columns
    */
   columns?: SimpleLayoutColumnProps[]
-}>
+}
 /**
  * 生成布局属性
  *

src/props/kernelProps.ts

@@ -21,7 +21,7 @@ export function groupBy<T>(array: T[], predicate: (value: T, index: number, arra
  *
  * @param element 当前元素 / Current element
  * @param parentClassName 父元素的类名 / Parent element class name
- * @returns
+ * @returns 父元素 / Parent element
  */
 export function getParentWithClass(element: HTMLElement | null, parentClassName: string): HTMLElement | null {
   while (element) {

src/utils/basic.ts

@@ -19,7 +19,9 @@ export function deepToRaw<T extends Record<string, any>>(sourceObj: T): T {
   const objectIterator = (input: any): any => {
     if (Array.isArray(input)) {
       return input.map(item => objectIterator(item))
-    } if (isRef(input) || isReactive(input) || isProxy(input)) {
+    } if (isRef(input)) {
+      return objectIterator(toRaw(input.value))
+    } if (isReactive(input) || isProxy(input)) {
       return objectIterator(toRaw(input))
     } if (input && typeof input === 'object') {
       return Object.keys(input).reduce((acc, key) => {

src/utils/vueHelper.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it, vi } from 'vitest'
+import { AlertKind, showAlert } from '../../src/components/common/Alert'
+
+describe('showAlert', () => {
+  function checkAlert(className: string, message: string) {
+    const alert = document.querySelector(`.${className}`)!
+    expect(alert).not.toBeNull()
+    expect(alert.textContent).toBe(message)
+  }
+
+  it('should display an error alert', () => {
+    vi.useFakeTimers()
+    showAlert('Error message', 4, AlertKind.ERROR)
+    checkAlert('iw-alert-wrap--error', 'Error message')
+    vi.advanceTimersByTime(4000)
+    expect(document.querySelector('.iw-alert-wrap--error')).toBeNull()
+    vi.useRealTimers()
+  })
+
+  it('should display a warning alert', () => {
+    vi.useFakeTimers()
+    showAlert('Warning message', 4, AlertKind.WARNING)
+    checkAlert('iw-alert-wrap--warning', 'Warning message')
+    vi.advanceTimersByTime(4000)
+    expect(document.querySelector('.iw-alert-wrap--warning')).toBeNull()
+    vi.useRealTimers()
+  })
+
+  it('should display an info alert', () => {
+    vi.useFakeTimers()
+    showAlert('Info message', 4, AlertKind.INFO)
+    checkAlert('iw-alert-wrap--info', 'Info message')
+    vi.advanceTimersByTime(4000)
+    expect(document.querySelector('.iw-alert-wrap--info')).toBeNull()
+    vi.useRealTimers()
+  })
+
+  it('should display a success alert', () => {
+    vi.useFakeTimers()
+    showAlert('Success message', 4, AlertKind.SUCCESS)
+    checkAlert('iw-alert-wrap--success', 'Success message')
+    vi.advanceTimersByTime(4000)
+    expect(document.querySelector('.iw-alert-wrap--success')).toBeNull()
+    vi.useRealTimers()
+  })
+
+  it('should remove the alert after the specified time', () => {
+    vi.useFakeTimers()
+    showAlert('Temporary message', 2, AlertKind.INFO)
+    checkAlert('iw-alert-wrap--info', 'Temporary message')
+    vi.advanceTimersByTime(2000)
+    expect(document.querySelector('.iw-alert-wrap--info')).toBeNull()
+    vi.useRealTimers()
+  })
+
+  it('should attach the alert to a specific element', () => {
+    vi.useFakeTimers()
+    const attachEle = document.createElement('div')
+    document.body.append(attachEle)
+    showAlert('Attached message', 4, AlertKind.WARNING, attachEle)
+    const alert = attachEle.querySelector('.iw-alert-wrap--warning')!
+    expect(alert).not.toBeNull()
+    expect(alert.textContent).toBe('Attached message')
+    vi.advanceTimersByTime(4000)
+    expect(attachEle.querySelector('.iw-alert-wrap--warning')).toBeNull()
+    attachEle.remove()
+    vi.useRealTimers()
+  })
+})