Repository: Tencent/tdesign-mobile-vue
Pull request #774 (2023-06-01 07:37:07)

test(message): add test cases
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [ ] 日常 bug 修复
- [ ] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [x] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->

https://github.com/Tencent/tdesign-mobile-vue/issues/717

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- test(Message): 完善测试用例

- [ ] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [x] 文档已补充或无须补充
- [x] 代码演示已提供或无须提供
- [x] TypeScript 定义已补充或无须补充
- [x] Changelog 已提供或无须提供


github-actions[bot]: <a href="https://preview-pr774-tdesign-mobile-vue.surge.sh"><img height="96" alt="完成" src="https://user-images.githubusercontent.com/15634204/150816437-9f5bb788-cd67-4cbc-9897-b82d74e9aa65.png" /></a>
<!-- [工作流地址](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/5141690804) -->
<!-- AUTO_PREVIEW_HOOK -->

Patch:
diff --git a/package.json b/package.json
index 8f1df04f..71c49f84 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-mobile-vue",
   "purename": "tdesign",
-  "version": "0.23.0",
+  "version": "0.23.0-beta",
   "description": "tdesign-mobile-vue",
   "author": "TDesign Group",
   "homepage": "https://tdesign.tencent.com/mobile-vue/",
diff --git a/src/_common b/src/_common
index b5fe3ced..5bae8288 160000
--- a/src/_common
+++ b/src/_common
@@ -1,1 +1,1 @@
-Subproject commit b5fe3ceda2a32bd7ba78d9386d137bd5279fa8f2
+Subproject commit 5bae82884a14897bb73f1d27037265150474e9c7
diff --git a/src/dropdown-menu/demos/slotDemo.vue b/src/dropdown-menu/demos/slotDemo.vue
index 1543293e..889ff916 100644
--- a/src/dropdown-menu/demos/slotDemo.vue
+++ b/src/dropdown-menu/demos/slotDemo.vue
@@ -1,6 +1,6 @@
 <template>
   <t-dropdown-menu ref="parentRef">
-    <t-dropdown-item v-model="val" label="单列多选" multiple options-columns="1">
+    <t-dropdown-item v-model="val" label="三列多选" multiple options-columns="1">
       <div v-for="(group, i) in groups" :key="i">
         <div class="demo-dropdown-item_label">
           {{ group.label }}
diff --git a/src/dropdown-menu/dropdown-item.vue b/src/dropdown-menu/dropdown-item.vue
index 9f215061..c39d2bc9 100644
--- a/src/dropdown-menu/dropdown-item.vue
+++ b/src/dropdown-menu/dropdown-item.vue
@@ -119,7 +119,16 @@ export default defineComponent({
       expandStyle: {} as Object,
       dropdownItemId: '',
       multiple: computed(() => props.multiple),
-      options: computed(() => props.options),
+      options: computed(() => {
+        if (props.keys) {
+          return props.options?.map((item) => ({
+            value: item[props.keys?.value ?? 'value'],
+            label: item[props.keys?.label ?? 'label'],
+            disabled: item.disabled,
+          }));
+        }
+        return props.options;
+      }),
     });
 
     const isCheckedRadio = (value: DropdownValue) => value === radioSelect.value;
