test: add algorithm image test (#39673)

* test: add algorithm image test

* chore: add reset.css
This commit is contained in:
MadCcc 2022-12-21 10:38:34 +08:00 committed by GitHub
parent a692dc101c
commit 2fc3ceeaaa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -7,7 +7,7 @@ import glob from 'glob';
import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
import MockDate from 'mockdate';
import ReactDOMServer from 'react-dom/server';
import { App } from '../../components';
import { App, theme, ConfigProvider } from '../../components';
const toMatchImageSnapshot = configureToMatchImageSnapshot({
customSnapshotsDir: `${process.cwd()}/imageSnapshots`,
@ -18,51 +18,57 @@ expect.extend({ toMatchImageSnapshot });
// 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();
}
};
[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();
}
};
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 = (
<App>
<StyleProvider cache={cache}>{component}</StyleProvider>
</App>
);
const element = (
<ConfigProvider theme={{ algorithm }}>
<App>
<StyleProvider cache={cache}>{component}</StyleProvider>
</App>
</ConfigProvider>
);
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();
expect(image).toMatchImageSnapshot();
expect(image).toMatchImageSnapshot();
MockDate.reset();
page.removeListener('request', onRequestHandle);
});
MockDate.reset();
page.removeListener('request', onRequestHandle);
});
},
);
}
type Options = {