Scroll to bottom
Scroll to bottom
Scroll to bottom
diff --git a/components/layout/__tests__/image.test.ts b/components/layout/__tests__/image.test.ts
index b495e17129..0d4d10fdaf 100644
--- a/components/layout/__tests__/image.test.ts
+++ b/components/layout/__tests__/image.test.ts
@@ -1,5 +1,8 @@
import { imageDemoTest } from '../../../tests/shared/imageTest';
describe('Layout image', () => {
- imageDemoTest('layout', { skip: ['fixed-sider.tsx'] });
+ imageDemoTest('layout', {
+ skip: ['fixed-sider.tsx'],
+ splitTheme: ['side.tsx'],
+ });
});
diff --git a/components/select/__tests__/image.test.ts b/components/select/__tests__/image.test.ts
index d4e0b04fab..fff13695b5 100644
--- a/components/select/__tests__/image.test.ts
+++ b/components/select/__tests__/image.test.ts
@@ -1,5 +1,7 @@
import { imageDemoTest } from '../../../tests/shared/imageTest';
describe('Select image', () => {
- imageDemoTest('select', { skip: ['basic.tsx'] });
+ imageDemoTest('select', {
+ splitTheme: ['debug-flip-shift.tsx'],
+ });
});
diff --git a/components/tooltip/__tests__/image.test.ts b/components/tooltip/__tests__/image.test.ts
index b3f04c9c40..cac71fc05f 100644
--- a/components/tooltip/__tests__/image.test.ts
+++ b/components/tooltip/__tests__/image.test.ts
@@ -1,5 +1,7 @@
import { imageDemoTest } from '../../../tests/shared/imageTest';
describe('Tooltip image', () => {
- imageDemoTest('tooltip');
+ imageDemoTest('tooltip', {
+ onlyViewport: ['shift.tsx'],
+ });
});
diff --git a/tests/shared/imageTest.tsx b/tests/shared/imageTest.tsx
index ab723470fd..26c1fd782c 100644
--- a/tests/shared/imageTest.tsx
+++ b/tests/shared/imageTest.tsx
@@ -22,78 +22,98 @@ const themes = {
compact: theme.compactAlgorithm,
};
+interface ImageTestOptions {
+ onlyViewport?: boolean;
+ splitTheme?: boolean;
+}
+
// 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();
+export default function imageTest(component: React.ReactElement, options: ImageTestOptions) {
+ function test(name: 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();
+ }
+ };
+
+ 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 element = (
+
+ {themedComponent}
+
+ );
+
+ 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,
+ );
+
+ 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 });
}
- };
- 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 image = await page.screenshot({
+ fullPage: !options.onlyViewport,
+ optimizeForSpeed: true,
+ });
- const cache = createCache();
+ expect(image).toMatchImageSnapshot();
- const element = (
-
-
- {Object.entries(themes).map(([key, algorithm]) => (
-
- {component}
-
- ))}
-
-
- end of screen
-
-
- );
-
- 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,
- );
-
- await page.waitForSelector('#end-of-screen', {
- timeout: 0,
+ MockDate.reset();
+ page.off('request', onRequestHandle);
});
+ }
- const image = await page.screenshot({
- fullPage: true,
- captureBeyondViewport: true,
- optimizeForSpeed: true,
+ if (options.splitTheme) {
+ Object.entries(themes).forEach(([key, algorithm]) => {
+ test(
+ `component image screenshot should correct ${key}`,
+
+ {component}
+
,
+ );
});
-
- expect(image).toMatchImageSnapshot();
-
- MockDate.reset();
- page.off('request', onRequestHandle);
- });
+ } else {
+ test(
+ `component image screenshot should correct`,
+ <>
+ {Object.entries(themes).map(([key, algorithm]) => (
+
+ {component}
+
+ ))}
+ ,
+ );
+ }
}
type Options = {
skip?: boolean | string[];
+ onlyViewport?: boolean | string[];
+ splitTheme?: boolean | string[];
};
// eslint-disable-next-line jest/no-export
@@ -102,7 +122,7 @@ export function imageDemoTest(component: string, options: Options = {}) {
const files = globSync(`./components/${component}/demo/*.tsx`);
files.forEach((file) => {
- if (Array.isArray(options.skip) && options.skip.some((c) => file.includes(c))) {
+ if (Array.isArray(options.skip) && options.skip.some((c) => file.endsWith(c))) {
describeMethod = describe.skip;
} else {
describeMethod = describe;
@@ -113,7 +133,15 @@ export function imageDemoTest(component: string, options: Options = {}) {
if (typeof Demo === 'function') {
Demo =
;
}
- imageTest(Demo);
+ imageTest(Demo, {
+ onlyViewport:
+ options.onlyViewport === true ||
+ (Array.isArray(options.onlyViewport) &&
+ options.onlyViewport.some((c) => file.endsWith(c))),
+ splitTheme:
+ options.splitTheme === true ||
+ (Array.isArray(options.splitTheme) && options.splitTheme.some((c) => file.endsWith(c))),
+ });
});
});
}