test(chart): Add test cases for ChartProvider theme

oceanbase · Sep 4, 2023 · d967d35 · d967d35
1 parent c445fbf
commit d967d35
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 30 deletions.
diff --git a/docs/charts/charts-theme.md b/docs/charts/charts-theme.md
@@ -12,15 +12,25 @@ OceanBase Charts 的设计体系遵循 AntV 设计规范，并在此基础上扩
 import { ChartProvider, useTheme } from '@oceanbase/charts';
 
 export default () {
+  // 获取主题配置
   const themeConfig = useTheme();
   // 主题色
-  console.log(theme.defaultColor);
+  console.log(themeConfig.defaultColor);
   // 折线图线宽
-  console.log(theme.styleSheet.lineBorder);
+  console.log(themeConfig.styleSheet.lineBorder);
+  // 设置主题
   return (
-    <ChartProvider theme="dark">
-      {...}
-    </ChartProvider>
+    <>
+      <ChartProvider theme="light">
+        {...}
+      </ChartProvider>
+      <ChartProvider theme="dark">
+        {...}
+      </ChartProvider>
+      <ChartProvider theme={{ defaultColor: '#ff0000', subColor: '#00ff00' }}>
+        {...}
+      </ChartProvider>
+    </>
   );
 };
 ```

diff --git a/packages/charts/src/ChartProvider/__tests__/theme.test.tsx b/packages/charts/src/ChartProvider/__tests__/theme.test.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ChartProvider, useTheme } from '@oceanbase/charts';
+
+describe('ChartProvider theme', () => {
+  it('default theme', () => {
+    const Child = () => {
+      const themeConfig = useTheme();
+      expect(themeConfig.theme).toBe('light');
+      expect(themeConfig.defaultColor).toBe('#4C96FF');
+      return <div />;
+    };
+    render(
+      <ChartProvider>
+        <Child />
+      </ChartProvider>
+    );
+  });
+
+  it('light theme', () => {
+    const Child = () => {
+      const themeConfig = useTheme();
+      expect(themeConfig.theme).toBe('light');
+      expect(themeConfig.defaultColor).toBe('#4C96FF');
+      return <div />;
+    };
+    render(
+      <ChartProvider theme="light">
+        <Child />
+      </ChartProvider>
+    );
+  });
+
+  it('dark theme', () => {
+    const Child = () => {
+      const themeConfig = useTheme();
+      expect(themeConfig.theme).toBe('dark');
+      expect(themeConfig.defaultColor).toBe('#4D97FF');
+      return <div />;
+    };
+    render(
+      <ChartProvider theme="dark">
+        <Child />
+      </ChartProvider>
+    );
+  });
+
+  it('custom theme config', () => {
+    const Child = () => {
+      const themeConfig = useTheme();
+      expect(themeConfig.theme).toBe('custom-theme');
+      expect(themeConfig.defaultColor).toBe('#ff0000');
+      expect(themeConfig.subColor).toBe('#00ff00');
+      return <div />;
+    };
+    render(
+      <ChartProvider
+        theme={{ theme: 'custom-theme', defaultColor: '#ff0000', subColor: '#00ff00' }}
+      >
+        <Child />
+      </ChartProvider>
+    );
+  });
+});
diff --git a/packages/charts/src/ChartProvider/index.tsx b/packages/charts/src/ChartProvider/index.tsx
@@ -10,7 +10,7 @@ export interface ChartProviderProps extends ChartConsumerProps {
 
 const ChartProvider: React.FC<ChartProviderProps> & {
   ChartContext: typeof ChartContext;
-} = ({ children, theme, ...restProps }) => {
+} = ({ children, theme = 'light', ...restProps }) => {
   return (
     <ChartContext.Provider
       value={{

diff --git a/packages/charts/src/DualAxes/index.tsx b/packages/charts/src/DualAxes/index.tsx
@@ -1,7 +1,9 @@
 import React, { forwardRef } from 'react';
 import type { DualAxesConfig as AntDualAxesConfig } from '@ant-design/charts';
 import { DualAxes as AntDualAxes } from '@ant-design/charts';
+// @ts-ignore
 import type { GeometryColumnOption } from '@antv/g2plot/esm/plots/dual-axes/types';
+// @ts-ignore
 import type { Axis } from '@antv/g2plot/esm/types/axis';
 import { sortByMoment } from '@oceanbase/util';
 import useResizeObserver from 'use-resize-observer';
@@ -12,7 +14,7 @@ import type { Theme } from '../theme';
 
 export interface DualAxesConfig extends Omit<AntDualAxesConfig, 'yAxis'> {
   // 限制双轴图的 yAxis 为对象格式，而非数组格式。官方文档的示例均为对象格式，方便统一用法
-  yAxis: false | Record<string, Axis>;
+  yAxis?: Record<string, Axis>;
   tooltip?: false | Tooltip;
   theme?: Theme;
 }
@@ -71,7 +73,7 @@ const DualAxes: React.FC<DualAxesConfig> = forwardRef(
                 },
               },
       },
-      yAxis: yAxis !== false && {
+      yAxis: yAxis && {
         [yField1]: yAxis?.[yField1] !== false && {
           // 避免超出 Y 轴刻度线
           nice: true,

diff --git a/packages/charts/src/Liquid/index.tsx b/packages/charts/src/Liquid/index.tsx
@@ -1,26 +1,28 @@
 import React, { forwardRef } from 'react';
 import type { LiquidConfig as AntLiquidConfig } from '@ant-design/charts';
 import { Liquid as AntLiquid } from '@ant-design/charts';
+// @ts-ignore
+import type { PathCommand } from '@antv/g-base';
 import { toPercent } from '../util/number';
 import { useTheme } from '../theme';
 import type { Theme } from '../theme';
 
-function rectWithRadius(x: number, y: number, width: number, height: number) {
+function rectWithRadius(x: number, y: number, width: number, height: number): PathCommand[] {
   const GOLDEN_SECTION_RATIO = 0.618;
   const h = height / 2;
   const w = (width / 2) * GOLDEN_SECTION_RATIO;
   const radius = 6;
-  return `
-      M ${x - w + radius} ${y - h}
-      L ${x + w - radius} ${y - h}
-      a ${radius}, ${radius} 0 0 1 ${radius}, ${radius}
-      L ${x + w} ${y + h - radius}
-      a ${radius}, ${radius} 0 0 1 ${-radius}, ${radius}
-      L ${x - w + radius} ${y + h}
-      a ${radius}, ${radius} 0 0 1 ${-radius}, ${-radius}
-      L ${x - w} ${y - h + radius}
-      a ${radius}, ${radius} 0 0 1 ${radius}, ${-radius}
-    `;
+  return [
+    ['M', x - w + radius, y - h],
+    ['L', x + w - radius, y - h],
+    ['a', radius, radius, 0, 0, 1, radius, radius],
+    ['L', x + w, y + h - radius],
+    ['a', radius, radius, 0, 0, 1, -radius, radius],
+    ['L', x - w + radius, y + h],
+    ['a', radius, radius, 0, 0, 1, -radius, -radius],
+    ['L', x - w, y - h + radius],
+    ['a', radius, radius, 0, 0, 1, radius, -radius],
+  ];
 }
 
 export interface LiquidConfig extends AntLiquidConfig {

diff --git a/packages/charts/src/Score/index.tsx b/packages/charts/src/Score/index.tsx
@@ -83,7 +83,10 @@ const Score: React.FC<ScoreConfig> = ({
     color: currentColor,
   };
 
-  let style: React.CSSProperties = {};
+  let style = {
+    width: 0,
+    height: 0,
+  };
   if (size) {
     switch (size) {
       case 'small':
@@ -106,8 +109,8 @@ const Score: React.FC<ScoreConfig> = ({
         break;
       default:
         style = {
-          width: size,
-          height: size,
+          width: size as number,
+          height: size as number,
         };
         break;
     }

diff --git a/packages/charts/src/Stat/index.tsx b/packages/charts/src/Stat/index.tsx
@@ -4,8 +4,7 @@ import { toNumber, toString } from 'lodash';
 import classNames from 'classnames';
 import useResizeObserver from 'use-resize-observer';
 import { sortByNumber } from '@oceanbase/util';
-import type { Plot, AllBaseConfig } from '@ant-design/charts';
-import type { TinyAreaConfig } from '../Tiny/TinyArea';
+import type { TinyAreaConfig, TinyAreaRef } from '../Tiny/TinyArea';
 import TinyArea from '../Tiny/TinyArea';
 import { useTheme } from '../theme';
 import type { Theme } from '../theme';
@@ -189,9 +188,7 @@ const Stat: React.FC<StatConfig> = ({
   );
   const prefixAndSuffixFontSize = valueFontSize * fontSizeReductionFactor(valueFontSize);
 
-  const chartRef = useRef<{
-    getChart: () => Plot<AllBaseConfig>;
-  }>();
+  const chartRef = useRef<TinyAreaRef>();
   // 图表占据一半高度
   const chartHeight = containerHeight * chartHeightPercent;
 
@@ -287,7 +284,11 @@ const Stat: React.FC<StatConfig> = ({
       </div>
       {containerHeight > 0 && hasChart && (
         <div className={`${prefixCls}-chart`}>
-          <TinyArea {...chartConfig} ref={chartRef} />
+          <TinyArea
+            {...chartConfig}
+            // @ts-ignore
+            ref={chartRef}
+          />
         </div>
       )}
     </div>

diff --git a/packages/charts/src/Tiny/TinyArea.tsx b/packages/charts/src/Tiny/TinyArea.tsx
@@ -1,14 +1,19 @@
 import React, { forwardRef } from 'react';
 import type { TinyAreaConfig as AntTinyAreaConfig } from '@ant-design/charts';
 import { TinyArea as AntTinyArea } from '@ant-design/charts';
+import type { Plot, AllBaseConfig } from '@ant-design/charts';
 import { useTheme } from '../theme';
 import type { Theme } from '../theme';
 
+export interface TinyAreaRef {
+  getChart: () => Plot<AllBaseConfig>;
+}
+
 export interface TinyAreaConfig extends AntTinyAreaConfig {
   theme?: Theme;
 }
 
-const TinyArea: React.FC<TinyAreaConfig> = forwardRef(
+const TinyArea: React.FC<TinyAreaConfig> = forwardRef<TinyAreaRef, TinyAreaConfig>(
   ({ height = 60, color, line, point, areaStyle, theme, ...restConfig }, ref) => {
     const themeConfig = useTheme(theme);
 

diff --git a/packages/charts/src/Tiny/TinyColumn.tsx b/packages/charts/src/Tiny/TinyColumn.tsx
@@ -1,11 +1,16 @@
 import React, { forwardRef } from 'react';
 import type { TinyColumnConfig as AntTinyColumnConfig } from '@ant-design/charts';
 import { TinyColumn as AntTinyColumn } from '@ant-design/charts';
+// @ts-ignore
+import type { Label } from '@antv/g2plot/esm/types/label';
 import { useTheme } from '../theme';
 import type { Theme } from '../theme';
 
 export interface TinyColumnConfig extends AntTinyColumnConfig {
   theme?: Theme;
+  label?: Label;
+  maxColumnWidth?: number;
+  minColumnWidth?: number;
 }
 
 const TinyColumn: React.FC<TinyColumnConfig> = forwardRef(

diff --git a/tests/setupTests.ts b/tests/setupTests.ts
@@ -19,6 +19,10 @@ jest.mock('react', () => ({
 
 jest.setTimeout(60000);
 
+if (typeof window.URL.createObjectURL === 'undefined') {
+  window.URL.createObjectURL = jest.fn();
+}
+
 /* eslint-disable global-require */
 if (typeof window !== 'undefined') {
   // ref: https://github.com/ant-design/ant-design/issues/18774