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:
MadCcc 2023-09-14 16:59:11 +08:00 committed by GitHub
parent d3469324c9
commit afcdc3fbe2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 105 additions and 192 deletions

View File

@ -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>,
]
`;

View File

@ -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>,
]
`;

View File

@ -1,5 +1,5 @@
import { imageDemoTest } from '../../../tests/shared/imageTest';
describe('Anchor image', () => {
imageDemoTest('anchor');
imageDemoTest('anchor', { onlyViewport: true });
});

View File

@ -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>
</>
);

View File

@ -1,5 +0,0 @@
import { imageDemoTest } from '../../../tests/shared/imageTest';
describe('BackTop image', () => {
imageDemoTest('back-top');
});

View File

@ -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

View File

@ -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

View File

@ -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'] });
});

View File

@ -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>

View File

@ -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'],
});
});

View File

@ -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'],
});
});

View File

@ -1,5 +1,7 @@
import { imageDemoTest } from '../../../tests/shared/imageTest';
describe('Tooltip image', () => {
imageDemoTest('tooltip');
imageDemoTest('tooltip', {
onlyViewport: ['shift.tsx'],
});
});

View File

@ -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))),
});
});
});
}