ant-design/tests/shared/imageTest.tsx
Dunqing 6759887c44
chore: migrate to vitest (#42506)
* chore: migrate to vitest

* chore: update ci

* fix: test correctly

* test: support puppeteer

* chore: update coverage

* chore: update include/exclude

* chore: update config

* test: update incorrect tests

* chore: update script

* chore: update

* fix: should close browser at the ended

* chore: improve

* fix: test cause tsc error

* fix: eslint error

* chore: exclude correctly

* test: update snap and fix some tests

* chore: update test config

* fix: countup.js

* fix: incorrect test

* chore: update reference

* test: update

* fix: countup.js

* fix: timeout

* chore: update site test

* fix: fixed countup version

* chore: remove unsed code

* test: update

* test: update demo timeout

* test: update timeout

* chore: update image test

* chore: update threads

* fix: image/svg+xml test failed

* chore: limits threads

* test: update test coverage include

* chore: remove jest files

* chore: rename jest to vi

* chore: update document

* chore: fix missing @types/jsdom

* chore: update coverage

* chore: update snap

* fix:watermark test cases are incorrect

* feat: update ignore comment

* test: fix test case

* test: reset body scrollTop

* test: clean up

* test: use vi

* test: update snapshot

* test: update snapshot

* test: fix dropdown test failed

* fix: toHaveStyle cause test fail

* test: improve test case

* test: fix

* fix: color failed, refer to https://github.com/jsdom/jsdom/pull/3560

* test: fix

* test: fix

* test: fix circular import

* test: revert

* ci: coverage failed

* test: fix c8 ignore comment

* chore: incorrect config

* chore: fix ignore ci

* test: revert svg+xml

* test: fix realTimers

* feat: rc-trigger should be remove

* test: fix some failed test

* chore: remove unused deps and configure eslint-plugin-vitest

* test: update snap

* chore: remove jest

* test: fix lint error

---------

Co-authored-by: 二货机器人 <smith3816@gmail.com>
Co-authored-by: afc163 <afc163@gmail.com>
2023-06-07 11:54:50 +08:00

108 lines
3.2 KiB
TypeScript

import React from 'react';
// Reference: https://github.com/ant-design/ant-design/pull/24003#discussion_r427267386
// eslint-disable-next-line import/no-unresolved
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
import dayjs from 'dayjs';
import { globSync } from 'glob';
import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
import MockDate from 'mockdate';
import ReactDOMServer from 'react-dom/server';
import { App, ConfigProvider, theme } from '../../components';
const toMatchImageSnapshot = configureToMatchImageSnapshot({
customSnapshotsDir: `${process.cwd()}/imageSnapshots`,
customDiffDir: `${process.cwd()}/imageDiffSnapshots`,
});
expect.extend({ toMatchImageSnapshot });
const themes = {
default: theme.defaultAlgorithm,
dark: theme.darkAlgorithm,
compact: theme.compactAlgorithm,
};
export default function imageTest(component: React.ReactElement) {
it(`component image screenshot should correct`, async () => {
await 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` });
const cache = createCache();
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);
await page.evaluate(
(innerHTML, ssrStyle) => {
document.querySelector('#root')!.innerHTML = innerHTML;
const head = document.querySelector('head')!;
head.innerHTML += ssrStyle;
},
html,
styleStr,
);
const image = await page.screenshot({
fullPage: true,
});
expect(image).toMatchImageSnapshot();
MockDate.reset();
page.removeListener('request', onRequestHandle);
});
}
type Options = {
skip?: boolean | string[];
};
export function imageDemoTest(component: string, options: Options = {}) {
let describeMethod = options.skip === true ? describe.skip : describe;
const files = globSync(`./components/${component}/demo/*.tsx`);
files.forEach((file) => {
if (Array.isArray(options.skip) && options.skip.some((c) => file.includes(c))) {
describeMethod = describe.skip;
} else {
describeMethod = describe;
}
describeMethod(`Test ${file} image`, async () => {
// eslint-disable-next-line global-require,import/no-dynamic-require
let { default: Demo } = await import(`../../${file}`);
if (typeof Demo === 'function') {
Demo = <Demo />;
}
imageTest(Demo);
});
});
}