From 48d430dff773396f8470927435df557850e8aa2c Mon Sep 17 00:00:00 2001
From: vagusX <vagusxl@gmail.com>
Date: Sun, 10 Dec 2023 19:58:23 +0800
Subject: [PATCH] ci: better naming for test-image snapshot filename (#46369)

---
 scripts/visual-regression.ts |  4 ++--
 tests/shared/imageTest.tsx   | 12 ++++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/scripts/visual-regression.ts b/scripts/visual-regression.ts
index e0660f0987..dc59e3c6c0 100644
--- a/scripts/visual-regression.ts
+++ b/scripts/visual-regression.ts
@@ -136,8 +136,8 @@ function generateReportMd(badCases: IBadCase[], targetBranch: string, targetRef:
       reportMdStr += [
         badCase.filename,
         `![master: ref](${publicPath}/visualRegressionReport/images/base/${filename})`,
-        `⛔️`,
-        `🚨`,
+        `⛔️⛔️⛔️ Missing ⛔️⛔️⛔️`,
+        `🚨🚨🚨 Removed 🚨🚨🚨`,
       ].join(' | ');
       reportMdStr += ' |\n';
     }
diff --git a/tests/shared/imageTest.tsx b/tests/shared/imageTest.tsx
index 000045dfa3..a9a0aed973 100644
--- a/tests/shared/imageTest.tsx
+++ b/tests/shared/imageTest.tsx
@@ -35,7 +35,7 @@ export default function imageTest(
   identifier: string,
   options: ImageTestOptions,
 ) {
-  function test(name: string, themedComponent: React.ReactElement) {
+  function test(name: string, suffix: string, themedComponent: React.ReactElement) {
     it(name, async () => {
       await jestPuppeteer.resetPage();
       await page.setRequestInterception(true);
@@ -86,7 +86,7 @@ export default function imageTest(
       });
 
       expect(image).toMatchImageSnapshot({
-        customSnapshotIdentifier: `${identifier}-${name.replace(/\s/g, '-')}`,
+        customSnapshotIdentifier: `${identifier}${suffix}`,
       });
 
       MockDate.reset();
@@ -98,12 +98,14 @@ export default function imageTest(
     Object.entries(themes).forEach(([key, algorithm]) => {
       test(
         `component image screenshot should correct ${key}`,
+        `-${key}`,
         <div style={{ background: key === 'dark' ? '#000' : '', padding: `24px 12px` }} key={key}>
           <ConfigProvider theme={{ algorithm }}>{component}</ConfigProvider>
         </div>,
       );
       test(
-        `component image screenshot should correct ${key}.css-var`,
+        `[CSS Var] component image screenshot should correct ${key}`,
+        `-${key}.css-var`,
         <div style={{ background: key === 'dark' ? '#000' : '', padding: `24px 12px` }} key={key}>
           <div>CSS Var</div>
           <ConfigProvider theme={{ algorithm, cssVar: true }}>{component}</ConfigProvider>
@@ -113,6 +115,7 @@ export default function imageTest(
   } else {
     test(
       `component image screenshot should correct`,
+      '',
       <>
         {Object.entries(themes).map(([key, algorithm]) => (
           <div style={{ background: key === 'dark' ? '#000' : '', padding: `24px 12px` }} key={key}>
@@ -122,7 +125,8 @@ export default function imageTest(
       </>,
     );
     test(
-      `component image screenshot should correct.css-var`,
+      `[CSS Var] component image screenshot should correct`,
+      '.css-var',
       <>
         <div>CSS Var</div>
         {Object.entries(themes).map(([key, algorithm]) => (