Skip to content

Commit e137524

Browse files
Marek Danogcgoncalves
Marek Dano
authored and
gcgoncalves
committed
chore(ui-rewrite): eliminate test console warnings and fix dialog accessibility
Signed-off-by: Marek Dano <Marek.Dano@ibm.com>
1 parent a6f2541 commit e137524

14 files changed

Lines changed: 126 additions & 39 deletions

‎client/src/components/teams/TeamForm.test.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -136,15 +136,23 @@ describe("TeamForm", () => {
136136
await user.click(memberInput);
137137
await user.keyboard("alice");
138138
await user.click(await screen.findByRole("option", { name: /alice/i }));
139-
expect(memberInput).toHaveValue("Alice (alice@example.com)");
139+
140+
await waitFor(() => {
141+
expect(memberInput).toHaveValue("Alice (alice@example.com)");
142+
});
140143

141144
// Change the role from owner -> member (fires the role change handler).
142145
// The member row's role Select is the first select-trigger in the form.
143146
const roleTrigger = document.querySelectorAll<HTMLElement>('[data-slot="select-trigger"]')[0];
144147
expect(roleTrigger).toHaveTextContent("owner");
148+
145149
await user.click(roleTrigger);
146-
await user.click(await screen.findByRole("option", { name: /^member$/i }));
147-
expect(roleTrigger).toHaveTextContent("member");
150+
const memberOption = await screen.findByRole("option", { name: /^member$/i });
151+
await user.click(memberOption);
152+
153+
await waitFor(() => {
154+
expect(roleTrigger).toHaveTextContent("member");
155+
});
148156
});
149157

