ci: compare css-var and css-in-js to the same css-in-js png in master (#46416)

scripts/visual-regression/build.ts

@@ -197,11 +197,12 @@ ${commonHeader}
 }
 
 async function boot() {
-  console.log(chalk.green('Preparing image snapshots from latest `master` branch\n'));
-  const baseImgSourceDir = path.resolve(__dirname, '../../imageSnapshots-master');
+  const targetBranch = 'master';
+
+  console.log(chalk.green('Preparing image snapshots from latest `%s` branch\n', targetBranch));
+  const baseImgSourceDir = path.resolve(__dirname, `../../imageSnapshots-${targetBranch}`);
   await fse.ensureDir(baseImgSourceDir);
 
-  const targetBranch = 'master';
   const targetRef = await getBranchLatestRef(targetBranch);
   assert(targetRef, `Missing ref from ${targetBranch}`);
 
@@ -227,7 +228,11 @@ async function boot() {
 
   const deletedImgs = _.difference(baseImgFileList, currentImgFileList);
   if (deletedImgs.length) {
-    console.log(chalk.red('⛔️ Missing images compare to master:\n'), prettyList(deletedImgs));
+    console.log(
+      chalk.red('⛔️ Missing images compare to %s:\n%s'),
+      targetBranch,
+      prettyList(deletedImgs),
+    );
     console.log('\n');
   }
   // ignore new images
@@ -239,40 +244,57 @@ async function boot() {
 
   const badCases: IBadCase[] = [];
 
-  for (const file of baseImgFileList) {
-    const baseImgPath = path.join(baseImgSourceDir, file);
-    const currentImgPath = path.join(currentImgSourceDir, file);
-    const diffImgPath = path.join(diffImgReportDir, file);
+  // compare cssinjs and css-var png from pr
+  // to the same cssinjs png in `master` branch
+  const cssInJsImgNames = baseImgFileList
+    .filter((i) => !i.endsWith('.css-var.png'))
+    .map((n) => path.basename(n, path.extname(n)));
 
-    const currentImgExists = await fse.exists(currentImgPath);
-    if (!currentImgExists) {
-      console.log(chalk.red(`⛔️ Missing image: ${file}\n`));
-      badCases.push({
-        type: 'removed',
-        filename: file,
-      });
-      await fse.copy(baseImgPath, path.join(baseImgReportDir, file));
-      continue;
-    }
+  for (const basename of cssInJsImgNames) {
+    for (const extname of ['.png', '.css-var.png']) {
+      // baseImg always use cssinjs png
+      const baseImgName = `${basename}.png`;
+      const baseImgPath = path.join(baseImgSourceDir, baseImgName);
 
-    const mismatchedPxPercent = await compareScreenshots(baseImgPath, currentImgPath, diffImgPath);
+      // currentImg use cssinjs png or css-var png
+      const compareImgName = basename + extname;
+      const currentImgPath = path.join(currentImgSourceDir, compareImgName);
+      const diffImgPath = path.join(diffImgReportDir, compareImgName);
 
-    if (mismatchedPxPercent > 0) {
-      console.log(
-        'Mismatched pixels for:',
-        chalk.yellow(file),
-        `${mismatchedPxPercent.toFixed(2)}%\n`,
+      const currentImgExists = await fse.exists(currentImgPath);
+      if (!currentImgExists) {
+        console.log(chalk.red(`⛔️ Missing image: ${compareImgName}\n`));
+        badCases.push({
+          type: 'removed',
+          filename: compareImgName,
+        });
+        await fse.copy(baseImgPath, path.join(baseImgReportDir, compareImgName));
+        continue;
+      }
+
+      const mismatchedPxPercent = await compareScreenshots(
+        baseImgPath,
+        currentImgPath,
+        diffImgPath,
       );
-      // copy compare imgs(x2) to report dir
-      await fse.copy(baseImgPath, path.join(baseImgReportDir, file));
-      await fse.copy(currentImgPath, path.join(currentImgReportDir, file));
 
-      badCases.push({
-        type: 'changed',
-        filename: file,
-      });
-    } else {
-      console.log('Passed for: %s\n', chalk.green(file));
+      if (mismatchedPxPercent > 0) {
+        console.log(
+          'Mismatched pixels for:',
+          chalk.yellow(compareImgName),
+          `${mismatchedPxPercent.toFixed(2)}%\n`,
+        );
+        // copy compare imgs(x2) to report dir
+        await fse.copy(baseImgPath, path.join(baseImgReportDir, compareImgName));
+        await fse.copy(currentImgPath, path.join(currentImgReportDir, compareImgName));
+
+        badCases.push({
+          type: 'changed',
+          filename: compareImgName,
+        });
+      } else {
+        console.log('Passed for: %s\n', chalk.green(compareImgName));
+      }
     }
   }
 

scripts/visual-regression/report-template.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>Ant Design Visual Diff Report</title>
     <link href="https://unpkg.com/antd@latest/dist/reset.css" rel="stylesheet" />
     <style>
       body {

tests/shared/imageTest.tsx

@@ -107,7 +107,6 @@ export default function imageTest(
         `[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>
         </div>,
       );
@@ -128,7 +127,6 @@ export default function imageTest(
       `[CSS Var] component image screenshot should correct`,
       '.css-var',
       <>
-        <div>CSS Var</div>
         {Object.entries(themes).map(([key, algorithm]) => (
           <div style={{ background: key === 'dark' ? '#000' : '', padding: `24px 12px` }} key={key}>
             <ConfigProvider theme={{ algorithm, cssVar: true }}>{component}</ConfigProvider>