黄金用例参考

下表由 cases/*.json 在构建期自动渲染。各端测试仓库照此翻译成本地测试—— 逻辑不共享，行为共享。

选择组件

click-emits-onclick点击触发 onClick

given（前置）

{
  "props": {}
}

when（动作）

{
  "action": "click"
}

动作类型：点击

then（断言）

事件 onClick触发，期望 1 次

disabled-blocks-click禁用态不触发 onClick

given（前置）

{
  "props": {
    "disabled": true
  }
}

when（动作）

{
  "action": "click"
}

动作类型：点击

then（断言）

事件 onClick不触发
渲染结果不可交互（禁用）

loading-blocks-click加载态不触发 onClick

given（前置）

{
  "props": {
    "loading": true
  }
}

when（动作）

{
  "action": "click"
}

动作类型：点击

then（断言）

事件 onClick不触发
渲染结果不可交互（禁用）

disabled-precedes-loading禁用优先于加载

given（前置）

{
  "props": {
    "disabled": true,
    "loading": true
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

事件 onClick不触发
渲染结果不可交互（禁用）
两态共存时按禁用呈现；端实现可自行决定是否同时显示加载指示器，但必须不可交互

default-type-renders-text默认类型渲染文字内容

given（前置）

{
  "props": {
    "type": "default"
  }
}

when（动作）

{
  "action": "render",
  "target": "default"
}

动作类型：渲染

then（断言）

渲染文本：按钮

primary-type-uses-primary-tokens主色类型消费主色令牌

given（前置）

{
  "props": {
    "type": "primary"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.primary.default应用
令牌 color.onPrimary应用

small-size-uses-small-tokens小号尺寸消费 small 尺寸令牌

given（前置）

{
  "props": {
    "size": "small"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 button.height.small应用
令牌 button.fontSize.small应用
令牌 button.height.large不应用

bgpattern-uses-decoration-token花纹底消费装饰色令牌

given（前置）

{
  "props": {
    "bgPattern": true
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.decoration应用

icon-renders-icon-commandicon prop 渲染图标指令

given（前置）

{
  "props": {
    "icon": "star"
  },
  "state": {
    "text": "按钮"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 button.iconSize.medium应用
绘制指令流在 TEXT 之前包含一条 ICON 指令，且位于文字左侧

title-and-value-render标题与值都被渲染

given（前置）

{
  "props": {
    "title": "行标题",
    "value": "行内容"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

绘制指令流包含两条 TEXT 指令，分别为标题与值

label-renders-secondary-tone说明文字取次要文字色令牌

given（前置）

{
  "props": {
    "title": "标题",
    "label": "说明文字"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.text.secondary应用

required-uses-danger-token必填红星消费危险色令牌

given（前置）

{
  "props": {
    "title": "必填项",
    "required": true
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.danger.default应用

bordered-emits-line-command分隔线形态发出 LINE 指令

given（前置）

{
  "props": {
    "title": "带线",
    "bordered": true
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.border.lighter应用
绘制指令流末尾有一条底部分隔线指令

clickable-emits-onclick可点击时点击触发 onClick

given（前置）

{
  "props": {
    "title": "可点",
    "clickable": true
  }
}

when（动作）

{
  "action": "click"
}

动作类型：点击

then（断言）

事件 onClick触发，期望 1 次

not-clickable-no-onclick非可点击时不触发 onClick

given（前置）

{
  "props": {
    "title": "不可点"
  }
}

when（动作）

{
  "action": "click"
}

动作类型：点击

then（断言）

事件 onClick不触发

tap-toggles-and-emits-onchange点击翻转选中态并触发 onChange

given（前置）

{
  "props": {
    "label": "同意"
  }
}

when（动作）

{
  "action": "click"
}

动作类型：点击

then（断言）

事件 onChange触发，期望 1 次，载荷：{ "checked": true }

tap-checked-unchecks已选中时点击变为未选中

given（前置）

{
  "props": {
    "label": "同意",
    "checked": true
  }
}

when（动作）

{
  "action": "click"
}

动作类型：点击

then（断言）

事件 onChange触发，期望 1 次，载荷：{ "checked": false }

disabled-blocks-change禁用态不触发 onChange

given（前置）

{
  "props": {
    "label": "禁用",
    "disabled": true
  }
}

when（动作）

{
  "action": "click"
}

动作类型：点击

then（断言）

事件 onChange不触发
渲染结果不可交互（禁用）

checked-uses-primary-tokens选中态消费主色令牌

given（前置）

{
  "props": {
    "checked": true
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.primary.default应用
令牌 color.onPrimary应用

unchecked-uses-border-token未选中态消费描边令牌

given（前置）

{
  "props": {
    "checked": false
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.border.base应用
令牌 color.primary.default不应用

indeterminate-becomes-checked不确定态点击后变为选中

given（前置）

{
  "props": {
    "indeterminate": true
  }
}

when（动作）

{
  "action": "click"
}

动作类型：点击

then（断言）

事件 onChange触发，期望 1 次，载荷：{ "checked": true }

confirm-emits-onconfirm点击确认触发 onConfirm

given（前置）

{
  "props": {
    "visible": true,
    "title": "提示"
  }
}

when（动作）

{
  "action": "click",
  "target": "confirm"
}

动作类型：点击

then（断言）

事件 onConfirm触发，期望 1 次

cancel-emits-oncancel点击取消触发 onCancel

given（前置）

{
  "props": {
    "visible": true,
    "title": "提示"
  }
}

when（动作）

{
  "action": "click",
  "target": "cancel"
}

动作类型：点击

then（断言）

事件 onCancel触发，期望 1 次

confirm-also-emits-onclose确认后触发 onClose

given（前置）

{
  "props": {
    "visible": true,
    "title": "提示"
  }
}

when（动作）

{
  "action": "click",
  "target": "confirm"
}

动作类型：点击

then（断言）

事件 onClose触发，期望 1 次

closable-overlay-emits-onclose可关闭时点遮罩触发 onClose

given（前置）

{
  "props": {
    "visible": true,
    "closable": true
  }
}

when（动作）

{
  "action": "click",
  "target": "overlay"
}

动作类型：点击

then（断言）

事件 onClose触发，期望 1 次

not-closable-blocks-overlay-close不可关闭时点遮罩不触发 onClose

given（前置）

{
  "props": {
    "visible": true,
    "closable": false
  }
}

when（动作）

{
  "action": "click",
  "target": "overlay"
}

动作类型：点击

then（断言）

事件 onClose不触发

hidden-not-rendered不可见时不渲染

given（前置）

{
  "props": {
    "visible": false
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

渲染结果不可见
不发射任何绘制指令

title-renders-text标题被渲染

given（前置）

{
  "props": {
    "visible": true,
    "title": "删除确认"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

渲染文本：删除确认

danger-type-uses-danger-token危险类型确认按钮消费危险色令牌

given（前置）

{
  "props": {
    "visible": true,
    "type": "danger"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.danger.default应用

click-emits-onclick点击触发 onClick

given（前置）

{
  "props": {
    "name": "star"
  }
}

when（动作）

{
  "action": "click"
}

动作类型：点击

then（断言）

事件 onClick触发，期望 1 次

default-tone-uses-text-primary默认色调取主要文字色令牌

given（前置）

{
  "props": {
    "name": "star",
    "tone": "default"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.text.primary应用

primary-tone-uses-primary-token主色调取主色令牌

given（前置）

{
  "props": {
    "name": "star",
    "tone": "primary"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.primary.default应用

small-size-uses-small-token小号尺寸消费 small 尺寸令牌

given（前置）

{
  "props": {
    "name": "star",
    "size": "small"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 icon.size.small应用
令牌 icon.size.large不应用

render-emits-icon-command渲染发出一条 draw_icon 指令

given（前置）

{
  "props": {
    "name": "star"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

绘制指令流有且仅有一条 ICON 指令，且携带图标名

input-emits-onvaluechange输入文本触发 onValueChange

given（前置）

{
  "props": {
    "placeholder": "请输入"
  }
}

when（动作）

{
  "action": "input",
  "payload": "青花瓷"
}

动作类型：输入

then（断言）

事件 onValueChange触发，期望 1 次，载荷：{ "value": "青花瓷" }

clearable-emits-empty-value清除按钮触发 onValueChange 空串

given（前置）

{
  "props": {
    "value": "已有",
    "clearable": true
  }
}

when（动作）

{
  "action": "custom",
  "payload": {
    "call": "clear"
  }
}

动作类型：自定义

then（断言）

事件 onValueChange触发，期望 1 次，载荷：{ "value": "" }

disabled-blocks-input禁用态不触发 onValueChange

given（前置）

{
  "props": {
    "disabled": true
  }
}

when（动作）

{
  "action": "input",
  "payload": "青花瓷"
}

动作类型：输入

then（断言）

事件 onValueChange不触发
渲染结果不可交互（禁用）

readonly-blocks-input只读态不触发 onValueChange

given（前置）

{
  "props": {
    "readonly": true
  }
}

when（动作）

{
  "action": "input",
  "payload": "青花瓷"
}

动作类型：输入

then（断言）

事件 onValueChange不触发

placeholder-uses-placeholder-token占位文字消费占位色令牌

given（前置）

{
  "props": {
    "placeholder": "请输入"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.text.placeholder应用

focus-uses-focus-token聚焦消费焦点色令牌

given（前置）

{
  "props": {}
}

when（动作）

{
  "action": "focus"
}

动作类型：获得焦点

then（断言）

事件 onFocus触发，期望 1 次
令牌 color.focus应用

small-size-uses-small-tokens小号尺寸消费 small 尺寸令牌

given（前置）

{
  "props": {
    "size": "small"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 input.height.small应用
令牌 input.height.large不应用

maxlength-truncates-input最大长度截断超长输入

given（前置）

{
  "props": {
    "maxlength": 3
  }
}

when（动作）

{
  "action": "input",
  "payload": "青花瓷瓶"
}

动作类型：输入

then（断言）

事件 onValueChange触发，期望 1 次，载荷：{ "value": "青花瓷" }

medium-size-uses-medium-token中号尺寸消费 medium 尺寸令牌

given（前置）

{
  "props": {}
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 loading.size.medium应用
令牌 loading.size.small不应用

large-size-uses-large-token大号尺寸消费 large 尺寸令牌

given（前置）

{
  "props": {
    "size": "large"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 loading.size.large应用
令牌 loading.size.medium不应用

primary-tone-uses-primary-token默认色调取主色令牌

given（前置）

{
  "props": {}
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.primary.default应用

success-tone-uses-success-token成功色调取成功色令牌

given（前置）

{
  "props": {
    "tone": "success"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.success.default应用

render-emits-ring-command渲染发出一条 RING 指令

given（前置）

{
  "props": {}
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 loading.strokeWidth应用
绘制指令流有且仅有一条 RING 指令，半径为尺寸一半

title-renders-text标题被渲染

given（前置）

{
  "props": {
    "title": "青花瓷"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

渲染文本：青花瓷

leftclick-emits-onleftclick点击左侧触发 onLeftClick

given（前置）

{
  "props": {
    "title": "标题",
    "leftText": "返回"
  }
}

when（动作）

{
  "action": "click",
  "target": "left"
}

动作类型：点击

then（断言）

事件 onLeftClick触发，期望 1 次

rightclick-emits-onrightclick点击右侧触发 onRightClick

given（前置）

{
  "props": {
    "title": "标题",
    "rightText": "编辑"
  }
}

when（动作）

{
  "action": "click",
  "target": "right"
}

动作类型：点击

then（断言）

事件 onRightClick触发，期望 1 次

no-left-content-no-onleftclick无左侧内容时不触发 onLeftClick

given（前置）

{
  "props": {
    "title": "标题"
  }
}

when（动作）

{
  "action": "click",
  "target": "left"
}

动作类型：点击

then（断言）

事件 onLeftClick不触发

bordered-uses-border-token带分隔线消费描边令牌

given（前置）

{
  "props": {
    "title": "标题",
    "bordered": true
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.border.lighter应用

height-uses-navbar-height-token高度消费导航栏高度令牌

given（前置）

{
  "props": {
    "title": "标题"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 navbar.height应用

confirm-emits-onconfirm-with-value确认触发 onConfirm 并携带选中索引

given（前置）

{
  "props": {
    "visible": true,
    "options": [
      "甲",
      "乙",
      "丙"
    ],
    "value": 1
  }
}

when（动作）

{
  "action": "click",
  "target": "confirm"
}

动作类型：点击

then（断言）

事件 onConfirm触发，期望 1 次，载荷：{ "value": 1 }

confirm-also-emits-onclose确认后触发 onClose

given（前置）

{
  "props": {
    "visible": true,
    "options": [
      "甲",
      "乙"
    ]
  }
}

when（动作）

{
  "action": "click",
  "target": "confirm"
}

动作类型：点击

then（断言）

事件 onClose触发，期望 1 次

cancel-emits-oncancel取消触发 onCancel

given（前置）

{
  "props": {
    "visible": true,
    "options": [
      "甲",
      "乙"
    ]
  }
}

when（动作）

{
  "action": "click",
  "target": "cancel"
}

动作类型：点击

then（断言）

事件 onCancel触发，期望 1 次

scroll-emits-onvaluechange滚动停止触发 onValueChange

given（前置）

{
  "props": {
    "visible": true,
    "options": [
      "甲",
      "乙",
      "丙"
    ],
    "value": 0
  }
}

when（动作）

{
  "action": "custom",
  "payload": {
    "call": "scrollTo",
    "index": 2
  }
}

动作类型：自定义

then（断言）

事件 onValueChange触发，期望 1 次，载荷：{ "value": 2 }

clamp-negative-value-to-zero负索引钳制为 0

given（前置）

{
  "props": {
    "visible": true,
    "options": [
      "甲",
      "乙"
    ],
    "value": -1
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

外观选中索引为 0

clamp-overflow-value-to-last越界索引钳制为最后一项

given（前置）

{
  "props": {
    "visible": true,
    "options": [
      "甲",
      "乙",
      "丙"
    ],
    "value": 99
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

外观选中索引为 2

title-renders-text标题被渲染

given（前置）

{
  "props": {
    "visible": true,
    "options": [
      "甲"
    ],
    "title": "选择"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

渲染文本：选择

hidden-not-rendered不可见时不渲染

given（前置）

{
  "props": {
    "visible": false,
    "options": [
      "甲"
    ]
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

渲染结果不可见
不发射任何绘制指令

tap-unchecked-emits-onchange未选中时点击变为选中并触发 onChange

given（前置）

{
  "props": {
    "label": "选项",
    "value": "a"
  }
}

when（动作）

{
  "action": "click"
}

动作类型：点击

then（断言）

事件 onChange触发，期望 1 次，载荷：{ "checked": true }

tap-checked-keeps-checked已选中时点击保持选中且不触发 onChange

given（前置）

{
  "props": {
    "label": "选项",
    "value": "a",
    "checked": true
  }
}

when（动作）

{
  "action": "click"
}

动作类型：点击

then（断言）

事件 onChange不触发

disabled-blocks-change禁用态不触发 onChange

given（前置）

{
  "props": {
    "label": "禁用",
    "disabled": true
  }
}

when（动作）

{
  "action": "click"
}

动作类型：点击

then（断言）

事件 onChange不触发
渲染结果不可交互（禁用）

checked-uses-primary-tokens选中态消费主色令牌

given（前置）

{
  "props": {
    "checked": true
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.primary.default应用

unchecked-uses-border-token未选中态消费描边令牌

given（前置）

{
  "props": {
    "checked": false
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.border.base应用
令牌 color.primary.default不应用

small-size-uses-small-token小号尺寸消费 small 尺寸令牌

given（前置）

{
  "props": {
    "size": "small"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 radio.size.small应用
令牌 radio.size.large不应用

tap-toggles-and-emits-onchange点击翻转开关态并触发 onChange

given（前置）

{
  "props": {}
}

when（动作）

{
  "action": "click"
}

动作类型：点击

then（断言）

事件 onChange触发，期望 1 次，载荷：{ "checked": true }

tap-checked-turns-off开启态点击变为关闭

given（前置）

{
  "props": {
    "checked": true
  }
}

when（动作）

{
  "action": "click"
}

动作类型：点击

then（断言）

事件 onChange触发，期望 1 次，载荷：{ "checked": false }

disabled-blocks-change禁用态不触发 onChange

given（前置）

{
  "props": {
    "disabled": true
  }
}

when（动作）

{
  "action": "click"
}

动作类型：点击

then（断言）

事件 onChange不触发
渲染结果不可交互（禁用）

loading-blocks-change加载态不触发 onChange

given（前置）

{
  "props": {
    "loading": true
  }
}

when（动作）

{
  "action": "click"
}

动作类型：点击

then（断言）

事件 onChange不触发
渲染结果不可交互（禁用）

checked-uses-primary-token开启态轨道消费主色令牌

given（前置）

{
  "props": {
    "checked": true
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.primary.default应用
令牌 color.border.base不应用

unchecked-uses-border-token关闭态轨道消费描边令牌

given（前置）

{
  "props": {
    "checked": false
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.border.base应用
令牌 color.primary.default不应用

default-type-renders-text默认类型渲染文字内容

given（前置）

{
  "props": {
    "text": "标签"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

渲染文本：标签

primary-type-uses-primary-tokens主色类型消费主色令牌

given（前置）

{
  "props": {
    "text": "主色",
    "type": "primary"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.primary.default应用
令牌 color.onPrimary应用

plain-uses-bg-tokens浅底形态消费语义浅底令牌

given（前置）

{
  "props": {
    "text": "浅底",
    "type": "success",
    "plain": true
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.success.bg应用
令牌 color.success.default应用

small-size-uses-small-tokens小号尺寸消费 small 尺寸令牌

given（前置）

{
  "props": {
    "text": "小",
    "size": "small"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 tag.height.small应用
令牌 tag.height.large不应用

round-makes-radius-half-height胶囊态圆角为高度一半

given（前置）

{
  "props": {
    "text": "胶囊",
    "round": true
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

外观圆角 == 高度 / 2，而非 tag.borderRadius

closable-tap-emits-onclose可关闭时点击关闭符触发 onClose

given（前置）

{
  "props": {
    "text": "可关",
    "closable": true
  }
}

when（动作）

{
  "action": "click",
  "target": "close"
}

动作类型：点击

then（断言）

事件 onClose触发，期望 1 次

default-level-uses-base-tokens默认级别消费 base 排版令牌

given（前置）

{
  "props": {
    "content": "青花瓷"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 typography.fontSize.base应用
令牌 typography.fontWeight.primary应用
令牌 typography.lineHeight.primary应用
令牌 color.text.primary应用
渲染文本：青花瓷

large-level-uses-large-token大级别消费 large 字号令牌

given（前置）

{
  "props": {
    "content": "标题",
    "level": "large"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 typography.fontSize.large应用
令牌 typography.fontSize.base不应用

bold-weight-uses-bold-token粗体消费 bold 字重令牌

given（前置）

{
  "props": {
    "content": "加重",
    "weight": "bold"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 typography.fontWeight.bold应用
令牌 typography.fontWeight.primary不应用

secondary-tone-uses-text-secondary次要色调取次要文字色令牌

given（前置）

{
  "props": {
    "content": "说明",
    "tone": "secondary"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.text.secondary应用
令牌 color.text.primary不应用

render-emits-single-text-command渲染发出一条 TEXT 指令

given（前置）

{
  "props": {
    "content": "一行文字"
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

绘制指令流有且仅有一条 TEXT 指令

input-emits-onvaluechange输入文本触发 onValueChange

given（前置）

{
  "props": {
    "placeholder": "请输入"
  }
}

when（动作）

{
  "action": "input",
  "payload": "青花瓷"
}

动作类型：输入

then（断言）

事件 onValueChange触发，期望 1 次，载荷：{ "value": "青花瓷" }

disabled-blocks-input禁用态不触发 onValueChange

given（前置）

{
  "props": {
    "disabled": true
  }
}

when（动作）

{
  "action": "input",
  "payload": "青花瓷"
}

动作类型：输入

then（断言）

事件 onValueChange不触发
渲染结果不可交互（禁用）

showcount-renders-count字数统计渲染当前长度

given（前置）

{
  "props": {
    "value": "青花",
    "showCount": true,
    "maxlength": 10
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 textarea.countFontSize应用
渲染文本：2/10

showcount-without-maxlength-renders-length-only无最大长度时只渲染当前长度

given（前置）

{
  "props": {
    "value": "青花瓷",
    "showCount": true
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

渲染文本：3

focus-uses-focus-token聚焦消费焦点色令牌

given（前置）

{
  "props": {}
}

when（动作）

{
  "action": "focus"
}

动作类型：获得焦点

then（断言）

事件 onFocus触发，期望 1 次
令牌 color.focus应用

maxlength-truncates-input最大长度截断超长输入

given（前置）

{
  "props": {
    "maxlength": 3
  }
}

when（动作）

{
  "action": "input",
  "payload": "青花瓷瓶"
}

动作类型：输入

then（断言）

事件 onValueChange触发，期望 1 次，载荷：{ "value": "青花瓷" }

show-makes-visibleshow 后可见且渲染文字

given（前置）

{
  "props": {}
}

when（动作）

{
  "action": "custom",
  "payload": {
    "call": "show",
    "text": "已保存"
  }
}

动作类型：自定义

then（断言）

渲染文本：已保存

auto-hides-after-duration计时到期自动隐藏并触发 onClose

given（前置）

{
  "props": {
    "duration": 2000
  },
  "state": {
    "visible": true,
    "elapsed": 0
  }
}

when（动作）

{
  "action": "custom",
  "payload": {
    "call": "tick",
    "deltaMs": 2500
  }
}

动作类型：自定义

then（断言）

事件 onClose触发，期望 1 次
渲染结果不可见

tick-before-duration-keeps-visible计时未到期保持可见且不触发 onClose

given（前置）

{
  "props": {
    "duration": 2000
  },
  "state": {
    "visible": true,
    "elapsed": 0
  }
}

when（动作）

{
  "action": "custom",
  "payload": {
    "call": "tick",
    "deltaMs": 1000
  }
}

动作类型：自定义

then（断言）

事件 onClose不触发

hide-is-silenthide 主动隐藏不触发 onClose

given（前置）

{
  "props": {},
  "state": {
    "visible": true
  }
}

when（动作）

{
  "action": "custom",
  "payload": {
    "call": "hide"
  }
}

动作类型：自定义

then（断言）

事件 onClose不触发
渲染结果不可见

success-type-uses-success-token成功类型消费成功色令牌

given（前置）

{
  "props": {
    "type": "success"
  },
  "state": {
    "visible": true
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

令牌 color.success.default应用
令牌 color.ink应用
令牌 color.onPrimary应用

hidden-emits-no-commands不可见时不发射绘制指令

given（前置）

{
  "props": {},
  "state": {
    "visible": false
  }
}

when（动作）

{
  "action": "render"
}

动作类型：渲染

then（断言）

渲染结果不可见
绘制指令流为空