refactor(test): simplify Mermaid tests with getActionButtonByLabel helper

Author: HongwuQz

PR_TEMPLATE.md

@@ -0,0 +1,63 @@
+=====
+
+<!--
+First of all, thank you for your contribution! 😄
+For requesting to pull a new feature or bugfix, please send it from a feature/bugfix branch based on the `master` branch.
+Before submitting your pull request, please make sure the checklist below is confirmed.
+Your pull requests will be merged after one of the collaborators approve.
+Thank you!
+-->
+
+[中文版模板 / Chinese template](https://github.com/ant-design/x/blob/master/.github/PULL_REQUEST_TEMPLATE_CN.md?plain=1)
+
+### 🤔 This is a ...
+
+- [ ] 🆕 New feature
+- [ ] 🐞 Bug fix
+- [ ] 📝 Site / documentation improvement
+- [ ] 📽️ Demo improvement
+- [ ] 💄 Component style improvement
+- [ ] 🤖 TypeScript definition improvement
+- [ ] 📦 Bundle size optimization
+- [ ] ⚡️ Performance optimization
+- [ ] ⭐️ Feature enhancement
+- [ ] 🌐 Internationalization
+- [x] 🛠 Refactoring
+- [ ] 🎨 Code style optimization
+- [x] ✅ Test Case
+- [ ] 🔀 Branch merge
+- [ ] ⏩ Workflow
+- [ ] ⌨️ Accessibility improvement
+- [ ] ❓ Other (about what?)
+
+### 🔗 Related Issues
+
+<!-- If there's a related issue, please link it here. If not, you can remove this section. -->
+
+### 💡 Background and Solution
+
+**Background:** Refactor Mermaid component to use the unified `Actions` component for operation buttons, replacing custom button implementations to improve code consistency and maintainability.
+
+**Solution:**
+
+- Use `@ant-design/x/es/actions` component to render operation buttons (copy, zoom in, zoom out, reset, download)
+- Dynamically display different action items based on render mode (image/code)
+- Update test cases to adapt to Actions component's DOM structure (use `getByLabelText` to find icons, then locate clickable container via `closest`)
+- Add Chinese localization for Mermaid component
+
+**Changes:**
+
+- Replace custom button implementation with Actions component
+- Fix test case element queries (Actions renders `div` instead of `button`)
+- Update localization files with Mermaid-related Chinese translations
+
+### 📝 Change Log
+
+> - Read [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) like a cat tracks a laser pointer.
+> - Describe the impact of the changes on developers, not the solution approach.
+> - Reference: https://x.ant.design/changelog
+
+| Language | Changelog |
+| --- | --- |
+| 🇺🇸 English | Refactor Mermaid component to use Actions component for operation buttons, improving code consistency and maintainability. |
+| 🇨🇳 Chinese | 重构 Mermaid 组件，使用 Actions 组件统一渲染操作按钮，提升代码一致性和可维护性。 |

packages/x-markdown/src/plugins/Mermaid/__test__/index.test.tsx

@@ -2,6 +2,13 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import Mermaid from '../index';
 
+const getActionButtonByLabel = (label: string): HTMLElement => {
+  const icon = screen.getByLabelText(label);
+  const button = icon.closest('.ant-actions-item');
+  if (!button) throw new Error(`Action button with label '${label}' not found.`);
+  return button as HTMLElement;
+};
+
 // Mock mermaid
 jest.mock('mermaid', () => ({
   initialize: jest.fn(),
@@ -135,8 +142,7 @@ describe('Mermaid Plugin', () => {
 
       render(<Mermaid>{mermaidContent}</Mermaid>);
 
-      const copyIcon = screen.getByLabelText('copy');
-      const copyButton = copyIcon.closest('.ant-actions-item') as HTMLElement;
+      const copyButton = getActionButtonByLabel('copy');
       fireEvent.click(copyButton);
 
       await waitFor(() => {
@@ -155,8 +161,7 @@ describe('Mermaid Plugin', () => {
 
       render(<Mermaid>{mermaidContent}</Mermaid>);
 
-      const copyIcon = screen.getByLabelText('copy');
-      const copyButton = copyIcon.closest('.ant-actions-item') as HTMLElement;
+      const copyButton = getActionButtonByLabel('copy');
 
       // 确保点击不会抛出错误
       expect(() => fireEvent.click(copyButton)).not.toThrow();
@@ -179,8 +184,7 @@ describe('Mermaid Plugin', () => {
 
       render(<Mermaid>{mermaidContent}</Mermaid>);
 
-      const copyIcon = screen.getByLabelText('copy');
-      const copyButton = copyIcon.closest('.ant-actions-item') as HTMLElement;
+      const copyButton = getActionButtonByLabel('copy');
       fireEvent.click(copyButton);
 
       await waitFor(() => {
@@ -210,10 +214,8 @@ describe('Mermaid Plugin', () => {
     it('should handle zoom in/out', () => {
       render(<Mermaid>{mermaidContent}</Mermaid>);
 
-      const zoomInIcon = screen.getByLabelText('zoom-in');
-      const zoomOutIcon = screen.getByLabelText('zoom-out');
-      const zoomInButton = zoomInIcon.closest('.ant-actions-item') as HTMLElement;
-      const zoomOutButton = zoomOutIcon.closest('.ant-actions-item') as HTMLElement;
+      const zoomInButton = getActionButtonByLabel('zoom-in');
+      const zoomOutButton = getActionButtonByLabel('zoom-out');
 
       fireEvent.click(zoomInButton);
       fireEvent.click(zoomOutButton);
@@ -222,8 +224,7 @@ describe('Mermaid Plugin', () => {
     it('should handle reset functionality', () => {
       render(<Mermaid>{mermaidContent}</Mermaid>);
 
-      const resetIcon = screen.getByLabelText('undo');
-      const resetButton = resetIcon.closest('.ant-actions-item') as HTMLElement;
+      const resetButton = getActionButtonByLabel('undo');
       fireEvent.click(resetButton);
     });
   });
@@ -506,8 +507,7 @@ describe('Mermaid Plugin', () => {
         container.querySelector = mockQuerySelector;
       }
 
-      const downloadIcon = screen.getByLabelText('download');
-      const downloadButton = downloadIcon.closest('.ant-actions-item') as HTMLElement;
+      const downloadButton = getActionButtonByLabel('download');
       fireEvent.click(downloadButton);
 
       // Wait for async operations
@@ -549,8 +549,7 @@ describe('Mermaid Plugin', () => {
         container.querySelector = mockQuerySelector;
       }
 
-      const downloadIcon = screen.getByLabelText('download');
-      const downloadButton = downloadIcon.closest('.ant-actions-item') as HTMLElement;
+      const downloadButton = getActionButtonByLabel('download');
       fireEvent.click(downloadButton);
 
       // Should not throw and should return early