@@ -178,7 +187,7 @@ export default defineComponent({
     // 根据传入值更新当前选中
     const updateSelectValue = (val: DropdownValue | DropdownValue[] | null) => {
       if (!props.multiple) {
-        const list = props.options as DropdownOption[];
+        const list = state.options;
         const firstChild = list?.[0];
         const newValue = val ?? firstChild?.value ?? null;
         radioSelect.value = newValue as DropdownValue;
@@ -232,7 +241,7 @@ export default defineComponent({
     // 单选值监控
     watch(radioSelect, (val) => {
       if (menuState.activeId !== null) {
-        const target = props.options?.find((item: any) => item.value === val);
+        const target = state.options?.find((item: any) => item.value === val);
         menuState.itemsLabel[menuState.activeId] = target?.label;
       }
       if (props.multiple) return;
diff --git a/src/dropdown-menu/dropdown-menu.vue b/src/dropdown-menu/dropdown-menu.vue
index 17f24483..b0ac863c 100644
--- a/src/dropdown-menu/dropdown-menu.vue
+++ b/src/dropdown-menu/dropdown-menu.vue
@@ -55,12 +55,12 @@ export default defineComponent({
     // 通过 slots.default 子成员，计算标题栏选项
     const menuTitles = computed(() =>
       menuItems.value.map((item: any) => {
-        const { label, disabled, value, options } = item.props;
-        const target = options?.find((item: any) => item.value === value);
+        const { keys, label, value, disabled, options } = item.props;
+        const target = options?.find((item: any) => item[keys?.value ?? 'value'] === value);
         if (!label) {
-          state.itemsLabel.push(target?.label || '');
+          state.itemsLabel.push(target[keys?.label ?? 'label'] || '');
         }
-        const computedLabel = target?.label || '';
+        const computedLabel = target?.[keys?.label ?? 'label'] || '';
         return {
           label: label || computedLabel,
           disabled: disabled !== undefined && disabled !== false,
diff --git a/src/fab/demos/advance.vue b/src/fab/demos/advance.vue
index 9cb3c9db..12481563 100644
--- a/src/fab/demos/advance.vue
+++ b/src/fab/demos/advance.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-fab :icon="iconFunc" text="按钮文字" :style="customStyle" @click="onClick" />
+  <t-fab :icon="iconFunc" text="按钮文字" @click="onClick" />
 </template>
 
 <script lang="ts" setup>
@@ -8,7 +8,6 @@ import { AddIcon } from 'tdesign-icons-vue-next';
 
 const iconFunc = () => h(AddIcon, { size: '24px' });
 
-const customStyle = 'right: 16px; bottom: 32px;';
 const onClick = () => {
   console.log('click Fab');
 };
diff --git a/src/fab/fab.vue b/src/fab/fab.vue
index 934cade8..4a095017 100644
--- a/src/fab/fab.vue
+++ b/src/fab/fab.vue
@@ -1,15 +1,9 @@
 <template>
-  <t-button
-    size="large"
-    theme="primary"
-    :class="classes"
-    :style="style"
-    v-bind="btnProps"
-    :icon="() => iconTNode"
-    @click="onClick"
-  >
-    {{ text }}
-  </t-button>
+  <div :class="classes" :style="style" @click="onClick">
+    <t-button size="large" theme="primary" :class="[`${name}__button`]" v-bind="btnProps" :icon="() => iconTNode">
+      {{ text }}
+    </t-button>
+  </div>
 </template>
 
 <script lang="ts">


Test patch:
diff --git a/src/dropdown-menu/__test__/__snapshots__/demo.test.jsx.snap b/src/dropdown-menu/__test__/__snapshots__/demo.test.jsx.snap
index cdc9aa79..c580d7a9 100644
--- a/src/dropdown-menu/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/dropdown-menu/__test__/__snapshots__/demo.test.jsx.snap
@@ -306,7 +306,7 @@ exports[`DropdownMenu > DropdownMenu mobileVue demo works fine 1`] = `
           <div
             class="t-dropdown-menu__title"
           >
-            单列多选
+            三列多选
           </div>
           <svg
             class="t-icon t-icon-caret-down-small t-dropdown-menu__icon"
@@ -486,7 +486,7 @@ exports[`DropdownMenu > DropdownMenu slotDemoVue demo works fine 1`] = `
     <div
       class="t-dropdown-menu__title"
     >
-      单列多选
+      三列多选
     </div>
     <svg
       class="t-icon t-icon-caret-down-small t-dropdown-menu__icon"
diff --git a/src/fab/__test__/__snapshots__/demo.test.jsx.snap b/src/fab/__test__/__snapshots__/demo.test.jsx.snap
index d42123e0..f7d05042 100644
--- a/src/fab/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/fab/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,69 +1,77 @@
 // Vitest Snapshot v1
 
 exports[`Fab > Fab advanceVue demo works fine 1`] = `
-<button
-  aria-disabled="false"
-  class="t-button t-button--size-large t-button--base t-button--primary t-button--round t-fab"
-  role="button"
+<div
+  class="t-fab"
   style="right: 16px; bottom: 32px;"
-  type="button"
 >
-  <svg
-    class="t-icon t-icon-add"
-    fill="none"
-    height="1em"
-    style="font-size: 24px;"
-    viewBox="0 0 16 16"
-    width="1em"
-  >
-    <path
-      d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
-      fill="currentColor"
-      fill-opacity="0.9"
-    />
-  </svg>
-  <span
-    class="t-button__content"
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--base t-button--primary t-button--round t-fab__button"
+    role="button"
+    type="button"
   >
-    
-    按钮文字
-    
-  </span>
-  <!---->
-</button>
+    <svg
+      class="t-icon t-icon-add"
+      fill="none"
+      height="1em"
+      style="font-size: 24px;"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path
+        d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
+        fill="currentColor"
+        fill-opacity="0.9"
+      />
+    </svg>
+    <span
+      class="t-button__content"
+    >
+      
+      按钮文字
+      
+    </span>
+    <!---->
+  </button>
+</div>
 `;
 
 exports[`Fab > Fab baseVue demo works fine 1`] = `
-<button
-  aria-disabled="false"
-  class="t-button t-button--size-large t-button--base t-button--primary t-button--circle t-fab"
-  role="button"
+<div
+  class="t-fab"
   style="right: 16px; bottom: 32px;"
-  type="button"
 >
-  <svg
-    class="t-icon t-icon-add"
-    fill="none"
-    height="1em"
-    style="font-size: 24px;"
-    viewBox="0 0 16 16"
-    width="1em"
-  >
-    <path
-      d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
-      fill="currentColor"
-      fill-opacity="0.9"
-    />
-  </svg>
-  <span
-    class="t-button__content"
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--base t-button--primary t-button--circle t-fab__button"
+    role="button"
+    type="button"
   >
-    
-    
-    
-  </span>
-  <!---->
-</button>
+    <svg
+      class="t-icon t-icon-add"
+      fill="none"
+      height="1em"
+      style="font-size: 24px;"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path
+        d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
+        fill="currentColor"
+        fill-opacity="0.9"
+      />
+    </svg>
+    <span
+      class="t-button__content"
+    >
+      
+      
+      
+    </span>
+    <!---->
+  </button>
+</div>
 `;
 
 exports[`Fab > Fab mobileVue demo works fine 1`] = `
@@ -163,37 +171,41 @@ exports[`Fab > Fab mobileVue demo works fine 1`] = `
       
     </div>
   </div>
-  <button
-    aria-disabled="false"
-    class="t-button t-button--size-large t-button--base t-button--primary t-button--circle t-fab"
+  <div
+    class="t-fab"
     data-v-38a07a02=""
-    role="button"
     style="right: 16px; bottom: 32px;"
-    type="button"
   >
-    <svg
-      class="t-icon t-icon-add"
-      fill="none"
-      height="1em"
-      style="font-size: 24px;"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    <span
-      class="t-button__content"
+    <button
+      aria-disabled="false"
+      class="t-button t-button--size-large t-button--base t-button--primary t-button--circle t-fab__button"
+      role="button"
+      type="button"
     >
-      
-      
-      
-    </span>
-    <!---->
-  </button>
+      <svg
+        class="t-icon t-icon-add"
+        fill="none"
+        height="1em"
+        style="font-size: 24px;"
+        viewBox="0 0 16 16"
+        width="1em"
+      >
+        <path
+          d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
+          fill="currentColor"
+          fill-opacity="0.9"
+        />
+      </svg>
+      <span
+        class="t-button__content"
+      >
+        
+        
+        
+      </span>
+      <!---->
+    </button>
+  </div>
   <!--v-if-->
 </div>
 `;
diff --git a/src/fab/__test__/__snapshots__/index.test.jsx.snap b/src/fab/__test__/__snapshots__/index.test.jsx.snap
index 16ef8c4f..bc41079a 100644
--- a/src/fab/__test__/__snapshots__/index.test.jsx.snap
+++ b/src/fab/__test__/__snapshots__/index.test.jsx.snap
@@ -1,35 +1,39 @@
 // Vitest Snapshot v1
 
 exports[`fab > slots > : icon 1`] = `
-<button
-  aria-disabled="false"
-  class="t-button t-button--size-large t-button--base t-button--primary t-button--circle t-fab"
-  role="button"
+<div
+  class="t-fab"
   style="right: 16px; bottom: 32px;"
-  type="button"
 >
-  
-  <svg
-    class="t-icon t-icon-app"
-    fill="none"
-    height="1em"
-    viewBox="0 0 16 16"
-    width="1em"
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--base t-button--primary t-button--circle t-fab__button"
+    role="button"
+    type="button"
   >
-    <path
-      d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-      fill="currentColor"
-      fill-opacity="0.9"
-    />
-  </svg>
-  
-  <span
-    class="t-button__content"
-  >
-    
     
+    <svg
+      class="t-icon t-icon-app"
+      fill="none"
+      height="1em"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path
+        d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
+        fill="currentColor"
+        fill-opacity="0.9"
+      />
+    </svg>
     
-  </span>
-  <!---->
-</button>
+    <span
+      class="t-button__content"
+    >
+      
+      
+      
+    </span>
+    <!---->
+  </button>
+</div>
 `;
diff --git a/src/fab/__test__/index.test.jsx b/src/fab/__test__/index.test.jsx
index 1e425c58..4807e9ab 100644
--- a/src/fab/__test__/index.test.jsx
+++ b/src/fab/__test__/index.test.jsx
@@ -27,7 +27,6 @@ describe('fab', () => {
       const wrapper = mount(Fab, {
         props: { style },
       });
-      const buttonContainer = wrapper.find('.t-button');
       expect(getComputedStyle(wrapper.element, null).right).toBe('32px');
       expect(getComputedStyle(wrapper.element, null).bottom).toBe('48px');
     });
@@ -42,9 +41,10 @@ describe('fab', () => {
       const wrapper = mount(Fab, {
         props: { icon, buttonProps },
       });
-      expect(wrapper.classes()).toContain(`t-button--danger`);
-      expect(wrapper.classes()).toContain(`t-button--circle`);
-      expect(wrapper.classes()).toContain(`t-button--size-large`);
+      const $btn = wrapper.find('.t-button');
+      expect($btn.classes()).toContain(`t-button--danger`);
+      expect($btn.classes()).toContain(`t-button--circle`);
+      expect($btn.classes()).toContain(`t-button--size-large`);
     });
   });
 
diff --git a/src/message/__test__/index.test.jsx b/src/message/__test__/index.test.jsx
index 9d864080..6db08bb4 100644
--- a/src/message/__test__/index.test.jsx
+++ b/src/message/__test__/index.test.jsx
@@ -51,7 +51,7 @@ describe('Message.vue', () => {
       vi.useFakeTimers();
       const fn = vi.fn();
       timer(fn);
-      const wrapper = mount(<Message visible duration={5000} onCloseBtnClick={fn} />);
+      const wrapper = mount(<Message defaultVisible duration={5000} onCloseBtnClick={fn} />);
       vi.advanceTimersByTime(5000);
       expect(fn).toBeCalledTimes(1);
     });
@@ -69,7 +69,7 @@ describe('Message.vue', () => {
       const wrapper = mount(() => (
         <Message visible={true} content="这是一条带关闭的消息通知，常驻可关闭" closeBtn={true} onCloseBtnClick={fn} />
       ));
-      const closeBtn = wrapper.find('.t-icon-close');
+      const closeBtn = wrapper.find('.t-message__close-wrap');
       closeBtn.trigger('click');
       expect(fn).toBeCalledTimes(1);
     });