@reltio/components 1.4.2022 → 1.4.2023
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.
|
@@ -48,8 +48,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
48
48
|
import React from 'react';
|
|
49
49
|
import { screen, render, within, fireEvent, act } from '@testing-library/react';
|
|
50
50
|
import userEvent from '@testing-library/user-event';
|
|
51
|
-
import { mockDndKit } from '../test-utils/dndKit';
|
|
52
|
-
jest.mock('@dnd-kit/core', function () { return mockDndKit; });
|
|
53
51
|
import { BasicTable } from './BasicTable';
|
|
54
52
|
import { CollapseRowButton } from '../CollapseRowButton';
|
|
55
53
|
import { mockBasicTableSizing } from '../test-utils';
|
|
@@ -74,15 +72,22 @@ var getRowCellRenderer = function (id) {
|
|
|
74
72
|
return function () { return null; };
|
|
75
73
|
}
|
|
76
74
|
};
|
|
75
|
+
var onHeadClickFn = jest.fn();
|
|
76
|
+
var HeadCellRenderer = function (_a) {
|
|
77
|
+
var headCellData = _a.headCellData;
|
|
78
|
+
return (React.createElement("div", null,
|
|
79
|
+
React.createElement("button", { onClick: onHeadClickFn }, headCellData.label)));
|
|
80
|
+
};
|
|
77
81
|
var columnsData = [
|
|
78
82
|
{
|
|
79
83
|
autoResize: false,
|
|
80
|
-
headCellRenderer:
|
|
84
|
+
headCellRenderer: HeadCellRenderer,
|
|
81
85
|
id: 'id1',
|
|
82
86
|
initialWidth: 300,
|
|
83
87
|
label: 'column 1',
|
|
84
88
|
minWidth: 250,
|
|
85
89
|
resizable: true,
|
|
90
|
+
draggable: true,
|
|
86
91
|
rowCellValueRenderer: getRowCellRenderer('id1'),
|
|
87
92
|
sortable: false
|
|
88
93
|
},
|
|
@@ -108,6 +113,8 @@ var defaultProps = {
|
|
|
108
113
|
headRowHeight: 48,
|
|
109
114
|
defaultColumnWidth: 250,
|
|
110
115
|
defaultColumnMinWidth: 200,
|
|
116
|
+
dndColumnReorderingEnabled: true,
|
|
117
|
+
dndColumnReorderingHandler: function () { },
|
|
111
118
|
dndRowReorderingEnabled: true,
|
|
112
119
|
dndRowReorderingHandler: function () { },
|
|
113
120
|
getIdFromRowValue: function (rowValue) { return rowValue.id1.name; },
|
|
@@ -121,10 +128,14 @@ var setUp = function (props) {
|
|
|
121
128
|
};
|
|
122
129
|
describe('basic table tests', function () {
|
|
123
130
|
it('should collapse all rows after start dragging', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
124
|
-
var unmockTableSizing, user, getRowByIndex, getCellByIndexes, dragIndicator;
|
|
131
|
+
var mouse, unmockTableSizing, user, getRowByIndex, getCellByIndexes, dragIndicator;
|
|
125
132
|
return __generator(this, function (_a) {
|
|
126
133
|
switch (_a.label) {
|
|
127
134
|
case 0:
|
|
135
|
+
mouse = [
|
|
136
|
+
{ clientX: 0, clientY: 0 },
|
|
137
|
+
{ clientX: 20, clientY: 20 }
|
|
138
|
+
];
|
|
128
139
|
unmockTableSizing = mockBasicTableSizing();
|
|
129
140
|
user = setUp(defaultProps).user;
|
|
130
141
|
getRowByIndex = function (index) {
|
|
@@ -146,10 +157,11 @@ describe('basic table tests', function () {
|
|
|
146
157
|
expect(within(getCellByIndexes(0, 1)).queryByText('row 1 value 3')).toBeInTheDocument();
|
|
147
158
|
expect(within(getCellByIndexes(1, 1)).queryByText('row 2 value 1')).toBeInTheDocument();
|
|
148
159
|
expect(within(getCellByIndexes(1, 1)).queryByText('row 2 value 2')).toBeInTheDocument();
|
|
149
|
-
dragIndicator = within(getCellByIndexes(1, 0)).
|
|
160
|
+
dragIndicator = within(getCellByIndexes(1, 0)).getByRole('button', { name: 'drag el' });
|
|
150
161
|
return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
151
162
|
return __generator(this, function (_a) {
|
|
152
|
-
fireEvent.mouseDown(dragIndicator);
|
|
163
|
+
fireEvent.mouseDown(dragIndicator, mouse[0]);
|
|
164
|
+
fireEvent.mouseMove(dragIndicator, mouse[1]);
|
|
153
165
|
return [2 /*return*/];
|
|
154
166
|
});
|
|
155
167
|
}); })];
|
|
@@ -160,9 +172,32 @@ describe('basic table tests', function () {
|
|
|
160
172
|
expect(within(getCellByIndexes(0, 1)).queryByText('row 1 value 3')).not.toBeInTheDocument();
|
|
161
173
|
expect(within(getCellByIndexes(1, 1)).queryByText('row 2 value 1')).toBeInTheDocument();
|
|
162
174
|
expect(within(getCellByIndexes(1, 1)).queryByText('row 2 value 2')).not.toBeInTheDocument();
|
|
175
|
+
return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
176
|
+
return __generator(this, function (_a) {
|
|
177
|
+
fireEvent.mouseUp(dragIndicator);
|
|
178
|
+
return [2 /*return*/];
|
|
179
|
+
});
|
|
180
|
+
}); })];
|
|
181
|
+
case 4:
|
|
182
|
+
_a.sent();
|
|
163
183
|
unmockTableSizing();
|
|
164
184
|
return [2 /*return*/];
|
|
165
185
|
}
|
|
166
186
|
});
|
|
167
187
|
}); });
|
|
188
|
+
it('should able to click on buttons in table head', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
189
|
+
var user;
|
|
190
|
+
return __generator(this, function (_a) {
|
|
191
|
+
switch (_a.label) {
|
|
192
|
+
case 0:
|
|
193
|
+
user = setUp(defaultProps).user;
|
|
194
|
+
expect(onHeadClickFn).not.toHaveBeenCalled();
|
|
195
|
+
return [4 /*yield*/, user.click(screen.getAllByRole('button', { name: columnsData[0].label })[1])];
|
|
196
|
+
case 1:
|
|
197
|
+
_a.sent();
|
|
198
|
+
expect(onHeadClickFn).toHaveBeenCalled();
|
|
199
|
+
return [2 /*return*/];
|
|
200
|
+
}
|
|
201
|
+
});
|
|
202
|
+
}); });
|
|
168
203
|
});
|
|
@@ -53,8 +53,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
53
53
|
var react_1 = __importDefault(require("react"));
|
|
54
54
|
var react_2 = require("@testing-library/react");
|
|
55
55
|
var user_event_1 = __importDefault(require("@testing-library/user-event"));
|
|
56
|
-
var dndKit_1 = require("../test-utils/dndKit");
|
|
57
|
-
jest.mock('@dnd-kit/core', function () { return dndKit_1.mockDndKit; });
|
|
58
56
|
var BasicTable_1 = require("./BasicTable");
|
|
59
57
|
var CollapseRowButton_1 = require("../CollapseRowButton");
|
|
60
58
|
var test_utils_1 = require("../test-utils");
|
|
@@ -79,15 +77,22 @@ var getRowCellRenderer = function (id) {
|
|
|
79
77
|
return function () { return null; };
|
|
80
78
|
}
|
|
81
79
|
};
|
|
80
|
+
var onHeadClickFn = jest.fn();
|
|
81
|
+
var HeadCellRenderer = function (_a) {
|
|
82
|
+
var headCellData = _a.headCellData;
|
|
83
|
+
return (react_1.default.createElement("div", null,
|
|
84
|
+
react_1.default.createElement("button", { onClick: onHeadClickFn }, headCellData.label)));
|
|
85
|
+
};
|
|
82
86
|
var columnsData = [
|
|
83
87
|
{
|
|
84
88
|
autoResize: false,
|
|
85
|
-
headCellRenderer:
|
|
89
|
+
headCellRenderer: HeadCellRenderer,
|
|
86
90
|
id: 'id1',
|
|
87
91
|
initialWidth: 300,
|
|
88
92
|
label: 'column 1',
|
|
89
93
|
minWidth: 250,
|
|
90
94
|
resizable: true,
|
|
95
|
+
draggable: true,
|
|
91
96
|
rowCellValueRenderer: getRowCellRenderer('id1'),
|
|
92
97
|
sortable: false
|
|
93
98
|
},
|
|
@@ -113,6 +118,8 @@ var defaultProps = {
|
|
|
113
118
|
headRowHeight: 48,
|
|
114
119
|
defaultColumnWidth: 250,
|
|
115
120
|
defaultColumnMinWidth: 200,
|
|
121
|
+
dndColumnReorderingEnabled: true,
|
|
122
|
+
dndColumnReorderingHandler: function () { },
|
|
116
123
|
dndRowReorderingEnabled: true,
|
|
117
124
|
dndRowReorderingHandler: function () { },
|
|
118
125
|
getIdFromRowValue: function (rowValue) { return rowValue.id1.name; },
|
|
@@ -126,10 +133,14 @@ var setUp = function (props) {
|
|
|
126
133
|
};
|
|
127
134
|
describe('basic table tests', function () {
|
|
128
135
|
it('should collapse all rows after start dragging', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
129
|
-
var unmockTableSizing, user, getRowByIndex, getCellByIndexes, dragIndicator;
|
|
136
|
+
var mouse, unmockTableSizing, user, getRowByIndex, getCellByIndexes, dragIndicator;
|
|
130
137
|
return __generator(this, function (_a) {
|
|
131
138
|
switch (_a.label) {
|
|
132
139
|
case 0:
|
|
140
|
+
mouse = [
|
|
141
|
+
{ clientX: 0, clientY: 0 },
|
|
142
|
+
{ clientX: 20, clientY: 20 }
|
|
143
|
+
];
|
|
133
144
|
unmockTableSizing = (0, test_utils_1.mockBasicTableSizing)();
|
|
134
145
|
user = setUp(defaultProps).user;
|
|
135
146
|
getRowByIndex = function (index) {
|
|
@@ -151,10 +162,11 @@ describe('basic table tests', function () {
|
|
|
151
162
|
expect((0, react_2.within)(getCellByIndexes(0, 1)).queryByText('row 1 value 3')).toBeInTheDocument();
|
|
152
163
|
expect((0, react_2.within)(getCellByIndexes(1, 1)).queryByText('row 2 value 1')).toBeInTheDocument();
|
|
153
164
|
expect((0, react_2.within)(getCellByIndexes(1, 1)).queryByText('row 2 value 2')).toBeInTheDocument();
|
|
154
|
-
dragIndicator = (0, react_2.within)(getCellByIndexes(1, 0)).
|
|
165
|
+
dragIndicator = (0, react_2.within)(getCellByIndexes(1, 0)).getByRole('button', { name: 'drag el' });
|
|
155
166
|
return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
156
167
|
return __generator(this, function (_a) {
|
|
157
|
-
react_2.fireEvent.mouseDown(dragIndicator);
|
|
168
|
+
react_2.fireEvent.mouseDown(dragIndicator, mouse[0]);
|
|
169
|
+
react_2.fireEvent.mouseMove(dragIndicator, mouse[1]);
|
|
158
170
|
return [2 /*return*/];
|
|
159
171
|
});
|
|
160
172
|
}); })];
|
|
@@ -165,9 +177,32 @@ describe('basic table tests', function () {
|
|
|
165
177
|
expect((0, react_2.within)(getCellByIndexes(0, 1)).queryByText('row 1 value 3')).not.toBeInTheDocument();
|
|
166
178
|
expect((0, react_2.within)(getCellByIndexes(1, 1)).queryByText('row 2 value 1')).toBeInTheDocument();
|
|
167
179
|
expect((0, react_2.within)(getCellByIndexes(1, 1)).queryByText('row 2 value 2')).not.toBeInTheDocument();
|
|
180
|
+
return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
181
|
+
return __generator(this, function (_a) {
|
|
182
|
+
react_2.fireEvent.mouseUp(dragIndicator);
|
|
183
|
+
return [2 /*return*/];
|
|
184
|
+
});
|
|
185
|
+
}); })];
|
|
186
|
+
case 4:
|
|
187
|
+
_a.sent();
|
|
168
188
|
unmockTableSizing();
|
|
169
189
|
return [2 /*return*/];
|
|
170
190
|
}
|
|
171
191
|
});
|
|
172
192
|
}); });
|
|
193
|
+
it('should able to click on buttons in table head', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
194
|
+
var user;
|
|
195
|
+
return __generator(this, function (_a) {
|
|
196
|
+
switch (_a.label) {
|
|
197
|
+
case 0:
|
|
198
|
+
user = setUp(defaultProps).user;
|
|
199
|
+
expect(onHeadClickFn).not.toHaveBeenCalled();
|
|
200
|
+
return [4 /*yield*/, user.click(react_2.screen.getAllByRole('button', { name: columnsData[0].label })[1])];
|
|
201
|
+
case 1:
|
|
202
|
+
_a.sent();
|
|
203
|
+
expect(onHeadClickFn).toHaveBeenCalled();
|
|
204
|
+
return [2 /*return*/];
|
|
205
|
+
}
|
|
206
|
+
});
|
|
207
|
+
}); });
|
|
173
208
|
});
|