✅ test: 补充切换主题相关的测试用例

ant-design · Jan 7, 2023 · 7480f0b · 7480f0b
1 parent 72ad15e
commit 7480f0b
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 13 deletions.
diff --git a/tests/containers/AppContainer.test.tsx b/tests/containers/AppContainer.test.tsx
@@ -1,14 +1,27 @@
-import { render } from '@testing-library/react';
-import { AppContainer, css } from 'antd-style';
-import { FC } from 'react';
+import { render, renderHook } from '@testing-library/react';
+import { theme } from 'antd';
+import { AppContainer, css, useTheme } from 'antd-style';
+import { MappingAlgorithm } from 'antd/es/config-provider/context';
+import { FC, PropsWithChildren } from 'react';
+import { GetCustomToken } from '../../src/containers/AppContainer/ThemeContent';
 
+declare module 'antd-style' {
+  interface CustomToken {
+    customColor: string;
+    customBrandColor: string;
+  }
+  interface CustomStylish {
+    x: string;
+  }
+}
 const App: FC<{ id?: string }> = ({ id }) => {
   return (
     <div data-testid={id} style={{ padding: 16 }} className={'container'}>
       <a href="">节点样式</a>
     </div>
   );
 };
+
 describe('AppContainer', () => {
   it('默认', () => {
     const { container } = render(<App />, { wrapper: AppContainer });
@@ -41,9 +54,101 @@ describe('AppContainer', () => {
     expect(nodeWithout).not.toHaveStyle('color: red;');
   });
 
-  describe('注入主题', () => {
-    it.skip('注入自定义 stylish', () => {
-      render(<AppContainer>App</AppContainer>);
+  describe('注入 antd 主题', () => {
+    it('注入 token', () => {
+      const Wrapper: FC<PropsWithChildren> = ({ children }) => (
+        <AppContainer theme={{ token: { colorPrimary: '#000' } }}>{children}</AppContainer>
+      );
+      const { result } = renderHook(useTheme, { wrapper: Wrapper });
+
+      expect(result.current.colorPrimary).toEqual('#000000');
     });
+
+    it('仅注入算法', () => {
+      const Wrapper: FC<PropsWithChildren> = ({ children }) => (
+        <AppContainer theme={{ algorithm: theme.compactAlgorithm }}>{children}</AppContainer>
+      );
+      const { result } = renderHook(useTheme, { wrapper: Wrapper });
+
+      expect(result.current.fontSize).toEqual(12);
+    });
+
+    it('注入暗色模式的自定义算法', () => {
+      /**
+       * 自定义主题算法
+       * @param seedToken
+       * @param mapToken
+       */
+      const customDarkAlgorithm: MappingAlgorithm = (seedToken, mapToken) => {
+        const mergeToken = theme.darkAlgorithm(seedToken, mapToken);
+
+        return {
+          ...mergeToken,
+          // Layout 颜色
+          colorBgLayout: '#20252b',
+          // 容器颜色
+          colorBgContainer: '#282c34',
+          // 悬浮类面板颜色
+          colorBgElevated: '#32363e',
+        };
+      };
+
+      const Wrapper: FC<PropsWithChildren> = ({ children }) => (
+        <AppContainer
+          appearance={'dark'}
+          theme={(mode) =>
+            mode === 'dark'
+              ? { algorithm: [theme.compactAlgorithm, customDarkAlgorithm] }
+              : undefined
+          }
+        >
+          {children}
+        </AppContainer>
+      );
+      const { result } = renderHook(useTheme, { wrapper: Wrapper });
+      expect(result.current.colorPrimary).toEqual('#1668dc');
+      expect(result.current.colorBgLayout).toEqual('#20252b');
+      expect(result.current.fontSize).toEqual(12);
+    });
+  });
+
+  describe('注入自定义主题', () => {
+    it('注入自定义 Token', () => {
+      const customTokenFn: GetCustomToken<any> = ({ token, isDarkMode }) => ({
+        customColor: isDarkMode ? '#000' : token.colorPrimary,
+        customBrandColor: isDarkMode ? token.colorPrimary : '#FFF',
+      });
+
+      const Wrapper: FC<PropsWithChildren> = ({ children }) => (
+        <AppContainer customToken={customTokenFn}>{children}</AppContainer>
+      );
+
+      const { result: light } = renderHook(useTheme, { wrapper: Wrapper });
+      expect(light.current.customColor).toEqual('#1677ff');
+      expect(light.current.customBrandColor).toEqual('#FFF');
+
+      const Darker: FC<PropsWithChildren> = ({ children }) => (
+        <AppContainer appearance={'dark'} customToken={customTokenFn}>
+          {children}
+        </AppContainer>
+      );
+
+      const { result: dark } = renderHook(useTheme, { wrapper: Darker });
+      expect(dark.current.customColor).toEqual('#000');
+      expect(dark.current.customBrandColor).toEqual('#1677ff');
+    });
+
+    it('注入自定义 stylish', () => {
+      const Wrapper: FC<PropsWithChildren> = ({ children }) => (
+        <AppContainer customStylish={() => ({ x: '' })}>{children}</AppContainer>
+      );
+
+      const { result } = renderHook(useTheme, { wrapper: Wrapper });
+      expect(result.current.stylish.x).toEqual('');
+    });
+  });
+
+  describe('主题切换', () => {
+    render(<AppContainer themeMode={'auto'}>App</AppContainer>);
   });
 });
diff --git a/tests/hooks/__snapshots__/useThemeMode.test.tsx.snap b/tests/hooks/__snapshots__/useThemeMode.test.tsx.snap
diff --git a/tests/hooks/useThemeMode.test.tsx b/tests/hooks/useThemeMode.test.tsx
@@ -2,8 +2,11 @@ import { renderHook } from '@testing-library/react';
 import { AppContainer, useThemeMode } from 'antd-style';
 
 describe('useThemeMode', () => {
-  it('没有包裹 AppContainer 会抛出错误', () => {
-    expect(() => renderHook(useThemeMode)).toThrowErrorMatchingSnapshot();
+  it('没有包裹 Container 能正常使用', () => {
+    const { result } = renderHook(useThemeMode);
+
+    expect(result.current.appearance).toEqual('light');
+    expect(result.current.themeMode).toEqual('light');
   });
 
   it('包裹 AppContainer 后正常可以正常调用', () => {

diff --git a/tests/jest-setup.ts b/tests/jest-setup.ts
@@ -1,5 +1,8 @@
 import '@testing-library/jest-dom';
+
+// 关闭 antd 的 hash
 import { theme } from 'antd';
+theme.defaultConfig.hashed = false;
 
 const origError = console.error;
 
@@ -10,4 +13,14 @@ console.error = function (...msg) {
   return origError.apply(this, msg);
 };
 
-theme.defaultConfig.hashed = false;
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
diff --git a/tests/tsconfig.json b/tests/tsconfig.json
@@ -4,7 +4,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "antd-style": ["../src"]
+      "antd-style": ["../src/index.ts"]
     }
   }
 }