mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 12:39:49 +08:00
chore: try to fix screenshot (#44817)
* chore: try to fix screenshot * chore: set small viewport * chore: rm wait until * chore: minimize demo * chore: support onlyViewPort * chore: better logic * chore: config demos * chore: update * refactor: rename * chore: update * chore: update * chore: update
This commit is contained in:
parent
d3469324c9
commit
afcdc3fbe2
@ -288,39 +288,6 @@ Array [
|
||||
Part 3
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#part-4"
|
||||
title="Part 4"
|
||||
>
|
||||
Part 4
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#part-5"
|
||||
title="Part 5"
|
||||
>
|
||||
Part 5
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#part-6"
|
||||
title="Part 6"
|
||||
>
|
||||
Part 6
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -339,18 +306,6 @@ Array [
|
||||
id="part-3"
|
||||
style="width: 100vw; height: 100vh; text-align: center; background: rgb(255, 251, 233);"
|
||||
/>
|
||||
<div
|
||||
id="part-4"
|
||||
style="width: 100vw; height: 100vh; text-align: center; background: rgb(244, 234, 213);"
|
||||
/>
|
||||
<div
|
||||
id="part-5"
|
||||
style="width: 100vw; height: 100vh; text-align: center; background: rgb(218, 226, 182);"
|
||||
/>
|
||||
<div
|
||||
id="part-6"
|
||||
style="width: 100vw; height: 100vh; text-align: center; background: rgb(204, 214, 166);"
|
||||
/>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
@ -278,39 +278,6 @@ Array [
|
||||
Part 3
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#part-4"
|
||||
title="Part 4"
|
||||
>
|
||||
Part 4
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#part-5"
|
||||
title="Part 5"
|
||||
>
|
||||
Part 5
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#part-6"
|
||||
title="Part 6"
|
||||
>
|
||||
Part 6
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -329,18 +296,6 @@ Array [
|
||||
id="part-3"
|
||||
style="width:100vw;height:100vh;text-align:center;background:#FFFBE9"
|
||||
/>
|
||||
<div
|
||||
id="part-4"
|
||||
style="width:100vw;height:100vh;text-align:center;background:#F4EAD5"
|
||||
/>
|
||||
<div
|
||||
id="part-5"
|
||||
style="width:100vw;height:100vh;text-align:center;background:#DAE2B6"
|
||||
/>
|
||||
<div
|
||||
id="part-6"
|
||||
style="width:100vw;height:100vh;text-align:center;background:#CCD6A6"
|
||||
/>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { imageDemoTest } from '../../../tests/shared/imageTest';
|
||||
|
||||
describe('Anchor image', () => {
|
||||
imageDemoTest('anchor');
|
||||
imageDemoTest('anchor', { onlyViewport: true });
|
||||
});
|
||||
|
@ -22,21 +22,6 @@ const App: React.FC = () => (
|
||||
href: '#part-3',
|
||||
title: 'Part 3',
|
||||
},
|
||||
{
|
||||
key: 'part-4',
|
||||
href: '#part-4',
|
||||
title: 'Part 4',
|
||||
},
|
||||
{
|
||||
key: 'part-5',
|
||||
href: '#part-5',
|
||||
title: 'Part 5',
|
||||
},
|
||||
{
|
||||
key: 'part-6',
|
||||
href: '#part-6',
|
||||
title: 'Part 6',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@ -63,18 +48,6 @@ const App: React.FC = () => (
|
||||
id="part-3"
|
||||
style={{ width: '100vw', height: '100vh', textAlign: 'center', background: '#FFFBE9' }}
|
||||
/>
|
||||
<div
|
||||
id="part-4"
|
||||
style={{ width: '100vw', height: '100vh', textAlign: 'center', background: '#F4EAD5' }}
|
||||
/>
|
||||
<div
|
||||
id="part-5"
|
||||
style={{ width: '100vw', height: '100vh', textAlign: 'center', background: '#DAE2B6' }}
|
||||
/>
|
||||
<div
|
||||
id="part-6"
|
||||
style={{ width: '100vw', height: '100vh', textAlign: 'center', background: '#CCD6A6' }}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
@ -1,5 +0,0 @@
|
||||
import { imageDemoTest } from '../../../tests/shared/imageTest';
|
||||
|
||||
describe('BackTop image', () => {
|
||||
imageDemoTest('back-top');
|
||||
});
|
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`renders components/float-button/demo/back-top.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
style="height: 500vh; padding: 10px;"
|
||||
style="height: 300vh; padding: 10px;"
|
||||
>
|
||||
<div>
|
||||
Scroll to bottom
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`renders components/float-button/demo/back-top.tsx correctly 1`] = `
|
||||
<div
|
||||
style="height:500vh;padding:10px"
|
||||
style="height:300vh;padding:10px"
|
||||
>
|
||||
<div>
|
||||
Scroll to bottom
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { imageDemoTest } from '../../../tests/shared/imageTest';
|
||||
|
||||
describe('float-button image', () => {
|
||||
imageDemoTest('float-button');
|
||||
imageDemoTest('float-button', { splitTheme: true, onlyViewport: ['back-top.tsx'] });
|
||||
});
|
||||
|
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import { FloatButton } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div style={{ height: '500vh', padding: 10 }}>
|
||||
<div style={{ height: '300vh', padding: 10 }}>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
|
@ -1,5 +1,8 @@
|
||||
import { imageDemoTest } from '../../../tests/shared/imageTest';
|
||||
|
||||
describe('Layout image', () => {
|
||||
imageDemoTest('layout', { skip: ['fixed-sider.tsx'] });
|
||||
imageDemoTest('layout', {
|
||||
skip: ['fixed-sider.tsx'],
|
||||
splitTheme: ['side.tsx'],
|
||||
});
|
||||
});
|
||||
|
@ -1,5 +1,7 @@
|
||||
import { imageDemoTest } from '../../../tests/shared/imageTest';
|
||||
|
||||
describe('Select image', () => {
|
||||
imageDemoTest('select', { skip: ['basic.tsx'] });
|
||||
imageDemoTest('select', {
|
||||
splitTheme: ['debug-flip-shift.tsx'],
|
||||
});
|
||||
});
|
||||
|
@ -1,5 +1,7 @@
|
||||
import { imageDemoTest } from '../../../tests/shared/imageTest';
|
||||
|
||||
describe('Tooltip image', () => {
|
||||
imageDemoTest('tooltip');
|
||||
imageDemoTest('tooltip', {
|
||||
onlyViewport: ['shift.tsx'],
|
||||
});
|
||||
});
|
||||
|
@ -22,78 +22,98 @@ const themes = {
|
||||
compact: theme.compactAlgorithm,
|
||||
};
|
||||
|
||||
interface ImageTestOptions {
|
||||
onlyViewport?: boolean;
|
||||
splitTheme?: boolean;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line jest/no-export
|
||||
export default function imageTest(component: React.ReactElement) {
|
||||
it(`component image screenshot should correct`, async () => {
|
||||
await jestPuppeteer.resetPage();
|
||||
await page.setRequestInterception(true);
|
||||
const onRequestHandle = (request: any) => {
|
||||
if (['image'].includes(request.resourceType())) {
|
||||
request.abort();
|
||||
} else {
|
||||
request.continue();
|
||||
export default function imageTest(component: React.ReactElement, options: ImageTestOptions) {
|
||||
function test(name: string, themedComponent: React.ReactElement) {
|
||||
it(name, async () => {
|
||||
await jestPuppeteer.resetPage();
|
||||
await page.setRequestInterception(true);
|
||||
const onRequestHandle = (request: any) => {
|
||||
if (['image'].includes(request.resourceType())) {
|
||||
request.abort();
|
||||
} else {
|
||||
request.continue();
|
||||
}
|
||||
};
|
||||
|
||||
MockDate.set(dayjs('2016-11-22').valueOf());
|
||||
page.on('request', onRequestHandle);
|
||||
await page.goto(`file://${process.cwd()}/tests/index.html`);
|
||||
await page.addStyleTag({ path: `${process.cwd()}/components/style/reset.css` });
|
||||
await page.addStyleTag({ content: '*{animation: none!important;}' });
|
||||
|
||||
const cache = createCache();
|
||||
|
||||
const element = (
|
||||
<StyleProvider cache={cache}>
|
||||
<App>{themedComponent}</App>
|
||||
</StyleProvider>
|
||||
);
|
||||
|
||||
const html = ReactDOMServer.renderToString(element);
|
||||
const styleStr = extractStyle(cache);
|
||||
|
||||
await page.evaluate(
|
||||
(innerHTML, ssrStyle) => {
|
||||
document.querySelector('#root')!.innerHTML = innerHTML;
|
||||
|
||||
const head = document.querySelector('head')!;
|
||||
head.innerHTML += ssrStyle;
|
||||
},
|
||||
html,
|
||||
styleStr,
|
||||
);
|
||||
|
||||
if (!options.onlyViewport) {
|
||||
// Get scroll height of the rendered page and set viewport
|
||||
const bodyHeight = await page.evaluate(() => document.body.scrollHeight);
|
||||
await page.setViewport({ width: 800, height: bodyHeight });
|
||||
}
|
||||
};
|
||||
|
||||
MockDate.set(dayjs('2016-11-22').valueOf());
|
||||
page.on('request', onRequestHandle);
|
||||
await page.goto(`file://${process.cwd()}/tests/index.html`);
|
||||
await page.addStyleTag({ path: `${process.cwd()}/components/style/reset.css` });
|
||||
await page.addStyleTag({ content: '*{animation: none!important;}' });
|
||||
const image = await page.screenshot({
|
||||
fullPage: !options.onlyViewport,
|
||||
optimizeForSpeed: true,
|
||||
});
|
||||
|
||||
const cache = createCache();
|
||||
expect(image).toMatchImageSnapshot();
|
||||
|
||||
const element = (
|
||||
<StyleProvider cache={cache}>
|
||||
<App>
|
||||
{Object.entries(themes).map(([key, algorithm]) => (
|
||||
<div
|
||||
style={{ background: key === 'dark' ? '#000' : '', padding: `24px 12px` }}
|
||||
key={key}
|
||||
>
|
||||
<ConfigProvider theme={{ algorithm }}>{component}</ConfigProvider>
|
||||
</div>
|
||||
))}
|
||||
</App>
|
||||
<div id="end-of-screen" style={{ height: 0, margin: 0, padding: 0, overflow: 'hidden' }}>
|
||||
end of screen
|
||||
</div>
|
||||
</StyleProvider>
|
||||
);
|
||||
|
||||
const html = ReactDOMServer.renderToString(element);
|
||||
const styleStr = extractStyle(cache);
|
||||
|
||||
await page.evaluate(
|
||||
(innerHTML, ssrStyle) => {
|
||||
document.querySelector('#root')!.innerHTML = innerHTML;
|
||||
|
||||
const head = document.querySelector('head')!;
|
||||
head.innerHTML += ssrStyle;
|
||||
},
|
||||
html,
|
||||
styleStr,
|
||||
);
|
||||
|
||||
await page.waitForSelector('#end-of-screen', {
|
||||
timeout: 0,
|
||||
MockDate.reset();
|
||||
page.off('request', onRequestHandle);
|
||||
});
|
||||
}
|
||||
|
||||
const image = await page.screenshot({
|
||||
fullPage: true,
|
||||
captureBeyondViewport: true,
|
||||
optimizeForSpeed: true,
|
||||
if (options.splitTheme) {
|
||||
Object.entries(themes).forEach(([key, algorithm]) => {
|
||||
test(
|
||||
`component image screenshot should correct ${key}`,
|
||||
<div style={{ background: key === 'dark' ? '#000' : '', padding: `24px 12px` }} key={key}>
|
||||
<ConfigProvider theme={{ algorithm }}>{component}</ConfigProvider>
|
||||
</div>,
|
||||
);
|
||||
});
|
||||
|
||||
expect(image).toMatchImageSnapshot();
|
||||
|
||||
MockDate.reset();
|
||||
page.off('request', onRequestHandle);
|
||||
});
|
||||
} else {
|
||||
test(
|
||||
`component image screenshot should correct`,
|
||||
<>
|
||||
{Object.entries(themes).map(([key, algorithm]) => (
|
||||
<div style={{ background: key === 'dark' ? '#000' : '', padding: `24px 12px` }} key={key}>
|
||||
<ConfigProvider theme={{ algorithm }}>{component}</ConfigProvider>
|
||||
</div>
|
||||
))}
|
||||
</>,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
type Options = {
|
||||
skip?: boolean | string[];
|
||||
onlyViewport?: boolean | string[];
|
||||
splitTheme?: boolean | string[];
|
||||
};
|
||||
|
||||
// eslint-disable-next-line jest/no-export
|
||||
@ -102,7 +122,7 @@ export function imageDemoTest(component: string, options: Options = {}) {
|
||||
const files = globSync(`./components/${component}/demo/*.tsx`);
|
||||
|
||||
files.forEach((file) => {
|
||||
if (Array.isArray(options.skip) && options.skip.some((c) => file.includes(c))) {
|
||||
if (Array.isArray(options.skip) && options.skip.some((c) => file.endsWith(c))) {
|
||||
describeMethod = describe.skip;
|
||||
} else {
|
||||
describeMethod = describe;
|
||||
@ -113,7 +133,15 @@ export function imageDemoTest(component: string, options: Options = {}) {
|
||||
if (typeof Demo === 'function') {
|
||||
Demo = <Demo />;
|
||||
}
|
||||
imageTest(Demo);
|
||||
imageTest(Demo, {
|
||||
onlyViewport:
|
||||
options.onlyViewport === true ||
|
||||
(Array.isArray(options.onlyViewport) &&
|
||||
options.onlyViewport.some((c) => file.endsWith(c))),
|
||||
splitTheme:
|
||||
options.splitTheme === true ||
|
||||
(Array.isArray(options.splitTheme) && options.splitTheme.some((c) => file.endsWith(c))),
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user