From db36ab927659fd4ea48d3d7ab0471cdd6f66e2cf Mon Sep 17 00:00:00 2001
From: Barrior <barrior@qq.com>
Date: Mon, 15 Jan 2024 18:30:54 +0800
Subject: [PATCH] test: add test cases

---
 test/@helpers/dom.ts                   |  14 ++++
 test/core-react/@helpers/Vertical.tsx  |  36 +++++++++
 test/core-react/@helpers/renderers.tsx |  53 ++++++++++++
 test/core-react/span.test.tsx          | 107 +++++++++++++++++++++++++
 4 files changed, 210 insertions(+)
 create mode 100644 test/core-react/@helpers/Vertical.tsx
 create mode 100644 test/core-react/@helpers/renderers.tsx
 create mode 100644 test/core-react/span.test.tsx

diff --git a/test/@helpers/dom.ts b/test/@helpers/dom.ts
index de3bbc7..3c6ee36 100644
--- a/test/@helpers/dom.ts
+++ b/test/@helpers/dom.ts
@@ -23,3 +23,17 @@ export function createElement(params?: ICreateElementParams) {
 
   return element
 }
+
+/**
+ * 获取 DOM 元素样式
+ * @param container 容器
+ * @param selector 选择器
+ * @returns 样式对象
+ */
+export function getElementStyle(container: HTMLElement, selector: string) {
+  const elem = container.querySelector(selector)
+  if (elem) {
+    return window.getComputedStyle(elem)
+  }
+  return {} as Partial<CSSStyleDeclaration>
+}
diff --git a/test/core-react/@helpers/Vertical.tsx b/test/core-react/@helpers/Vertical.tsx
new file mode 100644
index 0000000..9abcea3
--- /dev/null
+++ b/test/core-react/@helpers/Vertical.tsx
@@ -0,0 +1,36 @@
+import type { IOpenItemLayoutParams } from '@core-react/index'
+import type { FC } from 'react'
+
+const Vertical: FC<IOpenItemLayoutParams> = ({ body, schema, validator, required }) => {
+  return (
+    <div className="item-layout-vertical">
+      <div className="item-header">
+        {required && <span className="item-mark">*</span>}
+
+        <span className="item-title">{schema.title}</span>
+
+        {!!schema.titleDescription && (
+          <span className="item-title-description">{schema.titleDescription}</span>
+        )}
+      </div>
+
+      <div className="item-body">{body}</div>
+
+      <div className="item-footer">
+        {validator.status === 'error' && !!validator.message && (
+          <div className="item-error-msg">{validator.message}</div>
+        )}
+
+        {validator.status === 'warning' && !!validator.message && (
+          <div className="item-warning-msg">{validator.message}</div>
+        )}
+
+        {!!schema.description && (
+          <div className="item-description">{schema.description}</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Vertical
diff --git a/test/core-react/@helpers/renderers.tsx b/test/core-react/@helpers/renderers.tsx
new file mode 100644
index 0000000..ca92012
--- /dev/null
+++ b/test/core-react/@helpers/renderers.tsx
@@ -0,0 +1,53 @@
+import type { IRenderers, ISchema } from '@core-react/index'
+import classNames from 'classnames'
+
+const renderers: IRenderers<any, ISchema> = {
+  InputText: {
+    component: ({ schema, value, disabled, readonly, onChange }) => {
+      if (readonly) {
+        return <div className="input-text is-readonly">{value}</div>
+      }
+      return (
+        <input
+          className={classNames('input-text', { 'is-disabled': disabled })}
+          {...schema.renderOptions}
+          value={value ?? ''}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      )
+    },
+  },
+  InputNumber: {
+    component: ({ schema, value, disabled, readonly, onChange }) => {
+      if (readonly) {
+        return <div className="input-number is-readonly">{value}</div>
+      }
+      return (
+        <input
+          className={classNames('input-number', { 'is-disabled': disabled })}
+          {...schema.renderOptions}
+          value={value ?? ''}
+          onChange={(e) => onChange(Number(e.target.value))}
+        />
+      )
+    },
+  },
+  TextArea: {
+    component: ({ schema, value, disabled, readonly, onChange }) => {
+      if (readonly) {
+        return <div className="textarea is-readonly">{value}</div>
+      }
+      return (
+        <textarea
+          rows={3}
+          className={classNames('textarea', { 'is-disabled': disabled })}
+          {...schema.renderOptions}
+          value={value ?? ''}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      )
+    },
+  },
+}
+
+export default renderers
diff --git a/test/core-react/span.test.tsx b/test/core-react/span.test.tsx
new file mode 100644
index 0000000..d8bbf00
--- /dev/null
+++ b/test/core-react/span.test.tsx
@@ -0,0 +1,107 @@
+import Core from '@core-react/index'
+import { getElementStyle } from '@test/@helpers/dom'
+import { wrapRootSchema } from '@test/@helpers/schema'
+import { render } from '@testing-library/react'
+
+import renderers from './@helpers/renderers'
+import Vertical from './@helpers/Vertical'
+
+describe('schema span 模式验证', () => {
+  test('normal 模式下支持 span 与 spanStart，输出的 gridColumn 样式值应该符合预期', async () => {
+    const schema = wrapRootSchema({
+      width: {
+        title: '宽度',
+        renderType: 'InputNumber',
+        className: 'width',
+        // 通过 span 设置表单项为 50% 的宽度（12/24）
+        span: 12,
+      },
+      height: {
+        title: '高度',
+        renderType: 'InputNumber',
+        className: 'height',
+        span: 12,
+      },
+      left: {
+        title: '水平位置',
+        renderType: 'InputNumber',
+        className: 'left',
+        // 通过 span 设置表单项为 50% 的宽度
+        span: 12,
+        // 通过 spanStart 设置表单项从第一个栅格开始布局，即新起一行
+        spanStart: 1,
+      },
+      // 后面的表单项会自动计算，跟随上一个表单项的位置
+      top: {
+        title: '垂直位置',
+        renderType: 'InputNumber',
+        className: 'top',
+        span: 12,
+      },
+      // 当 span 和 spanStart 都未定义时，自动恢复常规模式（占满一行）
+      rotate: {
+        title: '旋转角度',
+        renderType: 'InputNumber',
+        className: 'rotate',
+      },
+    })
+
+    const { container } = render(
+      <Core layout="normal" schema={schema} itemLayout={Vertical} renderers={renderers} />
+    )
+
+    const getGridColumn = (selector: string) => {
+      return getElementStyle(container, selector).gridColumn || ''
+    }
+
+    expect(getGridColumn('.width')).toBe('1/13')
+    expect(getGridColumn('.height')).toBe('13/25')
+    expect(getGridColumn('.left')).toBe('1/13')
+    expect(getGridColumn('.top')).toBe('13/25')
+    expect(getGridColumn('.rotate')).toBe('1/25')
+  })
+
+  test('autoFill 模式下只支持 spanStart，输出的 gridColumn 样式值应该符合预期', async () => {
+    const schema = wrapRootSchema({
+      width: {
+        title: '宽度',
+        renderType: 'InputNumber',
+        className: 'width',
+      },
+      height: {
+        title: '高度',
+        renderType: 'InputNumber',
+        className: 'height',
+      },
+      left: {
+        title: '水平位置',
+        renderType: 'InputNumber',
+        className: 'left',
+        spanStart: 1,
+      },
+      top: {
+        title: '垂直位置',
+        renderType: 'InputNumber',
+        className: 'top',
+      },
+    })
+
+    const { container } = render(
+      <Core
+        layout="autoFill"
+        schema={schema}
+        itemLayout={Vertical}
+        renderers={renderers}
+      />
+    )
+
+    const getGridColumn = (selector: string) => {
+      return getElementStyle(container, selector).gridColumn || ''
+    }
+
+    expect(getGridColumn('.width')).toBe('')
+    expect(getGridColumn('.height')).toBe('')
+    expect(getGridColumn('.left')).toBe('1/auto')
+    expect(getGridColumn('.top')).toBe('')
+  })
+})