test: use azure deploy ui test report site (#24327)

* test: use azure deploy ui test report site

* parallel stage

* continueOnError

* fix continueOnError position

* use github comment

* failed

* fix artifact name

* add download path

* ls files

* fix path download

* Install modules

* update snapshot image

* test: docker compose run test image

* use docker

* use docker update snapshots

* remove unused dep

* improve github comment and add doc

* fix azure script

* test faild condition

* improve pass comment

.dockerignore

@@ -0,0 +1 @@
+node_modules/

.github/workflows/ui-ci.yml

@@ -1,31 +0,0 @@
-name: UI-TEST
-
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  ui:
-    runs-on: ubuntu-latest
-    if: github.event.issue.pull_request != '' && contains(github.event.comment.body, '/ui')
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: install
-        run: npm install
-
-      - name: dist
-        run: npm run dist
-
-      - name: test
-        run: npm run test:image
-
-      - name: VERCEL Now Deployment
-        uses: amondnet/now-deployment@v2.0.3
-        with:
-          zeit-token: ${{ secrets.VERCEL_TOKEN }}
-          now-project-id: ${{ secrets.VERCEL_PROJECT_ID}}
-          now-org-id: ${{ secrets.VERCEL_ORG_ID}}
-          working-directory: ./jest-stare
-        if: failure()

Dockerfile.ui-test

@@ -0,0 +1,7 @@
+FROM buildkite/puppeteer:latest
+RUN mkdir /app
+WORKDIR /app
+COPY package.json ./
+RUN npm install
+ENV  PATH="${PATH}:/app/node_modules/.bin"
+COPY . .

azure-pipelines.yml

@@ -12,50 +12,106 @@ pool:
   vmImage: 'ubuntu-latest'
 
 stages:
-- stage: site
+  - stage: site
-  jobs:
+    jobs:
-    - job: Build_Site
+      - job: Build_Site
-      steps:
+        steps:
-        - checkout: self
+          - checkout: self
-          displayName: 'Checkout'
+            displayName: 'Checkout'
-          clean: true
+            clean: true
-          fetchDepth: 1
+            fetchDepth: 1
-        - task: NodeTool@0
+          - task: NodeTool@0
-          displayName: 'Install Node.js'
+            displayName: 'Install Node.js'
-          inputs:
+            inputs:
-            versionSpec: '12.13.1'
+              versionSpec: '12.13.1'
-        - script: npm install
+          - script: npm install
-          displayName: 'Install modules'
+            displayName: 'Install modules'
-        - script: |
+          - script: |
-            node ./scripts/azure-github-comment.js "[![Prepare preview](https://user-images.githubusercontent.com/5378891/72351368-2c979e00-371b-11ea-9652-eb4e825d745e.gif)](https://dev.azure.com/ant-design/ant-design/_build/results?buildId=$(Build.BuildId))"
+              node ./scripts/azure-github-comment.js "[![Prepare preview](https://user-images.githubusercontent.com/5378891/72351368-2c979e00-371b-11ea-9652-eb4e825d745e.gif)](https://dev.azure.com/ant-design/ant-design/_build/results?buildId=$(Build.BuildId))"
-          displayName: 'Comment on github'
+            displayName: 'Comment on github'
-        - script: npm run site
+          - script: npm run site
-          displayName: 'Build sites'
+            displayName: 'Build sites'
-        - script: ls -al _site/
+          - script: ls -al _site/
-          displayName: 'List build'
+            displayName: 'List build'
-        - script: |
+          - script: |
-            export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-ant-design.surge.sh
+              export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-ant-design.surge.sh
-            echo "Deploy to $DEPLOY_DOMAIN"
+              echo "Deploy to $DEPLOY_DOMAIN"
-            npx surge --project ./_site --domain $DEPLOY_DOMAIN
+              npx surge --project ./_site --domain $DEPLOY_DOMAIN
-          displayName: 'Deploy Site'
+            displayName: 'Deploy Site'
-        - script: |
+          - script: |
-            export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-ant-design.surge.sh
+              export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-ant-design.surge.sh
-            node ./scripts/azure-github-comment.js "[<img width="306" src="https://user-images.githubusercontent.com/5378891/72400743-23dbb200-3785-11ea-9d13-1a2d92743846.png">]($DEPLOY_DOMAIN)"
+              node ./scripts/azure-github-comment.js "[<img width="306" src="https://user-images.githubusercontent.com/5378891/72400743-23dbb200-3785-11ea-9d13-1a2d92743846.png">]($DEPLOY_DOMAIN)"
-          displayName: 'Update comment on github'
+            displayName: 'Update comment on github'
-    - job: Build_Site_Failed
+      - job: Build_Site_Failed
-      dependsOn: Build_Site
+        dependsOn: Build_Site
-      condition: failed()
+        condition: failed()
-      steps:
+        steps:
-        - checkout: self
+          - checkout: self
-          displayName: 'Checkout'
+            displayName: 'Checkout'
-          clean: true
+            clean: true
-          fetchDepth: 1
+            fetchDepth: 1
-        - task: NodeTool@0
+          - task: NodeTool@0
-          displayName: 'Install Node.js'
+            displayName: 'Install Node.js'
-          inputs:
+            inputs:
-            versionSpec: '12.13.1'
+              versionSpec: '12.13.1'
-        - script: npm install
+          - script: npm install
-          displayName: 'Install modules'
+            displayName: 'Install modules'
-        - script: |
+          - script: |
-            node ./scripts/azure-github-comment.js "[<img width="534" src="https://user-images.githubusercontent.com/5378891/75333447-1e63a280-58c1-11ea-975d-235367fd1522.png">](https://dev.azure.com/ant-design/ant-design/_build/results?buildId=$(Build.BuildId))"
+              node ./scripts/azure-github-comment.js "[<img width="534" src="https://user-images.githubusercontent.com/5378891/75333447-1e63a280-58c1-11ea-975d-235367fd1522.png">](https://dev.azure.com/ant-design/ant-design/_build/results?buildId=$(Build.BuildId))"
-          displayName: 'Comment on github'
+            displayName: 'Comment on github'
+  - stage: ui
+    dependsOn: []
+    jobs:
+      - job: UI_Test
+        steps:
+          - checkout: self
+            displayName: 'Checkout'
+            clean: true
+            fetchDepth: 1
+          - task: NodeTool@0
+            displayName: 'Install Node.js'
+            inputs:
+              versionSpec: '12.16.3'
+          - 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: '12.13.1'
+          - 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/button/__tests__/image.test.js

@@ -0,0 +1,14 @@
+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>
+    </>,
+  );
+});

