test: 增加测试

antvis · Nov 7, 2023 · 1847aba · 1847aba
1 parent a9c4901
commit 1847aba
Show file tree

Hide file tree

Showing 9 changed files with 3,016 additions and 27 deletions.
diff --git a/packages/s2-core/__tests__/data/data-multi-line-text.ts b/packages/s2-core/__tests__/data/data-multi-line-text.ts
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap
diff --git a/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts b/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts
@@ -0,0 +1,215 @@
+import { getContainer } from 'tests/util/helpers';
+import { PivotSheet, type SpreadSheet } from '../../src';
+import type { DefaultCellTheme, S2CellType, S2Options } from '../../src/common';
+import { MultiLineTextDataCfg } from '../data/data-multi-line-text';
+
+const s2Options: S2Options = {
+  width: 300,
+  height: 400,
+  showSeriesNumber: true,
+};
+
+describe('SpreadSheet Multi Line Text Tests', () => {
+  let s2: SpreadSheet;
+
+  const mapCells = (cells: S2CellType[]) => {
+    return cells.map((cell) => {
+      const meta = cell.getMeta();
+
+      return {
+        actualText: cell.getActualText(),
+        originalText: cell.getOriginalText(),
+        actualTextWidth: Math.floor(cell.getMultiLineActualTextWidth()),
+        actualTextHeight: Math.floor(cell.getMultiLineActualTextHeight()),
+        multiLineActualTexts: cell.getMultiLineActualTexts(),
+        width: meta.width,
+        height: meta.height,
+      };
+    });
+  };
+
+  const updateTheme = (maxLines: number) => {
+    const cellTheme: DefaultCellTheme = {
+      text: {
+        maxLines,
+      },
+      bolderText: {
+        maxLines,
+      },
+      measureText: {
+        maxLines,
+      },
+    };
+
+    s2.setTheme({
+      seriesNumberCell: cellTheme,
+      colCell: cellTheme,
+      cornerCell: cellTheme,
+      rowCell: cellTheme,
+      dataCell: cellTheme,
+    });
+  };
+
+  const getCells = () => [
+    s2.facet.getCornerCells(),
+    s2.facet.getSeriesNumberCells(),
+    s2.facet.getColCells(),
+    s2.facet.getRowCells(),
+    s2.facet.getDataCells(),
+  ];
+
+  beforeEach(async () => {
+    s2 = new PivotSheet(getContainer(), MultiLineTextDataCfg, s2Options);
+    await s2.render();
+  });
+
+  afterEach(() => {
+    s2.destroy();
+  });
+
+  test('should default render two line text', () => {
+    getCells().forEach((cells) => {
+      expect(mapCells(cells)).toMatchSnapshot();
+    });
+  });
+
+  test('should custom two max text lines', async () => {
+    updateTheme(2);
+    await s2.render(false);
+
+    getCells().forEach((cells) => {
+      expect(mapCells(cells)).toMatchSnapshot();
+    });
+  });
+
+  test('should custom three max text lines', async () => {
+    updateTheme(3);
+    await s2.render(false);
+
+    getCells().forEach((cells) => {
+      expect(mapCells(cells)).toMatchSnapshot();
+    });
+  });
+
+  test('should custom text overflow text', async () => {
+    const cellTheme: DefaultCellTheme = {
+      text: {
+        textOverflow: '@@@',
+        maxLines: 1,
+      },
+      bolderText: {
+        textOverflow: '我是省略号',
+        maxLines: 1,
+      },
+      measureText: {
+        textOverflow: '😸',
+        maxLines: 1,
+      },
+    };
+
+    s2.setTheme({
+      seriesNumberCell: cellTheme,
+      colCell: cellTheme,
+      cornerCell: cellTheme,
+      rowCell: cellTheme,
+      dataCell: cellTheme,
+    });
+    await s2.render(false);
+
+    getCells().forEach((cells) => {
+      expect(mapCells(cells)).toMatchSnapshot();
+    });
+  });
+
+  test('should not render word wrap text', async () => {
+    const cellTheme: DefaultCellTheme = {
+      text: {
+        wordWrap: false,
+      },
+      bolderText: {
+        wordWrap: false,
+      },
+      measureText: {
+        wordWrap: false,
+      },
+    };
+
+    s2.setTheme({
+      seriesNumberCell: cellTheme,
+      colCell: cellTheme,
+      cornerCell: cellTheme,
+      rowCell: cellTheme,
+      dataCell: cellTheme,
+    });
+    await s2.render(false);
+
+    getCells().forEach((cells) => {
+      expect(mapCells(cells)).toMatchSnapshot();
+
+      // wordWrap 关闭时, 不会渲染省略号
+      cells.forEach((cell) => {
+        expect(cell.getActualText()).not.toContain('...');
+      });
+    });
+  });
+
+  test('should force adaptive adjust cell height if custom cell style less than actual text height', async () => {
+    s2.setOptions({
+      style: {
+        rowCell: {
+          height: 20,
+          heightByField: {
+            city: 10,
+          },
+        },
+        colCell: {
+          height: 20,
+        },
+        dataCell: {
+          height: 20,
+        },
+      },
+    });
+
+    updateTheme(2);
+    await s2.render(false);
+
+    getCells().forEach((cells) => {
+      expect(mapCells(cells)).toMatchSnapshot();
+    });
+  });
+
+  test('should not adaptive adjust cell height if custom cell style more than actual text height', async () => {
+    const CUSTOM_CELL_HEIGHT = 70;
+
+    s2.setOptions({
+      style: {
+        rowCell: {
+          height: CUSTOM_CELL_HEIGHT,
+        },
+        colCell: {
+          height: CUSTOM_CELL_HEIGHT,
+        },
+        dataCell: {
+          height: CUSTOM_CELL_HEIGHT,
+        },
+      },
+    });
+
+    updateTheme(2);
+    await s2.render(false);
+
+    [
+      s2.facet.getCornerCells(),
+      s2.facet.getColLeafCells(),
+      s2.facet.getRowLeafCells(),
+      s2.facet.getDataCells(),
+    ].forEach((cells) => {
+      expect(mapCells(cells)).toMatchSnapshot();
+
+      cells.forEach((cell) => {
+        expect(cell.getMeta().height).toEqual(CUSTOM_CELL_HEIGHT);
+      });
+    });
+  });
+});
diff --git a/packages/s2-core/src/cell/corner-cell.ts b/packages/s2-core/src/cell/corner-cell.ts
@@ -269,7 +269,7 @@ export class CornerCell extends HeaderCell {
 
     return {
       ...textStyle,
-      // 角头因为要折行，所以在都是按照middle来计算，这里写死，不然用户配置了baseline，会导致计算错误
+      // 角头因为要折行，所以在都是按照 middle 来计算，这里写死，不然用户配置了 baseline，会导致计算错误
       textBaseline: 'middle',
     };
   }

