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
+          - script: npm run argos -- --token $ARGOS_TOKEN --branch $(Build.SourceBranch) --commit $(Build.SourceVersion)
-            inputs:
+            displayName: 'Upload to argos-ci'
-              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'

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

components/grid/__tests__/image.test.js

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

components/grid/__tests__/image.test.ts

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

components/icon/__tests__/image.test.ts

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

components/input-number/__tests__/image.test.ts

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

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

components/layout/__tests__/image.test.ts

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

components/list/__tests__/image.test.ts

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

components/mentions/__tests__/image.test.ts

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

components/menu/__tests__/image.test.ts

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

components/message/__tests__/image.test.ts

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

components/modal/__tests__/image.test.ts

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

components/notification/__tests__/image.test.ts

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

components/page-header/__tests__/image.test.ts

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

components/pagination/__tests__/image.test.ts

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

components/popconfirm/__tests__/image.test.ts

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

components/popover/__tests__/image.test.ts

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

components/progress/__tests__/image.test.ts

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

components/radio/__tests__/image.test.ts

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

components/rate/__tests__/image.test.ts

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

components/result/__tests__/image.test.ts

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

components/select/__tests__/image.test.ts

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

components/skeleton/__tests__/image.test.ts

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

components/slider/__tests__/image.test.ts

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

components/space/__tests__/image.test.ts

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

components/statistic/__tests__/image.test.ts

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

components/steps/__tests__/image.test.ts

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

components/switch/__tests__/image.test.ts

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

components/table/__tests__/image.test.ts

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

components/tabs/__tests__/image.test.ts

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

components/tag/__tests__/image.test.ts

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

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

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

components/timeline/__tests__/image.test.ts

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

components/tooltip/__tests__/image.test.ts

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

components/transfer/__tests__/image.test.ts

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

components/tree-select/__tests__/image.test.ts

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

components/tree/__tests__/image.test.ts

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

components/typography/__tests__/image.test.ts

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

components/upload/__tests__/image.test.ts

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

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"

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",

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>
   </head>
   <body>
     <div id="root"></div>

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