Skip to content

Commit 10e066d

Browse files
cursoragentcursoragent
committed
fix(toasts): preserve toast id for deduplication and scoped dismiss; update tests to new toast API
1 parent 1972fa5 commit 10e066d

4 files changed

Lines changed: 191 additions & 133 deletions

File tree

‎ui/components/app/perps/perps-deposit-toast.test.tsx‎

Lines changed: 131 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,31 @@ import { enLocale as messages } from '../../../../test/lib/i18n-helpers';
1111
import { submitRequestToBackground } from '../../../store/background-connection';
1212
import { PerpsDepositToast } from './perps-deposit-toast';
1313

14+
const mockToast = jest.fn();
1415
const mockToastDismiss = jest.fn();
15-
const mockToastError = jest.fn();
16-
const mockToastLoading = jest.fn();
17-
const mockToastSuccess = jest.fn();
1816

1917
jest.mock('../../../store/background-connection', () => ({
2018
submitRequestToBackground: jest.fn(),
2119
}));
2220

23-
jest.mock('../../ui/toast/toast', () => ({
24-
toast: {
25-
dismiss: (...args: unknown[]) => mockToastDismiss(...args),
26-
error: (...args: unknown[]) => mockToastError(...args),
27-
loading: (...args: unknown[]) => mockToastLoading(...args),
28-
success: (...args: unknown[]) => mockToastSuccess(...args),
29-
},
30-
ToastContent: () => null,
31-
}));
21+
jest.mock('../../ui/toast/toast', () => {
22+
const toast = Object.assign(
23+
(...args: unknown[]) => mockToast(...args),
24+
{ dismiss: (...args: unknown[]) => mockToastDismiss(...args) },
25+
);
26+
return {
27+
toast,
28+
ToastContent: ({
29+
title,
30+
description,
31+
dataTestId,
32+
}: {
33+
title: string;
34+
description?: string;
35+
dataTestId?: string;
36+
}) => null,
37+
};
38+
});
3239

