mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-24 07:28:28 +08:00
279 lines
8.0 KiB
TypeScript
279 lines
8.0 KiB
TypeScript
import path from 'path';
|
|
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 { JSDOM } from 'jsdom';
|
|
import MockDate from 'mockdate';
|
|
import ReactDOMServer from 'react-dom/server';
|
|
|
|
import { App, ConfigProvider, theme } from '../../components';
|
|
import { fillWindowEnv } from '../setup';
|
|
import { render } from '../utils';
|
|
import { TriggerMockContext } from './demoTestContext';
|
|
|
|
jest.mock('../../components/grid/hooks/useBreakpoint', () => () => ({}));
|
|
|
|
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,
|
|
};
|
|
|
|
interface ImageTestOptions {
|
|
onlyViewport?: boolean;
|
|
ssr?: boolean;
|
|
openTriggerClassName?: string;
|
|
}
|
|
|
|
// eslint-disable-next-line jest/no-export
|
|
export default function imageTest(
|
|
component: React.ReactElement,
|
|
identifier: string,
|
|
options: ImageTestOptions,
|
|
) {
|
|
let doc: Document;
|
|
let container: HTMLDivElement;
|
|
|
|
beforeAll(() => {
|
|
const dom = new JSDOM('<!DOCTYPE html><body></body></p>', {
|
|
url: 'http://localhost/',
|
|
});
|
|
const win = dom.window;
|
|
doc = win.document;
|
|
|
|
(global as any).window = win;
|
|
|
|
// Fill env
|
|
const keys = [
|
|
...Object.keys(win),
|
|
'HTMLElement',
|
|
'SVGElement',
|
|
'ShadowRoot',
|
|
'Element',
|
|
'File',
|
|
'Blob',
|
|
].filter((key) => !(global as any)[key]);
|
|
|
|
keys.forEach((key) => {
|
|
(global as any)[key] = win[key];
|
|
});
|
|
|
|
// Fake Resize Observer
|
|
global.ResizeObserver = function FakeResizeObserver() {
|
|
return {
|
|
observe() {},
|
|
unobserve() {},
|
|
disconnect() {},
|
|
};
|
|
} as any;
|
|
|
|
// Fake promise not called
|
|
global.fetch = function mockFetch() {
|
|
return {
|
|
then() {
|
|
return this;
|
|
},
|
|
catch() {
|
|
return this;
|
|
},
|
|
finally() {
|
|
return this;
|
|
},
|
|
};
|
|
} as any;
|
|
|
|
// Fake matchMedia
|
|
win.matchMedia = () =>
|
|
({
|
|
matches: false,
|
|
addListener: jest.fn(),
|
|
removeListener: jest.fn(),
|
|
}) as any;
|
|
|
|
// Fill window
|
|
fillWindowEnv(win);
|
|
});
|
|
|
|
beforeEach(() => {
|
|
doc.body.innerHTML = `<div id="root"></div>`;
|
|
container = doc.querySelector<HTMLDivElement>('#root')!;
|
|
});
|
|
|
|
function test(name: string, suffix: string, themedComponent: React.ReactElement) {
|
|
it(name, async () => {
|
|
await jestPuppeteer.resetPage();
|
|
await page.setRequestInterception(true);
|
|
const onRequestHandle = (request: any) => {
|
|
if (['image'].includes(request.resourceType())) {
|
|
request.abort();
|
|
} else {
|
|
request.continue();
|
|
}
|
|
};
|
|
|
|
const { openTriggerClassName } = options;
|
|
|
|
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()}/components/style/reset.css` });
|
|
await page.addStyleTag({ content: '*{animation: none!important;}' });
|
|
|
|
const cache = createCache();
|
|
|
|
const emptyStyleHolder = doc.createElement('div');
|
|
|
|
let element = (
|
|
<StyleProvider cache={cache} container={emptyStyleHolder}>
|
|
<App>{themedComponent}</App>
|
|
</StyleProvider>
|
|
);
|
|
|
|
// Do inject open trigger
|
|
if (openTriggerClassName) {
|
|
element = (
|
|
<TriggerMockContext.Provider value={{ popupVisible: true }}>
|
|
{element}
|
|
</TriggerMockContext.Provider>
|
|
);
|
|
}
|
|
|
|
let html: string;
|
|
let styleStr: string;
|
|
|
|
if (options.ssr) {
|
|
html = ReactDOMServer.renderToString(element);
|
|
styleStr = extractStyle(cache);
|
|
} else {
|
|
const { unmount } = render(element, {
|
|
container,
|
|
});
|
|
html = container.innerHTML;
|
|
styleStr = extractStyle(cache);
|
|
|
|
// We should extract style before unmount
|
|
unmount();
|
|
}
|
|
|
|
if (openTriggerClassName) {
|
|
styleStr += `<style>
|
|
.${openTriggerClassName} {
|
|
position: relative !important;
|
|
left: 0 !important;
|
|
top: 0 !important;
|
|
opacity: 1 !important;
|
|
display: inline-block !important;
|
|
vertical-align: top !important;
|
|
}
|
|
</style>`;
|
|
}
|
|
|
|
await page.evaluate(
|
|
(innerHTML, ssrStyle, triggerClassName) => {
|
|
document.querySelector('#root')!.innerHTML = innerHTML;
|
|
|
|
const head = document.querySelector('head')!;
|
|
head.innerHTML += ssrStyle;
|
|
|
|
// Inject open trigger with block style
|
|
if (triggerClassName) {
|
|
document.querySelectorAll(`.${triggerClassName}`).forEach((node) => {
|
|
const blockStart = document.createElement('div');
|
|
const blockEnd = document.createElement('div');
|
|
|
|
node.parentNode!.insertBefore(blockStart, node);
|
|
node.parentNode!.insertBefore(blockEnd, node.nextSibling);
|
|
});
|
|
}
|
|
},
|
|
html,
|
|
styleStr,
|
|
openTriggerClassName,
|
|
);
|
|
|
|
if (!options.onlyViewport) {
|
|
// Get scroll height of the rendered page and set viewport
|
|
const bodyHeight = await page.evaluate(() => document.body.scrollHeight);
|
|
await page.setViewport({ width: 800, height: bodyHeight });
|
|
}
|
|
|
|
const image = await page.screenshot({
|
|
fullPage: !options.onlyViewport,
|
|
});
|
|
|
|
expect(image).toMatchImageSnapshot({
|
|
customSnapshotIdentifier: `${identifier}${suffix}`,
|
|
});
|
|
|
|
MockDate.reset();
|
|
page.off('request', onRequestHandle);
|
|
});
|
|
}
|
|
|
|
Object.entries(themes).forEach(([key, algorithm]) => {
|
|
test(
|
|
`component image screenshot should correct ${key}`,
|
|
`.${key}`,
|
|
<div style={{ background: key === 'dark' ? '#000' : '', padding: `24px 12px` }} key={key}>
|
|
<ConfigProvider theme={{ algorithm }}>{component}</ConfigProvider>
|
|
</div>,
|
|
);
|
|
test(
|
|
`[CSS Var] component image screenshot should correct ${key}`,
|
|
`.${key}.css-var`,
|
|
<div style={{ background: key === 'dark' ? '#000' : '', padding: `24px 12px` }} key={key}>
|
|
<ConfigProvider theme={{ algorithm, cssVar: true }}>{component}</ConfigProvider>
|
|
</div>,
|
|
);
|
|
});
|
|
}
|
|
|
|
type Options = {
|
|
skip?: boolean | string[];
|
|
onlyViewport?: boolean | string[];
|
|
/** Use SSR render instead. Only used when the third part deps component */
|
|
ssr?: boolean;
|
|
/** Open Trigger to check the popup render */
|
|
openTriggerClassName?: string;
|
|
};
|
|
|
|
// eslint-disable-next-line jest/no-export
|
|
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.endsWith(c))) {
|
|
describeMethod = describe.skip;
|
|
} else {
|
|
describeMethod = describe;
|
|
}
|
|
describeMethod(`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, `${component}-${path.basename(file, '.tsx')}`, {
|
|
onlyViewport:
|
|
options.onlyViewport === true ||
|
|
(Array.isArray(options.onlyViewport) &&
|
|
options.onlyViewport.some((c) => file.endsWith(c))),
|
|
ssr: options.ssr,
|
|
openTriggerClassName: options.openTriggerClassName,
|
|
});
|
|
});
|
|
});
|
|
}
|