Skip to content

Commit 7b77bc8

Browse files
brijeshb42brijeshb42
committed
Key action elements at call sites in getActions tests
1 parent 9525f79 commit 7b77bc8

1 file changed

Lines changed: 29 additions & 33 deletions

File tree

‎packages/x-data-grid/src/tests/rows.DataGrid.test.tsx‎

Lines changed: 29 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -261,21 +261,6 @@ describe('<DataGrid /> - Rows', () => {
261261

262262
describe('columnType: actions', () => {
263263
describe('getActions', () => {
264-
// These tests intentionally pass unkeyed action arrays to `getActions`.
265-
// Under React 18 that triggers the missing-key dev warning, which
266-
// `vitest-fail-on-console` turns into a failure. Swallow only that warning
267-
// (forwarding everything else); `sinon.restore()` in the global `afterEach`
268-
// undoes the stub.
269-
beforeEach(() => {
270-
const originalError = console.error;
271-
stub(console, 'error').callsFake((...args: any[]) => {
272-
if (typeof args[0] === 'string' && args[0].includes('unique "key" prop')) {
273-
return;
274-
}
275-
originalError(...args);
276-
});
277-
});
278-
279264
function TestCase({
280265
getActions,
281266
...other
@@ -368,7 +353,9 @@ describe('<DataGrid /> - Rows', () => {
368353

369354
it('should not select the row when clicking in an action', async () => {
370355
const { user } = render(
371-
<TestCase getActions={() => [<GridActionsCellItem icon={<span />} label="print" />]} />,
356+
<TestCase
357+
getActions={() => [<GridActionsCellItem key={1} icon={<span />} label="print" />]}
358+
/>,
372359
);
373360
expect(getRow(0)).not.to.have.class('Mui-selected');
374361
await user.click(screen.getByRole('menuitem', { name: 'print' }));
@@ -378,7 +365,9 @@ describe('<DataGrid /> - Rows', () => {
378365
it('should not select the row when clicking in a menu action', async () => {
379366
const { user } = render(
380367
<TestCase
381-
getActions={() => [<GridActionsCellItem icon={<span />} label="print" showInMenu />]}
368+
getActions={() => [
369+
<GridActionsCellItem key={1} icon={<span />} label="print" showInMenu />,
370+
]}
382371
/>,
383372
);
384373
expect(getRow(0)).not.to.have.class('Mui-selected');
@@ -391,7 +380,9 @@ describe('<DataGrid /> - Rows', () => {
391380

392381
it('should not select the row when opening the menu', async () => {
393382
const { user } = render(
394-
<TestCase getActions={() => [<GridActionsCellItem label="print" showInMenu />]} />,
383+
<TestCase
384+
getActions={() => [<GridActionsCellItem key={1} label="print" showInMenu />]}
385+
/>,
395386
);
396387
expect(getRow(0)).not.to.have.class('Mui-selected');
397388
await user.click(screen.getByRole('menuitem', { name: 'more' }));
@@ -402,7 +393,7 @@ describe('<DataGrid /> - Rows', () => {
402393
const { user } = render(
403394
<TestCase
404395
rows={[{ id: 1 }, { id: 2 }]}
405-
getActions={() => [<GridActionsCellItem label="print" showInMenu />]}
396+
getActions={() => [<GridActionsCellItem key={1} label="print" showInMenu />]}
406397
/>,
407398
);
408399
expect(screen.queryAllByRole('menu')).to.have.length(2);
@@ -422,7 +413,9 @@ describe('<DataGrid /> - Rows', () => {
422413

423414
it('should allow to move focus to another cell with the arrow keys', async () => {
424415
const { user } = render(
425-
<TestCase getActions={() => [<GridActionsCellItem icon={<span />} label="print" />]} />,
416+
<TestCase
417+
getActions={() => [<GridActionsCellItem key={1} icon={<span />} label="print" />]}
418+
/>,
426419
);
427420
await user.click(getCell(0, 0));
428421
expect(getActiveCell()).to.equal('0-0');
@@ -439,8 +432,8 @@ describe('<DataGrid /> - Rows', () => {
439432
const { user } = render(
440433
<TestCase
441434
getActions={() => [
442-
<GridActionsCellItem icon={<span />} label="print" showInMenu />,
443-
<GridActionsCellItem icon={<span />} label="delete" showInMenu />,
435+
<GridActionsCellItem key={1} icon={<span />} label="print" showInMenu />,
436+
<GridActionsCellItem key={2} icon={<span />} label="delete" showInMenu />,
444437
]}
445438
/>,
446439
);
@@ -455,8 +448,8 @@ describe('<DataGrid /> - Rows', () => {
455448
const { user } = render(
456449
<TestCase
457450
getActions={() => [
458-
<GridActionsCellItem icon={<span />} label="print" />,
459-
<GridActionsCellItem icon={<span />} label="delete" />,
451+
<GridActionsCellItem key={1} icon={<span />} label="print" />,
452+
<GridActionsCellItem key={2} icon={<span />} label="delete" />,
460453
]}
461454
/>,
462455
);
@@ -483,8 +476,8 @@ describe('<DataGrid /> - Rows', () => {
483476
const { user } = render(
484477
<TestCase
485478
getActions={() => [
486-
<GridActionsCellItem icon={<span />} label="print" />,
487-
<GridActionsCellItem icon={<span />} label="delete" />,
479+
<GridActionsCellItem key={1} icon={<span />} label="print" />,
480+
<GridActionsCellItem key={2} icon={<span />} label="delete" />,
488481
]}
489482
/>,
490483
);
@@ -497,8 +490,8 @@ describe('<DataGrid /> - Rows', () => {
497490
const { user } = render(
498491
<TestCase
499492
getActions={() => [
500-
<GridActionsCellItem icon={<span />} label="print" />,
501-
<GridActionsCellItem icon={<span />} label="delete" showInMenu />,
493+
<GridActionsCellItem key={1} icon={<span />} label="print" />,
494+
<GridActionsCellItem key={2} icon={<span />} label="delete" showInMenu />,
502495
]}
503496
/>,
504497
);
@@ -529,16 +522,17 @@ describe('<DataGrid /> - Rows', () => {
529522
getActions={() =>
530523
canDelete
531524
? [
532-
<GridActionsCellItem icon={<span />} label="print" />,
525+
<GridActionsCellItem key={1} icon={<span />} label="print" />,
533526
<GridActionsCellItem
527+
key={2}
534528
icon={<span />}
535529
label="delete"
536530
onClick={() => {
537531
setCanDelete(false);
538532
}}
539533
/>,
540534
]
541-
: [<GridActionsCellItem icon={<span />} label="print" />]
535+
: [<GridActionsCellItem key={1} icon={<span />} label="print" />]
542536
}
543537
/>
544538
);
@@ -552,15 +546,17 @@ describe('<DataGrid /> - Rows', () => {
552546
const { setProps, user } = render(
553547
<TestCase
554548
getActions={() => [
555-
<GridActionsCellItem icon={<span />} label="print" />,
556-
<GridActionsCellItem icon={<span />} label="delete" />,
549+
<GridActionsCellItem key={1} icon={<span />} label="print" />,
550+
<GridActionsCellItem key={2} icon={<span />} label="delete" />,
557551
]}
558552
/>,
559553
);
560554
await user.click(screen.getByRole('menuitem', { name: 'delete' })); // Sets focusedButtonIndex=1
561555
expect(screen.getByRole('menuitem', { name: 'delete' })).toHaveFocus();
562556
await act(async () => {
563-
setProps({ getActions: () => [<GridActionsCellItem icon={<span />} label="print" />] }); // Sets focusedButtonIndex=0
557+
setProps({
558+
getActions: () => [<GridActionsCellItem key={1} icon={<span />} label="print" />],
559+
}); // Sets focusedButtonIndex=0
564560
});
565561
expect(screen.getByRole('menuitem', { name: 'print' })).toHaveFocus();
566562
});

0 commit comments

Comments
 (0)