From 6fba4d1136b58643a99dd5890f91e22786b0af11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=97=E4=BD=A0=E6=98=AF=E5=B0=8F=E7=8C=AB=E5=92=AA?=
 <darryshaw@gmail.com>
Date: Fri, 23 Oct 2020 18:50:46 +0800
Subject: [PATCH] test: demo -> ui test (#24475)

* test: demo -> ui test

* improve comment image width

* use argos-ci

* use by cicleci

* fix circle run

* rebase master

* try pipeline var

* use another branch var

* fix commit id

* ignore image test file

* remove useless report

* fix test coverage
---
 .gitignore                                    |   3 ++
 .jest.image.js                                |   3 +-
 .jest.js                                      |   3 +-
 azure-pipelines.yml                           |  41 +-----------------
 components/affix/__tests__/image.test.ts      |   5 +++
 components/alert/__tests__/image.test.ts      |   5 +++
 components/anchor/__tests__/image.test.ts     |   5 +++
 .../auto-complete/__tests__/image.test.ts     |   5 +++
 components/avatar/__tests__/image.test.ts     |   5 +++
 components/back-top/__tests__/image.test.ts   |   5 +++
 components/badge/__tests__/image.test.ts      |   5 +++
 components/breadcrumb/__tests__/image.test.ts |   5 +++
 ...image-screenshot-should-correct-1-snap.png | Bin 6797 -> 0 bytes
 components/button/__tests__/image.test.js     |  14 ------
 components/button/__tests__/image.test.ts     |   5 +++
 components/calendar/__tests__/image.test.ts   |   5 +++
 components/card/__tests__/image.test.ts       |   5 +++
 components/carousel/__tests__/image.test.ts   |   5 +++
 components/cascader/__tests__/image.test.ts   |   5 +++
 components/checkbox/__tests__/image.test.ts   |   5 +++
 components/collapse/__tests__/image.test.ts   |   5 +++
 components/comment/__tests__/image.test.ts    |   5 +++
 .../config-provider/__tests__/image.test.ts   |   5 +++
 .../date-picker/__tests__/image.test.ts       |   5 +++
 .../descriptions/__tests__/image.test.ts      |   5 +++
 components/divider/__tests__/image.test.ts    |   5 +++
 components/drawer/__tests__/image.test.ts     |   5 +++
 components/dropdown/__tests__/image.test.ts   |   5 +++
 components/empty/__tests__/image.test.ts      |   5 +++
 components/form/__tests__/image.test.ts       |   5 +++
 ...image-screenshot-should-correct-1-snap.png | Bin 6750 -> 0 bytes
 components/grid/__tests__/image.test.js       |  37 ----------------
 components/grid/__tests__/image.test.ts       |   5 +++
 components/icon/__tests__/image.test.ts       |   5 +++
 .../input-number/__tests__/image.test.ts      |   5 +++
 components/input/__tests__/image.test.ts      |   5 +++
 components/layout/__tests__/image.test.ts     |   5 +++
 components/list/__tests__/image.test.ts       |   5 +++
 components/mentions/__tests__/image.test.ts   |   5 +++
 components/menu/__tests__/image.test.ts       |   5 +++
 components/message/__tests__/image.test.ts    |   5 +++
 components/modal/__tests__/image.test.ts      |   5 +++
 .../notification/__tests__/image.test.ts      |   5 +++
 .../page-header/__tests__/image.test.ts       |   5 +++
 components/pagination/__tests__/image.test.ts |   5 +++
 components/popconfirm/__tests__/image.test.ts |   5 +++
 components/popover/__tests__/image.test.ts    |   5 +++
 components/progress/__tests__/image.test.ts   |   5 +++
 components/radio/__tests__/image.test.ts      |   5 +++
 components/rate/__tests__/image.test.ts       |   5 +++
 components/result/__tests__/image.test.ts     |   5 +++
 components/select/__tests__/image.test.ts     |   5 +++
 components/skeleton/__tests__/image.test.ts   |   5 +++
 components/slider/__tests__/image.test.ts     |   5 +++
 components/space/__tests__/image.test.ts      |   5 +++
 components/statistic/__tests__/image.test.ts  |   5 +++
 components/steps/__tests__/image.test.ts      |   5 +++
 components/switch/__tests__/image.test.ts     |   5 +++
 components/table/__tests__/image.test.ts      |   5 +++
 components/tabs/__tests__/image.test.ts       |   5 +++
 components/tag/__tests__/image.test.ts        |   5 +++
 .../time-picker/__tests__/image.test.ts       |   5 +++
 components/timeline/__tests__/image.test.ts   |   5 +++
 components/tooltip/__tests__/image.test.ts    |   5 +++
 components/transfer/__tests__/image.test.ts   |   5 +++
 .../tree-select/__tests__/image.test.ts       |   5 +++
 components/tree/__tests__/image.test.ts       |   5 +++
 components/typography/__tests__/image.test.ts |   5 +++
 components/upload/__tests__/image.test.ts     |   5 +++
 docker-compose.yml                            |   5 ++-
 package.json                                  |   5 ++-
 tests/index.html                              |   6 ++-
 tests/shared/imageTest.ts                     |  29 ++++++++++++-
 73 files changed, 353 insertions(+), 98 deletions(-)
 create mode 100644 components/affix/__tests__/image.test.ts
 create mode 100644 components/alert/__tests__/image.test.ts
 create mode 100644 components/anchor/__tests__/image.test.ts
 create mode 100644 components/auto-complete/__tests__/image.test.ts
 create mode 100644 components/avatar/__tests__/image.test.ts
 create mode 100644 components/back-top/__tests__/image.test.ts
 create mode 100644 components/badge/__tests__/image.test.ts
 create mode 100644 components/breadcrumb/__tests__/image.test.ts
 delete mode 100644 components/button/__tests__/__image_snapshots__/image-test-js-button-image-image-test-component-image-screenshot-should-correct-1-snap.png
 delete mode 100644 components/button/__tests__/image.test.js
 create mode 100644 components/button/__tests__/image.test.ts
 create mode 100644 components/calendar/__tests__/image.test.ts
 create mode 100644 components/card/__tests__/image.test.ts
 create mode 100644 components/carousel/__tests__/image.test.ts
 create mode 100644 components/cascader/__tests__/image.test.ts
 create mode 100644 components/checkbox/__tests__/image.test.ts
 create mode 100644 components/collapse/__tests__/image.test.ts
 create mode 100644 components/comment/__tests__/image.test.ts
 create mode 100644 components/config-provider/__tests__/image.test.ts
 create mode 100644 components/date-picker/__tests__/image.test.ts
 create mode 100644 components/descriptions/__tests__/image.test.ts
 create mode 100644 components/divider/__tests__/image.test.ts
 create mode 100644 components/drawer/__tests__/image.test.ts
 create mode 100644 components/dropdown/__tests__/image.test.ts
 create mode 100644 components/empty/__tests__/image.test.ts
 create mode 100644 components/form/__tests__/image.test.ts
 delete mode 100644 components/grid/__tests__/__image_snapshots__/image-test-js-grid-image-image-test-component-image-screenshot-should-correct-1-snap.png
 delete mode 100644 components/grid/__tests__/image.test.js
 create mode 100644 components/grid/__tests__/image.test.ts
 create mode 100644 components/icon/__tests__/image.test.ts
 create mode 100644 components/input-number/__tests__/image.test.ts
 create mode 100644 components/input/__tests__/image.test.ts
 create mode 100644 components/layout/__tests__/image.test.ts
 create mode 100644 components/list/__tests__/image.test.ts
 create mode 100644 components/mentions/__tests__/image.test.ts
 create mode 100644 components/menu/__tests__/image.test.ts
 create mode 100644 components/message/__tests__/image.test.ts
 create mode 100644 components/modal/__tests__/image.test.ts
 create mode 100644 components/notification/__tests__/image.test.ts
 create mode 100644 components/page-header/__tests__/image.test.ts
 create mode 100644 components/pagination/__tests__/image.test.ts
 create mode 100644 components/popconfirm/__tests__/image.test.ts
 create mode 100644 components/popover/__tests__/image.test.ts
 create mode 100644 components/progress/__tests__/image.test.ts
 create mode 100644 components/radio/__tests__/image.test.ts
 create mode 100644 components/rate/__tests__/image.test.ts
 create mode 100644 components/result/__tests__/image.test.ts
 create mode 100644 components/select/__tests__/image.test.ts
 create mode 100644 components/skeleton/__tests__/image.test.ts
 create mode 100644 components/slider/__tests__/image.test.ts
 create mode 100644 components/space/__tests__/image.test.ts
 create mode 100644 components/statistic/__tests__/image.test.ts
 create mode 100644 components/steps/__tests__/image.test.ts
 create mode 100644 components/switch/__tests__/image.test.ts
 create mode 100644 components/table/__tests__/image.test.ts
 create mode 100644 components/tabs/__tests__/image.test.ts
 create mode 100644 components/tag/__tests__/image.test.ts
 create mode 100644 components/time-picker/__tests__/image.test.ts
 create mode 100644 components/timeline/__tests__/image.test.ts
 create mode 100644 components/tooltip/__tests__/image.test.ts
 create mode 100644 components/transfer/__tests__/image.test.ts
 create mode 100644 components/tree-select/__tests__/image.test.ts
 create mode 100644 components/tree/__tests__/image.test.ts
 create mode 100644 components/typography/__tests__/image.test.ts
 create mode 100644 components/upload/__tests__/image.test.ts

diff --git a/.gitignore b/.gitignore
index f59fe24f3bdb..1f29c5a1241b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -61,4 +61,7 @@ components/version/version.tsx
 
 # Image snapshot diff
 __diff_output__/
+__image_snapshots__/
 /jest-stare
+/imageSnapshots
+/imageDiffSnapshots
diff --git a/.jest.image.js b/.jest.image.js
index 9d5b93df08eb..b04f37496e6f 100644
--- a/.jest.image.js
+++ b/.jest.image.js
@@ -11,7 +11,7 @@ module.exports = {
     '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
     '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
   },
-  testRegex: 'image\\.test\\.js$',
+  testRegex: 'image\\.test\\.(j|t)s$',
   testEnvironment: 'node',
   transformIgnorePatterns,
   snapshotSerializers: ['enzyme-to-json/serializer'],
@@ -20,5 +20,4 @@ module.exports = {
       tsConfigFile: './tsconfig.test.json',
     },
   },