docker-compose.yml

@@ -0,0 +1,12 @@
+version: '3'
+services:
+  tests:
+    build:
+      context: .
+      dockerfile: Dockerfile.ui-test
+    volumes:
+      - './components:/app/components'
+      - './tests:/app/tests'
+      - './jest-stare:/app/jest-stare'
+      - './dist:/app/dist'
+    entrypoint: "jest --config .jest.image.js --no-cache"

docs/react/contributing.en-US.md

@@ -53,6 +53,7 @@ The core team is monitoring for pull requests. We will review your pull request
 1. If you've fixed a bug or added code that should be tested, add tests!
 1. Ensure the test suite passes (npm run test). Tip: `npm test -- --watch TestName` is helpful in development.
 1. Run `npm test -- -u` to update the [jest snapshots](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest) and commit these changes as well (if there are any updates).
+1. Ensure the UI change passes `npm run test-image`，Run `npm run test-image -- -u` to update UI snapshots and commit these changes as well (if there are any updates), **UI test base on [Docker](https://docs.docker.com/get-docker/), need download the corresponding installation according to the platform**
 1. Make sure your code lints (npm run lint). Tip: Lint runs automatically when you `git commit` (Use [Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)).
 
 Sending a Pull Request to [react-component](https://github.com/react-component/):

docs/react/contributing.zh-CN.md

@@ -53,7 +53,8 @@ Ant Design 团队会关注所有的 pull request，我们会 review 以及合并
 3. 如果你修复了一个 bug 或者新增了一个功能，请确保写了相应的测试，这很重要。
 4. 确认所有的测试都是通过的 `npm run test`。 小贴士：开发过程中可以用 `npm test -- --watch TestName` 来运行指定的测试。
 5. 运行 `npm test -- -u` 来更新 [jest snapshot](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest) 并且把这些更新也提交上来（如果有的话）。
-6. 确保你的代码通过了 lint 检查 `npm run lint`. 小贴士: Lint 会在你 `git commit` 的时候自动运行（通过[Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)）。
+6. 确认所有的 UI 改动通过 `npm run test-image`，可以运行 `npm run test-image -- -u` 更新 UI 快照并且把这些更新也提交上来（如果有的话），**UI 测试基于 [Docker](https://docs.docker.com/get-docker/)，根据平台下载对应的安装程序。**
+7. 确保你的代码通过了 lint 检查 `npm run lint`. 小贴士: Lint 会在你 `git commit` 的时候自动运行（通过[Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)）。
 
 给 [react-component](https://github.com/react-component/) 发送 pull request：
 

package.json

@@ -57,6 +57,7 @@
     "presite": "npm run version",
     "color-less": "node ./scripts/generate-color-less",
     "compile": "antd-tools run compile",
+    "compile:less": "antd-tools run compile:less",
     "changelog": "node ./scripts/print-changelog",
     "predeploy": "antd-tools run clean && npm run site && cp CNAME _site && cp -r .circleci/ .github/ _site && npm run site:test",
     "deploy": "bisheng gh-pages --push-only --dotfiles",
@@ -88,7 +89,7 @@
     "test-node": "jest --config .jest.node.js --no-cache",
     "tsc": "tsc --noEmit",
     "site:test": "jest --config .jest.site.js --cache=false",
-    "test:image": "npm install puppeteer@2.1.1 --no-save && jest --config .jest.image.js --no-cache",
+    "test-image": "npm run compile:less && docker-compose run tests",
     "version": "node ./scripts/generate-version"
   },
   "husky": {
@@ -152,7 +153,7 @@
     "@ant-design/bisheng-plugin": "^2.3.0",
     "@ant-design/colors": "^4.0.0",
     "@ant-design/hitu": "^0.0.0-alpha.13",
-    "@ant-design/tools": "^8.2.0",
+    "@ant-design/tools": "^9.0.0",
     "@bundle-analyzer/webpack-plugin": "^0.5.1",
     "@qixian.cs/github-contributors-list": "^1.0.3",
     "@stackblitz/sdk": "^1.3.0",

scripts/azure-github-comment.js

@@ -3,11 +3,15 @@ const fetch = require('node-fetch');
 const REPO = process.env.ACCESS_REPO;
 const TOKEN = process.env.ACCESS_TOKEN;
 const PR = process.env.SYSTEM_PULLREQUEST_PULLREQUESTNUMBER;
-const REPLACE_MARK = '<!-- AZURE_UPDATE_COMMENT -->';
 
 const argv = process.argv;
 
 const comment = argv[argv.length - 1];
+const isUiTest = argv.includes('-ui');
+
+const REPLACE_MARK = isUiTest
+  ? '<!-- AZURE_UPDATE_UI_COMMENT -->'
+  : '<!-- AZURE_UPDATE_COMMENT -->';
 
 const wrappedComment = `
   ${REPLACE_MARK}

tests/shared/imageTest.ts

@@ -14,7 +14,16 @@ export default function imageTest(component: React.ReactElement) {
     let page: Page;
 
     beforeAll(async () => {
-      browser = await puppeteer.launch();
+      browser = await puppeteer.launch({
+        args: [
+          // Required for Docker version of Puppeteer
+          '--no-sandbox',
+          '--disable-setuid-sandbox',
+          // This will write shared memory files into /tmp instead of /dev/shm,
+          // because Docker’s default for /dev/shm is 64MB
+          '--disable-dev-shm-usage',
+        ],
+      });
       page = await browser.newPage();
       await page.goto(`file://${process.cwd()}/tests/index.html`);
       await page.addStyleTag({ path: `${process.cwd()}/dist/antd.css` });