@kdcloudjs/table 1.0.2 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/@kdcloudjs/table.css +1 -1
- package/dist/@kdcloudjs/table.js +271 -187
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +7 -7
- package/dist/@kdcloudjs/table.min.js.map +1 -1
- package/es/table/base/calculations.js +1 -1
- package/es/table/base/empty.js +2 -2
- package/es/table/base/header.js +7 -11
- package/es/table/base/html-table.js +13 -22
- package/es/table/base/styles.d.ts +10 -0
- package/es/table/base/styles.js +13 -3
- package/es/table/common-views.js +2 -2
- package/es/table/pipeline/features/columnDrag.js +62 -21
- package/es/table/pipeline/features/contextMenu.js +37 -22
- package/es/table/pipeline/features/multiSelect.js +85 -79
- package/es/table/pipeline/features/rowDetail.js +2 -1
- package/es/table/pipeline/features/rowGrouping.js +2 -1
- package/es/table/pipeline/features/treeMode.js +3 -2
- package/es/table/pipeline/pipeline.d.ts +4 -0
- package/es/table/pipeline/pipeline.js +17 -0
- package/es/table/pivot/pivot-utils/convert-utils.js +4 -2
- package/lib/table/base/calculations.js +1 -1
- package/lib/table/base/empty.js +2 -2
- package/lib/table/base/header.js +8 -11
- package/lib/table/base/html-table.js +14 -22
- package/lib/table/base/styles.d.ts +10 -0
- package/lib/table/base/styles.js +13 -3
- package/lib/table/common-views.js +1 -1
- package/lib/table/pipeline/features/columnDrag.js +63 -22
- package/lib/table/pipeline/features/contextMenu.js +37 -22
- package/lib/table/pipeline/features/multiSelect.js +81 -75
- package/lib/table/pipeline/features/rowDetail.js +3 -1
- package/lib/table/pipeline/features/rowGrouping.js +3 -1
- package/lib/table/pipeline/features/treeMode.js +4 -2
- package/lib/table/pipeline/pipeline.d.ts +4 -0
- package/lib/table/pipeline/pipeline.js +17 -0
- package/lib/table/pivot/pivot-utils/convert-utils.js +6 -2
- package/package.json +1 -1
- package/es/table/pipeline/features/__test__/multiSelect.test.d.ts +0 -1
- package/es/table/pipeline/features/__test__/multiSelect.test.js +0 -152
- package/es/table/pipeline/features/__test__/rowDetail.test.d.ts +0 -1
- package/es/table/pipeline/features/__test__/rowDetail.test.js +0 -223
- package/es/table/pipeline/features/__test__/rowGrouping.test.d.ts +0 -1
- package/es/table/pipeline/features/__test__/rowGrouping.test.js +0 -120
- package/es/table/pipeline/features/__test__/singleSelect.test.d.ts +0 -1
- package/es/table/pipeline/features/__test__/singleSelect.test.js +0 -191
- package/es/table/pipeline/features/__test__/sort.test.d.ts +0 -1
- package/es/table/pipeline/features/__test__/sort.test.js +0 -213
- package/es/table/pipeline/features/__test__/tips.test.d.ts +0 -1
- package/es/table/pipeline/features/__test__/tips.test.js +0 -123
- package/es/table/pipeline/features/__test__/treeMode.test.d.ts +0 -1
- package/es/table/pipeline/features/__test__/treeMode.test.js +0 -202
- package/es/table/pipeline/features/filter/__test__/Filter.test.d.ts +0 -1
- package/es/table/pipeline/features/filter/__test__/Filter.test.js +0 -29
- package/lib/table/pipeline/features/__test__/multiSelect.test.d.ts +0 -1
- package/lib/table/pipeline/features/__test__/multiSelect.test.js +0 -163
- package/lib/table/pipeline/features/__test__/rowDetail.test.d.ts +0 -1
- package/lib/table/pipeline/features/__test__/rowDetail.test.js +0 -230
- package/lib/table/pipeline/features/__test__/rowGrouping.test.d.ts +0 -1
- package/lib/table/pipeline/features/__test__/rowGrouping.test.js +0 -129
- package/lib/table/pipeline/features/__test__/singleSelect.test.d.ts +0 -1
- package/lib/table/pipeline/features/__test__/singleSelect.test.js +0 -201
- package/lib/table/pipeline/features/__test__/sort.test.d.ts +0 -1
- package/lib/table/pipeline/features/__test__/sort.test.js +0 -220
- package/lib/table/pipeline/features/__test__/tips.test.d.ts +0 -1
- package/lib/table/pipeline/features/__test__/tips.test.js +0 -133
- package/lib/table/pipeline/features/__test__/treeMode.test.d.ts +0 -1
- package/lib/table/pipeline/features/__test__/treeMode.test.js +0 -206
- package/lib/table/pipeline/features/filter/__test__/Filter.test.d.ts +0 -1
- package/lib/table/pipeline/features/filter/__test__/Filter.test.js +0 -36
|
@@ -1,152 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
2
|
-
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
3
|
-
import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
|
|
4
|
-
|
|
5
|
-
var __rest = this && this.__rest || function (s, e) {
|
|
6
|
-
var t = {};
|
|
7
|
-
|
|
8
|
-
for (var p in s) {
|
|
9
|
-
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
|
|
13
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
14
|
-
}
|
|
15
|
-
return t;
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
import React from 'react';
|
|
19
|
-
import { renderHook, act } from '@testing-library/react-hooks';
|
|
20
|
-
import { mount } from 'enzyme';
|
|
21
|
-
import { multiSelect } from '../multiSelect';
|
|
22
|
-
import { useTablePipeline } from '../../pipeline';
|
|
23
|
-
var NAME = 'multiSelect';
|
|
24
|
-
|
|
25
|
-
var MockCheckbox = function MockCheckbox(_a) {
|
|
26
|
-
var indeterminate = _a.indeterminate,
|
|
27
|
-
props = __rest(_a, ["indeterminate"]);
|
|
28
|
-
|
|
29
|
-
return /*#__PURE__*/React.createElement("input", _extends({
|
|
30
|
-
type: 'checkbox',
|
|
31
|
-
className: 'checkbox'
|
|
32
|
-
}, props));
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
var ROWS = [{
|
|
36
|
-
id: '1'
|
|
37
|
-
}];
|
|
38
|
-
var INPUT_DATA = {
|
|
39
|
-
columns: [],
|
|
40
|
-
dataSource: ROWS
|
|
41
|
-
};
|
|
42
|
-
describe("".concat(NAME), function () {
|
|
43
|
-
it('not set Checkbox', function () {
|
|
44
|
-
var _renderHook = renderHook(function () {
|
|
45
|
-
return useTablePipeline();
|
|
46
|
-
}),
|
|
47
|
-
result = _renderHook.result;
|
|
48
|
-
|
|
49
|
-
var _multiSelect = function _multiSelect() {
|
|
50
|
-
return multiSelect()(result.current);
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
expect(_multiSelect).toThrowError(/Checkbox/);
|
|
54
|
-
});
|
|
55
|
-
it('set require props,test checkboxColumn render, cell change and select all event', function () {
|
|
56
|
-
var _renderHook2 = renderHook(function () {
|
|
57
|
-
return useTablePipeline({
|
|
58
|
-
components: {
|
|
59
|
-
Checkbox: MockCheckbox
|
|
60
|
-
}
|
|
61
|
-
}).input(INPUT_DATA).primaryKey('id');
|
|
62
|
-
}),
|
|
63
|
-
result = _renderHook2.result;
|
|
64
|
-
|
|
65
|
-
multiSelect({
|
|
66
|
-
stopClickEventPropagation: true // 阻止冒泡
|
|
67
|
-
|
|
68
|
-
})(result.current);
|
|
69
|
-
expect(result.current.getColumns().length).toBeGreaterThan(0);
|
|
70
|
-
var checkboxColumn = result.current.getColumns()[0];
|
|
71
|
-
var wrapper = mount(checkboxColumn.render({}, {
|
|
72
|
-
id: '1'
|
|
73
|
-
}, 0)); // 测试复选框行点击onChange
|
|
74
|
-
|
|
75
|
-
act(function () {
|
|
76
|
-
_findInstanceProperty(wrapper).call(wrapper, MockCheckbox).at(0).simulate('change', {
|
|
77
|
-
target: {},
|
|
78
|
-
nativeEvent: {
|
|
79
|
-
stopPropagation: jest.fn()
|
|
80
|
-
}
|
|
81
|
-
});
|
|
82
|
-
});
|
|
83
|
-
expect(result.current.getStateAtKey('multiSelect')).toMatchObject({
|
|
84
|
-
"lastKey": "1",
|
|
85
|
-
"value": ["1"]
|
|
86
|
-
});
|
|
87
|
-
var titleWrapper = mount(checkboxColumn.title); // 测试选择列表头全选
|
|
88
|
-
|
|
89
|
-
act(function () {
|
|
90
|
-
_findInstanceProperty(titleWrapper).call(titleWrapper, MockCheckbox).at(0).simulate('change');
|
|
91
|
-
});
|
|
92
|
-
});
|
|
93
|
-
it('set clickArea=cell, test getCellProps and cell click', function () {
|
|
94
|
-
var _renderHook3 = renderHook(function () {
|
|
95
|
-
return useTablePipeline({
|
|
96
|
-
components: {
|
|
97
|
-
Checkbox: MockCheckbox
|
|
98
|
-
}
|
|
99
|
-
}).input(INPUT_DATA).primaryKey('id');
|
|
100
|
-
}),
|
|
101
|
-
result = _renderHook3.result;
|
|
102
|
-
|
|
103
|
-
multiSelect({
|
|
104
|
-
clickArea: 'cell'
|
|
105
|
-
})(result.current);
|
|
106
|
-
var checkboxColumn = result.current.getColumns()[0]; // 测试getCellProps
|
|
107
|
-
|
|
108
|
-
var cellProps = checkboxColumn.getCellProps('', ROWS[0], 0);
|
|
109
|
-
|
|
110
|
-
if (typeof cellProps.onClick === 'function') {
|
|
111
|
-
act(function () {
|
|
112
|
-
var mockEvent = {};
|
|
113
|
-
cellProps.onClick(mockEvent);
|
|
114
|
-
});
|
|
115
|
-
expect(result.current.getStateAtKey('multiSelect')).toMatchObject({
|
|
116
|
-
"lastKey": "1",
|
|
117
|
-
"value": ["1"]
|
|
118
|
-
});
|
|
119
|
-
}
|
|
120
|
-
});
|
|
121
|
-
it('set clickArea=row, test appendRowPropsGetter fn', function () {
|
|
122
|
-
var _renderHook4 = renderHook(function () {
|
|
123
|
-
return useTablePipeline({
|
|
124
|
-
components: {
|
|
125
|
-
Checkbox: MockCheckbox
|
|
126
|
-
}
|
|
127
|
-
}).input(INPUT_DATA).primaryKey('id');
|
|
128
|
-
}),
|
|
129
|
-
result = _renderHook4.result;
|
|
130
|
-
|
|
131
|
-
var pipeline = multiSelect({
|
|
132
|
-
lastKey: '1',
|
|
133
|
-
clickArea: 'row'
|
|
134
|
-
})(result.current); // 调用 appendRowPropsGetter 设置的函数
|
|
135
|
-
|
|
136
|
-
var props = pipeline.getProps();
|
|
137
|
-
var rowProps = props.getRowProps(ROWS[0], 0);
|
|
138
|
-
|
|
139
|
-
if (rowProps.onClick) {
|
|
140
|
-
act(function () {
|
|
141
|
-
var mockEvent = {
|
|
142
|
-
shiftKey: true
|
|
143
|
-
};
|
|
144
|
-
rowProps.onClick(mockEvent);
|
|
145
|
-
});
|
|
146
|
-
expect(result.current.getStateAtKey('multiSelect')).toMatchObject({
|
|
147
|
-
"lastKey": "1",
|
|
148
|
-
"value": ["1"]
|
|
149
|
-
});
|
|
150
|
-
}
|
|
151
|
-
});
|
|
152
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,223 +0,0 @@
|
|
|
1
|
-
import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
|
|
2
|
-
import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
|
|
3
|
-
import { rowDetail } from '../rowDetail';
|
|
4
|
-
import { useTablePipeline } from '../../pipeline';
|
|
5
|
-
import { mount } from 'enzyme';
|
|
6
|
-
import { renderHook } from '@testing-library/react-hooks';
|
|
7
|
-
import { act } from 'react-dom/test-utils';
|
|
8
|
-
var dataSource = [{
|
|
9
|
-
id: '1',
|
|
10
|
-
prov: '湖北省',
|
|
11
|
-
confirm: 54406,
|
|
12
|
-
cure: 4793,
|
|
13
|
-
dead: 1457,
|
|
14
|
-
t: '2020-02-15 19:52:02'
|
|
15
|
-
}, {
|
|
16
|
-
id: '2',
|
|
17
|
-
prov: '广东省',
|
|
18
|
-
confirm: 1294,
|
|
19
|
-
cure: 409,
|
|
20
|
-
dead: 2,
|
|
21
|
-
t: '2020-02-15 19:52:02'
|
|
22
|
-
}, {
|
|
23
|
-
id: '3',
|
|
24
|
-
prov: '河南省',
|
|
25
|
-
confirm: 1212,
|
|
26
|
-
cure: 390,
|
|
27
|
-
dead: 13,
|
|
28
|
-
t: '2020-02-15 19:52:02'
|
|
29
|
-
}, {
|
|
30
|
-
id: '4',
|
|
31
|
-
prov: '浙江省',
|
|
32
|
-
confirm: 1162,
|
|
33
|
-
cure: 428,
|
|
34
|
-
dead: 0,
|
|
35
|
-
t: '2020-02-15 19:52:02'
|
|
36
|
-
}, {
|
|
37
|
-
id: '5',
|
|
38
|
-
prov: '湖南省',
|
|
39
|
-
confirm: 1001,
|
|
40
|
-
cure: 417,
|
|
41
|
-
dead: 2,
|
|
42
|
-
t: '2020-02-15 19:52:02'
|
|
43
|
-
}];
|
|
44
|
-
var columns = [{
|
|
45
|
-
code: 'prov',
|
|
46
|
-
name: '省份',
|
|
47
|
-
width: 150,
|
|
48
|
-
features: {
|
|
49
|
-
sortable: true,
|
|
50
|
-
filterable: true
|
|
51
|
-
}
|
|
52
|
-
}, {
|
|
53
|
-
code: 'confirm',
|
|
54
|
-
name: '确诊',
|
|
55
|
-
width: 100,
|
|
56
|
-
align: 'right',
|
|
57
|
-
features: {
|
|
58
|
-
sortable: true,
|
|
59
|
-
filterable: true
|
|
60
|
-
}
|
|
61
|
-
}, {
|
|
62
|
-
code: 'cure',
|
|
63
|
-
name: '治愈',
|
|
64
|
-
width: 100,
|
|
65
|
-
align: 'right',
|
|
66
|
-
features: {
|
|
67
|
-
sortable: true,
|
|
68
|
-
filterable: true
|
|
69
|
-
}
|
|
70
|
-
}, {
|
|
71
|
-
code: 'dead',
|
|
72
|
-
name: '死亡',
|
|
73
|
-
width: 100,
|
|
74
|
-
align: 'right',
|
|
75
|
-
features: {
|
|
76
|
-
sortable: true,
|
|
77
|
-
filterable: true
|
|
78
|
-
}
|
|
79
|
-
}, {
|
|
80
|
-
code: 't',
|
|
81
|
-
name: '更新时间',
|
|
82
|
-
width: 180,
|
|
83
|
-
features: {
|
|
84
|
-
sortable: true,
|
|
85
|
-
filterable: true
|
|
86
|
-
}
|
|
87
|
-
}];
|
|
88
|
-
describe('rowDetail 单元测试', function () {
|
|
89
|
-
var opt = {
|
|
90
|
-
defaultOpenKeys: ['2'],
|
|
91
|
-
clickArea: 'content',
|
|
92
|
-
hasDetail: function hasDetail(row) {
|
|
93
|
-
var _context;
|
|
94
|
-
|
|
95
|
-
return _includesInstanceProperty(_context = ['1', '2', '3']).call(_context, row.id);
|
|
96
|
-
},
|
|
97
|
-
renderDetail: jest.fn(),
|
|
98
|
-
onChangeOpenKeys: jest.fn()
|
|
99
|
-
};
|
|
100
|
-
it('初始化', function () {
|
|
101
|
-
var _renderHook = renderHook(function () {
|
|
102
|
-
return useTablePipeline({
|
|
103
|
-
primaryKey: 'id'
|
|
104
|
-
}).input({
|
|
105
|
-
dataSource: dataSource,
|
|
106
|
-
columns: columns
|
|
107
|
-
});
|
|
108
|
-
}),
|
|
109
|
-
result = _renderHook.result;
|
|
110
|
-
|
|
111
|
-
var tablePipeline = result.current;
|
|
112
|
-
var newPipeline = rowDetail(opt)(tablePipeline); // 默认有1行展开,所以有6行
|
|
113
|
-
|
|
114
|
-
expect(newPipeline.getDataSource().length).toBe(6);
|
|
115
|
-
});
|
|
116
|
-
it('primaryKey不传', function () {
|
|
117
|
-
var _renderHook2 = renderHook(function () {
|
|
118
|
-
return useTablePipeline().input({
|
|
119
|
-
dataSource: dataSource,
|
|
120
|
-
columns: columns
|
|
121
|
-
});
|
|
122
|
-
}),
|
|
123
|
-
result = _renderHook2.result;
|
|
124
|
-
|
|
125
|
-
var tablePipeline = result.current;
|
|
126
|
-
expect(function () {
|
|
127
|
-
return rowDetail(opt)(tablePipeline);
|
|
128
|
-
}).toThrow(Error);
|
|
129
|
-
});
|
|
130
|
-
it('模拟行点击事件', function () {
|
|
131
|
-
var _renderHook3 = renderHook(function () {
|
|
132
|
-
return useTablePipeline({
|
|
133
|
-
primaryKey: 'id'
|
|
134
|
-
}).input({
|
|
135
|
-
dataSource: dataSource,
|
|
136
|
-
columns: columns
|
|
137
|
-
});
|
|
138
|
-
}),
|
|
139
|
-
result = _renderHook3.result;
|
|
140
|
-
|
|
141
|
-
var tablePipeline = result.current;
|
|
142
|
-
var newPipeline = rowDetail(opt)(tablePipeline);
|
|
143
|
-
var newDataSource = newPipeline.getDataSource();
|
|
144
|
-
var col = newPipeline.getColumns();
|
|
145
|
-
var wrapper = mount(col[0].render('1', newDataSource[0], 0));
|
|
146
|
-
|
|
147
|
-
var div = _findInstanceProperty(wrapper).call(wrapper, 'div').at(0);
|
|
148
|
-
|
|
149
|
-
expect(opt.onChangeOpenKeys).toHaveBeenCalledTimes(0);
|
|
150
|
-
act(function () {
|
|
151
|
-
div.simulate('click');
|
|
152
|
-
});
|
|
153
|
-
expect(opt.onChangeOpenKeys).toHaveBeenCalledTimes(1); // 点击没有展开行的行,不会触发onChange回调
|
|
154
|
-
|
|
155
|
-
var wrapper1 = mount(col[0].render('4', newDataSource[4], 4));
|
|
156
|
-
|
|
157
|
-
var div1 = _findInstanceProperty(wrapper1).call(wrapper1, 'div').at(0);
|
|
158
|
-
|
|
159
|
-
act(function () {
|
|
160
|
-
div1.simulate('click');
|
|
161
|
-
});
|
|
162
|
-
expect(opt.onChangeOpenKeys).toHaveBeenCalledTimes(1);
|
|
163
|
-
});
|
|
164
|
-
it('设置指定列展开', function () {
|
|
165
|
-
var _renderHook4 = renderHook(function () {
|
|
166
|
-
return useTablePipeline({
|
|
167
|
-
primaryKey: 'id'
|
|
168
|
-
}).input({
|
|
169
|
-
dataSource: dataSource,
|
|
170
|
-
columns: columns
|
|
171
|
-
});
|
|
172
|
-
}),
|
|
173
|
-
result = _renderHook4.result;
|
|
174
|
-
|
|
175
|
-
var tablePipeline = result.current;
|
|
176
|
-
opt.expandColumnCode = 'confirm';
|
|
177
|
-
var newPipeline = rowDetail(opt)(tablePipeline);
|
|
178
|
-
var col = newPipeline.getColumns();
|
|
179
|
-
var wrapper = mount(col[1].render('1', newPipeline.getDataSource()[0], 0)); // 不知道为啥是两个
|
|
180
|
-
|
|
181
|
-
expect(_findInstanceProperty(wrapper).call(wrapper, '.expansion-cell').length).toBe(2);
|
|
182
|
-
col[0].render('1', newPipeline.getDataSource()[2], 2);
|
|
183
|
-
expect(opt.renderDetail).toBeCalled();
|
|
184
|
-
var spanRect = col[0].getSpanRect('1', newPipeline.getDataSource()[2], 2);
|
|
185
|
-
expect(spanRect).toEqual({
|
|
186
|
-
top: 2,
|
|
187
|
-
bottom: 3,
|
|
188
|
-
left: 0,
|
|
189
|
-
right: 6
|
|
190
|
-
});
|
|
191
|
-
delete opt.expandColumnCode;
|
|
192
|
-
});
|
|
193
|
-
it('getCellProps 和getSpanRect', function () {
|
|
194
|
-
var _renderHook5 = renderHook(function () {
|
|
195
|
-
return useTablePipeline({
|
|
196
|
-
primaryKey: 'id'
|
|
197
|
-
}).input({
|
|
198
|
-
dataSource: dataSource,
|
|
199
|
-
columns: columns
|
|
200
|
-
});
|
|
201
|
-
}),
|
|
202
|
-
result = _renderHook5.result;
|
|
203
|
-
|
|
204
|
-
var tablePipeline = result.current;
|
|
205
|
-
opt.clickArea = 'cell';
|
|
206
|
-
var newPipeline = rowDetail(opt)(tablePipeline);
|
|
207
|
-
var col = newPipeline.getColumns();
|
|
208
|
-
var cellProps = col[0].getCellProps('1', newPipeline.getDataSource()[0], 0);
|
|
209
|
-
expect(cellProps.style).toEqual({
|
|
210
|
-
cursor: 'pointer'
|
|
211
|
-
});
|
|
212
|
-
cellProps.onClick();
|
|
213
|
-
expect(opt.onChangeOpenKeys).toBeCalled(); // detail 总是成一行
|
|
214
|
-
|
|
215
|
-
var spanRect = col[0].getSpanRect('1', newPipeline.getDataSource()[2], 2);
|
|
216
|
-
expect(spanRect).toEqual({
|
|
217
|
-
top: 2,
|
|
218
|
-
bottom: 3,
|
|
219
|
-
left: 0,
|
|
220
|
-
right: 6
|
|
221
|
-
});
|
|
222
|
-
});
|
|
223
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
|
|
2
|
-
import { rowGrouping } from '../rowGrouping';
|
|
3
|
-
import { useTablePipeline } from '../../pipeline';
|
|
4
|
-
import { mount } from 'enzyme';
|
|
5
|
-
import { renderHook } from '@testing-library/react-hooks';
|
|
6
|
-
var dataSource = [{
|
|
7
|
-
id: 'alibaba',
|
|
8
|
-
groupTitle: '阿里巴巴网络技术有限公司',
|
|
9
|
-
children: [{
|
|
10
|
-
id: '1-1',
|
|
11
|
-
title: '二级标题',
|
|
12
|
-
dept: '消费者事业部-淘宝-UED',
|
|
13
|
-
dest: '云南大理',
|
|
14
|
-
guide: 'Douglas Lee'
|
|
15
|
-
}, {
|
|
16
|
-
id: '1-2',
|
|
17
|
-
title: '二级标题',
|
|
18
|
-
dept: '消费者事业部-淘宝-UED',
|
|
19
|
-
dest: '云南大理',
|
|
20
|
-
guide: 'Douglas Lee'
|
|
21
|
-
}]
|
|
22
|
-
}, {
|
|
23
|
-
id: 'antfin',
|
|
24
|
-
groupTitle: '蚂蚁金服有限公司',
|
|
25
|
-
children: [{
|
|
26
|
-
id: '2-1',
|
|
27
|
-
title: '二级标题',
|
|
28
|
-
dept: '消费者事业部-淘宝-UED',
|
|
29
|
-
dest: '云南大理',
|
|
30
|
-
guide: 'Douglas Lee'
|
|
31
|
-
}, {
|
|
32
|
-
id: '2-2',
|
|
33
|
-
title: '二级标题',
|
|
34
|
-
dept: '消费者事业部-淘宝-UED',
|
|
35
|
-
dest: '云南大理',
|
|
36
|
-
guide: 'Douglas Lee'
|
|
37
|
-
}]
|
|
38
|
-
}, {
|
|
39
|
-
id: 'other',
|
|
40
|
-
groupTitle: 'group without children'
|
|
41
|
-
}];
|
|
42
|
-
var columns = [{
|
|
43
|
-
code: 'title',
|
|
44
|
-
name: '标题',
|
|
45
|
-
width: 200
|
|
46
|
-
}, {
|
|
47
|
-
code: 'dept',
|
|
48
|
-
name: '部门名称',
|
|
49
|
-
width: 180
|
|
50
|
-
}, {
|
|
51
|
-
code: 'dest',
|
|
52
|
-
name: '团建目的地',
|
|
53
|
-
width: 160
|
|
54
|
-
}, {
|
|
55
|
-
code: 'guide',
|
|
56
|
-
name: '当地导游',
|
|
57
|
-
width: 160
|
|
58
|
-
}];
|
|
59
|
-
describe('rowGrouping 单元测试', function () {
|
|
60
|
-
var opts = {
|
|
61
|
-
defaultOpenAll: true,
|
|
62
|
-
onChangeOpenKeys: jest.fn()
|
|
63
|
-
};
|
|
64
|
-
var newPipeline = null;
|
|
65
|
-
beforeEach(function () {
|
|
66
|
-
var _renderHook = renderHook(function () {
|
|
67
|
-
return useTablePipeline({
|
|
68
|
-
primaryKey: 'id'
|
|
69
|
-
}).input({
|
|
70
|
-
dataSource: dataSource,
|
|
71
|
-
columns: columns
|
|
72
|
-
});
|
|
73
|
-
}),
|
|
74
|
-
result = _renderHook.result;
|
|
75
|
-
|
|
76
|
-
var tablePipeline = result.current;
|
|
77
|
-
newPipeline = rowGrouping(opts)(tablePipeline);
|
|
78
|
-
});
|
|
79
|
-
afterEach(function () {
|
|
80
|
-
newPipeline = null;
|
|
81
|
-
opts.onChangeOpenKeys.mockClear();
|
|
82
|
-
});
|
|
83
|
-
it('初始化', function () {
|
|
84
|
-
expect(newPipeline.getDataSource().length).toBe(7);
|
|
85
|
-
});
|
|
86
|
-
it('getCellProps', function () {
|
|
87
|
-
var col = newPipeline.getColumns();
|
|
88
|
-
var cellProps = col[0].getCellProps('阿里巴巴网络技术有限公司', newPipeline.getDataSource()[0], 0);
|
|
89
|
-
expect(cellProps.style).toEqual({
|
|
90
|
-
cursor: 'pointer'
|
|
91
|
-
});
|
|
92
|
-
cellProps.onClick();
|
|
93
|
-
expect(opts.onChangeOpenKeys).toBeCalled(); // 不是分组行没有cellProps
|
|
94
|
-
|
|
95
|
-
var cellProps1 = col[0].getCellProps('阿里巴巴网络技术有限公司', newPipeline.getDataSource()[1], 1);
|
|
96
|
-
expect(cellProps1).toBe(undefined);
|
|
97
|
-
});
|
|
98
|
-
it('getSpanRect', function () {
|
|
99
|
-
var col = newPipeline.getColumns();
|
|
100
|
-
var spanRect = col[0].getSpanRect('阿里巴巴网络技术有限公司', newPipeline.getDataSource()[0], 0);
|
|
101
|
-
expect(spanRect).toEqual({
|
|
102
|
-
top: 0,
|
|
103
|
-
bottom: 1,
|
|
104
|
-
left: 0,
|
|
105
|
-
right: 5
|
|
106
|
-
});
|
|
107
|
-
});
|
|
108
|
-
it('单元格渲染', function () {
|
|
109
|
-
var col = newPipeline.getColumns();
|
|
110
|
-
var wrapper = mount(col[0].render('1', newPipeline.getDataSource()[0], 0));
|
|
111
|
-
expect(_findInstanceProperty(wrapper).call(wrapper, '.expansion-cell').length).toBe(2);
|
|
112
|
-
var wrapper1 = mount(col[0].render('1', newPipeline.getDataSource()[1], 1));
|
|
113
|
-
expect(_findInstanceProperty(wrapper1).call(wrapper1, '.expansion-cell').length).toBe(0);
|
|
114
|
-
});
|
|
115
|
-
it('appendRowPropsGetter', function () {
|
|
116
|
-
var props = newPipeline.getProps();
|
|
117
|
-
var rowProps = props.getRowProps(newPipeline.getDataSource()[0], 0);
|
|
118
|
-
expect(rowProps.className).toBe('alternative');
|
|
119
|
-
});
|
|
120
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,191 +0,0 @@
|
|
|
1
|
-
import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
|
|
2
|
-
import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
|
|
3
|
-
import { singleSelect } from '../singleSelect';
|
|
4
|
-
import { useTablePipeline } from '../../pipeline';
|
|
5
|
-
import { mount } from 'enzyme';
|
|
6
|
-
import { renderHook } from '@testing-library/react-hooks';
|
|
7
|
-
import React from 'react';
|
|
8
|
-
var dataSource = [{
|
|
9
|
-
id: '1',
|
|
10
|
-
name: '阿里巴巴网络技术有限公司',
|
|
11
|
-
amount: '600,000.00(CNY)',
|
|
12
|
-
dept: '招商银行丨杭州分行',
|
|
13
|
-
applier: 'James Collier'
|
|
14
|
-
}, {
|
|
15
|
-
id: '2',
|
|
16
|
-
name: '阿里巴巴网络技术有限公司',
|
|
17
|
-
amount: '600,000.00(CNY)',
|
|
18
|
-
dept: '建设银行丨未来科技城',
|
|
19
|
-
applier: 'Philip Burke'
|
|
20
|
-
}, {
|
|
21
|
-
id: '3',
|
|
22
|
-
name: '阿里巴巴网络技术有限公司',
|
|
23
|
-
amount: '600,000.00(CNY)',
|
|
24
|
-
dept: '交通银行丨浙大路支行',
|
|
25
|
-
applier: 'Wesley Cruz'
|
|
26
|
-
}, {
|
|
27
|
-
id: '4',
|
|
28
|
-
name: '阿里巴巴网络技术有限公司',
|
|
29
|
-
amount: '600,000.00(CNY)',
|
|
30
|
-
dept: '招商银行丨庆春路支行',
|
|
31
|
-
applier: 'Billy Horton'
|
|
32
|
-
}, {
|
|
33
|
-
id: '5',
|
|
34
|
-
name: '阿里巴巴网络技术有限公司',
|
|
35
|
-
amount: '600,000.00(CNY)',
|
|
36
|
-
dept: '招商银行丨文一路分行',
|
|
37
|
-
applier: 'Paul Tran'
|
|
38
|
-
}, {
|
|
39
|
-
id: '6',
|
|
40
|
-
name: '阿里巴巴网络技术有限公司',
|
|
41
|
-
amount: '600,000.00(CNY)',
|
|
42
|
-
dept: '农业银行丨杭州分行',
|
|
43
|
-
applier: 'Anna Poole'
|
|
44
|
-
}];
|
|
45
|
-
var columns = [{
|
|
46
|
-
code: 'name',
|
|
47
|
-
width: 220,
|
|
48
|
-
name: '公司名称'
|
|
49
|
-
}, {
|
|
50
|
-
code: 'amount',
|
|
51
|
-
width: 160,
|
|
52
|
-
align: 'right',
|
|
53
|
-
name: '金额'
|
|
54
|
-
}, {
|
|
55
|
-
code: 'dept',
|
|
56
|
-
width: 160,
|
|
57
|
-
name: '金融机构'
|
|
58
|
-
}, {
|
|
59
|
-
code: 'applier',
|
|
60
|
-
width: 120,
|
|
61
|
-
name: '申请人'
|
|
62
|
-
}];
|
|
63
|
-
|
|
64
|
-
function Radio(_ref) {
|
|
65
|
-
var checked = _ref.checked,
|
|
66
|
-
disabled = _ref.disabled,
|
|
67
|
-
onChange = _ref.onChange;
|
|
68
|
-
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
|
|
69
|
-
type: 'radio',
|
|
70
|
-
disabled: disabled,
|
|
71
|
-
checked: checked,
|
|
72
|
-
onChange: onChange
|
|
73
|
-
}));
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
describe('singleSelect 单元测试', function () {
|
|
77
|
-
var opts = {
|
|
78
|
-
value: '1',
|
|
79
|
-
clickArea: 'cell',
|
|
80
|
-
highlightRowWhenSelected: true,
|
|
81
|
-
isDisabled: function isDisabled(row, rowIndex) {
|
|
82
|
-
var _context;
|
|
83
|
-
|
|
84
|
-
return _includesInstanceProperty(_context = ['4', '5', '6']).call(_context, row.id);
|
|
85
|
-
},
|
|
86
|
-
onChange: jest.fn()
|
|
87
|
-
};
|
|
88
|
-
var newPipeline = null;
|
|
89
|
-
beforeEach(function () {
|
|
90
|
-
var _renderHook = renderHook(function () {
|
|
91
|
-
return useTablePipeline({
|
|
92
|
-
primaryKey: 'id',
|
|
93
|
-
components: {
|
|
94
|
-
Radio: Radio
|
|
95
|
-
}
|
|
96
|
-
}).input({
|
|
97
|
-
dataSource: dataSource,
|
|
98
|
-
columns: columns
|
|
99
|
-
});
|
|
100
|
-
}),
|
|
101
|
-
result = _renderHook.result;
|
|
102
|
-
|
|
103
|
-
var tablePipeline = result.current;
|
|
104
|
-
newPipeline = singleSelect(opts)(tablePipeline);
|
|
105
|
-
});
|
|
106
|
-
afterEach(function () {
|
|
107
|
-
newPipeline = null;
|
|
108
|
-
opts.onChange.mockClear();
|
|
109
|
-
});
|
|
110
|
-
it('初始渲染', function () {
|
|
111
|
-
var col = newPipeline.getColumns(); // 表格会在最后补一个空白列,加上单选列所以有6列
|
|
112
|
-
|
|
113
|
-
expect(col.length).toBe(6);
|
|
114
|
-
expect(col[0].code).toBe('__SELECT');
|
|
115
|
-
});
|
|
116
|
-
it('getCellProps', function () {
|
|
117
|
-
var col = newPipeline.getColumns();
|
|
118
|
-
var cellProps = col[0].getCellProps('', newPipeline.getDataSource()[0], 0);
|
|
119
|
-
expect(cellProps.style).toEqual({
|
|
120
|
-
cursor: 'pointer'
|
|
121
|
-
});
|
|
122
|
-
expect(opts.onChange).not.toHaveBeenCalled();
|
|
123
|
-
cellProps.onClick();
|
|
124
|
-
expect(opts.onChange).toHaveBeenCalled();
|
|
125
|
-
});
|
|
126
|
-
it('单元格渲染', function () {
|
|
127
|
-
var col = newPipeline.getColumns();
|
|
128
|
-
var wrapper = mount(col[0].render('', newPipeline.getDataSource()[0], 0));
|
|
129
|
-
expect(_findInstanceProperty(wrapper).call(wrapper, 'Radio').length).toBe(1);
|
|
130
|
-
});
|
|
131
|
-
it('触发区域为radio', function () {
|
|
132
|
-
var _renderHook2 = renderHook(function () {
|
|
133
|
-
return useTablePipeline({
|
|
134
|
-
primaryKey: 'id',
|
|
135
|
-
components: {
|
|
136
|
-
Radio: Radio
|
|
137
|
-
}
|
|
138
|
-
}).input({
|
|
139
|
-
dataSource: dataSource,
|
|
140
|
-
columns: columns
|
|
141
|
-
});
|
|
142
|
-
}),
|
|
143
|
-
result = _renderHook2.result;
|
|
144
|
-
|
|
145
|
-
var tablePipeline = result.current;
|
|
146
|
-
opts.clickArea = 'radio';
|
|
147
|
-
var newPipeline = singleSelect(opts)(tablePipeline);
|
|
148
|
-
var col = newPipeline.getColumns();
|
|
149
|
-
var wrapper = mount(col[0].render('', newPipeline.getDataSource()[0], 0)); // Radio 触发onChange
|
|
150
|
-
|
|
151
|
-
var input = _findInstanceProperty(wrapper).call(wrapper, 'input');
|
|
152
|
-
|
|
153
|
-
input.simulate('change');
|
|
154
|
-
expect(opts.onChange).toHaveBeenCalled();
|
|
155
|
-
opts.clickArea = 'cell';
|
|
156
|
-
});
|
|
157
|
-
it('appendRowPropsGetter', function () {
|
|
158
|
-
var props = newPipeline.getProps();
|
|
159
|
-
var rowProps = props.getRowProps(newPipeline.getDataSource()[0], 0);
|
|
160
|
-
expect(rowProps.className).toBe('highlight');
|
|
161
|
-
expect(rowProps.style).toEqual({});
|
|
162
|
-
});
|
|
163
|
-
it('触发区域为row', function () {
|
|
164
|
-
var _renderHook3 = renderHook(function () {
|
|
165
|
-
return useTablePipeline({
|
|
166
|
-
primaryKey: 'id',
|
|
167
|
-
components: {
|
|
168
|
-
Radio: Radio
|
|
169
|
-
}
|
|
170
|
-
}).input({
|
|
171
|
-
dataSource: dataSource,
|
|
172
|
-
columns: columns
|
|
173
|
-
});
|
|
174
|
-
}),
|
|
175
|
-
result = _renderHook3.result;
|
|
176
|
-
|
|
177
|
-
var tablePipeline = result.current;
|
|
178
|
-
opts.clickArea = 'row';
|
|
179
|
-
var newPipeline = singleSelect(opts)(tablePipeline);
|
|
180
|
-
var props = newPipeline.getProps();
|
|
181
|
-
var rowProps = props.getRowProps(newPipeline.getDataSource()[0], 0);
|
|
182
|
-
expect(rowProps.style).toEqual({
|
|
183
|
-
cursor: 'pointer'
|
|
184
|
-
});
|
|
185
|
-
rowProps.onClick();
|
|
186
|
-
expect(opts.onChange).toHaveBeenCalled(); // disable的行没有样式
|
|
187
|
-
|
|
188
|
-
var rowProps1 = props.getRowProps(newPipeline.getDataSource()[4], 4);
|
|
189
|
-
expect(rowProps1.style).toEqual({});
|
|
190
|
-
});
|
|
191
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|