Merge branch 'master' into feat/form-md-getValueProps

LongHaoo · Dec 18, 2023 · fb577b8 · fb577b8
2 parents 61f547c + 61a14d6
commit fb577b8
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 34 deletions.
diff --git a/.github/workflows/visual-regression-diff-build.yml b/.github/workflows/visual-regression-diff-build.yml
@@ -93,14 +93,15 @@ jobs:
       # Upload report in `visualRegressionReport`
       - name: upload report artifact
         uses: actions/upload-artifact@v3
+        if: ${{ always() }}
         with:
           name: visual-regression-report
           path: visualRegressionReport.tar.gz
 
       # Upload git ref for next workflow `visual-regression-diff-finish` use
       - name: Save persist key
         if: ${{ always() }}
-      # should be pr id
+        # should be pr id
         run: echo ${{ github.event.number }} > ./visual-regression-pr-id.txt
 
       - name: Upload persist key

diff --git a/.github/workflows/visual-regression-diff-finish.yml b/.github/workflows/visual-regression-diff-finish.yml
@@ -127,7 +127,7 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           body: |
-            ## Visual-Regression Diff Failed
+            ## Visual Regression Build for PR #${{ steps.pr.outputs.id }} Failed ❌
             Visual-diff report job conclusion: ${{ fromJSON(needs.upstream-workflow-summary.outputs.job-status) }}
             <!-- VISUAL_DIFF_REGRESSION_HOOK -->
           body-include: '<!-- VISUAL_DIFF_REGRESSION_HOOK -->'

diff --git a/.github/workflows/visual-regression-persist-finish.yml b/.github/workflows/visual-regression-persist-finish.yml
@@ -87,8 +87,6 @@ jobs:
 
       - name: Persist Image Snapshot to OSS
         if: github.event.workflow_run.event == 'push' && (github.event.workflow_run.head_branch == 'master' || github.event.workflow_run.head_branch == 'feature')
-        id: persist
-        continue-on-error: true
         env:
           ALI_OSS_AK_ID: ${{ secrets.ALI_OSS_AK_ID }}
           ALI_OSS_AK_SECRET: ${{ secrets.ALI_OSS_AK_SECRET }}

diff --git a/scripts/visual-regression/build.ts b/scripts/visual-regression/build.ts
@@ -63,7 +63,7 @@ const compareScreenshots = async (
     diffPng.pack().pipe(fs.createWriteStream(diffImagePath));
   }
 
-  return (mismatchedPixels / (targetWidth * targetHeight)) * 100;
+  return mismatchedPixels / (targetWidth * targetHeight);
 };
 
 const readPngs = (dir: string) => fs.readdirSync(dir).filter((n) => n.endsWith('.png'));
