-
Notifications
You must be signed in to change notification settings - Fork 464
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Seedless Onboarding] Adjust Account center design (#2673)
* fix: Add MFA button to account center * fix: Add Delete account button on dev * fix: Extract WalletInfo logic from AccountCenter, use madProps and write tests * fix: Adjust disconnect wallet test * fix: Simplify mock
- Loading branch information
1 parent
5d05596
commit 3352841
Showing
10 changed files
with
466 additions
and
155 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 35 additions & 0 deletions
35
src/components/common/ConnectWallet/__tests__/AccountCenter.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { render } from '@/tests/test-utils' | ||
| import { AccountCenter } from '@/components/common/ConnectWallet/AccountCenter' | ||
| import { type EIP1193Provider } from '@web3-onboard/core' | ||
| import { act, waitFor } from '@testing-library/react' | ||
|
|
||
| const mockWallet = { | ||
| address: '0x1234567890123456789012345678901234567890', | ||
| chainId: '5', | ||
| label: '', | ||
| provider: null as unknown as EIP1193Provider, | ||
| } | ||
|
|
||
| describe('AccountCenter', () => { | ||
| it('should open and close the account center on click', async () => { | ||
| const { getByText, getByTestId } = render(<AccountCenter wallet={mockWallet} />) | ||
|
|
||
| const openButton = getByTestId('open-account-center') | ||
|
|
||
| act(() => { | ||
| openButton.click() | ||
| }) | ||
|
|
||
| const disconnectButton = getByText('Disconnect') | ||
|
|
||
| expect(disconnectButton).toBeInTheDocument() | ||
|
|
||
| act(() => { | ||
| disconnectButton.click() | ||
| }) | ||
|
|
||
| await waitFor(() => { | ||
| expect(disconnectButton).not.toBeInTheDocument() | ||
| }) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,184 @@ | ||
| import { render } from '@/tests/test-utils' | ||
| import { WalletInfo } from '@/components/common/WalletInfo/index' | ||
| import { type EIP1193Provider, type OnboardAPI } from '@web3-onboard/core' | ||
| import { type NextRouter } from 'next/router' | ||
| import * as mpcModule from '@/services/mpc/module' | ||
| import * as constants from '@/config/constants' | ||
| import * as mfaHelper from '@/components/settings/SecurityLogin/SocialSignerMFA/helper' | ||
| import { type Web3AuthMPCCoreKit } from '@web3auth/mpc-core-kit' | ||
| import { act } from '@testing-library/react' | ||
|
|
||
| const mockWallet = { | ||
| address: '0x1234567890123456789012345678901234567890', | ||
| chainId: '5', | ||
| label: '', | ||
| provider: null as unknown as EIP1193Provider, | ||
| } | ||
|
|
||
| const mockRouter = { | ||
| query: {}, | ||
| pathname: '', | ||
| } as NextRouter | ||
|
|
||
| const mockOnboard = { | ||
| connectWallet: jest.fn(), | ||
| disconnectWallet: jest.fn(), | ||
| setChain: jest.fn(), | ||
| } as unknown as OnboardAPI | ||
|
|
||
| describe('WalletInfo', () => { | ||
| beforeEach(() => { | ||
| jest.resetAllMocks() | ||
| }) | ||
|
|
||
| it('should display the wallet address', () => { | ||
| const { getByText } = render( | ||
| <WalletInfo | ||
| wallet={mockWallet} | ||
| resetAccount={jest.fn()} | ||
| mpcCoreKit={undefined} | ||
| router={mockRouter} | ||
| onboard={mockOnboard} | ||
| addressBook={{}} | ||
| handleClose={jest.fn()} | ||
| />, | ||
| ) | ||
|
|
||
| expect(getByText('0x1234...7890')).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('should display a switch wallet button', () => { | ||
| const { getByText } = render( | ||
| <WalletInfo | ||
| wallet={mockWallet} | ||
| resetAccount={jest.fn()} | ||
| mpcCoreKit={undefined} | ||
| router={mockRouter} | ||
| onboard={mockOnboard} | ||
| addressBook={{}} | ||
| handleClose={jest.fn()} | ||
| />, | ||
| ) | ||
|
|
||
| expect(getByText('Switch wallet')).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('should disconnect the wallet when the button is clicked', () => { | ||
| const { getByText } = render( | ||
| <WalletInfo | ||
| wallet={mockWallet} | ||
| resetAccount={jest.fn()} | ||
| mpcCoreKit={undefined} | ||
| router={mockRouter} | ||
| onboard={mockOnboard} | ||
| addressBook={{}} | ||
| handleClose={jest.fn()} | ||
| />, | ||
| ) | ||
|
|
||
| const disconnectButton = getByText('Disconnect') | ||
|
|
||
| expect(disconnectButton).toBeInTheDocument() | ||
|
|
||
| act(() => { | ||
| disconnectButton.click() | ||
| }) | ||
|
|
||
| expect(mockOnboard.disconnectWallet).toHaveBeenCalled() | ||
| }) | ||
|
|
||
| it('should display a Delete Account button on dev for social login', () => { | ||
| jest.spyOn(mpcModule, 'isSocialLoginWallet').mockReturnValue(true) | ||
| jest.spyOn(constants, 'IS_PRODUCTION', 'get').mockImplementation(() => false) | ||
|
|
||
| const { getByText } = render( | ||
| <WalletInfo | ||
| wallet={mockWallet} | ||
| resetAccount={jest.fn()} | ||
| mpcCoreKit={undefined} | ||
| router={mockRouter} | ||
| onboard={mockOnboard} | ||
| addressBook={{}} | ||
| handleClose={jest.fn()} | ||
| />, | ||
| ) | ||
|
|
||
| expect(getByText('Delete Account')).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('should not display a Delete Account on prod', () => { | ||
| jest.spyOn(mpcModule, 'isSocialLoginWallet').mockReturnValue(true) | ||
| jest.spyOn(constants, 'IS_PRODUCTION', 'get').mockImplementation(() => true) | ||
|
|
||
| const { queryByText } = render( | ||
| <WalletInfo | ||
| wallet={mockWallet} | ||
| resetAccount={jest.fn()} | ||
| mpcCoreKit={undefined} | ||
| router={mockRouter} | ||
| onboard={mockOnboard} | ||
| addressBook={{}} | ||
| handleClose={jest.fn()} | ||
| />, | ||
| ) | ||
|
|
||
| expect(queryByText('Delete Account')).not.toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('should not display a Delete Account if not social login', () => { | ||
| jest.spyOn(mpcModule, 'isSocialLoginWallet').mockReturnValue(false) | ||
| jest.spyOn(constants, 'IS_PRODUCTION', 'get').mockImplementation(() => false) | ||
|
|
||
| const { queryByText } = render( | ||
| <WalletInfo | ||
| wallet={mockWallet} | ||
| resetAccount={jest.fn()} | ||
| mpcCoreKit={undefined} | ||
| router={mockRouter} | ||
| onboard={mockOnboard} | ||
| addressBook={{}} | ||
| handleClose={jest.fn()} | ||
| />, | ||
| ) | ||
|
|
||
| expect(queryByText('Delete Account')).not.toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('should display an enable mfa button if mfa is not enabled', () => { | ||
| jest.spyOn(mpcModule, 'isSocialLoginWallet').mockReturnValue(true) | ||
| jest.spyOn(mfaHelper, 'isMFAEnabled').mockReturnValue(false) | ||
|
|
||
| const { getByText } = render( | ||
| <WalletInfo | ||
| wallet={mockWallet} | ||
| resetAccount={jest.fn()} | ||
| mpcCoreKit={{} as Web3AuthMPCCoreKit} | ||
| router={mockRouter} | ||
| onboard={mockOnboard} | ||
| addressBook={{}} | ||
| handleClose={jest.fn()} | ||
| />, | ||
| ) | ||
|
|
||
| expect(getByText('Add multifactor authentication')).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('should not display an enable mfa button if mfa is already enabled', () => { | ||
| jest.spyOn(mpcModule, 'isSocialLoginWallet').mockReturnValue(true) | ||
| jest.spyOn(mfaHelper, 'isMFAEnabled').mockReturnValue(true) | ||
|
|
||
| const { queryByText } = render( | ||
| <WalletInfo | ||
| wallet={mockWallet} | ||
| resetAccount={jest.fn()} | ||
| mpcCoreKit={{} as Web3AuthMPCCoreKit} | ||
| router={mockRouter} | ||
| onboard={mockOnboard} | ||
| addressBook={{}} | ||
| handleClose={jest.fn()} | ||
| />, | ||
| ) | ||
|
|
||
| expect(queryByText('Add multifactor authentication')).not.toBeInTheDocument() | ||
| }) | ||
| }) |
Oops, something went wrong.