test: Update image snapshot logic (#46529)

* test: mix snapshot * test: clean up * test: fix order * test: fix test logic * test: fix reset * test: refactor code * test: clean fetch * chore: lint * test: clean up * test: delay check * chore: refactor fetch * docs: update diff html * test: add ssr support * chore: part use ssr * chore: update style * chore: slice of it * docs: fix cut
ant-design · Dec 21, 2023 · eff7208 · eff7208
1 parent b071284
commit eff7208
Show file tree

Hide file tree

Showing 13 changed files with 187 additions and 58 deletions.
diff --git a/.jest.image.js b/.jest.image.js
@@ -2,7 +2,7 @@ const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
 
 // jest config for image snapshots
 module.exports = {
-  setupFiles: ['./tests/setup.js'],
+  setupFiles: ['./tests/setup.ts'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
   moduleNameMapper,
   transform: {
@@ -19,5 +19,5 @@ module.exports = {
     },
   },
   preset: 'jest-puppeteer',
-  testTimeout: 10000,
+  testTimeout: 20000,
 };
diff --git a/.jest.js b/.jest.js
@@ -32,7 +32,7 @@ function getTestRegex(libDir) {
 module.exports = {
   verbose: true,
   testEnvironment: 'jsdom',
-  setupFiles: ['./tests/setup.js', 'jest-canvas-mock'],
+  setupFiles: ['./tests/setup.ts', 'jest-canvas-mock'],
   setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],
   modulePathIgnorePatterns: ['/_site/'],

diff --git a/.jest.node.js b/.jest.node.js
@@ -2,7 +2,7 @@ const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
 
 // jest config for server render environment
 module.exports = {
-  setupFiles: ['./tests/setup.js'],
+  setupFiles: ['./tests/setup.ts'],
   setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
   moduleNameMapper,

diff --git a/components/carousel/__tests__/image.test.ts b/components/carousel/__tests__/image.test.ts
@@ -1,5 +1,7 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Carousel image', () => {
-  imageDemoTest('carousel');
+  imageDemoTest('carousel', {
+    ssr: true,
+  });
 });
diff --git a/components/date-picker/__tests__/demo.test.tsx b/components/date-picker/__tests__/demo.test.tsx
@@ -1,5 +1,6 @@
-import dayjs from 'dayjs';
 import * as React from 'react';
+import dayjs from 'dayjs';
+
 import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest';
 
 demoTest('date-picker', { skip: ['locale.tsx', 'component-token.tsx'], testRootProps: false });
@@ -10,7 +11,7 @@ rootPropsTest('date-picker', (DatePicker, props) => <DatePicker {...props} value
 });
 
 rootPropsTest(
-  'date-picker',
+  ['date-picker', 'RangePicker'],
   (DatePicker, props) => <DatePicker.RangePicker {...props} value={dayjs()} />,
   {
     findRootElements: () => document.querySelectorAll('.ant-picker-range, .ant-picker-dropdown'),

diff --git a/components/progress/__tests__/image.test.ts b/components/progress/__tests__/image.test.ts
@@ -1,5 +1,7 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Progress image', () => {
-  imageDemoTest('progress');
+  imageDemoTest('progress', {
+    ssr: true,
+  });
 });
diff --git a/package.json b/package.json
@@ -93,7 +93,7 @@
     "pretest": "npm run version && npm run component-changelog",
     "test": "jest --config .jest.js --no-cache",
     "test-all": "sh -e ./scripts/test-all.sh",
-    "test-image": "jest --config .jest.image.js --no-cache -i -u",
+    "test-image": "jest --config .jest.image.js --no-cache -i -u --forceExit",
     "test-node": "npm run version && jest --config .jest.node.js --no-cache",
     "test:update": "jest --config .jest.js --no-cache -u",
     "token-meta": "tsx scripts/generate-token-meta.ts",

diff --git a/scripts/visual-regression/build.ts b/scripts/visual-regression/build.ts
@@ -1,23 +1,22 @@
 /* eslint-disable compat/compat */
 /* eslint-disable no-console, no-await-in-loop, import/no-extraneous-dependencies, lodash/import-scope, no-restricted-syntax */
-import path from 'path';
+import { assert } from 'console';
 import fs from 'fs';
 import os from 'os';
+import path from 'path';
 import { Readable } from 'stream';
 import { finished } from 'stream/promises';
-
-import { remark } from 'remark';
-import remarkHtml from 'remark-html';
-import remarkGfm from 'remark-gfm';
-import minimist from 'minimist';
-import tar from 'tar';
-import fse from 'fs-extra';
 import chalk from 'chalk';
+import fse from 'fs-extra';
 import _ from 'lodash';
+import minimist from 'minimist';
 import pixelmatch from 'pixelmatch';
 import { PNG } from 'pngjs';
+import { remark } from 'remark';
+import remarkGfm from 'remark-gfm';
+import remarkHtml from 'remark-html';
 import sharp from 'sharp';
-import { assert } from 'console';
+import tar from 'tar';
 
 const ALI_OSS_BUCKET = 'antd-visual-diff';
 
@@ -158,10 +157,7 @@ function generateReport(
 
   const htmlReportLink = `${publicPath}/visualRegressionReport/report.html`;
 
-  const addonFullReportDesc = `\n\nToo many visual-regression diffs found, please check <a href="${htmlReportLink}" target="_blank">Full Report</a> for details`;
-
-  // github action pr comment has limit of 65536 4-byte unicode characters
-  const limit = 65536 - addonFullReportDesc.length;
+  const addonFullReportDesc = `\n\nCheck <a href="${htmlReportLink}" target="_blank">Full Report</a> for details`;
 
   let reportMdStr = `
 ${commonHeader}
@@ -174,7 +170,7 @@ ${commonHeader}
 
   let fullVersionMd = reportMdStr;
 
-  let addonFullReportDescAdded = false;
+  let diffCount = 0;
 
   for (const badCase of badCases) {
     const { filename, type } = badCase;
@@ -199,17 +195,16 @@ ${commonHeader}
       lineReportMdStr += ' |\n';
     }
 
-    if (lineReportMdStr) {
-      if (reportMdStr.length + lineReportMdStr.length < limit) {
-        reportMdStr += lineReportMdStr;
-      } else if (!addonFullReportDescAdded) {
-        reportMdStr += addonFullReportDesc;
-        addonFullReportDescAdded = true;
-      }
-      fullVersionMd += lineReportMdStr;
+    diffCount += 1;
+    if (diffCount <= 10) {
+      reportMdStr += lineReportMdStr;
     }
+
+    fullVersionMd += lineReportMdStr;
   }
 
+  reportMdStr += addonFullReportDesc;
+
   // convert fullVersionMd to html
   return [reportMdStr, md2Html(fullVersionMd)];
 }

diff --git a/scripts/visual-regression/report-template.html b/scripts/visual-regression/report-template.html
@@ -16,6 +16,7 @@
     table {
       width: 100%;
       border-collapse: collapse;
+      table-layout: fixed;
     }
 
     th,
@@ -26,6 +27,20 @@
       vertical-align: top;
     }
 
+    td img {
+      max-width: 100%;
+    }
+
+    th,
+    td {
+      width: 10%;
+    }
+
+    th+th,
+    td+td {
+      width: 30%;
+    }
+
     th {
       background-color: #f2f2f2;
     }

diff --git a/tests/setup.js → tests/setup.ts b/tests/setup.js → tests/setup.ts
@@ -1,5 +1,9 @@
-/* eslint-disable no-console */
-const util = require('util');
+/* eslint-disable no-console, import/prefer-default-export */
+import util from 'util';
+import type { DOMWindow } from 'jsdom';
+
+// import { fillWindowEnv } from './utils';
+
 const React = require('react');
 
 // eslint-disable-next-line no-console
@@ -20,17 +24,21 @@ console.error = (...args) => {
   }
 };
 
-/* eslint-disable global-require */
-if (typeof window !== 'undefined') {
-  global.window.resizeTo = (width, height) => {
-    global.window.innerWidth = width || global.window.innerWidth;
-    global.window.innerHeight = height || global.window.innerHeight;
-    global.window.dispatchEvent(new Event('resize'));
+type Writeable<T> = { -readonly [P in keyof T]: T[P] };
+
+// This function can not move to external file since jest setup not support
+export function fillWindowEnv(window: Window | DOMWindow) {
+  const win = window as Writeable<Window> & typeof globalThis;
+
+  win.resizeTo = (width, height) => {
+    win.innerWidth = width || win.innerWidth;
+    win.innerHeight = height || win.innerHeight;
+    win.dispatchEvent(new Event('resize'));
   };
-  global.window.scrollTo = () => {};
+  win.scrollTo = () => {};
   // ref: https://github.com/ant-design/ant-design/issues/18774
-  if (!window.matchMedia) {
-    Object.defineProperty(global.window, 'matchMedia', {
+  if (!win.matchMedia) {
+    Object.defineProperty(win, 'matchMedia', {
       writable: true,
       configurable: true,
       value: jest.fn((query) => ({
@@ -44,11 +52,19 @@ if (typeof window !== 'undefined') {
   // Fix css-animation or rc-motion deps on these
   // https://github.com/react-component/motion/blob/9c04ef1a210a4f3246c9becba6e33ea945e00669/src/util/motion.ts#L27-L35
   // https://github.com/yiminghe/css-animation/blob/a5986d73fd7dfce75665337f39b91483d63a4c8c/src/Event.js#L44
-  window.AnimationEvent = window.AnimationEvent || window.Event;
-  window.TransitionEvent = window.TransitionEvent || window.Event;
+  win.AnimationEvent = win.AnimationEvent || win.Event;
+  win.TransitionEvent = win.TransitionEvent || win.Event;
 
   // ref: https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
   // ref: https://github.com/jsdom/jsdom/issues/2524
-  Object.defineProperty(window, 'TextEncoder', { writable: true, value: util.TextEncoder });
-  Object.defineProperty(window, 'TextDecoder', { writable: true, value: util.TextDecoder });
+  Object.defineProperty(win, 'TextEncoder', { writable: true, value: util.TextEncoder });
+  Object.defineProperty(win, 'TextDecoder', { writable: true, value: util.TextDecoder });
 }
+
+/* eslint-disable global-require */
+if (typeof window !== 'undefined') {
+  fillWindowEnv(window);
+}
+
+global.requestAnimationFrame = global.requestAnimationFrame || global.setTimeout;
+global.cancelAnimationFrame = global.cancelAnimationFrame || global.clearTimeout;