diff --git a/packages/s2-core/src/cell/data-cell.ts b/packages/s2-core/src/cell/data-cell.ts
@@ -251,9 +251,8 @@ export class DataCell extends BaseCell<ViewMeta> {
 
   protected getTextStyle(): TextTheme {
     const { isTotals } = this.meta;
-    const textStyle = isTotals
-      ? this.theme.dataCell?.bolderText
-      : this.theme.dataCell?.text;
+    const { dataCell } = this.theme;
+    const textStyle = isTotals ? dataCell?.bolderText : dataCell?.text;
 
     return this.getContainConditionMappingResultTextStyle(textStyle);
   }

diff --git a/packages/s2-core/src/common/constant/options.ts b/packages/s2-core/src/common/constant/options.ts
@@ -23,7 +23,6 @@ export const DEFAULT_TREE_ROW_CELL_WIDTH = 120;
 export const DEFAULT_STYLE: S2Style = {
   layoutWidthType: LayoutWidthTypes.Adaptive,
   rowCell: {
-    // width: 120,
     showTreeLeafNodeAlignDot: false,
     widthByField: null,
     heightByField: null,

diff --git a/packages/s2-core/src/sheet-type/spread-sheet.ts b/packages/s2-core/src/sheet-type/spread-sheet.ts
@@ -53,7 +53,6 @@ import type { BaseDataSet } from '../data-set';
 import type { BaseFacet } from '../facet';
 import type { Node } from '../facet/layout/node';
 import { RootInteraction } from '../interaction/root';
-import { getTheme } from '../theme';
 import { HdAdapter } from '../ui/hd-adapter';
 import { BaseTooltip } from '../ui/tooltip';
 import { removeOffscreenCanvas } from '../utils/canvas';
@@ -67,6 +66,7 @@ import {
 } from '../utils/merge';
 import { injectThemeVars } from '../utils/theme';
 import { getTooltipData, getTooltipOptions } from '../utils/tooltip';
+import { getTheme } from '../theme';
 
 /**
  * 关闭 CSS 解析的开关，可以提升首屏性能,

diff --git a/packages/s2-core/src/theme/index.ts b/packages/s2-core/src/theme/index.ts
@@ -28,7 +28,7 @@ export const getTheme = (
 
   const getHeaderCellTextOverflow = (): TextTheme => ({
     wordWrap: true,
-    maxLines: 2,
+    maxLines: 1,
     textOverflow: 'ellipsis',
   });
 

diff --git a/packages/s2-react/playground/config.ts b/packages/s2-react/playground/config.ts
@@ -267,26 +267,7 @@ export const s2Options: SheetComponentOptions = {
       ],
     },
   },
-  style: {
-    // rowCell: {
-    //   width: 100,
-    //   height: 50,
-    // },
-    colCell: {
-      width(node) {
-        if (node?.colIndex === 0) {
-          return 40;
-        }
-
-        return null;
-      },
-      // height: 60,
-      hideValue: false,
-    },
-    // dataCell: {
-    //   height: 50,
-    // },
-  },
+  style: {},
 };
 
 export const sliderOptions: SliderSingleProps = {