mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
test: add algorithm image test (#39673)
* test: add algorithm image test * chore: add reset.css
This commit is contained in:
parent
a692dc101c
commit
2fc3ceeaaa
@ -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 = {
|
||||
|
Loading…
Reference in New Issue
Block a user