3340
function buildPendingDepositTransaction(
3441
overrides: {
@@ -68,9 +75,7 @@ describe('PerpsDepositToast', () => {
6875
renderWithProvider(<PerpsDepositToast />, store);
6976

7077
expect(mockToastDismiss).toHaveBeenCalledWith('perps-deposit-toast');
71-
expect(mockToastLoading).not.toHaveBeenCalled();
72-
expect(mockToastSuccess).not.toHaveBeenCalled();
73-
expect(mockToastError).not.toHaveBeenCalled();
78+
expect(mockToast).not.toHaveBeenCalled();
7479
});
7580

7681
it('renders pending toast when mounting with deposit already in progress', () => {
@@ -85,17 +90,18 @@ describe('PerpsDepositToast', () => {
8590

8691
renderWithProvider(<PerpsDepositToast />, store);
8792

88-
expect(mockToastLoading).toHaveBeenCalledWith(
93+
expect(mockToast).toHaveBeenCalledWith(
8994
expect.objectContaining({
90-
props: expect.objectContaining({
91-
title: messages.perpsDepositToastPendingTitle.message,
92-
description: messages.perpsDepositToastPendingDescription.message,
95+
severity: 'default',
96+
id: 'perps-deposit-toast',
97+
hasNoTimeout: true,
98+
children: expect.objectContaining({
99+
props: expect.objectContaining({
100+
title: messages.perpsDepositToastPendingTitle.message,
101+
description: messages.perpsDepositToastPendingDescription.message,
102+
}),
93103
}),
94104
}),
95-
{
96-
id: 'perps-deposit-toast',
97-
duration: Infinity,
98-
},
99105
);
100106
});
101107

@@ -119,17 +125,18 @@ describe('PerpsDepositToast', () => {
119125

120126
renderWithProvider(<PerpsDepositToast />, store);
121127

122-
expect(mockToastLoading).toHaveBeenCalledWith(
128+
expect(mockToast).toHaveBeenCalledWith(
123129
expect.objectContaining({
124-
props: expect.objectContaining({
125-
title: messages.perpsDepositToastPendingTitle.message,
126-
description: messages.perpsDepositToastPendingDescription.message,
130+
severity: 'default',
131+
id: 'perps-deposit-toast',
132+
hasNoTimeout: true,
133+
children: expect.objectContaining({
134+
props: expect.objectContaining({
135+
title: messages.perpsDepositToastPendingTitle.message,
136+
description: messages.perpsDepositToastPendingDescription.message,
137+
}),
127138
}),
128139
}),
129-
{
130-
id: 'perps-deposit-toast',
131-
duration: Infinity,
132-
},
133140
);
134141
});
135142

@@ -153,7 +160,13 @@ describe('PerpsDepositToast', () => {
153160

154161
renderWithProvider(<PerpsDepositToast />, store);
155162

156-
expect(mockToastLoading).toHaveBeenCalled();
163+
expect(mockToast).toHaveBeenCalledWith(
164+
expect.objectContaining({
165+
severity: 'default',
166+
id: 'perps-deposit-toast',
167+
hasNoTimeout: true,
168+
}),
169+
);
157170
});
158171

159172
it('renders pending toast when mounting with deposit already in progress for perpsDepositAndOrder', () => {
@@ -172,7 +185,13 @@ describe('PerpsDepositToast', () => {
172185

173186
renderWithProvider(<PerpsDepositToast />, store);
174187

175-
expect(mockToastLoading).toHaveBeenCalled();
188+
expect(mockToast).toHaveBeenCalledWith(
189+
expect.objectContaining({
190+
severity: 'default',
191+
id: 'perps-deposit-toast',
192+
hasNoTimeout: true,
193+
}),
194+
);
176195
});
177196

178197
it('does not render the pending toast when the transaction is still unapproved', () => {
@@ -191,7 +210,7 @@ describe('PerpsDepositToast', () => {
191210

192211
renderWithProvider(<PerpsDepositToast />, store);
193212

194-
expect(mockToastLoading).not.toHaveBeenCalled();
213+
expect(mockToast).not.toHaveBeenCalled();
195214
});
196215

197216
it('renders success toast when lastDepositResult is successful', () => {
@@ -215,17 +234,17 @@ describe('PerpsDepositToast', () => {
215234

216235
renderWithProvider(<PerpsDepositToast />, store);
217236

218-
expect(mockToastSuccess).toHaveBeenCalledWith(
237+
expect(mockToast).toHaveBeenCalledWith(
219238
expect.objectContaining({
220-
props: expect.objectContaining({
221-
title: messages.perpsDepositToastSuccessTitle.message,
222-
description: messages.perpsDepositToastSuccessDescription.message,
239+
severity: 'success',
240+
id: 'perps-deposit-toast',
241+
children: expect.objectContaining({
242+
props: expect.objectContaining({
243+
title: messages.perpsDepositToastSuccessTitle.message,
244+
description: messages.perpsDepositToastSuccessDescription.message,
245+
}),
223246
}),
224247
}),
225-
{
226-
id: 'perps-deposit-toast',
227-
duration: 5000,
228-
},
229248
);
230249
});
231250

@@ -245,17 +264,17 @@ describe('PerpsDepositToast', () => {
245264

246265
renderWithProvider(<PerpsDepositToast />, store);
247266

248-
expect(mockToastSuccess).toHaveBeenCalledWith(
267+
expect(mockToast).toHaveBeenCalledWith(
249268
expect.objectContaining({
250-
props: expect.objectContaining({
251-
title: messages.perpsDepositToastSuccessTitle.message,
252-
description: messages.perpsDepositToastSuccessDescription.message,
269+
severity: 'success',
270+
id: 'perps-deposit-toast',
271+
children: expect.objectContaining({
272+
props: expect.objectContaining({
273+
title: messages.perpsDepositToastSuccessTitle.message,
274+
description: messages.perpsDepositToastSuccessDescription.message,
275+
}),
253276
}),
254277
}),
255-
{
256-
id: 'perps-deposit-toast',
257-
duration: 5000,
258-
},
259278
);
260279
});
261280

@@ -403,17 +422,17 @@ describe('PerpsDepositToast', () => {
403422

404423
renderWithProvider(<PerpsDepositToast />, store);
405424

406-
expect(mockToastError).toHaveBeenCalledWith(
425+
expect(mockToast).toHaveBeenCalledWith(
407426
expect.objectContaining({
408-
props: expect.objectContaining({
409-
title: messages.perpsDepositToastErrorTitle.message,
410-
description: messages.perpsDepositErrorBridgeFailed.message,
427+
severity: 'danger',
428+
id: 'perps-deposit-toast',
429+
children: expect.objectContaining({
430+
props: expect.objectContaining({
431+
title: messages.perpsDepositToastErrorTitle.message,
432+
description: messages.perpsDepositErrorBridgeFailed.message,
433+
}),
411434
}),
412435
}),
413-
{
414-
id: 'perps-deposit-toast',
415-
duration: 5000,
416-
},
417436
);
418437
});
419438

@@ -433,8 +452,17 @@ describe('PerpsDepositToast', () => {
433452

434453
renderWithProvider(<PerpsDepositToast />, store);
435454

436-
expect(mockToastSuccess).toHaveBeenCalled();
437-
expect(mockToastLoading).not.toHaveBeenCalled();
455+
expect(mockToast).toHaveBeenCalledWith(
456+
expect.objectContaining({
457+
severity: 'success',
458+
id: 'perps-deposit-toast',
459+
}),
460+
);
461+
expect(
462+
mockToast.mock.calls.some(
463+
(args) => (args?.[0] as { severity?: string })?.severity === 'default',
464+
),
465+
).toBe(false);
438466
});
439467

440468
it('renders pending toast when a new deposit transaction ID appears', () => {
@@ -449,7 +477,7 @@ describe('PerpsDepositToast', () => {
449477

450478
renderWithProvider(<PerpsDepositToast />, store);
451479

452-
expect(mockToastLoading).not.toHaveBeenCalled();
480+
expect(mockToast).not.toHaveBeenCalled();
453481

454482
act(() => {
455483
store.dispatch({
@@ -464,7 +492,13 @@ describe('PerpsDepositToast', () => {
464492
});
465493
});
466494

467-
expect(mockToastLoading).toHaveBeenCalled();
495+
expect(mockToast).toHaveBeenCalledWith(
496+
expect.objectContaining({
497+
severity: 'default',
498+
id: 'perps-deposit-toast',
499+
hasNoTimeout: true,
500+
}),
501+
);
468502
});
469503

470504
it('keeps showing the pending toast after a transaction ID appears', () => {
@@ -479,7 +513,7 @@ describe('PerpsDepositToast', () => {
479513

480514
renderWithProvider(<PerpsDepositToast />, store);
481515

482-
expect(mockToastLoading).not.toHaveBeenCalled();
516+
expect(mockToast).not.toHaveBeenCalled();
483517

484518
act(() => {
485519
store.dispatch({
@@ -497,7 +531,13 @@ describe('PerpsDepositToast', () => {
497531
});
498532
});
499533

500-
expect(mockToastLoading).toHaveBeenCalled();
534+
expect(mockToast).toHaveBeenCalledWith(
535+
expect.objectContaining({
536+
severity: 'default',
537+
id: 'perps-deposit-toast',
538+
hasNoTimeout: true,
539+
}),
540+
);
501541
});
502542

503543
it('shows completion toast when deposit result arrives', () => {
@@ -536,16 +576,16 @@ describe('PerpsDepositToast', () => {
536576
});
537577
});
538578

539-
expect(mockToastSuccess).toHaveBeenCalledWith(
579+
expect(mockToast).toHaveBeenCalledWith(
540580
expect.objectContaining({
541-
props: expect.objectContaining({
542-
title: messages.perpsDepositToastSuccessTitle.message,
581+
severity: 'success',
582+
id: 'perps-deposit-toast',
583+
children: expect.objectContaining({
584+
props: expect.objectContaining({
585+
title: messages.perpsDepositToastSuccessTitle.message,
586+
}),
543587
}),
544588
}),
545-
{
546-
id: 'perps-deposit-toast',
547-
duration: 5000,
548-
},
549589
);
550590
});
551591

@@ -578,17 +618,17 @@ describe('PerpsDepositToast', () => {
578618

579619
renderWithProvider(<PerpsDepositToast />, store);
580620

581-
expect(mockToastSuccess).toHaveBeenCalledWith(
621+
expect(mockToast).toHaveBeenCalledWith(
582622
expect.objectContaining({
583-
props: expect.objectContaining({
584-
title: messages.perpsDepositToastSuccessTitle.message,
585-
description: messages.perpsDepositToastSuccessDescription.message,
623+
severity: 'success',
624+
id: 'perps-deposit-toast',
625+
children: expect.objectContaining({
626+
props: expect.objectContaining({
627+
title: messages.perpsDepositToastSuccessTitle.message,
628+
description: messages.perpsDepositToastSuccessDescription.message,
629+
}),
586630
}),
587631
}),
588-
{
589-
id: 'perps-deposit-toast',
590-
duration: 5000,
591-
},
592632
);
593633
});
594634

@@ -613,7 +653,13 @@ describe('PerpsDepositToast', () => {
613653

614654
renderWithProvider(<PerpsDepositToast />, store);
615655

616-
expect(mockToastLoading).toHaveBeenCalled();
656+
expect(mockToast).toHaveBeenCalledWith(
657+
expect.objectContaining({
658+
severity: 'default',
659+
id: 'perps-deposit-toast',
660+
hasNoTimeout: true,
661+
}),
662+
);
617663
});
618664

619665
it('does not show pending when active id is confirmed even if another perps deposit stays submitted', () => {
@@ -637,6 +683,10 @@ describe('PerpsDepositToast', () => {
637683

638684
renderWithProvider(<PerpsDepositToast />, store);
639685

640-
expect(mockToastLoading).not.toHaveBeenCalled();
686+
expect(
687+
mockToast.mock.calls.some(
688+
(args) => (args?.[0] as { severity?: string })?.severity === 'default',
689+
),
690+
).toBe(false);
641691
});
642692
});

0 commit comments

Comments
 (0)