diff --git a/.gitignore b/.gitignore index f59fe24f3b..1f29c5a124 100644 --- a/.gitignore +++ b/.gitignore @@ -61,4 +61,7 @@ components/version/version.tsx # Image snapshot diff __diff_output__/ +__image_snapshots__/ /jest-stare +/imageSnapshots +/imageDiffSnapshots diff --git a/.jest.image.js b/.jest.image.js index 9d5b93df08..b04f37496e 100644 --- a/.jest.image.js +++ b/.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'], }; diff --git a/.jest.js b/.jest.js index 42ccb8e678..7199b1262b 100644 --- a/.jest.js +++ b/.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'], diff --git a/azure-pipelines.yml b/azure-pipelines.yml index c15ad8efe5..9663eb376e 100644 --- a/azure-pipelines.yml +++ b/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 "[](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 "[](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' diff --git a/components/affix/__tests__/image.test.ts b/components/affix/__tests__/image.test.ts new file mode 100644 index 0000000000..4ff20f8783 --- /dev/null +++ b/components/affix/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Affix image', () => { + imageDemoTest('affix'); +}); diff --git a/components/alert/__tests__/image.test.ts b/components/alert/__tests__/image.test.ts new file mode 100644 index 0000000000..26d429d4f5 --- /dev/null +++ b/components/alert/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Alert image', () => { + imageDemoTest('alert'); +}); diff --git a/components/anchor/__tests__/image.test.ts b/components/anchor/__tests__/image.test.ts new file mode 100644 index 0000000000..b071a85f4f --- /dev/null +++ b/components/anchor/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Anchor image', () => { + imageDemoTest('anchor'); +}); diff --git a/components/auto-complete/__tests__/image.test.ts b/components/auto-complete/__tests__/image.test.ts new file mode 100644 index 0000000000..890e81f267 --- /dev/null +++ b/components/auto-complete/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('AutoComplete image', () => { + imageDemoTest('auto-complete'); +}); diff --git a/components/avatar/__tests__/image.test.ts b/components/avatar/__tests__/image.test.ts new file mode 100644 index 0000000000..70718b3108 --- /dev/null +++ b/components/avatar/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Avatar image', () => { + imageDemoTest('avatar'); +}); diff --git a/components/back-top/__tests__/image.test.ts b/components/back-top/__tests__/image.test.ts new file mode 100644 index 0000000000..2651ed880e --- /dev/null +++ b/components/back-top/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('BackTop image', () => { + imageDemoTest('back-top'); +}); diff --git a/components/badge/__tests__/image.test.ts b/components/badge/__tests__/image.test.ts new file mode 100644 index 0000000000..f34cf6c438 --- /dev/null +++ b/components/badge/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Badge image', () => { + imageDemoTest('badge'); +}); diff --git a/components/breadcrumb/__tests__/image.test.ts b/components/breadcrumb/__tests__/image.test.ts new file mode 100644 index 0000000000..35450d3b3d --- /dev/null +++ b/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'] }); +}); 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 deleted file mode 100644 index 9254f31b0a..0000000000 Binary files a/components/button/__tests__/__image_snapshots__/image-test-js-button-image-image-test-component-image-screenshot-should-correct-1-snap.png and /dev/null differ diff --git a/components/button/__tests__/image.test.js b/components/button/__tests__/image.test.js deleted file mode 100644 index a5a3285962..0000000000 --- a/components/button/__tests__/image.test.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import Button from '..'; -import imageTest from '../../../tests/shared/imageTest'; - -describe('Button image', () => { - imageTest( - <> - - - - - , - ); -}); diff --git a/components/button/__tests__/image.test.ts b/components/button/__tests__/image.test.ts new file mode 100644 index 0000000000..69d7f68c78 --- /dev/null +++ b/components/button/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Button image', () => { + imageDemoTest('button', { skip: ['loading.md'] }); +}); diff --git a/components/calendar/__tests__/image.test.ts b/components/calendar/__tests__/image.test.ts new file mode 100644 index 0000000000..bc0534991f --- /dev/null +++ b/components/calendar/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Calendar image', () => { + imageDemoTest('calendar'); +}); diff --git a/components/card/__tests__/image.test.ts b/components/card/__tests__/image.test.ts new file mode 100644 index 0000000000..5c86506cf8 --- /dev/null +++ b/components/card/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Card image', () => { + imageDemoTest('card'); +}); diff --git a/components/carousel/__tests__/image.test.ts b/components/carousel/__tests__/image.test.ts new file mode 100644 index 0000000000..30d204a801 --- /dev/null +++ b/components/carousel/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Carousel image', () => { + imageDemoTest('carousel'); +}); diff --git a/components/cascader/__tests__/image.test.ts b/components/cascader/__tests__/image.test.ts new file mode 100644 index 0000000000..914c240bb1 --- /dev/null +++ b/components/cascader/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Cascader image', () => { + imageDemoTest('cascader'); +}); diff --git a/components/checkbox/__tests__/image.test.ts b/components/checkbox/__tests__/image.test.ts new file mode 100644 index 0000000000..3b650fa093 --- /dev/null +++ b/components/checkbox/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Checkbox image', () => { + imageDemoTest('checkbox'); +}); diff --git a/components/collapse/__tests__/image.test.ts b/components/collapse/__tests__/image.test.ts new file mode 100644 index 0000000000..7f93282a8c --- /dev/null +++ b/components/collapse/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Collapse image', () => { + imageDemoTest('collapse'); +}); diff --git a/components/comment/__tests__/image.test.ts b/components/comment/__tests__/image.test.ts new file mode 100644 index 0000000000..0ab96e709f --- /dev/null +++ b/components/comment/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Comment image', () => { + imageDemoTest('comment'); +}); diff --git a/components/config-provider/__tests__/image.test.ts b/components/config-provider/__tests__/image.test.ts new file mode 100644 index 0000000000..4983a43970 --- /dev/null +++ b/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'] }); +}); diff --git a/components/date-picker/__tests__/image.test.ts b/components/date-picker/__tests__/image.test.ts new file mode 100644 index 0000000000..4e5e4fd254 --- /dev/null +++ b/components/date-picker/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('DatePicker image', () => { + imageDemoTest('date-picker'); +}); diff --git a/components/descriptions/__tests__/image.test.ts b/components/descriptions/__tests__/image.test.ts new file mode 100644 index 0000000000..2057666ade --- /dev/null +++ b/components/descriptions/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Descriptions image', () => { + imageDemoTest('descriptions'); +}); diff --git a/components/divider/__tests__/image.test.ts b/components/divider/__tests__/image.test.ts new file mode 100644 index 0000000000..d72e2b5211 --- /dev/null +++ b/components/divider/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Divider image', () => { + imageDemoTest('divider'); +}); diff --git a/components/drawer/__tests__/image.test.ts b/components/drawer/__tests__/image.test.ts new file mode 100644 index 0000000000..4550635f96 --- /dev/null +++ b/components/drawer/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Drawer image', () => { + imageDemoTest('drawer'); +}); diff --git a/components/dropdown/__tests__/image.test.ts b/components/dropdown/__tests__/image.test.ts new file mode 100644 index 0000000000..19c1b959f8 --- /dev/null +++ b/components/dropdown/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Dropdown image', () => { + imageDemoTest('dropdown'); +}); diff --git a/components/empty/__tests__/image.test.ts b/components/empty/__tests__/image.test.ts new file mode 100644 index 0000000000..5533c301d1 --- /dev/null +++ b/components/empty/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Empty image', () => { + imageDemoTest('empty'); +}); diff --git a/components/form/__tests__/image.test.ts b/components/form/__tests__/image.test.ts new file mode 100644 index 0000000000..6df9ac70d4 --- /dev/null +++ b/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'] }); +}); 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 deleted file mode 100644 index fbb723ee81..0000000000 Binary files a/components/grid/__tests__/__image_snapshots__/image-test-js-grid-image-image-test-component-image-screenshot-should-correct-1-snap.png and /dev/null differ diff --git a/components/grid/__tests__/image.test.js b/components/grid/__tests__/image.test.js deleted file mode 100644 index 4c308e158c..0000000000 --- a/components/grid/__tests__/image.test.js +++ /dev/null @@ -1,37 +0,0 @@ -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/components/grid/__tests__/image.test.ts b/components/grid/__tests__/image.test.ts new file mode 100644 index 0000000000..231401ca9f --- /dev/null +++ b/components/grid/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Grid image', () => { + imageDemoTest('grid'); +}); diff --git a/components/icon/__tests__/image.test.ts b/components/icon/__tests__/image.test.ts new file mode 100644 index 0000000000..775b6adc2c --- /dev/null +++ b/components/icon/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Icon image', () => { + imageDemoTest('icon', { skip: ['basic.md'] }); +}); diff --git a/components/input-number/__tests__/image.test.ts b/components/input-number/__tests__/image.test.ts new file mode 100644 index 0000000000..8e7fa672f1 --- /dev/null +++ b/components/input-number/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('InputNumber image', () => { + imageDemoTest('input-number'); +}); diff --git a/components/input/__tests__/image.test.ts b/components/input/__tests__/image.test.ts new file mode 100644 index 0000000000..9db299c0f4 --- /dev/null +++ b/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'] }); +}); diff --git a/components/layout/__tests__/image.test.ts b/components/layout/__tests__/image.test.ts new file mode 100644 index 0000000000..15deaf9ed1 --- /dev/null +++ b/components/layout/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Layout image', () => { + imageDemoTest('layout', { skip: ['countdown.md '] }); +}); diff --git a/components/list/__tests__/image.test.ts b/components/list/__tests__/image.test.ts new file mode 100644 index 0000000000..3fbdae2afe --- /dev/null +++ b/components/list/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('List image', () => { + imageDemoTest('list'); +}); diff --git a/components/mentions/__tests__/image.test.ts b/components/mentions/__tests__/image.test.ts new file mode 100644 index 0000000000..984ebf91de --- /dev/null +++ b/components/mentions/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Mentions image', () => { + imageDemoTest('mentions'); +}); diff --git a/components/menu/__tests__/image.test.ts b/components/menu/__tests__/image.test.ts new file mode 100644 index 0000000000..b857207831 --- /dev/null +++ b/components/menu/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Menu image', () => { + imageDemoTest('menu'); +}); diff --git a/components/message/__tests__/image.test.ts b/components/message/__tests__/image.test.ts new file mode 100644 index 0000000000..eb57916a01 --- /dev/null +++ b/components/message/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Message image', () => { + imageDemoTest('message'); +}); diff --git a/components/modal/__tests__/image.test.ts b/components/modal/__tests__/image.test.ts new file mode 100644 index 0000000000..c2efcaff43 --- /dev/null +++ b/components/modal/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Modal image', () => { + imageDemoTest('modal'); +}); diff --git a/components/notification/__tests__/image.test.ts b/components/notification/__tests__/image.test.ts new file mode 100644 index 0000000000..d5199da210 --- /dev/null +++ b/components/notification/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Notification image', () => { + imageDemoTest('notification'); +}); diff --git a/components/page-header/__tests__/image.test.ts b/components/page-header/__tests__/image.test.ts new file mode 100644 index 0000000000..3571e54408 --- /dev/null +++ b/components/page-header/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('PageHeader image', () => { + imageDemoTest('page-header'); +}); diff --git a/components/pagination/__tests__/image.test.ts b/components/pagination/__tests__/image.test.ts new file mode 100644 index 0000000000..a9f56d1d1b --- /dev/null +++ b/components/pagination/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Pagination image', () => { + imageDemoTest('pagination'); +}); diff --git a/components/popconfirm/__tests__/image.test.ts b/components/popconfirm/__tests__/image.test.ts new file mode 100644 index 0000000000..73d392ad28 --- /dev/null +++ b/components/popconfirm/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Popconfirm image', () => { + imageDemoTest('popconfirm'); +}); diff --git a/components/popover/__tests__/image.test.ts b/components/popover/__tests__/image.test.ts new file mode 100644 index 0000000000..cf5ab59c61 --- /dev/null +++ b/components/popover/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Popover image', () => { + imageDemoTest('popover'); +}); diff --git a/components/progress/__tests__/image.test.ts b/components/progress/__tests__/image.test.ts new file mode 100644 index 0000000000..ba763d18ec --- /dev/null +++ b/components/progress/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Progress image', () => { + imageDemoTest('progress'); +}); diff --git a/components/radio/__tests__/image.test.ts b/components/radio/__tests__/image.test.ts new file mode 100644 index 0000000000..273c34aaa9 --- /dev/null +++ b/components/radio/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Radio image', () => { + imageDemoTest('radio'); +}); diff --git a/components/rate/__tests__/image.test.ts b/components/rate/__tests__/image.test.ts new file mode 100644 index 0000000000..b6facd64a3 --- /dev/null +++ b/components/rate/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Rate image', () => { + imageDemoTest('rate'); +}); diff --git a/components/result/__tests__/image.test.ts b/components/result/__tests__/image.test.ts new file mode 100644 index 0000000000..1a65e3d7dd --- /dev/null +++ b/components/result/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Result image', () => { + imageDemoTest('result'); +}); diff --git a/components/select/__tests__/image.test.ts b/components/select/__tests__/image.test.ts new file mode 100644 index 0000000000..09111e3302 --- /dev/null +++ b/components/select/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Select image', () => { + imageDemoTest('select', { skip: ['basic.md'] }); +}); diff --git a/components/skeleton/__tests__/image.test.ts b/components/skeleton/__tests__/image.test.ts new file mode 100644 index 0000000000..9b0f874f03 --- /dev/null +++ b/components/skeleton/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Skeleton image', () => { + imageDemoTest('skeleton'); +}); diff --git a/components/slider/__tests__/image.test.ts b/components/slider/__tests__/image.test.ts new file mode 100644 index 0000000000..192491ad01 --- /dev/null +++ b/components/slider/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Slider image', () => { + imageDemoTest('slider'); +}); diff --git a/components/space/__tests__/image.test.ts b/components/space/__tests__/image.test.ts new file mode 100644 index 0000000000..4961777607 --- /dev/null +++ b/components/space/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Space image', () => { + imageDemoTest('space'); +}); diff --git a/components/statistic/__tests__/image.test.ts b/components/statistic/__tests__/image.test.ts new file mode 100644 index 0000000000..ebb4c48808 --- /dev/null +++ b/components/statistic/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Statistic image', () => { + imageDemoTest('statistic', { skip: ['countdown.md'] }); +}); diff --git a/components/steps/__tests__/image.test.ts b/components/steps/__tests__/image.test.ts new file mode 100644 index 0000000000..e1a6249b88 --- /dev/null +++ b/components/steps/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Steps image', () => { + imageDemoTest('steps', { skip: ['icon.md'] }); +}); diff --git a/components/switch/__tests__/image.test.ts b/components/switch/__tests__/image.test.ts new file mode 100644 index 0000000000..56f6f6c880 --- /dev/null +++ b/components/switch/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Switch image', () => { + imageDemoTest('switch', { skip: ['loading.md'] }); +}); diff --git a/components/table/__tests__/image.test.ts b/components/table/__tests__/image.test.ts new file mode 100644 index 0000000000..b9f0dc5d57 --- /dev/null +++ b/components/table/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Table image', () => { + imageDemoTest('table'); +}); diff --git a/components/tabs/__tests__/image.test.ts b/components/tabs/__tests__/image.test.ts new file mode 100644 index 0000000000..6f0dd492c5 --- /dev/null +++ b/components/tabs/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Tabs image', () => { + imageDemoTest('tabs'); +}); diff --git a/components/tag/__tests__/image.test.ts b/components/tag/__tests__/image.test.ts new file mode 100644 index 0000000000..d042353c1f --- /dev/null +++ b/components/tag/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Tag image', () => { + imageDemoTest('tag', { skip: ['status.md'] }); +}); diff --git a/components/time-picker/__tests__/image.test.ts b/components/time-picker/__tests__/image.test.ts new file mode 100644 index 0000000000..13ffd17d63 --- /dev/null +++ b/components/time-picker/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('TimePicker image', () => { + imageDemoTest('time-picker'); +}); diff --git a/components/timeline/__tests__/image.test.ts b/components/timeline/__tests__/image.test.ts new file mode 100644 index 0000000000..bb41590e0b --- /dev/null +++ b/components/timeline/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Timeline image', () => { + imageDemoTest('timeline', { skip: ['pending.md'] }); +}); diff --git a/components/tooltip/__tests__/image.test.ts b/components/tooltip/__tests__/image.test.ts new file mode 100644 index 0000000000..b3f04c9c40 --- /dev/null +++ b/components/tooltip/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Tooltip image', () => { + imageDemoTest('tooltip'); +}); diff --git a/components/transfer/__tests__/image.test.ts b/components/transfer/__tests__/image.test.ts new file mode 100644 index 0000000000..f1977b1990 --- /dev/null +++ b/components/transfer/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Transfer image', () => { + imageDemoTest('transfer'); +}); diff --git a/components/tree-select/__tests__/image.test.ts b/components/tree-select/__tests__/image.test.ts new file mode 100644 index 0000000000..28056614dd --- /dev/null +++ b/components/tree-select/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('TreeSelect image', () => { + imageDemoTest('tree-select'); +}); diff --git a/components/tree/__tests__/image.test.ts b/components/tree/__tests__/image.test.ts new file mode 100644 index 0000000000..f92d2ca5ec --- /dev/null +++ b/components/tree/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Tree image', () => { + imageDemoTest('tree'); +}); diff --git a/components/typography/__tests__/image.test.ts b/components/typography/__tests__/image.test.ts new file mode 100644 index 0000000000..cab7482389 --- /dev/null +++ b/components/typography/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Typography image', () => { + imageDemoTest('typography'); +}); diff --git a/components/upload/__tests__/image.test.ts b/components/upload/__tests__/image.test.ts new file mode 100644 index 0000000000..c441f46a89 --- /dev/null +++ b/components/upload/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('Upload image', () => { + imageDemoTest('upload'); +}); diff --git a/docker-compose.yml b/docker-compose.yml index 978e24c3a1..0ce9f0c756 100644 --- a/docker-compose.yml +++ b/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" diff --git a/package.json b/package.json index 925936cec2..53bca5d101 100644 --- a/package.json +++ b/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", diff --git a/tests/index.html b/tests/index.html index c4f924ec86..89c7f593ad 100644 --- a/tests/index.html +++ b/tests/index.html @@ -4,7 +4,11 @@ Amazing Antd - +
diff --git a/tests/shared/imageTest.ts b/tests/shared/imageTest.ts index 60bcb7ffc8..2eeb21ceb8 100644 --- a/tests/shared/imageTest.ts +++ b/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); + }); + }); +}