test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

chore: use one screenshot per demo with different themes (#42537)

Browse Source 
* chore: use one screenshot per component

* chore: skip

* chore: update screenshot batch

* chore: update padding
This commit is contained in:
MadCcc 2023-05-23 17:10:19 +08:00 committed by GitHub
parent b5213fecdb
commit a8bc0ef593
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 53 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
tests/shared/imageTest.tsx
View File

@ -16,59 +16,70 @@ const toMatchImageSnapshot = configureToMatchImageSnapshot({
expect.extend({ toMatchImageSnapshot });
const themes = {
default: theme.defaultAlgorithm,
dark: theme.darkAlgorithm,
compact: theme.compactAlgorithm,
};
// eslint-disable-next-line jest/no-export
export default function imageTest(component: React.ReactElement) {
[theme.defaultAlgorithm, theme.darkAlgorithm, theme.compactAlgorithm].forEach(
(algorithm, index) => {
it(`component image screenshot should correct${index || ''}`, async () => {
await jestPuppeteer.resetPage();
await page.setRequestInterception(true);
const onRequestHandle = (request: any) => {
if (['image'].includes(request.resourceType())) {
request.abort();
} else {
request.continue();
}
};
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();
}
};
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()}/dist/reset.css` });
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()}/dist/reset.css` });
const cache = createCache();
const cache = createCache();
const element = (
<ConfigProvider theme={{ algorithm }}>
<App style={{ background: algorithm === theme.darkAlgorithm ? '#000' : '' }}>
<StyleProvider cache={cache}>{component}</StyleProvider>
</App>
</ConfigProvider>
);
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>
</StyleProvider>
);
const html = ReactDOMServer.renderToString(element);
const styleStr = extractStyle(cache);
const html = ReactDOMServer.renderToString(element);
const styleStr = extractStyle(cache);
await page.evaluate(
(innerHTML, ssrStyle) => {
document.querySelector('#root')!.innerHTML = innerHTML;
await page.evaluate(
(innerHTML, ssrStyle) => {
document.querySelector('#root')!.innerHTML = innerHTML;
const head = document.querySelector('head')!;
head.innerHTML += ssrStyle;
},
html,
styleStr,
);
const head = document.querySelector('head')!;
head.innerHTML += ssrStyle;
},
html,
styleStr,
);
const image = await page.screenshot();
const image = await page.screenshot({
fullPage: true,
});
expect(image).toMatchImageSnapshot();
expect(image).toMatchImageSnapshot();
MockDate.reset();
page.removeListener('request', onRequestHandle);
});
},
);
MockDate.reset();
page.removeListener('request', onRequestHandle);
});
}
type Options = {