Skip to content

Commit

Permalink
feat: 增加角头和序号列的交互能力 (#2571)
Browse files Browse the repository at this point in the history 
* feat: 增加角头和序号列的交互能力

* test: 增加单测

* test: 修复单测

* docs: 完善文档

* test: 修复单测

* test: 更新快照

* test: 修复测试

* chore: 修复 g-devtool 无法允许的问题

* docs: 增加调试说明

* feat: 重命名
  • Loading branch information
@lijinke666
lijinke666 authored Mar 8, 2024
1 parent db039d0 commit fcb77cc
Show file tree
Hide file tree
Showing 37 changed files with 726 additions and 306 deletions.
15 changes: 15 additions & 0 deletions packages/s2-core/__tests__/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
### 调试单测

如果你想查看单测的运行结果，除了常规的 `pnpm core:test` 和 `pnpm react:test` 来运行测试之外，还可以 `可视化的调试单测（基于 jest-electron)`, 可以更快的发现单测的问题。

1. 选择单测

命令行运行 `pnpm core:start` 或者 `pnpm react:start`

<img alt="preview" height="600" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*g52KT5CybhYAAAAAAAAAAAAADmJ7AQ/original" />

2. 查看结果

因为本质上就是一个浏览器，如果单测结果不符合预期，可以正常打断点进行调试，快速分析原因。

<img alt="preview" height="600" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*E71uSYmhz9cAAAAAAAAAAAAADmJ7AQ/original" />
8 changes: 4 additions & 4 deletions ...es/s2-core/__tests__/spreadsheet/__snapshots__/spread-sheet-facet-layout-api-spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,7 @@ Array [
},
Object {
"field": "",
"id": "",
"id": "1",
"value": "1",
},
Object {
Expand Down Expand Up @@ -430,7 +430,7 @@ Array [
]
`;

exports[`Facet Layout API Tests PivotSheet CornerCell #getCornerCell()s 1`] = `
exports[`Facet Layout API Tests PivotSheet CornerCell #getCornerCells() 1`] = `
Array [
Object {
"field": "province",
Expand Down Expand Up @@ -694,7 +694,7 @@ exports[`Facet Layout API Tests PivotSheet SeriesNumberCell #getSeriesNumberCell
Array [
Object {
"field": "",
"id": "",
"id": "1",
"value": "1",
},
]
Expand All @@ -704,7 +704,7 @@ exports[`Facet Layout API Tests PivotSheet SeriesNumberCell #getSeriesNumberNode
Array [
Object {
"field": "",
"id": "",
"id": "1",
"value": "1",
},
]
Expand Down
15 changes: 12 additions & 3 deletions packages/s2-core/__tests__/spreadsheet/corner-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,10 @@ describe('PivotSheet Corner Tests', () => {

const getCellSpy = jest.spyOn(s2, 'getCell').mockImplementation(() => {
return {
getMeta: () => node,
getMeta: () => ({
...node,
cornerType: CornerNodeType.Row,
}),
} as unknown as S2CellType;
});
const selected = jest.fn();
Expand Down Expand Up @@ -286,7 +289,10 @@ describe('PivotSheet Corner Tests', () => {

jest.spyOn(s2, 'getCell').mockImplementationOnce(() => {
return {
getMeta: () => node,
getMeta: () => ({
...node,
cornerType: CornerNodeType.Row,
}),
} as unknown as S2CellType;
});
const selected = jest.fn();
Expand All @@ -308,7 +314,10 @@ describe('PivotSheet Corner Tests', () => {
jest.spyOn(s2, 'showTooltipWithInfo').mockImplementationOnce(() => {});
jest.spyOn(s2, 'getCell').mockImplementationOnce(() => {
return {
getMeta: () => node,
getMeta: () => ({
...node,
cornerType: CornerNodeType.Row,
}),
} as unknown as S2CellType;
});

Expand Down
4 changes: 2 additions & 2 deletions packages/s2-core/__tests__/spreadsheet/interaction-brush-selection-scroll-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ describe('PivotSheet Brush Selection Scroll Tests', () => {
);

await s2.render();
await sleep(20); // wait for anthor loop;
await sleep(500); // wait for anthor loop;

const rowCell = s2.facet.getRowCells()[0];

Expand All @@ -245,7 +245,7 @@ describe('PivotSheet Brush Selection Scroll Tests', () => {
} as any);

await emitBrushEvent(s2, 200, 200);
await sleep(500);
await sleep(1000);

expect(s2.facet.getScrollOffset().scrollY).toBeGreaterThan(0);
expect(s2.interaction.getCells()).not.toBeEmpty();
Expand Down
122 changes: 95 additions & 27 deletions packages/s2-core/__tests__/spreadsheet/interaction-corner-click-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,12 @@ import {
createPivotSheet,
getContainer,
} from 'tests/util/helpers';
import { customRowGridSimpleFields } from '../data/custom-grid-simple-fields';
import {
customColGridSimpleFields,
customRowGridSimpleFields,
} from '../data/custom-grid-simple-fields';
import { CustomGridData } from '../data/data-custom-grid';
import { S2Event } from '@/common/constant';
import { S2Event, SERIES_NUMBER_FIELD } from '@/common/constant';
import { CornerNodeType, type S2Options } from '@/common/interface';
import type { GEvent, HierarchyType, S2DataConfig } from '@/index';
import { PivotSheet, SpreadSheet } from '@/sheet-type';
Expand All @@ -23,12 +26,12 @@ describe('Interaction Corner Cell Click Tests', () => {
});

test.each(['grid', 'tree'] as HierarchyType[])(
'should not selected row cell when col corner cell clicked for %s mode',
'should selected row cell when row corner cell clicked for %s mode',
async (hierarchyType) => {
jest.spyOn(SpreadSheet.prototype, 'getCell').mockImplementationOnce(
() =>
createMockCellInfo('testId', {
cornerType: CornerNodeType.Col,
createMockCellInfo('city', {
cornerType: CornerNodeType.Row,
}).mockCell,
);

Expand All @@ -44,22 +47,30 @@ describe('Interaction Corner Cell Click Tests', () => {

s2.emit(S2Event.CORNER_CELL_CLICK, {} as unknown as GEvent);

expect(reset).toHaveBeenCalledTimes(1);
expect(s2.interaction.isSelectedState()).toBeFalsy();
expect(reset).not.toHaveBeenCalled();
expect(s2.interaction.getActiveCells()).toHaveLength(
s2.isHierarchyTreeType() ? 3 : 2,
);
expect(s2.interaction.isSelectedState()).toBeTruthy();
},
);

test.each(['grid', 'tree'] as HierarchyType[])(
'should selected row cell when row corner cell clicked for %s mode',
'should selected custom row cell when row corner cell clicked for %s mode',
async (hierarchyType) => {
jest.spyOn(SpreadSheet.prototype, 'getCell').mockImplementationOnce(
() =>
createMockCellInfo('city', {
createMockCellInfo('a-1-1', {
cornerType: CornerNodeType.Row,
}).mockCell,
);

s2 = createPivotSheet({
const customRowDataCfg: S2DataConfig = {
data: CustomGridData,
fields: customRowGridSimpleFields,
};

s2 = new PivotSheet(getContainer(), customRowDataCfg, {
...s2Options,
hierarchyType,
});
Expand All @@ -71,27 +82,65 @@ describe('Interaction Corner Cell Click Tests', () => {

s2.emit(S2Event.CORNER_CELL_CLICK, {} as unknown as GEvent);

const gridFields = ['a-1-1', 'a-1-2'];
const treeFields = [
'a-1',
'a-1-1',
'measure-1',
'measure-2',
'a-1-2',
'a-2',
];

expect(reset).not.toHaveBeenCalled();
expect(s2.interaction.getActiveCells()).toHaveLength(
s2.isHierarchyTreeType() ? 3 : 2,
expect(
s2.interaction.getActiveCells().map((cell) => cell.getMeta().field),
).toEqual(s2.isHierarchyTreeType() ? treeFields : gridFields);
expect(s2.interaction.isSelectedState()).toBeTruthy();
},
);

test.each(['grid', 'tree'] as HierarchyType[])(
'should selected col cell when col corner cell clicked for %s mode',
async (hierarchyType) => {
jest.spyOn(SpreadSheet.prototype, 'getCell').mockImplementationOnce(
() =>
createMockCellInfo('type', {
cornerType: CornerNodeType.Col,
}).mockCell,
);

s2 = createPivotSheet({
...s2Options,
hierarchyType,
});
await s2.render();

const reset = jest
.spyOn(s2.interaction, 'reset')
.mockImplementationOnce(() => {});

s2.emit(S2Event.CORNER_CELL_CLICK, {} as unknown as GEvent);

expect(reset).not.toHaveBeenCalled();
expect(s2.interaction.getActiveCells()).toHaveLength(1);
expect(s2.interaction.isSelectedState()).toBeTruthy();
},
);

test.each(['grid', 'tree'] as HierarchyType[])(
'should selected custom row cell when row corner cell clicked for %s mode',
'should selected custom col cell when row corner cell clicked for %s mode',
async (hierarchyType) => {
jest.spyOn(SpreadSheet.prototype, 'getCell').mockImplementationOnce(
() =>
createMockCellInfo('a-1-1', {
cornerType: CornerNodeType.Row,
createMockCellInfo('a-1', {
cornerType: CornerNodeType.Col,
}).mockCell,
);

const customRowDataCfg: S2DataConfig = {
data: CustomGridData,
fields: customRowGridSimpleFields,
fields: customColGridSimpleFields,
};

s2 = new PivotSheet(getContainer(), customRowDataCfg, {
Expand All @@ -106,20 +155,39 @@ describe('Interaction Corner Cell Click Tests', () => {

s2.emit(S2Event.CORNER_CELL_CLICK, {} as unknown as GEvent);

const gridFields = ['a-1-1', 'a-1-2'];
const treeFields = [
'a-1',
'a-1-1',
'measure-1',
'measure-2',
'a-1-2',
'a-2',
];

expect(reset).not.toHaveBeenCalled();
expect(
s2.interaction.getActiveCells().map((cell) => cell.getMeta().field),
).toEqual(s2.isHierarchyTreeType() ? treeFields : gridFields);
).toEqual(['a-1', 'a-2']);
expect(s2.interaction.isSelectedState()).toBeTruthy();
},
);

test.each(['grid', 'tree'] as HierarchyType[])(
'should selected series cell when series corner cell clicked for %s mode',
async (hierarchyType) => {
jest.spyOn(SpreadSheet.prototype, 'getCell').mockImplementationOnce(
() =>
createMockCellInfo(SERIES_NUMBER_FIELD, {
cornerType: CornerNodeType.Series,
}).mockCell,
);

s2 = createPivotSheet({
...s2Options,
seriesNumber: { enable: true },
hierarchyType,
});
await s2.render();

const reset = jest
.spyOn(s2.interaction, 'reset')
.mockImplementationOnce(() => {});

s2.emit(S2Event.CORNER_CELL_CLICK, {} as unknown as GEvent);

expect(reset).not.toHaveBeenCalled();
expect(s2.interaction.getActiveCells()).toHaveLength(1);
expect(s2.interaction.isSelectedState()).toBeTruthy();
},
);
Expand Down
Loading

0 comments on commit fcb77cc

Please sign in to comment.