From 8d0bba4dea685b05bd757b36c72ae88da40d1bfc 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?= Date: Wed, 20 May 2020 19:47:49 +0800 Subject: [PATCH] =?UTF-8?q?test:=20=F0=9F=9A=80=20New=20Image=20Snapshots?= =?UTF-8?q?=20(#24003)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * test: New Image Snapshots * circleci apt-get some lib * fix command * set CircleCI NODE_ENV * new test:image * upgrade jest-image-snapshot * needs dist * use jest html report * use now deploy * fix deploy skip * set token * upgrade version * change if * improve imageTest * print node version * revert puppeteer version * fix now fail * test * fix now fail * add if * fix if * add judgement * fix action * rebase * fix test image script * lint ignore * fix lint fail --- .circleci/config.yml | 6 +-- .github/workflows/ui-ci.yml | 31 ++++++++++++++ .gitignore | 4 ++ .jest.image.js | 24 +++++++++++ .jest.js | 2 +- ...image-screenshot-should-correct-1-snap.png | Bin 0 -> 10490 bytes components/grid/__tests__/image.test.js | 37 +++++++++++++++++ package.json | 5 +++ tests/index.html | 12 ++++++ tests/shared/imageTest.ts | 38 ++++++++++++++++++ 10 files changed, 155 insertions(+), 4 deletions(-) create mode 100644 .github/workflows/ui-ci.yml create mode 100644 .jest.image.js create mode 100644 components/grid/__tests__/__image_snapshots__/image-test-js-grid-image-image-test-component-image-screenshot-should-correct-1-snap.png create mode 100644 components/grid/__tests__/image.test.js create mode 100644 tests/index.html create mode 100644 tests/shared/imageTest.ts diff --git a/.circleci/config.yml b/.circleci/config.yml index 9aa8c392ca..b024c82e3f 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -22,10 +22,10 @@ references: ignore: gh-pages - dist: requires: - - setup + - setup - compile: requires: - - setup + - setup - lint: requires: - setup @@ -166,7 +166,7 @@ workflows: <<: *workflow triggers: - schedule: - cron: "0 0 * * *" + cron: '0 0 * * *' filters: branches: only: diff --git a/.github/workflows/ui-ci.yml b/.github/workflows/ui-ci.yml new file mode 100644 index 0000000000..4d0ecb7cc9 --- /dev/null +++ b/.github/workflows/ui-ci.yml @@ -0,0 +1,31 @@ +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 ci + + - 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/.gitignore b/.gitignore index bb8d5b7e86..f59fe24f3b 100644 --- a/.gitignore +++ b/.gitignore @@ -58,3 +58,7 @@ site/theme/template/Resources/**/*.jsx site/theme/template/NotFound.jsx scripts/previewEditor/index.html components/version/version.tsx + +# Image snapshot diff +__diff_output__/ +/jest-stare diff --git a/.jest.image.js b/.jest.image.js new file mode 100644 index 0000000000..9d5b93df08 --- /dev/null +++ b/.jest.image.js @@ -0,0 +1,24 @@ +const { moduleNameMapper, transformIgnorePatterns } = require('./.jest'); + +// jest config for image snapshots +module.exports = { + setupFiles: ['./tests/setup.js'], + moduleFileExtensions: ['ts', 'tsx', 'js', 'md'], + moduleNameMapper, + transform: { + '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor', + '\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor', + '\\.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$', + testEnvironment: 'node', + transformIgnorePatterns, + snapshotSerializers: ['enzyme-to-json/serializer'], + globals: { + 'ts-jest': { + tsConfigFile: './tsconfig.test.json', + }, + }, + reporters: ['default', 'jest-stare'], +}; diff --git a/.jest.js b/.jest.js index afcd51ffab..6f712cdf65 100644 --- a/.jest.js +++ b/.jest.js @@ -26,7 +26,7 @@ module.exports = { '^react-dnd-test-backend$': 'react-dnd-test-backend/dist/cjs', '^react-dnd-test-utils$': 'react-dnd-test-utils/dist/cjs', }, - testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node'], + testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node', 'image.test.js'], transform: { '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor', '\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor', 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 new file mode 100644 index 0000000000000000000000000000000000000000..65341e5d009aff62d90a06f3fa534f88d2db9751 GIT binary patch literal 10490 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 literal 0 HcmV?d00001 diff --git a/components/grid/__tests__/image.test.js b/components/grid/__tests__/image.test.js new file mode 100644 index 0000000000..4c308e158c --- /dev/null +++ b/components/grid/__tests__/image.test.js @@ -0,0 +1,37 @@ +import React from 'react'; +import { Col, Row } from '..'; +import imageTest from '../../../tests/shared/imageTest'; + +describe('Grid image', () => { + imageTest( + <> + + col + + + col + col + col + col + + + col + + + col-12 + col-12 + + + col-8 + col-8 + col-8 + + + col-6 + col-6 + col-6 + col-6 + + , + ); +}); diff --git a/package.json b/package.json index abba3a2244..c8b50cb2eb 100644 --- a/package.json +++ b/package.json @@ -89,6 +89,7 @@ "test-node": "jest --config .jest.node.js --no-cache", "tsc": "tsc", "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", "version": "node ./scripts/generate-version" }, "husky": { @@ -159,8 +160,10 @@ "@types/enzyme": "^3.10.5", "@types/gtag.js": "^0.0.3", "@types/jest": "^25.1.0", + "@types/jest-image-snapshot": "^2.12.0", "@types/lodash": "^4.14.139", "@types/prop-types": "^15.7.1", + "@types/puppeteer": "^2.0.1", "@types/raf": "^3.4.0", "@types/react": "^16.9.21", "@types/react-color": "^3.0.1", @@ -213,6 +216,8 @@ "inquirer": "^7.1.0", "intersection-observer": "^0.10.0", "jest": "^26.0.0", + "jest-image-snapshot": "^3.1.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 new file mode 100644 index 0000000000..c4f924ec86 --- /dev/null +++ b/tests/index.html @@ -0,0 +1,12 @@ + + + + + + Amazing Antd + + + +
+ + diff --git a/tests/shared/imageTest.ts b/tests/shared/imageTest.ts new file mode 100644 index 0000000000..b9b3df77c0 --- /dev/null +++ b/tests/shared/imageTest.ts @@ -0,0 +1,38 @@ +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 ReactDOMServer from 'react-dom/server'; + +expect.extend({ toMatchImageSnapshot }); + +// eslint-disable-next-line jest/no-export +export default function imageTest(component: React.ReactElement) { + describe(`Image test`, () => { + let browser: Browser; + let page: Page; + + beforeAll(async () => { + browser = await puppeteer.launch(); + page = await browser.newPage(); + await page.goto(`file://${process.cwd()}/tests/index.html`); + await page.addStyleTag({ path: `${process.cwd()}/dist/antd.css` }); + }); + + afterAll(() => { + browser.close(); + }); + + it('component image screenshot should correct', async () => { + const html = ReactDOMServer.renderToString(component); + await page.evaluate(innerHTML => { + document.querySelector('#root')!.innerHTML = innerHTML; + }, html); + + const image = await page.screenshot(); + + expect(image).toMatchImageSnapshot(); + }); + }); +}