Skip to content

Commit 4e35048

Browse files
montelaidevmontelaidev
committed
fix: test
1 parent 0da5333 commit 4e35048

File tree

1 file changed

+169
-34
lines changed

1 file changed

+169
-34
lines changed

‎ui/components/multichain-accounts/multichain-address-rows-hovered-list/multichain-hovered-address-rows-hovered-list.test.tsx‎

Lines changed: 169 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import React from 'react';
2-
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
2+
import {
3+
render,
4+
screen,
5+
fireEvent,
6+
waitFor,
7+
act,
8+
} from '@testing-library/react';
39
import { Provider } from 'react-redux';
410
import configureStore from 'redux-mock-store';
511
import { InternalAccount } from '@metamask/keyring-internal-api';
@@ -325,20 +331,32 @@ describe('MultichainHoveredAddressRowsList', () => {
325331
]);
326332
});
327333

328-
it('renders the component with aggregated rows', () => {
334+
it('renders the component with aggregated rows', async () => {
329335
renderComponent();
330336

331-
expect(
332-
screen.getByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
333-
).toBeInTheDocument();
337+
const triggerElement = screen.getByTestId('hover-trigger');
338+
fireEvent.mouseEnter(triggerElement.parentElement as HTMLElement);
339+
await waitFor(() => {
340+
expect(
341+
screen.getByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
342+
).toBeInTheDocument();
343+
});
334344

335345
const addressRows = screen.getAllByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROW);
336346
expect(addressRows.length).toBeGreaterThan(0);
337347
});
338348

339-
it('groups all eip155 scopes together', () => {
349+
it('groups all eip155 scopes together', async () => {
340350
renderComponent();
341351

352+
const triggerElement = screen.getByTestId('hover-trigger');
353+
fireEvent.mouseEnter(triggerElement.parentElement as HTMLElement);
354+
await waitFor(() => {
355+
expect(
356+
screen.getByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
357+
).toBeInTheDocument();
358+
});
359+
342360
const evmRow = screen
343361
.getByText(TEST_STRINGS.EVM_NETWORKS)
344362
.closest(`[data-testid="${TEST_IDS.MULTICHAIN_ADDRESS_ROW}"]`);
@@ -350,17 +368,33 @@ describe('MultichainHoveredAddressRowsList', () => {
350368
expect(avatarGroup).toBeInTheDocument();
351369
});
352370

353-
it('displays separate rows for non-eip155 accounts', () => {
371+
it('displays separate rows for non-eip155 accounts', async () => {
354372
renderComponent();
355373

374+
const triggerElement = screen.getByTestId('hover-trigger');
375+
fireEvent.mouseEnter(triggerElement.parentElement as HTMLElement);
376+
await waitFor(() => {
377+
expect(
378+
screen.getByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
379+
).toBeInTheDocument();
380+
});
381+
356382
expect(screen.getByText(TEST_STRINGS.BITCOIN_NETWORK)).toBeInTheDocument();
357383
expect(screen.getByText(TEST_STRINGS.SOLANA_NETWORK)).toBeInTheDocument();
358384
expect(screen.getByText(TEST_STRINGS.TRON_NETWORK)).toBeInTheDocument();
359385
});
360386

361-
it('applies priority sorting with grouped eip155 first', () => {
387+
it('applies priority sorting with grouped eip155 first', async () => {
362388
renderComponent();
363389

390+
const triggerElement = screen.getByTestId('hover-trigger');
391+
fireEvent.mouseEnter(triggerElement.parentElement as HTMLElement);
392+
await waitFor(() => {
393+
expect(
394+
screen.getByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
395+
).toBeInTheDocument();
396+
});
397+
364398
const addressRows = screen.getAllByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROW);
365399
const rowTexts = addressRows.map((row) => row.textContent);
366400

@@ -370,9 +404,17 @@ describe('MultichainHoveredAddressRowsList', () => {
370404
expect(rowTexts[3]).toContain(TEST_STRINGS.TRON_NETWORK);
371405
});
372406

373-
it('handles copy functionality for aggregated rows', () => {
407+
it('handles copy functionality for aggregated rows', async () => {
374408
renderComponent();
375409

410+
const triggerElement = screen.getByTestId('hover-trigger');
411+
fireEvent.mouseEnter(triggerElement.parentElement as HTMLElement);
412+
await waitFor(() => {
413+
expect(
414+
screen.getByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
415+
).toBeInTheDocument();
416+
});
417+
376418
const evmRow = screen
377419
.getByText(TEST_STRINGS.EVM_NETWORKS)
378420
.closest(`[data-testid="${TEST_IDS.MULTICHAIN_ADDRESS_ROW}"]`);
@@ -388,29 +430,49 @@ describe('MultichainHoveredAddressRowsList', () => {
388430
}
389431
});
390432

391-
it('displays truncated addresses', () => {
433+
it('displays truncated addresses', async () => {
392434
renderComponent();
393435

436+
const triggerElement = screen.getByTestId('hover-trigger');
437+
fireEvent.mouseEnter(triggerElement.parentElement as HTMLElement);
438+
await waitFor(() => {
439+
expect(
440+
screen.getByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
441+
).toBeInTheDocument();
442+
});
443+
394444
const addressElements = screen.getAllByText(/0x\w+\.\.\.\w+/u);
395445
expect(addressElements.length).toBeGreaterThan(0);
396446
});
397447

398-
it('handles invalid group id gracefully', () => {
448+
it('handles invalid group id gracefully', async () => {
399449
mockedGetInternalAccountListSpreadByScopesByGroupId.mockReturnValue([]);
400450
renderComponent('invalid-group-id' as AccountGroupId);
401451

402-
expect(
403-
screen.getByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
404-
).toBeInTheDocument();
452+
const triggerElement = screen.getByTestId('hover-trigger');
453+
fireEvent.mouseEnter(triggerElement.parentElement as HTMLElement);
454+
await waitFor(() => {
455+
expect(
456+
screen.getByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
457+
).toBeInTheDocument();
458+
});
405459

406460
expect(
407461
screen.queryAllByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROW),
408462
).toHaveLength(0);
409463
});
410464

411-
it('groups eip155 scopes together for each account', () => {
465+
it('groups eip155 scopes together for each account', async () => {
412466
renderComponent();
413467

468+
const triggerElement = screen.getByTestId('hover-trigger');
469+
fireEvent.mouseEnter(triggerElement.parentElement as HTMLElement);
470+
await waitFor(() => {
471+
expect(
472+
screen.getByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
473+
).toBeInTheDocument();
474+
});
475+
414476
const evmRow = screen
415477
.getByText(TEST_STRINGS.EVM_NETWORKS)
416478
.closest(`[data-testid="${TEST_IDS.MULTICHAIN_ADDRESS_ROW}"]`);
@@ -431,9 +493,17 @@ describe('MultichainHoveredAddressRowsList', () => {
431493
expect(screen.getByText(TEST_STRINGS.TRON_NETWORK)).toBeInTheDocument();
432494
});
433495

434-
it('respects priority order when multiple accounts have priority chains', () => {
496+
it('respects priority order when multiple accounts have priority chains', async () => {
435497
renderComponent();
436498

499+
const triggerElement = screen.getByTestId('hover-trigger');
500+
fireEvent.mouseEnter(triggerElement.parentElement as HTMLElement);
501+
await waitFor(() => {
502+
expect(
503+
screen.getByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
504+
).toBeInTheDocument();
505+
});
506+
437507
const addressRows = screen.getAllByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROW);
438508

439509
expect(addressRows.length).toBe(4);
@@ -458,9 +528,17 @@ describe('MultichainHoveredAddressRowsList', () => {
458528
mockHandleCopy.mockClear();
459529
});
460530

461-
it('copies address when clicking copy button', () => {
531+
it('copies address when clicking copy button', async () => {
462532
renderComponent();
463533

534+
const triggerElement = screen.getByTestId('hover-trigger');
535+
fireEvent.mouseEnter(triggerElement.parentElement as HTMLElement);
536+
await waitFor(() => {
537+
expect(
538+
screen.getByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
539+
).toBeInTheDocument();
540+
});
541+
464542
const evmRow = screen
465543
.getByText(TEST_STRINGS.EVM_NETWORKS)
466544
.closest(`[data-testid="${TEST_IDS.MULTICHAIN_ADDRESS_ROW}"]`);
@@ -476,9 +554,17 @@ describe('MultichainHoveredAddressRowsList', () => {
476554
);
477555
});
478556

479-
it('copies address when clicking on the row (not button)', () => {
557+
it('copies address when clicking on the row (not button)', async () => {
480558
renderComponent();
481559

560+
const triggerElement = screen.getByTestId('hover-trigger');
561+
fireEvent.mouseEnter(triggerElement.parentElement as HTMLElement);
562+
await waitFor(() => {
563+
expect(
564+
screen.getByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
565+
).toBeInTheDocument();
566+
});
567+
482568
const networkNameElement = screen.getByText(TEST_STRINGS.EVM_NETWORKS);
483569

484570
fireEvent.click(networkNameElement);
@@ -491,18 +577,34 @@ describe('MultichainHoveredAddressRowsList', () => {
491577
});
492578

493579
describe('View All Button', () => {
494-
it('renders the View All button', () => {
580+
it('renders the View All button', async () => {
495581
renderComponent();
496582

583+
const triggerElement = screen.getByTestId('hover-trigger');
584+
fireEvent.mouseEnter(triggerElement.parentElement as HTMLElement);
585+
await waitFor(() => {
586+
expect(
587+
screen.getByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
588+
).toBeInTheDocument();
589+
});
590+
497591
const buttons = screen.getAllByRole('button');
498592
expect(buttons.length).toBeGreaterThan(0);
499593
const viewAllButton = buttons[buttons.length - 1];
500594
expect(viewAllButton).toBeInTheDocument();
501595
});
502596

503-
it('navigates to the correct route when clicked', () => {
597+
it('navigates to the correct route when clicked', async () => {
504598
renderComponent();
505599

600+
const triggerElement = screen.getByTestId('hover-trigger');
601+
fireEvent.mouseEnter(triggerElement.parentElement as HTMLElement);
602+
await waitFor(() => {
603+
expect(
604+
screen.getByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
605+
).toBeInTheDocument();
606+
});
607+
506608
const buttons = screen.getAllByRole('button');
507609
const viewAllButton = buttons[buttons.length - 1];
508610

@@ -513,9 +615,17 @@ describe('MultichainHoveredAddressRowsList', () => {
513615
);
514616
});
515617

516-
it('navigates with properly encoded group ID', () => {
618+
it('navigates with properly encoded group ID', async () => {
517619
renderComponent(SPECIAL_GROUP_ID);
518620

621+
const triggerElement = screen.getByTestId('hover-trigger');
622+
fireEvent.mouseEnter(triggerElement.parentElement as HTMLElement);
623+
await waitFor(() => {
624+
expect(
625+
screen.getByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
626+
).toBeInTheDocument();
627+
});
628+
519629
const buttons = screen.getAllByRole('button');
520630
const viewAllButton = buttons[buttons.length - 1];
521631

@@ -586,7 +696,9 @@ describe('MultichainHoveredAddressRowsList', () => {
586696
).toBeInTheDocument();
587697

588698
// Fast forward timers to trigger the hide
589-
jest.advanceTimersByTime(300);
699+
await act(async () => {
700+
jest.advanceTimersByTime(300);
701+
});
590702

591703
await waitFor(() => {
592704
expect(
@@ -622,7 +734,9 @@ describe('MultichainHoveredAddressRowsList', () => {
622734
fireEvent.mouseEnter(popoverContent);
623735

624736
// Fast forward timers
625-
jest.advanceTimersByTime(300);
737+
await act(async () => {
738+
jest.advanceTimersByTime(300);
739+
});
626740

627741
// Popover should still be visible
628742
expect(
@@ -632,30 +746,51 @@ describe('MultichainHoveredAddressRowsList', () => {
632746
jest.useRealTimers();
633747
});
634748

635-
it('applies hover styles to trigger element', () => {
749+
it('applies hover styles to trigger element', async () => {
750+
jest.useFakeTimers();
636751
renderComponent();
637752

638753
const triggerElement = screen.getByTestId('hover-trigger');
639754
const containerElement = triggerElement.parentElement as HTMLElement;
640755

641-
// Initially no hover styles
642-
expect(containerElement.style.backgroundColor).toBe('');
756+
// Initially the popover should not be visible
757+
expect(
758+
screen.queryByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
759+
).not.toBeInTheDocument();
643760

644761
// Hover over the trigger
645762
fireEvent.mouseEnter(containerElement);
646763

647-
// Check hover styles are applied
648-
expect(containerElement.style.backgroundColor).toBe(
649-
'var(--color-background-default-hover)',
650-
);
764+
// Wait for popover to appear, which indicates hover state is active
765+
await waitFor(() => {
766+
expect(
767+
screen.getByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
768+
).toBeInTheDocument();
769+
});
770+
771+
// The component should have the hover state active
772+
// Since we can't directly check the inline styles in test environment,
773+
// we verify the behavior by checking that the popover is visible
651774

652775
// Leave hover
653776
fireEvent.mouseLeave(containerElement);
654777

655-
// Hover styles should be removed (after delay)
656-
setTimeout(() => {
657-
expect(containerElement.style.backgroundColor).toBe('');
658-
}, 300);
778+
// Popover should still be visible immediately after mouse leave
779+
expect(
780+
screen.getByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
781+
).toBeInTheDocument();
782+
783+
// Fast forward time to trigger the hide
784+
await act(async () => {
785+
jest.advanceTimersByTime(300);
786+
});
787+
788+
// Popover should be hidden after delay
789+
expect(
790+
screen.queryByTestId(TEST_IDS.MULTICHAIN_ADDRESS_ROWS_LIST),
791+
).not.toBeInTheDocument();
792+
793+
jest.useRealTimers();
659794
});
660795
});
661796
});

0 commit comments

Comments
 (0)