chore: use one screenshot per demo with different themes (#42537)

* chore: use one screenshot per component

* chore: skip

* chore: update screenshot batch

* chore: update padding

tests/shared/imageTest.tsx

@@ -16,11 +16,15 @@ const toMatchImageSnapshot = configureToMatchImageSnapshot({
 
 expect.extend({ toMatchImageSnapshot });
 
+const themes = {
+  default: theme.defaultAlgorithm,
+  dark: theme.darkAlgorithm,
+  compact: theme.compactAlgorithm,
+};
+
 // eslint-disable-next-line jest/no-export
 export default function imageTest(component: React.ReactElement) {
-  [theme.defaultAlgorithm, theme.darkAlgorithm, theme.compactAlgorithm].forEach(
-    (algorithm, index) => {
-      it(`component image screenshot should correct${index || ''}`, async () => {
+  it(`component image screenshot should correct`, async () => {
     await jestPuppeteer.resetPage();
     await page.setRequestInterception(true);
     const onRequestHandle = (request: any) => {
@@ -39,11 +43,18 @@ export default function imageTest(component: React.ReactElement) {
     const cache = createCache();
 
     const element = (
-          <ConfigProvider theme={{ algorithm }}>
-            <App style={{ background: algorithm === theme.darkAlgorithm ? '#000' : '' }}>
-              <StyleProvider cache={cache}>{component}</StyleProvider>
+      <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>
-          </ConfigProvider>
+      </StyleProvider>
     );
 
     const html = ReactDOMServer.renderToString(element);
@@ -60,15 +71,15 @@ export default function imageTest(component: React.ReactElement) {
       styleStr,
     );
 
-        const image = await page.screenshot();
+    const image = await page.screenshot({
+      fullPage: true,
+    });
 
     expect(image).toMatchImageSnapshot();
 
     MockDate.reset();
     page.removeListener('request', onRequestHandle);
   });
-    },
-  );
 }
 
 type Options = {