@@ -108,6 +108,10 @@ async function downloadBaseSnapshots(ref: string, targetDir: string) {
 interface IBadCase {
   type: 'removed' | 'changed';
   filename: string;
+  /**
+   * 0 - 1
+   */
+  weight: number;
 }
 
 function md2Html(md: string) {
@@ -135,12 +139,14 @@ function generateReport(
 ): [string, string] {
   const publicPath = isLocalEnv ? path.resolve(__dirname, '../..') : `${ossDomain}/pr-${prId}`;
 
+  const passed = badCases.length === 0;
+
   const commonHeader = `
-## Visual Regression Report for PR #${prId}
+## Visual Regression Report for PR #${prId} ${passed ? 'Passed ✅' : 'Failed ❌'}
 > **Target branch:** ${targetBranch} (${targetRef})
   `.trim();
 
-  if (badCases.length === 0) {
+  if (passed) {
     const mdStr = [
       commonHeader,
       '------------------------',
@@ -213,18 +219,19 @@ async function boot() {
 
   const baseImgSourceDir = path.resolve(__dirname, `../../imageSnapshots-${targetBranch}`);
 
+  /* --- prepare stage --- */
   console.log(
     chalk.green(
       `Preparing image snapshots from latest \`${targetBranch}\` branch for pr \`${prId}\`\n`,
     ),
   );
   await fse.ensureDir(baseImgSourceDir);
 
-  const targetRef = await getBranchLatestRef(targetBranch);
-  assert(targetRef, `Missing ref from ${targetBranch}`);
+  const targetCommitSha = await getBranchLatestRef(targetBranch);
+  assert(targetCommitSha, `Missing commit sha from ${targetBranch}`);
 
   if (!isLocalEnv) {
-    await downloadBaseSnapshots(targetRef, baseImgSourceDir);
+    await downloadBaseSnapshots(targetCommitSha, baseImgSourceDir);
   } else if (!fse.existsSync(baseImgSourceDir)) {
     console.log(
       chalk.yellow(
@@ -252,24 +259,8 @@ async function boot() {
   console.log('\n');
 
   const baseImgFileList = readPngs(baseImgSourceDir);
-  const currentImgFileList = readPngs(currentImgSourceDir);
-
-  const deletedImgs = _.difference(baseImgFileList, currentImgFileList);
-  if (deletedImgs.length) {
-    console.log(
-      chalk.red('⛔️ Missing images compare to %s:\n%s'),
-      targetBranch,
-      prettyList(deletedImgs),
-    );
-    console.log('\n');
-  }
-  // ignore new images
-  const newImgs = _.difference(currentImgFileList, baseImgFileList);
-  if (newImgs.length) {
-    console.log(chalk.green('🆕 Added images:\n'), prettyList(newImgs));
-    console.log('\n');
-  }
 
+  /* --- compare stage --- */
   const badCases: IBadCase[] = [];
 
   // compare cssinjs and css-var png from pr
@@ -295,6 +286,7 @@ async function boot() {
         badCases.push({
           type: 'removed',
           filename: compareImgName,
+          weight: 1,
         });
         await fse.copy(baseImgPath, path.join(baseImgReportDir, compareImgName));
         continue;
@@ -310,7 +302,7 @@ async function boot() {
         console.log(
           'Mismatched pixels for:',
           chalk.yellow(compareImgName),
-          `${mismatchedPxPercent.toFixed(2)}%\n`,
+          `${(mismatchedPxPercent * 100).toFixed(2)}%\n`,
         );
         // copy compare imgs(x2) to report dir
         await fse.copy(baseImgPath, path.join(baseImgReportDir, compareImgName));
@@ -319,22 +311,24 @@ async function boot() {
         badCases.push({
           type: 'changed',
           filename: compareImgName,
+          weight: mismatchedPxPercent,
         });
       } else {
         console.log('Passed for: %s\n', chalk.green(compareImgName));
       }
     }
   }
 
-  if (badCases.length) {
-    console.log(chalk.red('⛔️ Failed cases:\n'), prettyList(badCases.map((i) => i.filename)));
-    console.log('\n');
-  }
-
+  /* --- generate report stage --- */
   const jsonl = badCases.map((i) => JSON.stringify(i)).join('\n');
   // write jsonl and markdown report to diffImgDir
   await fse.writeFile(path.join(reportDir, './report.jsonl'), jsonl);
-  const [reportMdStr, reportHtmlStr] = generateReport(badCases, targetBranch, targetRef, prId);
+  const [reportMdStr, reportHtmlStr] = generateReport(
+    badCases,
+    targetBranch,
+    targetCommitSha,
+    prId,
+  );
   await fse.writeFile(path.join(reportDir, './report.md'), reportMdStr);
   const htmlTemplate = await fse.readFile(path.join(__dirname, './report-template.html'), 'utf8');
 
@@ -353,6 +347,34 @@ async function boot() {
     },
     await fse.readdir(reportDir),
   );
+
+  const currentImgFileList = readPngs(currentImgSourceDir);
+  /* --- text report stage --- */
+  console.log(
+    chalk.blue(`📊 Text report from pr #${prId} comparing to ${targetBranch}@${targetCommitSha}\n`),
+  );
+  // new images
+  const newImgs = _.difference(currentImgFileList, baseImgFileList);
+  if (newImgs.length) {
+    console.log(chalk.green(`🆕 ${newImgs.length} images added from this pr`));
+    console.log(chalk.green('🆕 Added images list:\n'), prettyList(newImgs));
+    console.log('\n');
+  }
+
+  if (!badCases.length) {
+    console.log(chalk.green('🎉 All passed!'));
+    console.log('\n');
+    return;
+  }
+
+  const sortedBadCases = badCases.sort((a, b) => b.weight - a.weight);
+  console.log(
+    chalk.red('⛔️ Failed cases:\n'),
+    prettyList(sortedBadCases.map((i) => `[${i.type}] ${i.filename}`)),
+  );
+  console.log('\n');
+  // let job failed
+  process.exit(1);
 }
 
 boot();