forked from ant-design/ant-design
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test: 🚀 New Image Snapshots (ant-design#24003)
* 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
- Loading branch information
1 parent
e197163
commit 8d0bba4
Showing
10 changed files
with
155 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file added
BIN
+10.2 KB
...t-js-grid-image-image-test-component-image-screenshot-should-correct-1-snap.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| 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> | ||
| </>, | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <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" /> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| }); | ||
| }); | ||
| } |