-  reporters: ['default', 'jest-stare'],
 };
diff --git a/.jest.js b/.jest.js
index 42ccb8e678f8..7199b1262b62 100644
--- a/.jest.js
+++ b/.jest.js
@@ -27,7 +27,7 @@ module.exports = {
     '^react-dnd-test-utils$': 'react-dnd-test-utils/dist/cjs',
     '\\.(css|less)$': 'identity-obj-proxy',
   },
-  testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node', 'image.test.js'],
+  testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node', 'image.test.js', 'image.test.ts'],
   transform: {
     '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
     '\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
@@ -42,6 +42,7 @@ module.exports = {
     '!components/*/locale/index.tsx',
     '!components/*/__tests__/type.test.tsx',
     '!components/**/*/interface.{ts,tsx}',
+    '!components/*/__tests__/image.test.{ts,tsx}',
   ],
   transformIgnorePatterns,
   snapshotSerializers: ['enzyme-to-json/serializer'],
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index c15ad8efe554..9663eb376e0c 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -74,44 +74,7 @@ stages:
               versionSpec: '14.7.0'
           - script: npm install
             displayName: 'Install modules'
-          - script: |
-              node ./scripts/azure-github-comment.js -ui "[![UI Testing](https://user-images.githubusercontent.com/14831261/82744255-6bfc8800-9da8-11ea-9017-857933e8433b.gif)](https://dev.azure.com/ant-design/ant-design/_build/results?buildId=$(Build.BuildId))"
-            displayName: 'Comment on github'
           - script: npm run test-image
             displayName: 'UI Test'
-          - task: PublishPipelineArtifact@1
-            inputs:
-              targetPath: $(System.DefaultWorkingDirectory)/jest-stare
-              artifactName: jestStare
-            condition: failed()
-          - script: |
-              node ./scripts/azure-github-comment.js -ui "[<img width="306" src="https://user-images.githubusercontent.com/14831261/82744259-6e5ee200-9da8-11ea-8479-685f6e280b77.jpg">](https://dev.azure.com/ant-design/ant-design/_build/results?buildId=$(Build.BuildId))"
-            displayName: 'Update comment on github'
-      - job: UI_Test_Failed
-        dependsOn: UI_Test
-        condition: failed()
-        steps:
-          - checkout: self
-            displayName: 'Checkout'
-            clean: true
-            fetchDepth: 1
-          - task: NodeTool@0
-            displayName: 'Install Node.js'
-            inputs:
-              versionSpec: '14.7.0'
-          - script: npm install
-            displayName: 'Install modules'
-          - task: DownloadPipelineArtifact@2
-            inputs:
-              artifact: jestStare
-              path: './jest-stare'
-          - script: ls -al ./jest-stare
-            displayName: 'List report'
-          - script: |
-              export DEPLOY_DOMAIN=https://ui-test-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-ant-design.surge.sh
-              echo "Deploy to $DEPLOY_DOMAIN"
-              npx surge --project ./jest-stare --domain $DEPLOY_DOMAIN
-            displayName: 'Deploy Report Site'
-          - script: |
-              node ./scripts/azure-github-comment.js -ui "[<img width="306" src="https://user-images.githubusercontent.com/14831261/82744257-6dc64b80-9da8-11ea-80cf-05b2279a5602.jpg">](https://ui-test-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-ant-design.surge.sh)"
-            displayName: 'Update comment on github'
+          - script: npm run argos -- --token $ARGOS_TOKEN --branch $(Build.SourceBranch) --commit $(Build.SourceVersion)
+            displayName: 'Upload to argos-ci'
diff --git a/components/affix/__tests__/image.test.ts b/components/affix/__tests__/image.test.ts
new file mode 100644
index 000000000000..4ff20f8783eb
--- /dev/null
+++ b/components/affix/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Affix image', () => {
+  imageDemoTest('affix');
+});
diff --git a/components/alert/__tests__/image.test.ts b/components/alert/__tests__/image.test.ts
new file mode 100644
index 000000000000..26d429d4f5a5
--- /dev/null
+++ b/components/alert/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Alert image', () => {
+  imageDemoTest('alert');
+});
diff --git a/components/anchor/__tests__/image.test.ts b/components/anchor/__tests__/image.test.ts
new file mode 100644
index 000000000000..b071a85f4f78
--- /dev/null
+++ b/components/anchor/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Anchor image', () => {
+  imageDemoTest('anchor');
+});
diff --git a/components/auto-complete/__tests__/image.test.ts b/components/auto-complete/__tests__/image.test.ts
new file mode 100644
index 000000000000..890e81f267df
--- /dev/null
+++ b/components/auto-complete/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('AutoComplete image', () => {
+  imageDemoTest('auto-complete');
+});
diff --git a/components/avatar/__tests__/image.test.ts b/components/avatar/__tests__/image.test.ts
new file mode 100644
index 000000000000..70718b3108fa
--- /dev/null
+++ b/components/avatar/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Avatar image', () => {
+  imageDemoTest('avatar');
+});
diff --git a/components/back-top/__tests__/image.test.ts b/components/back-top/__tests__/image.test.ts
new file mode 100644
index 000000000000..2651ed880e1d
--- /dev/null
+++ b/components/back-top/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('BackTop image', () => {
+  imageDemoTest('back-top');
+});
diff --git a/components/badge/__tests__/image.test.ts b/components/badge/__tests__/image.test.ts
new file mode 100644
index 000000000000..f34cf6c438cb
--- /dev/null
+++ b/components/badge/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Badge image', () => {
+  imageDemoTest('badge');
+});
diff --git a/components/breadcrumb/__tests__/image.test.ts b/components/breadcrumb/__tests__/image.test.ts
new file mode 100644
index 000000000000..35450d3b3dbb
--- /dev/null
+++ b/components/breadcrumb/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Breadcrumb image', () => {
+  imageDemoTest('breadcrumb', { skip: ['router-4.md'] });
+});
diff --git a/components/button/__tests__/__image_snapshots__/image-test-js-button-image-image-test-component-image-screenshot-should-correct-1-snap.png b/components/button/__tests__/__image_snapshots__/image-test-js-button-image-image-test-component-image-screenshot-should-correct-1-snap.png
deleted file mode 100644
index 9254f31b0afd89bf25ac096531ac7ae17d4bbe29..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6797
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
Mr@&+NN6%mXFFyR6#sB~S

