From 4e7058ee7d0aa113d9c49c6f134350e17c3fc2fe Mon Sep 17 00:00:00 2001
From: w2xi <57785259+w2xi@users.noreply.github.com>
Date: Mon, 7 Apr 2025 21:16:52 +0800
Subject: [PATCH] refactor(components): [message] use message type constants
 (#20355)

- Update tests to use `messageTypes` for dynamic type checking
- Refactor `Message` type definition to use mapped type for better scalability
---
 .../components/message/__tests__/message-manager.test.tsx | 8 ++++----
 packages/components/message/__tests__/message.test.ts     | 3 ++-
 packages/components/message/src/message.ts                | 7 ++-----
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/components/message/__tests__/message-manager.test.tsx b/packages/components/message/__tests__/message-manager.test.tsx
index 227fd1949b..d8514331ee 100644
--- a/packages/components/message/__tests__/message-manager.test.tsx
+++ b/packages/components/message/__tests__/message-manager.test.tsx
@@ -4,6 +4,7 @@ import { getStyle } from '@element-plus/utils'
 import { rAF } from '@element-plus/test-utils/tick'
 import { ElMessage } from '..'
 import Message from '../src/method'
+import { messageTypes } from '../src/message'
 
 const selector = '.el-message'
 // TODO: testing the original transition with `nextTick`'
@@ -126,10 +127,9 @@ describe('Message on command', () => {
   })
 
   test('it should have 4 other types of message', () => {
-    expect(Message.success).toBeInstanceOf(Function)
-    expect(Message.warning).toBeInstanceOf(Function)
-    expect(Message.info).toBeInstanceOf(Function)
-    expect(Message.error).toBeInstanceOf(Function)
+    messageTypes.forEach((type) => {
+      expect(Message[type]).toBeInstanceOf(Function)
+    })
   })
 
   test('it should appendTo specified HTMLElement', async () => {
diff --git a/packages/components/message/__tests__/message.test.ts b/packages/components/message/__tests__/message.test.ts
index 26807a671f..62d5204fa5 100644
--- a/packages/components/message/__tests__/message.test.ts
+++ b/packages/components/message/__tests__/message.test.ts
@@ -5,6 +5,7 @@ import { rAF } from '@element-plus/test-utils/tick'
 import { TypeComponentsMap } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'
 import Message from '../src/message.vue'
+import { messageTypes } from '../src/message'
 import type { CSSProperties, Component, ComponentPublicInstance } from 'vue'
 
 const AXIOM = 'Rem is the best girl'
@@ -76,7 +77,7 @@ describe('Message.vue', () => {
 
   describe('Message.type', () => {
     test('should be able to render typed messages', () => {
-      for (const type of ['success', 'warning', 'info', 'error'] as const) {
+      for (const type of messageTypes) {
         const wrapper = _mount({ props: { type } })
 
         expect(wrapper.findComponent(TypeComponentsMap[type]).exists()).toBe(
diff --git a/packages/components/message/src/message.ts b/packages/components/message/src/message.ts
index 2be3bea738..bd97caa891 100644
--- a/packages/components/message/src/message.ts
+++ b/packages/components/message/src/message.ts
@@ -196,9 +196,6 @@ export type MessageTypedFn = (
   appContext?: null | AppContext
 ) => MessageHandler
 
-export interface Message extends MessageFn {
-  success: MessageTypedFn
-  warning: MessageTypedFn
-  info: MessageTypedFn
-  error: MessageTypedFn
+export type Message = MessageFn & {
+  [K in messageType]: MessageTypedFn
 }