test: add algorithm image test (#39673)

* test: add algorithm image test

* chore: add reset.css

tests/shared/imageTest.tsx

@@ -7,7 +7,7 @@ import glob from 'glob';
 import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
 import MockDate from 'mockdate';
 import ReactDOMServer from 'react-dom/server';
-import { App } from '../../components';
+import { App, theme, ConfigProvider } from '../../components';
 
 const toMatchImageSnapshot = configureToMatchImageSnapshot({
   customSnapshotsDir: `${process.cwd()}/imageSnapshots`,
@@ -18,51 +18,57 @@ 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'].includes(request.resourceType())) {
-        request.abort();
-      } else {
-        request.continue();
-      }
-    };
+  [theme.defaultAlgorithm, theme.darkAlgorithm, theme.compactAlgorithm].forEach(
+    (algorithm, index) => {
+      it(`component image screenshot should correct${index || ''}`, 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()}/dist/reset.css` });
+        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 cache = createCache();
 
-    const element = (
-      <App>
-        <StyleProvider cache={cache}>{component}</StyleProvider>
-      </App>
-    );
+        const element = (
+          <ConfigProvider theme={{ algorithm }}>
+            <App>
+              <StyleProvider cache={cache}>{component}</StyleProvider>
+            </App>
+          </ConfigProvider>
+        );
 
-    const html = ReactDOMServer.renderToString(element);
-    const styleStr = extractStyle(cache);
+        const html = ReactDOMServer.renderToString(element);
+        const styleStr = extractStyle(cache);
 
-    await page.evaluate(
-      (innerHTML, ssrStyle) => {
-        document.querySelector('#root')!.innerHTML = innerHTML;
+        await page.evaluate(
+          (innerHTML, ssrStyle) => {
+            document.querySelector('#root')!.innerHTML = innerHTML;
 
-        const head = document.querySelector('head')!;
-        head.innerHTML += ssrStyle;
-      },
-      html,
-      styleStr,
-    );
+            const head = document.querySelector('head')!;
+            head.innerHTML += ssrStyle;
+          },
+          html,
+          styleStr,
+        );
 
-    const image = await page.screenshot();
+        const image = await page.screenshot();
 
-    expect(image).toMatchImageSnapshot();
+        expect(image).toMatchImageSnapshot();
 
-    MockDate.reset();
-    page.removeListener('request', onRequestHandle);
-  });
+        MockDate.reset();
+        page.removeListener('request', onRequestHandle);
+      });
+    },
+  );
 }
 
 type Options = {