diff --git a/components/button/__tests__/image.test.js b/components/button/__tests__/image.test.js
deleted file mode 100644
index a5a32859621f..000000000000
--- a/components/button/__tests__/image.test.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import Button from '..';
-import imageTest from '../../../tests/shared/imageTest';
-
-describe('Button image', () => {
-  imageTest(
-    <>
-      <Button type="primary">Primary</Button>
-      <Button>Default</Button>
-      <Button type="dashed">Dashed</Button>
-      <Button type="link">Link</Button>
-    </>,
-  );
-});
diff --git a/components/button/__tests__/image.test.ts b/components/button/__tests__/image.test.ts
new file mode 100644
index 000000000000..69d7f68c78ac
--- /dev/null
+++ b/components/button/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Button image', () => {
+  imageDemoTest('button', { skip: ['loading.md'] });
+});
diff --git a/components/calendar/__tests__/image.test.ts b/components/calendar/__tests__/image.test.ts
new file mode 100644
index 000000000000..bc0534991f7e
--- /dev/null
+++ b/components/calendar/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Calendar image', () => {
+  imageDemoTest('calendar');
+});
diff --git a/components/card/__tests__/image.test.ts b/components/card/__tests__/image.test.ts
new file mode 100644
index 000000000000..5c86506cf8ea
--- /dev/null
+++ b/components/card/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Card image', () => {
+  imageDemoTest('card');
+});
diff --git a/components/carousel/__tests__/image.test.ts b/components/carousel/__tests__/image.test.ts
new file mode 100644
index 000000000000..30d204a801e7
--- /dev/null
+++ b/components/carousel/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Carousel image', () => {
+  imageDemoTest('carousel');
+});
diff --git a/components/cascader/__tests__/image.test.ts b/components/cascader/__tests__/image.test.ts
new file mode 100644
index 000000000000..914c240bb138
--- /dev/null
+++ b/components/cascader/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Cascader image', () => {
+  imageDemoTest('cascader');
+});
diff --git a/components/checkbox/__tests__/image.test.ts b/components/checkbox/__tests__/image.test.ts
new file mode 100644
index 000000000000..3b650fa093c0
--- /dev/null
+++ b/components/checkbox/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Checkbox image', () => {
+  imageDemoTest('checkbox');
+});
diff --git a/components/collapse/__tests__/image.test.ts b/components/collapse/__tests__/image.test.ts
new file mode 100644
index 000000000000..7f93282a8ce3
--- /dev/null
+++ b/components/collapse/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Collapse image', () => {
+  imageDemoTest('collapse');
+});
diff --git a/components/comment/__tests__/image.test.ts b/components/comment/__tests__/image.test.ts
new file mode 100644
index 000000000000..0ab96e709fc8
--- /dev/null
+++ b/components/comment/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Comment image', () => {
+  imageDemoTest('comment');
+});
diff --git a/components/config-provider/__tests__/image.test.ts b/components/config-provider/__tests__/image.test.ts
new file mode 100644
index 000000000000..4983a439707a
--- /dev/null
+++ b/components/config-provider/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('ConfigProvider image', () => {
+  imageDemoTest('config-provider', { skip: ['direction.md'] });
+});
diff --git a/components/date-picker/__tests__/image.test.ts b/components/date-picker/__tests__/image.test.ts
new file mode 100644
index 000000000000..4e5e4fd254c3
--- /dev/null
+++ b/components/date-picker/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('DatePicker image', () => {
+  imageDemoTest('date-picker');
+});
diff --git a/components/descriptions/__tests__/image.test.ts b/components/descriptions/__tests__/image.test.ts
new file mode 100644
index 000000000000..2057666ade38
--- /dev/null
+++ b/components/descriptions/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Descriptions image', () => {
+  imageDemoTest('descriptions');
+});
diff --git a/components/divider/__tests__/image.test.ts b/components/divider/__tests__/image.test.ts
new file mode 100644
index 000000000000..d72e2b5211bb
--- /dev/null
+++ b/components/divider/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Divider image', () => {
+  imageDemoTest('divider');
+});
diff --git a/components/drawer/__tests__/image.test.ts b/components/drawer/__tests__/image.test.ts
new file mode 100644
index 000000000000..4550635f961b
--- /dev/null
+++ b/components/drawer/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Drawer image', () => {
+  imageDemoTest('drawer');
+});
diff --git a/components/dropdown/__tests__/image.test.ts b/components/dropdown/__tests__/image.test.ts
new file mode 100644
index 000000000000..19c1b959f803
--- /dev/null
+++ b/components/dropdown/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Dropdown image', () => {
+  imageDemoTest('dropdown');
+});
diff --git a/components/empty/__tests__/image.test.ts b/components/empty/__tests__/image.test.ts
new file mode 100644
index 000000000000..5533c301d131
--- /dev/null
+++ b/components/empty/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Empty image', () => {
+  imageDemoTest('empty');
+});
diff --git a/components/form/__tests__/image.test.ts b/components/form/__tests__/image.test.ts
new file mode 100644
index 000000000000..6df9ac70d4d6
--- /dev/null
+++ b/components/form/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Form image', () => {
+  imageDemoTest('form', { skip: ['complex-form-control.md'] });
+});
diff --git a/components/grid/__tests__/__image_snapshots__/image-test-js-grid-image-image-test-component-image-screenshot-should-correct-1-snap.png b/components/grid/__tests__/__image_snapshots__/image-test-js-grid-image-image-test-component-image-screenshot-should-correct-1-snap.png
deleted file mode 100644
index fbb723ee814b14324736569f05b4036cb0c67496..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6750
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

