From 7474d278c6f7c28bfbe0559104d7f7320f54c585 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B2=AB=E5=90=9B?= Date: Mon, 19 Dec 2022 11:23:24 +0800 Subject: [PATCH] =?UTF-8?q?test:=20=E8=A1=A5=E5=85=85=E7=B4=A7=E5=87=91?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../unit/facet/layout/col-node-width-spec.ts | 191 +++++++++++------- 1 file changed, 114 insertions(+), 77 deletions(-) diff --git a/packages/s2-core/__tests__/unit/facet/layout/col-node-width-spec.ts b/packages/s2-core/__tests__/unit/facet/layout/col-node-width-spec.ts index 8ba6da158d..49217dcd9f 100644 --- a/packages/s2-core/__tests__/unit/facet/layout/col-node-width-spec.ts +++ b/packages/s2-core/__tests__/unit/facet/layout/col-node-width-spec.ts @@ -1,6 +1,7 @@ import * as mockDataConfig from 'tests/data/simple-data.json'; +import * as mockTableDataConfig from 'tests/data/simple-table-data.json'; import { getContainer } from 'tests/util/helpers'; -import { PivotSheet } from '@/sheet-type'; +import { PivotSheet, TableSheet } from '@/sheet-type'; import type { S2Options } from '@/common'; const s2options: S2Options = { @@ -8,97 +9,133 @@ const s2options: S2Options = { height: 600, }; -describe('Col width Test in grid mode', () => { - let s2: PivotSheet; - beforeEach(() => { - s2 = new PivotSheet( - getContainer(), - { - ...mockDataConfig, - data: [ - { - province: '浙江', - city: '义乌', - type: '笔', - // long text - price: 123456789, - cost: 2, - }, - ], - }, - s2options, - ); - s2.render(); - }); +describe('Col width Test', () => { + describe('Grid Mode', () => { + let s2: PivotSheet; + beforeEach(() => { + s2 = new PivotSheet( + getContainer(), + { + ...mockDataConfig, + data: [ + { + province: '浙江', + city: '义乌', + type: '笔', + // long text + price: 123456789, + cost: 2, + }, + ], + }, + s2options, + ); + s2.render(); + }); - test('get correct width in layoutWidthType adaptive mode', () => { - const { colLeafNodes } = s2.facet.layoutResult; - expect(colLeafNodes[0].width).toBe(200); - }); + test('get correct width in layoutWidthType adaptive mode', () => { + const { colLeafNodes } = s2.facet.layoutResult; + expect(colLeafNodes[0].width).toBe(200); + }); - test('get correct width in layoutWidthType adaptive mode when enable seriesnumber', () => { - s2.setOptions({ - showSeriesNumber: true, + test('get correct width in layoutWidthType adaptive mode when enable seriesnumber', () => { + s2.setOptions({ + showSeriesNumber: true, + }); + s2.render(); + const { colLeafNodes } = s2.facet.layoutResult; + expect(colLeafNodes[0].width).toBe(180); }); - s2.render(); - const { colLeafNodes } = s2.facet.layoutResult; - expect(colLeafNodes[0].width).toBe(180); - }); - test('get correct width in layoutWidthType adaptive tree mode', () => { - s2.setOptions({ - hierarchyType: 'tree', + test('get correct width in layoutWidthType adaptive tree mode', () => { + s2.setOptions({ + hierarchyType: 'tree', + }); + s2.render(); + const { colLeafNodes } = s2.facet.layoutResult; + expect(Math.round(colLeafNodes[0].width)).toBe(339); }); - s2.render(); - const { colLeafNodes } = s2.facet.layoutResult; - expect(Math.round(colLeafNodes[0].width)).toBe(339); - }); - test('get correct width in layoutWidthType adaptive tree mode when enable seriesnumber', () => { - s2.setOptions({ - hierarchyType: 'tree', - showSeriesNumber: true, + test('get correct width in layoutWidthType adaptive tree mode when enable seriesnumber', () => { + s2.setOptions({ + hierarchyType: 'tree', + showSeriesNumber: true, + }); + s2.render(); + const { colLeafNodes } = s2.facet.layoutResult; + expect(Math.round(colLeafNodes[0].width)).toBe(299); }); - s2.render(); - const { colLeafNodes } = s2.facet.layoutResult; - expect(Math.round(colLeafNodes[0].width)).toBe(299); - }); - test('get correct width in layoutWidthType compact mode', () => { - s2.setOptions({ - style: { - layoutWidthType: 'compact', - }, + test('get correct width in layoutWidthType compact mode', () => { + s2.setOptions({ + style: { + layoutWidthType: 'compact', + }, + }); + s2.render(); + + // 无 formatter + const { colLeafNodes } = s2.facet.layoutResult; + expect(Math.round(colLeafNodes[0].width)).toBe(86); }); - s2.render(); - // 无 formatter - const { colLeafNodes } = s2.facet.layoutResult; - expect(Math.round(colLeafNodes[0].width)).toBe(86); + test('get correct width in layoutWidthType compact mode when apply fomatter', () => { + s2.setDataCfg({ + fields: undefined, + data: undefined, + meta: [ + { + field: 'price', + formatter: (v: number) => { + return `${(v / 1000000).toFixed(0)}百万`; + }, + }, + ], + }); + s2.setOptions({ + style: { + layoutWidthType: 'compact', + }, + }); + s2.render(); + + // 有formatter + const { colLeafNodes } = s2.facet.layoutResult; + expect(Math.round(colLeafNodes[0].width)).toBe(62); + }); }); - test('get correct width in layoutWidthType compact mode when apply fomatter', () => { - s2.setDataCfg({ - fields: undefined, - data: undefined, - meta: [ + describe('Table Mode', () => { + let s2: TableSheet; + beforeEach(() => { + s2 = new TableSheet( + getContainer(), { - field: 'price', - formatter: (v: number) => { - return `${(v / 1000000).toFixed(0)}百万`; - }, + ...mockTableDataConfig, + meta: [ + { + field: 'cost', + formatter: (s) => `我是一个很长的格式化标签${s}`, + }, + ], }, - ], - }); - s2.setOptions({ - style: { - layoutWidthType: 'compact', - }, + s2options, + ); + s2.render(); }); - s2.render(); - // 有formatter - const { colLeafNodes } = s2.facet.layoutResult; - expect(Math.round(colLeafNodes[0].width)).toBe(62); + test('get correct width in layoutWidthType compact mode', () => { + s2.setOptions({ + style: { + layoutWidthType: 'compact', + }, + }); + s2.render(); + + const { colLeafNodes } = s2.facet.layoutResult; + + expect(Math.round(colLeafNodes[0].width)).toBe(47); // 列头标签更长 + expect(Math.round(colLeafNodes[1].width)).toBe(168); // 表身标签更长（格式化） + }); }); });