ant-design/tests/shared/imageTest.tsx
MadCcc 8e27cf986f
chore: rm component less file (#36244)
* chore: rm component less file

* refactor: less file

* refactor: rm less

* refactor: rm page-header and comment

* chore: rm less in components

* chore: update dist config

* chore: update image test

* chore: update dekko

* chore: rm lib dekko

* chore: update dist dekko

* chore: udpate bundle size

* test: update snapshot

* test: rm theme test

* test: update snapshot

* test: update snapshot

* chore: copy reset.css

* test: update image test

* chore: copy reset.css to es

* chore: update site script
2022-07-05 21:55:21 +08:00

85 lines
2.6 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 glob from 'glob';
import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
import MockDate from 'mockdate';
import ReactDOMServer from 'react-dom/server';
const toMatchImageSnapshot = configureToMatchImageSnapshot({
customSnapshotsDir: `${process.cwd()}/imageSnapshots`,
customDiffDir: `${process.cwd()}/imageDiffSnapshots`,
});
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'].indexOf(request.resourceType()) !== -1) {
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 html = ReactDOMServer.renderToString(
<StyleProvider cache={cache}>{component}</StyleProvider>,
);
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();
expect(image).toMatchImageSnapshot();
MockDate.reset();
page.removeListener('request', onRequestHandle);
});
}
type Options = {
skip?: boolean | string[];
};
// eslint-disable-next-line jest/no-export
export function imageDemoTest(component: string, options: Options = {}) {
let testMethod = options.skip === true ? describe.skip : describe;
const files = glob.sync(`./components/${component}/demo/*.md`);
files.forEach(file => {
if (Array.isArray(options.skip) && options.skip.some(c => file.includes(c))) {
testMethod = test.skip;
}
testMethod(`Test ${file} image`, () => {
// eslint-disable-next-line global-require,import/no-dynamic-require
let Demo = require(`../.${file}`).default;
if (typeof Demo === 'function') {
Demo = <Demo />;
}
imageTest(Demo);
});
});
}