diff --git a/components/grid/__tests__/image.test.js b/components/grid/__tests__/image.test.js
deleted file mode 100644
index 4c308e158c3b..000000000000
--- a/components/grid/__tests__/image.test.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { Col, Row } from '..';
-import imageTest from '../../../tests/shared/imageTest';
-
-describe('Grid image', () => {
-  imageTest(
-    <>
-      <Row>
-        <Col>col</Col>
-      </Row>
-      <Row>
-        <Col>col</Col>
-        <Col>col</Col>
-        <Col>col</Col>
-        <Col>col</Col>
-      </Row>
-      <Row>
-        <Col span={24}>col</Col>
-      </Row>
-      <Row>
-        <Col span={12}>col-12</Col>
-        <Col span={12}>col-12</Col>
-      </Row>
-      <Row>
-        <Col span={8}>col-8</Col>
-        <Col span={8}>col-8</Col>
-        <Col span={8}>col-8</Col>
-      </Row>
-      <Row>
-        <Col span={6}>col-6</Col>
-        <Col span={6}>col-6</Col>
-        <Col span={6}>col-6</Col>
-        <Col span={6}>col-6</Col>
-      </Row>
-    </>,
-  );
-});
diff --git a/components/grid/__tests__/image.test.ts b/components/grid/__tests__/image.test.ts
new file mode 100644
index 000000000000..231401ca9f0e
--- /dev/null
+++ b/components/grid/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Grid image', () => {
+  imageDemoTest('grid');
+});
diff --git a/components/icon/__tests__/image.test.ts b/components/icon/__tests__/image.test.ts
new file mode 100644
index 000000000000..775b6adc2c62
--- /dev/null
+++ b/components/icon/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Icon image', () => {
+  imageDemoTest('icon', { skip: ['basic.md'] });
+});
diff --git a/components/input-number/__tests__/image.test.ts b/components/input-number/__tests__/image.test.ts
new file mode 100644
index 000000000000..8e7fa672f158
--- /dev/null
+++ b/components/input-number/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('InputNumber image', () => {
+  imageDemoTest('input-number');
+});
diff --git a/components/input/__tests__/image.test.ts b/components/input/__tests__/image.test.ts
new file mode 100644
index 000000000000..9db299c0f4d9
--- /dev/null
+++ b/components/input/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Input image', () => {
+  imageDemoTest('input', { skip: ['search-input-loading.md'] });
+});
diff --git a/components/layout/__tests__/image.test.ts b/components/layout/__tests__/image.test.ts
new file mode 100644
index 000000000000..15deaf9ed1e8
--- /dev/null
+++ b/components/layout/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Layout image', () => {
+  imageDemoTest('layout', { skip: ['countdown.md '] });
+});
diff --git a/components/list/__tests__/image.test.ts b/components/list/__tests__/image.test.ts
new file mode 100644
index 000000000000..3fbdae2afe53
--- /dev/null
+++ b/components/list/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('List image', () => {
+  imageDemoTest('list');
+});
diff --git a/components/mentions/__tests__/image.test.ts b/components/mentions/__tests__/image.test.ts
new file mode 100644
index 000000000000..984ebf91deda
--- /dev/null
+++ b/components/mentions/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Mentions image', () => {
+  imageDemoTest('mentions');
+});
diff --git a/components/menu/__tests__/image.test.ts b/components/menu/__tests__/image.test.ts
new file mode 100644
index 000000000000..b85720783143
--- /dev/null
+++ b/components/menu/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Menu image', () => {
+  imageDemoTest('menu');
+});
diff --git a/components/message/__tests__/image.test.ts b/components/message/__tests__/image.test.ts
new file mode 100644
index 000000000000..eb57916a01d8
--- /dev/null
+++ b/components/message/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Message image', () => {
+  imageDemoTest('message');
+});
diff --git a/components/modal/__tests__/image.test.ts b/components/modal/__tests__/image.test.ts
new file mode 100644
index 000000000000..c2efcaff436c
--- /dev/null
+++ b/components/modal/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Modal image', () => {
+  imageDemoTest('modal');
+});
diff --git a/components/notification/__tests__/image.test.ts b/components/notification/__tests__/image.test.ts
new file mode 100644
index 000000000000..d5199da21031
--- /dev/null
+++ b/components/notification/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Notification image', () => {
+  imageDemoTest('notification');
+});
diff --git a/components/page-header/__tests__/image.test.ts b/components/page-header/__tests__/image.test.ts
new file mode 100644
index 000000000000..3571e54408ac
--- /dev/null
+++ b/components/page-header/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('PageHeader image', () => {
+  imageDemoTest('page-header');
+});
diff --git a/components/pagination/__tests__/image.test.ts b/components/pagination/__tests__/image.test.ts
new file mode 100644
index 000000000000..a9f56d1d1ba9
--- /dev/null
+++ b/components/pagination/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Pagination image', () => {
+  imageDemoTest('pagination');
+});
diff --git a/components/popconfirm/__tests__/image.test.ts b/components/popconfirm/__tests__/image.test.ts
new file mode 100644
index 000000000000..73d392ad282c
--- /dev/null
+++ b/components/popconfirm/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Popconfirm image', () => {
+  imageDemoTest('popconfirm');
+});
diff --git a/components/popover/__tests__/image.test.ts b/components/popover/__tests__/image.test.ts
new file mode 100644
index 000000000000..cf5ab59c616d
--- /dev/null
+++ b/components/popover/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Popover image', () => {
+  imageDemoTest('popover');
+});
diff --git a/components/progress/__tests__/image.test.ts b/components/progress/__tests__/image.test.ts
new file mode 100644
index 000000000000..ba763d18ecee
--- /dev/null
+++ b/components/progress/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Progress image', () => {
+  imageDemoTest('progress');
+});
diff --git a/components/radio/__tests__/image.test.ts b/components/radio/__tests__/image.test.ts
new file mode 100644
index 000000000000..273c34aaa9f6
--- /dev/null
+++ b/components/radio/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Radio image', () => {
+  imageDemoTest('radio');
+});
diff --git a/components/rate/__tests__/image.test.ts b/components/rate/__tests__/image.test.ts
new file mode 100644
index 000000000000..b6facd64a3ea
--- /dev/null
+++ b/components/rate/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Rate image', () => {
+  imageDemoTest('rate');
+});
diff --git a/components/result/__tests__/image.test.ts b/components/result/__tests__/image.test.ts
new file mode 100644
index 000000000000..1a65e3d7ddbb
--- /dev/null
+++ b/components/result/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Result image', () => {
+  imageDemoTest('result');
+});
diff --git a/components/select/__tests__/image.test.ts b/components/select/__tests__/image.test.ts
new file mode 100644
index 000000000000..09111e33026e
--- /dev/null
+++ b/components/select/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Select image', () => {
+  imageDemoTest('select', { skip: ['basic.md'] });
+});
diff --git a/components/skeleton/__tests__/image.test.ts b/components/skeleton/__tests__/image.test.ts
new file mode 100644
index 000000000000..9b0f874f0356
--- /dev/null
+++ b/components/skeleton/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Skeleton image', () => {
+  imageDemoTest('skeleton');
+});
diff --git a/components/slider/__tests__/image.test.ts b/components/slider/__tests__/image.test.ts
new file mode 100644
index 000000000000..192491ad017e
--- /dev/null
+++ b/components/slider/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Slider image', () => {
+  imageDemoTest('slider');
+});
diff --git a/components/space/__tests__/image.test.ts b/components/space/__tests__/image.test.ts
new file mode 100644
index 000000000000..4961777607f8
--- /dev/null
+++ b/components/space/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Space image', () => {
+  imageDemoTest('space');
+});
diff --git a/components/statistic/__tests__/image.test.ts b/components/statistic/__tests__/image.test.ts
new file mode 100644
index 000000000000..ebb4c4880852
--- /dev/null
+++ b/components/statistic/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Statistic image', () => {
+  imageDemoTest('statistic', { skip: ['countdown.md'] });
+});
diff --git a/components/steps/__tests__/image.test.ts b/components/steps/__tests__/image.test.ts
new file mode 100644
index 000000000000..e1a6249b881f
--- /dev/null
+++ b/components/steps/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Steps image', () => {
+  imageDemoTest('steps', { skip: ['icon.md'] });
+});
diff --git a/components/switch/__tests__/image.test.ts b/components/switch/__tests__/image.test.ts
new file mode 100644
index 000000000000..56f6f6c880cc
--- /dev/null
+++ b/components/switch/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Switch image', () => {
+  imageDemoTest('switch', { skip: ['loading.md'] });
+});
diff --git a/components/table/__tests__/image.test.ts b/components/table/__tests__/image.test.ts
new file mode 100644
index 000000000000..b9f0dc5d5775
--- /dev/null
+++ b/components/table/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Table image', () => {
+  imageDemoTest('table');
+});
diff --git a/components/tabs/__tests__/image.test.ts b/components/tabs/__tests__/image.test.ts
new file mode 100644
index 000000000000..6f0dd492c5e7
--- /dev/null
+++ b/components/tabs/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Tabs image', () => {
+  imageDemoTest('tabs');
+});
diff --git a/components/tag/__tests__/image.test.ts b/components/tag/__tests__/image.test.ts
new file mode 100644
index 000000000000..d042353c1ff4
--- /dev/null
+++ b/components/tag/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Tag image', () => {
+  imageDemoTest('tag', { skip: ['status.md'] });
+});
diff --git a/components/time-picker/__tests__/image.test.ts b/components/time-picker/__tests__/image.test.ts
new file mode 100644
index 000000000000..13ffd17d6326
--- /dev/null
+++ b/components/time-picker/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('TimePicker image', () => {
+  imageDemoTest('time-picker');
+});
diff --git a/components/timeline/__tests__/image.test.ts b/components/timeline/__tests__/image.test.ts
new file mode 100644
index 000000000000..bb41590e0be6
--- /dev/null
+++ b/components/timeline/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Timeline image', () => {
+  imageDemoTest('timeline', { skip: ['pending.md'] });
+});
diff --git a/components/tooltip/__tests__/image.test.ts b/components/tooltip/__tests__/image.test.ts
new file mode 100644
index 000000000000..b3f04c9c40fd
--- /dev/null
+++ b/components/tooltip/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Tooltip image', () => {
+  imageDemoTest('tooltip');
+});
diff --git a/components/transfer/__tests__/image.test.ts b/components/transfer/__tests__/image.test.ts
new file mode 100644
index 000000000000..f1977b199003
--- /dev/null
+++ b/components/transfer/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Transfer image', () => {
+  imageDemoTest('transfer');
+});
diff --git a/components/tree-select/__tests__/image.test.ts b/components/tree-select/__tests__/image.test.ts
new file mode 100644
index 000000000000..28056614dd13
--- /dev/null
+++ b/components/tree-select/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('TreeSelect image', () => {
+  imageDemoTest('tree-select');
+});
diff --git a/components/tree/__tests__/image.test.ts b/components/tree/__tests__/image.test.ts
new file mode 100644
index 000000000000..f92d2ca5ecf3
--- /dev/null
+++ b/components/tree/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Tree image', () => {
+  imageDemoTest('tree');
+});
diff --git a/components/typography/__tests__/image.test.ts b/components/typography/__tests__/image.test.ts
new file mode 100644
index 000000000000..cab748238927
--- /dev/null
+++ b/components/typography/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Typography image', () => {
+  imageDemoTest('typography');
+});
diff --git a/components/upload/__tests__/image.test.ts b/components/upload/__tests__/image.test.ts
new file mode 100644
index 000000000000..c441f46a8951
--- /dev/null
+++ b/components/upload/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Upload image', () => {
+  imageDemoTest('upload');
+});
diff --git a/docker-compose.yml b/docker-compose.yml
index 978e24c3a16d..0ce9f0c75610 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -9,4 +9,7 @@ services:
       - './tests:/app/tests'
       - './jest-stare:/app/jest-stare'
       - './dist:/app/dist'
