Skip to content

Commit 2edef89

Browse files
authored
chore: Optimize table test performance (#8051)
1 parent 4bcf541 commit 2edef89

File tree

8 files changed

+5137
-5104
lines changed

8 files changed

+5137
-5104
lines changed

packages/@react-spectrum/table/src/TableViewBase.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1050,6 +1050,7 @@ function TableSelectAllCell({column}) {
10501050
}
10511051
<Checkbox
10521052
{...checkboxProps}
1053+
data-testid="selectAll"
10531054
isEmphasized
10541055
UNSAFE_style={isSingleSelectionMode ? {visibility: 'hidden'} : undefined}
10551056
UNSAFE_className={classNames(styles, 'spectrum-Table-checkbox')} />

packages/@react-spectrum/table/stories/TreeGridTable.stories.tsx

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {action} from '@storybook/addon-actions';
1414
import {ActionButton} from '@react-spectrum/button';
1515
import {Cell, Column, Row, SpectrumTableProps, TableBody, TableHeader, TableView} from '../';
1616
import {chain} from '@react-aria/utils';
17-
import {ComponentMeta} from '@storybook/react';
17+
import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
1818
import defaultConfig, {columns, EmptyStateTable, TableStory} from './Table.stories';
1919
import {enableTableNestedRows} from '@react-stately/flags';
2020
import {Flex} from '@react-spectrum/layout';
@@ -162,7 +162,6 @@ export const UserSetRowHeader: TableStory = {
162162
}
163163
};
164164

165-
let manyRows: Record<typeof columns[number]['key'], string>[] = [];
166165
function generateRow(lvlIndex, lvlLimit, rowIndex) {
167166
let row = {key: `Row ${rowIndex} Lvl ${lvlIndex}`};
168167
for (let col of columns) {
@@ -175,19 +174,25 @@ function generateRow(lvlIndex, lvlLimit, rowIndex) {
175174
return row;
176175
}
177176

178-
for (let i = 1; i < 20; i++) {
179-
let row = generateRow(1, 3, i);
180-
manyRows.push(row);
177+
function generateRows(count = 5) {
178+
let manyRows: Record<typeof columns[number]['key'], string>[] = [];
179+
for (let i = 1; i <= count; i++) {
180+
let row = generateRow(1, 3, i);
181+
manyRows.push(row);
182+
}
183+
return manyRows;
181184
}
182185

183186
interface ManyExpandableRowsProps extends SpectrumTableProps<unknown> {
184187
allowsResizing?: boolean,
185-
showDivider?: boolean
188+
showDivider?: boolean,
189+
rowCount?: number
186190
}
187191

188192
function ManyExpandableRows(props: ManyExpandableRowsProps) {
189193
let {allowsResizing, showDivider, ...otherProps} = props;
190194
let [expandedKeys, setExpandedKeys] = useState<'all' | Set<Key>>('all');
195+
let manyRows = generateRows(props.rowCount ?? 5);
191196

192197
return (
193198
<Flex direction="column">
@@ -211,11 +216,12 @@ function ManyExpandableRows(props: ManyExpandableRowsProps) {
211216
);
212217
}
213218

214-
export const ManyExpandableRowsStory: TableStory = {
219+
export const ManyExpandableRowsStory: ComponentStoryObj<typeof ManyExpandableRows> = {
215220
args: {
216221
'aria-label': 'TableView with many dynamic expandable rows',
217222
width: 500,
218-
height: 400
223+
height: 400,
224+
rowCount: 5
219225
},
220226
render: (args) => (
221227
<ManyExpandableRows {...args} />
@@ -230,7 +236,7 @@ export const EmptyTreeGridStory: TableStory = {
230236
height: 400
231237
},
232238
render: (args) => (
233-
<EmptyStateTable UNSTABLE_allowsExpandableRows selectionMode="none" columns={columns} items={manyRows} allowsSorting={false} onSortChange={null} sortDescriptor={null} {...args} />
239+
<EmptyStateTable UNSTABLE_allowsExpandableRows selectionMode="none" columns={columns} items={generateRows()} allowsSorting={false} onSortChange={null} sortDescriptor={null} {...args} />
234240
),
235241
name: 'empty state'
236242
};
@@ -245,7 +251,7 @@ function LoadingStateTable(props) {
245251
<TableHeader columns={columns}>
246252
{column => <Column>{column.name}</Column>}
247253
</TableHeader>
248-
<TableBody items={show ? manyRows : []} loadingState="loadingMore">
254+
<TableBody items={show ? generateRows() : []} loadingState="loadingMore">
249255
{item =>
250256
(<Row key={item.key} UNSTABLE_childItems={item.childRows}>
251257
{key => <Cell>{item[key]}</Cell>}

0 commit comments

Comments
 (0)