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

@@ -61,4 +61,7 @@ components/version/version.tsx
 
 # Image snapshot diff
 __diff_output__/
+__image_snapshots__/
 /jest-stare
+/imageSnapshots
+/imageDiffSnapshots

.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'],
 };

.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'],

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'

components/affix/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Affix image', () => {
+  imageDemoTest('affix');
+});

components/alert/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Alert image', () => {
+  imageDemoTest('alert');
+});

components/anchor/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Anchor image', () => {
+  imageDemoTest('anchor');
+});

components/auto-complete/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('AutoComplete image', () => {
+  imageDemoTest('auto-complete');
+});

components/avatar/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Avatar image', () => {
+  imageDemoTest('avatar');
+});

components/back-top/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('BackTop image', () => {
+  imageDemoTest('back-top');
+});

components/badge/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Badge image', () => {
+  imageDemoTest('badge');
+});

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'] });
+});

components/button/__tests__/image.test.js

@@ -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>
-    </>,
-  );
-});

components/button/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Button image', () => {
+  imageDemoTest('button', { skip: ['loading.md'] });
+});

components/calendar/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Calendar image', () => {
+  imageDemoTest('calendar');
+});

components/card/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Card image', () => {
+  imageDemoTest('card');
+});

components/carousel/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Carousel image', () => {
+  imageDemoTest('carousel');
+});

components/cascader/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Cascader image', () => {
+  imageDemoTest('cascader');
+});

components/checkbox/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Checkbox image', () => {
+  imageDemoTest('checkbox');
+});

components/collapse/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Collapse image', () => {
+  imageDemoTest('collapse');
+});

components/comment/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Comment image', () => {
+  imageDemoTest('comment');
+});

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'] });
+});

components/date-picker/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('DatePicker image', () => {
+  imageDemoTest('date-picker');
+});

components/descriptions/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Descriptions image', () => {
+  imageDemoTest('descriptions');
+});

components/divider/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Divider image', () => {
+  imageDemoTest('divider');
+});

components/drawer/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Drawer image', () => {
+  imageDemoTest('drawer');
+});

components/dropdown/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Dropdown image', () => {
+  imageDemoTest('dropdown');
+});

components/empty/__tests__/image.test.ts

@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Empty image', () => {
+  imageDemoTest('empty');
+});

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'] });
+});