-    entrypoint: "jest --config .jest.image.js --no-cache"
+      - '.jest.image.js:/app/.jest.image.js'
+      - './imageSnapshots:/app/imageSnapshots'
+      - './imageDiffSnapshots:/app/imageDiffSnapshots'
+    entrypoint: "jest --config .jest.image.js --no-cache -i"
diff --git a/package.json b/package.json
index 925936cec238..53bca5d1015a 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,8 @@
     "tsc": "tsc --noEmit",
     "site:test": "jest --config .jest.site.js --cache=false",
     "test-image": "npm run compile:less && docker-compose run tests",
-    "version": "node ./scripts/generate-version"
+    "version": "node ./scripts/generate-version",
+    "argos": "argos upload imageSnapshots"
   },
   "husky": {
     "hooks": {
@@ -176,6 +177,7 @@
     "antd-img-crop": "^3.1.1",
     "antd-pro-merge-less": "^3.0.9",
     "antd-theme-generator": "^1.2.3",
+    "argos-cli": "^0.3.0",
     "array-move": "^3.0.0",
     "babel-eslint": "^10.0.1",
     "babel-plugin-add-react-displayname": "^0.0.5",
@@ -222,7 +224,6 @@
     "intersection-observer": "^0.11.0",
     "jest": "^26.0.0",
     "jest-image-snapshot": "^4.0.0",
-    "jest-stare": "^2.0.1",
     "jquery": "^3.4.1",
     "jsdom": "^16.0.0",
     "jsonml.js": "^0.1.0",
diff --git a/tests/index.html b/tests/index.html
index c4f924ec86cb..89c7f593ad46 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -4,7 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Amazing Antd</title>
-    <link rel="stylesheet" href="antd.css" />
+    <style>
+      body {
+        border: 5px solid #1890ff;
+      }
+    </style>
           <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
   <body>
     <div id="root"></div>
diff --git a/tests/shared/imageTest.ts b/tests/shared/imageTest.ts
index 60bcb7ffc800..2eeb21ceb88d 100644
--- a/tests/shared/imageTest.ts
+++ b/tests/shared/imageTest.ts
@@ -2,8 +2,14 @@ import React from 'react';
 // Reference: https://github.com/ant-design/ant-design/pull/24003#discussion_r427267386
 // eslint-disable-next-line import/no-unresolved
 import puppeteer, { Browser, Page } from 'puppeteer';
-import { toMatchImageSnapshot } from 'jest-image-snapshot';
+import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
 import ReactDOMServer from 'react-dom/server';
+import glob from 'glob';
+
+const toMatchImageSnapshot = configureToMatchImageSnapshot({
+  customSnapshotsDir: `${process.cwd()}/imageSnapshots`,
+  customDiffDir: `${process.cwd()}/imageDiffSnapshots`,
+});
 
 expect.extend({ toMatchImageSnapshot });
 
@@ -45,3 +51,24 @@ export default function imageTest(component: React.ReactElement) {
     });
   });
 }
+
+type Options = {
+  skip?: boolean | string[];
+};
+
+// eslint-disable-next-line jest/no-export
+export function imageDemoTest(component: string, options: Options = {}) {
+  let testMethod = options.skip === true ? describe.skip : describe;
+  const files = glob.sync(`./components/${component}/demo/*.md`);
+
+  files.forEach(file => {
+    if (Array.isArray(options.skip) && options.skip.some(c => file.includes(c))) {
+      testMethod = test.skip;
+    }
+    testMethod(`Test ${file} image`, () => {
+      // eslint-disable-next-line global-require,import/no-dynamic-require
+      const demo = require(`../.${file}`).default;
+      imageTest(demo);
+    });
+  });
+}