diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000000..c2658d7d1b --- /dev/null +++ b/.dockerignore @@ -0,0 +1 @@ +node_modules/ diff --git a/.github/workflows/ui-ci.yml b/.github/workflows/ui-ci.yml deleted file mode 100644 index 6128c2bcc6..0000000000 --- a/.github/workflows/ui-ci.yml +++ /dev/null @@ -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() diff --git a/Dockerfile.ui-test b/Dockerfile.ui-test new file mode 100644 index 0000000000..3d74e67eee --- /dev/null +++ b/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 . . diff --git a/azure-pipelines.yml b/azure-pipelines.yml index c14de49ddb..ea14f65edd 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -12,50 +12,106 @@ pool: vmImage: 'ubuntu-latest' stages: -- stage: site - jobs: - - job: Build_Site - 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' - - 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))" - displayName: 'Comment on github' - - script: npm run site - displayName: 'Build sites' - - script: ls -al _site/ - displayName: 'List build' - - script: | - export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-ant-design.surge.sh - echo "Deploy to $DEPLOY_DOMAIN" - npx surge --project ./_site --domain $DEPLOY_DOMAIN - displayName: 'Deploy Site' - - script: | - export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-ant-design.surge.sh - node ./scripts/azure-github-comment.js "[]($DEPLOY_DOMAIN)" - displayName: 'Update comment on github' - - job: Build_Site_Failed - dependsOn: Build_Site - 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' - - script: | - node ./scripts/azure-github-comment.js "[](https://dev.azure.com/ant-design/ant-design/_build/results?buildId=$(Build.BuildId))" - displayName: 'Comment on github' \ No newline at end of file + - stage: site + jobs: + - job: Build_Site + 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' + - 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))" + displayName: 'Comment on github' + - script: npm run site + displayName: 'Build sites' + - script: ls -al _site/ + displayName: 'List build' + - script: | + export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-ant-design.surge.sh + echo "Deploy to $DEPLOY_DOMAIN" + npx surge --project ./_site --domain $DEPLOY_DOMAIN + displayName: 'Deploy Site' + - script: | + export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-ant-design.surge.sh + node ./scripts/azure-github-comment.js "[]($DEPLOY_DOMAIN)" + displayName: 'Update comment on github' + - job: Build_Site_Failed + dependsOn: Build_Site + 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' + - script: | + node ./scripts/azure-github-comment.js "[](https://dev.azure.com/ant-design/ant-design/_build/results?buildId=$(Build.BuildId))" + 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 "[](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 "[](https://ui-test-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-ant-design.surge.sh)" + displayName: 'Update comment on github' 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 new file mode 100644 index 0000000000..74dc898ee4 Binary files /dev/null and b/components/button/__tests__/__image_snapshots__/image-test-js-button-image-image-test-component-image-screenshot-should-correct-1-snap.png differ diff --git a/components/button/__tests__/image.test.js b/components/button/__tests__/image.test.js new file mode 100644 index 0000000000..a5a3285962 --- /dev/null +++ b/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( + <> + + + + + , + ); +}); 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 index 65341e5d00..db6056e214 100644 Binary files a/components/grid/__tests__/__image_snapshots__/image-test-js-grid-image-image-test-component-image-screenshot-should-correct-1-snap.png and b/components/grid/__tests__/__image_snapshots__/image-test-js-grid-image-image-test-component-image-screenshot-should-correct-1-snap.png differ diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000000..978e24c3a1 --- /dev/null +++ b/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" diff --git a/docs/react/contributing.en-US.md b/docs/react/contributing.en-US.md index 11ea638390..0c4050cbc2 100644 --- a/docs/react/contributing.en-US.md +++ b/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/): diff --git a/docs/react/contributing.zh-CN.md b/docs/react/contributing.zh-CN.md index 8c99122c0a..aed240d96d 100644 --- a/docs/react/contributing.zh-CN.md +++ b/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： diff --git a/package.json b/package.json index 5fb5f32a09..427190ab53 100644 --- a/package.json +++ b/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", diff --git a/scripts/azure-github-comment.js b/scripts/azure-github-comment.js index 7f42387529..c76e121b06 100644 --- a/scripts/azure-github-comment.js +++ b/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 = ''; const argv = process.argv; const comment = argv[argv.length - 1]; +const isUiTest = argv.includes('-ui'); + +const REPLACE_MARK = isUiTest + ? '' + : ''; const wrappedComment = ` ${REPLACE_MARK} diff --git a/tests/shared/imageTest.ts b/tests/shared/imageTest.ts index b9b3df77c0..60bcb7ffc8 100644 --- a/tests/shared/imageTest.ts +++ b/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` });