150158
it("adds and removes member rows", async () => {

‎client/src/components/ui/card-tag.test.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { describe, it, expect } from "vitest";
2-
import { render, screen } from "@testing-library/react";
2+
import { render, screen, waitFor } from "@testing-library/react";
33
import { CardTag } from "./card-tag";
44

55
describe("CardTag", () => {
@@ -25,7 +25,10 @@ describe("CardTag", () => {
2525
expect(trigger).not.toBeNull();
2626

2727
// Radix opens the tooltip on focus, giving keyboard users the hint.
28-
trigger!.focus();
29-
expect(await screen.findByRole("tooltip")).toHaveTextContent("More info");
28+
await waitFor(async () => {
29+
trigger!.focus();
30+
const tooltip = await screen.findByRole("tooltip");
31+
expect(tooltip).toHaveTextContent("More info");
32+
});
3033
});
3134
});

‎client/src/components/ui/dialog.test.tsx‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ describe("Dialog Components", () => {
8989
<Dialog open={true}>
9090
<DialogContent>
9191
<DialogTitle>Test</DialogTitle>
92+
<DialogDescription>Test description</DialogDescription>
9293
<DialogOverlay data-testid="overlay" />
9394
</DialogContent>
9495
</Dialog>,
@@ -103,6 +104,7 @@ describe("Dialog Components", () => {
103104
<Dialog open={true}>
104105
<DialogContent>
105106
<DialogTitle>Test</DialogTitle>
107+
<DialogDescription>Test description</DialogDescription>
106108
<DialogOverlay data-testid="overlay" />
107109
</DialogContent>
108110
</Dialog>,
@@ -119,6 +121,7 @@ describe("Dialog Components", () => {
119121
<Dialog open={true}>
120122
<DialogContent>
121123
<DialogTitle>Test</DialogTitle>
124+
<DialogDescription>Test description</DialogDescription>
122125
<DialogOverlay data-testid="overlay" />
123126
</DialogContent>
124127
</Dialog>,
@@ -133,6 +136,7 @@ describe("Dialog Components", () => {
133136
<Dialog open={true}>
134137
<DialogContent>
135138
<DialogTitle>Test</DialogTitle>
139+
<DialogDescription>Test description</DialogDescription>
136140
<DialogOverlay data-testid="overlay" className="custom-overlay" />
137141
</DialogContent>
138142
</Dialog>,
@@ -148,6 +152,7 @@ describe("Dialog Components", () => {
148152
<Dialog open={true}>
149153
<DialogContent>
150154
<DialogTitle>Test</DialogTitle>
155+
<DialogDescription>Test description</DialogDescription>
151156
<DialogOverlay ref={ref} data-testid="overlay" />
152157
</DialogContent>
153158
</Dialog>,
@@ -163,6 +168,7 @@ describe("Dialog Components", () => {
163168
<Dialog open={true}>
164169
<DialogContent>
165170
<DialogTitle>Test</DialogTitle>
171+
<DialogDescription>Test description</DialogDescription>
166172
<span>Dialog content</span>
167173
</DialogContent>
168174
</Dialog>,
@@ -176,6 +182,7 @@ describe("Dialog Components", () => {
176182
<Dialog open={true}>
177183
<DialogContent>
178184
<DialogTitle>Test</DialogTitle>
185+
<DialogDescription>Test description</DialogDescription>
179186
<div data-testid="dialog-body">Test content</div>
180187
</DialogContent>
181188
</Dialog>,
@@ -189,6 +196,7 @@ describe("Dialog Components", () => {
189196
<Dialog open={true}>
190197
<DialogContent data-testid="content">
191198
<DialogTitle>Test</DialogTitle>
199+
<DialogDescription>Test description</DialogDescription>
192200
Content
193201
</DialogContent>
194202
</Dialog>,
@@ -206,6 +214,7 @@ describe("Dialog Components", () => {
206214
<Dialog open={true}>
207215
<DialogContent>
208216
<DialogTitle>Test</DialogTitle>
217+
<DialogDescription>Test description</DialogDescription>
209218
Content
210219
</DialogContent>
211220
</Dialog>,
@@ -221,6 +230,7 @@ describe("Dialog Components", () => {
221230
<Dialog open={true}>
222231
<DialogContent>
223232
<DialogTitle>Test</DialogTitle>
233+
<DialogDescription>Test description</DialogDescription>
224234
Content
225235
</DialogContent>
226236
</Dialog>,
@@ -234,7 +244,11 @@ describe("Dialog Components", () => {
234244
it("should render accessibility label for close button", () => {
235245
render(
236246
<Dialog open={true}>
237-
<DialogContent>Content</DialogContent>
247+
<DialogContent>
248+
<DialogTitle>Test</DialogTitle>
249+
<DialogDescription>Test description</DialogDescription>
250+
Content
251+
</DialogContent>
238252
</Dialog>,
239253
);
240254

@@ -248,6 +262,7 @@ describe("Dialog Components", () => {
248262
<Dialog open={true}>
249263
<DialogContent data-testid="content" className="custom-dialog">
250264
<DialogTitle>Test</DialogTitle>
265+
<DialogDescription>Test description</DialogDescription>
251266
Content
252267
</DialogContent>
253268
</Dialog>,
@@ -263,6 +278,7 @@ describe("Dialog Components", () => {
263278
<Dialog open={true}>
264279
<DialogContent ref={ref}>
265280
<DialogTitle>Test</DialogTitle>
281+
<DialogDescription>Test description</DialogDescription>
266282
Content
267283
</DialogContent>
268284
</Dialog>,
@@ -276,6 +292,7 @@ describe("Dialog Components", () => {
276292
<Dialog open={true}>
277293
<DialogContent>
278294
<DialogTitle>Test</DialogTitle>
295+
<DialogDescription>Test description</DialogDescription>
279296
Content
280297
</DialogContent>
281298
</Dialog>,
@@ -360,6 +377,8 @@ describe("Dialog Components", () => {
360377
render(
361378
<Dialog open={true}>
362379
<DialogContent>
380+
<DialogTitle>Test</DialogTitle>
381+
<DialogDescription>Test description</DialogDescription>
363382
<DialogFooter data-testid="footer">
364383
<button>Cancel</button>
365384
<button>Save</button>
@@ -394,6 +413,7 @@ describe("Dialog Components", () => {
394413
<Dialog open={true}>
395414
<DialogContent>
396415
<DialogTitle>Dialog Title</DialogTitle>
416+
<DialogDescription>Test description</DialogDescription>
397417
</DialogContent>
398418
</Dialog>,
399419
);
@@ -406,6 +426,7 @@ describe("Dialog Components", () => {
406426
<Dialog open={true}>
407427
<DialogContent>
408428
<DialogTitle data-testid="title">Title</DialogTitle>
429+
<DialogDescription>Test description</DialogDescription>
409430
</DialogContent>
410431
</Dialog>,
411432
);
@@ -419,6 +440,7 @@ describe("Dialog Components", () => {
419440
<Dialog open={true}>
420441
<DialogContent>
421442
<DialogTitle data-testid="title">Title</DialogTitle>
443+
<DialogDescription>Test description</DialogDescription>
422444
</DialogContent>
423445
</Dialog>,
424446
);
@@ -435,6 +457,7 @@ describe("Dialog Components", () => {
435457
<DialogTitle data-testid="title" className="custom-title">
436458
Title
437459
</DialogTitle>
460+
<DialogDescription>Test description</DialogDescription>
438461
</DialogContent>
439462
</Dialog>,
440463
);
@@ -449,6 +472,7 @@ describe("Dialog Components", () => {
449472
<Dialog open={true}>
450473
<DialogContent>
451474
<DialogTitle ref={ref}>Title</DialogTitle>
475+
<DialogDescription>Test description</DialogDescription>
452476
</DialogContent>
453477
</Dialog>,
454478
);
@@ -467,6 +491,7 @@ describe("Dialog Components", () => {
467491
render(
468492
<Dialog open={true}>
469493
<DialogContent>
494+
<DialogTitle>Test</DialogTitle>
470495
<DialogDescription>Dialog description</DialogDescription>
471496
</DialogContent>
472497
</Dialog>,
@@ -479,6 +504,7 @@ describe("Dialog Components", () => {
479504
render(
480505
<Dialog open={true}>
481506
<DialogContent>
507+
<DialogTitle>Test</DialogTitle>
482508
<DialogDescription data-testid="desc">Description</DialogDescription>
483509
</DialogContent>
484510
</Dialog>,
@@ -492,6 +518,7 @@ describe("Dialog Components", () => {
492518
render(
493519
<Dialog open={true}>
494520
<DialogContent>
521+
<DialogTitle>Test</DialogTitle>
495522
<DialogDescription data-testid="desc">Description</DialogDescription>
496523
</DialogContent>
497524
</Dialog>,
@@ -506,6 +533,7 @@ describe("Dialog Components", () => {
506533
render(
507534
<Dialog open={true}>
508535
<DialogContent>
536+
<DialogTitle>Test</DialogTitle>
509537
<DialogDescription data-testid="desc" className="custom-desc">
510538
Description
511539
</DialogDescription>
@@ -522,6 +550,7 @@ describe("Dialog Components", () => {
522550
render(
523551
<Dialog open={true}>
524552
<DialogContent>
553+
<DialogTitle>Test</DialogTitle>
525554
<DialogDescription ref={ref}>Description</DialogDescription>
526555
</DialogContent>
527556
</Dialog>,
@@ -541,6 +570,8 @@ describe("Dialog Components", () => {
541570
render(
542571
<Dialog open={true}>
543572
<DialogContent>
573+
<DialogTitle>Test</DialogTitle>
574+
<DialogDescription>Test description</DialogDescription>
544575
<DialogClose data-testid="close-btn">Close</DialogClose>
545576
</DialogContent>
546577
</Dialog>,
@@ -553,6 +584,8 @@ describe("Dialog Components", () => {
553584
render(
554585
<Dialog open={true}>
555586
<DialogContent>
587+
<DialogTitle>Test</DialogTitle>
588+
<DialogDescription>Test description</DialogDescription>
556589
<DialogClose data-testid="close-btn">Close</DialogClose>
557590
</DialogContent>
558591
</Dialog>,
@@ -609,11 +642,13 @@ describe("Dialog Components", () => {
609642
<Dialog open={true}>
610643
<DialogContent>
611644
<DialogTitle>Dialog 1</DialogTitle>
645+
<DialogDescription>Description 1</DialogDescription>
612646
</DialogContent>
613647
</Dialog>
614648
<Dialog open={true}>
615649
<DialogContent>
616650
<DialogTitle>Dialog 2</DialogTitle>
651+
<DialogDescription>Description 2</DialogDescription>
617652
</DialogContent>
618653
</Dialog>
619654
</div>,
@@ -628,6 +663,7 @@ describe("Dialog Components", () => {
628663
<Dialog open={true}>
629664
<DialogContent>
630665
<DialogTitle>Open Dialog</DialogTitle>
666+
<DialogDescription>Test description</DialogDescription>
631667
</DialogContent>
632668
</Dialog>,
633669
);
@@ -638,6 +674,7 @@ describe("Dialog Components", () => {
638674
<Dialog open={false}>
639675
<DialogContent>
640676
<DialogTitle>Open Dialog</DialogTitle>
677+
<DialogDescription>Test description</DialogDescription>
641678
</DialogContent>
642679
</Dialog>,
643680
);

‎client/src/components/ui/radio-group.test.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { describe, it, expect, vi } from "vitest";
2-
import { render, screen } from "@testing-library/react";
2+
import { render, screen, waitFor, act } from "@testing-library/react";
33
import userEvent from "@testing-library/user-event";
44
import React from "react";
55
import { RadioGroup, RadioGroupItem } from "./radio-group";
@@ -342,11 +342,14 @@ describe("RadioGroup", () => {
342342
);
343343

344344
const firstItem = container.querySelector('[role="radio"]') as HTMLElement;
345-
firstItem.focus();
345+
act(() => firstItem.focus());
346346

347347
await user.keyboard("{ArrowRight}");
348-
const itemsAfter = container.querySelectorAll('[role="radio"]');
349-
expect(itemsAfter[1]).toHaveFocus();
348+
349+
await waitFor(() => {
350+
const itemsAfter = container.querySelectorAll('[role="radio"]');
351+
expect(itemsAfter[1]).toHaveFocus();
352+
});
350353
});
351354

352355
it("should support tab navigation", async () => {
@@ -377,10 +380,13 @@ describe("RadioGroup", () => {
377380
);
378381

379382
const firstItem = container.querySelector('[role="radio"]') as HTMLElement;
380-
firstItem.focus();
383+
act(() => firstItem.focus());
381384

382385
await user.keyboard(" ");
383-
expect(onChange).toHaveBeenCalled();
386+
387+
await waitFor(() => {
388+
expect(onChange).toHaveBeenCalled();
389+
});
384390
});
385391
});
386392

‎client/src/components/ui/sheet.test.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ describe("Sheet Components", () => {
4444
<Sheet open={true}>
4545
<SheetContent>
4646
<SheetTitle>My Title</SheetTitle>
47+
<SheetDescription>Test description</SheetDescription>
4748
</SheetContent>
4849
</Sheet>,
4950
);
@@ -77,6 +78,7 @@ describe("Sheet Components", () => {
7778
<Sheet open={true}>
7879
<SheetContent>
7980
<SheetTitle className="custom-title">Title</SheetTitle>
81+
<SheetDescription>Test description</SheetDescription>
8082
</SheetContent>
8183
</Sheet>,
8284
);
@@ -116,6 +118,7 @@ describe("Sheet Components", () => {
116118
<Sheet open={true}>
117119
<SheetContent side="left">
118120
<SheetTitle>Title</SheetTitle>
121+
<SheetDescription>Test description</SheetDescription>
119122
</SheetContent>
120123
</Sheet>,
121124
);
@@ -127,6 +130,7 @@ describe("Sheet Components", () => {
127130
<Sheet open={true}>
128131
<SheetContent side="right">
129132
<SheetTitle>Title</SheetTitle>
133+
<SheetDescription>Test description</SheetDescription>
130134
</SheetContent>
131135
</Sheet>,
132136
);
@@ -138,6 +142,7 @@ describe("Sheet Components", () => {
138142
<Sheet open={true}>
139143
<SheetContent side="top">
140144
<SheetTitle>Title</SheetTitle>
145+
<SheetDescription>Test description</SheetDescription>
141146
</SheetContent>
142147
</Sheet>,
143148
);
@@ -149,6 +154,7 @@ describe("Sheet Components", () => {
149154
<Sheet open={true}>
150155
<SheetContent side="bottom">
151156
<SheetTitle>Title</SheetTitle>
157+
<SheetDescription>Test description</SheetDescription>
152158
</SheetContent>
153159
</Sheet>,
154160
);
@@ -160,6 +166,7 @@ describe("Sheet Components", () => {
160166
<Sheet open={true}>
161167
<SheetContent>
162168
<SheetTitle>Title</SheetTitle>
169+
<SheetDescription>Test description</SheetDescription>
163170
<SheetClose>Close</SheetClose>
164171
</SheetContent>
165172
</Sheet>,

0 commit comments

Comments
 (0)