test(extension): fix multi-wallet create and restore tests

input-output-hk · May 3, 2024 · b9116ba · b9116ba
1 parent 5726d45
commit b9116ba
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 37 deletions.
diff --git a/...n-wallet/src/views/browser-view/features/multi-wallet/create-wallet/CreateWallet.test.tsx b/...n-wallet/src/views/browser-view/features/multi-wallet/create-wallet/CreateWallet.test.tsx
@@ -27,7 +27,8 @@ import {
   fillMnemonic,
   getNextButton,
   mnemonicWords,
-  setupStep
+  setupStep,
+  getBackButton
 } from '../tests/utils';
 import { StoreProvider } from '@src/stores';
 import { APP_MODE_BROWSER } from '@src/utils/constants';
@@ -37,20 +38,22 @@ import { AnalyticsTracker } from '@providers/AnalyticsProvider/analyticsTracker'
 import { CreateWallet } from './CreateWallet';
 
 jest.mock('@providers/AnalyticsProvider', () => ({
-  useAnalyticsContext: jest.fn<Pick<AnalyticsTracker, 'sendMergeEvent' | 'sendEventToPostHog'>, []>().mockReturnValue({
-    sendMergeEvent: jest.fn().mockReturnValue(''),
-    sendEventToPostHog: jest.fn().mockReturnValue('')
-  })
+  useAnalyticsContext: jest
+    .fn<Pick<AnalyticsTracker, 'sendMergeEvent' | 'sendEventToPostHog' | 'sendAliasEvent'>, []>()
+    .mockReturnValue({
+      sendMergeEvent: jest.fn().mockReturnValue(''),
+      sendEventToPostHog: jest.fn().mockReturnValue(''),
+      sendAliasEvent: jest.fn().mockReturnValue('')
+    })
 }));
 
 const recoveryPhraseStep = async () => {
-  const nextButton = getNextButton();
-
+  let nextButton = getNextButton();
   fireEvent.click(nextButton);
-
   await fillMnemonic(0, DEFAULT_MNEMONIC_LENGTH);
-
-  await screen.findByText('Total wallet balance');
+  nextButton = getNextButton();
+  fireEvent.click(nextButton);
+  await screen.findByText("Let's set up your new wallet");
 };
 
 describe('Multi Wallet Setup/Create Wallet', () => {
@@ -80,7 +83,7 @@ describe('Multi Wallet Setup/Create Wallet', () => {
       <AppSettingsProvider>
         <DatabaseProvider>
           <StoreProvider appMode={APP_MODE_BROWSER}>
-            <MemoryRouter initialEntries={[walletRoutePaths.newWallet.create.setup]}>
+            <MemoryRouter initialEntries={[walletRoutePaths.newWallet.create.root]}>
               <CreateWallet providers={providers as Providers} />
               {createAssetsRoute()}
             </MemoryRouter>
@@ -89,16 +92,18 @@ describe('Multi Wallet Setup/Create Wallet', () => {
       </AppSettingsProvider>
     );
 
-    await setupStep();
     await recoveryPhraseStep();
+    await setupStep();
   });
 
   test('should emit correct value for shouldShowDialog', async () => {
+    providers.generateMnemonicWords.mockReturnValue(mnemonicWords);
+
     render(
       <AppSettingsProvider>
         <DatabaseProvider>
           <StoreProvider appMode={APP_MODE_BROWSER}>
-            <MemoryRouter initialEntries={[walletRoutePaths.newWallet.create.setup]}>
+            <MemoryRouter initialEntries={[walletRoutePaths.newWallet.create.root]}>
               <CreateWallet providers={providers as Providers} />
               {createAssetsRoute()}
             </MemoryRouter>
@@ -107,14 +112,14 @@ describe('Multi Wallet Setup/Create Wallet', () => {
       </AppSettingsProvider>
     );
 
-    const nameInput = screen.getByTestId('wallet-name-input');
-
-    fireEvent.change(nameInput, { target: { value: 'My X Wallet' } });
+    expect(await firstValueFrom(providers.confirmationDialog.shouldShowDialog$)).toBe(false);
 
+    const nextButton = getNextButton();
+    fireEvent.click(nextButton);
     expect(await firstValueFrom(providers.confirmationDialog.shouldShowDialog$)).toBe(true);
 
-    fireEvent.change(nameInput, { target: { value: '' } });
-
+    const backButton = getBackButton();
+    fireEvent.click(backButton);
     expect(await firstValueFrom(providers.confirmationDialog.shouldShowDialog$)).toBe(false);
   });
 });
diff --git a/...wallet/src/views/browser-view/features/multi-wallet/restore-wallet/RestoreWallet.test.tsx b/...wallet/src/views/browser-view/features/multi-wallet/restore-wallet/RestoreWallet.test.tsx
@@ -18,11 +18,11 @@ jest.doMock('@hooks/useWalletManager', () => ({
 
 import React from 'react';
 import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { Providers } from './types';
 import { walletRoutePaths } from '@routes';
-import { DEFAULT_MNEMONIC_LENGTH, createAssetsRoute, fillMnemonic, setupStep } from '../tests/utils';
+import { DEFAULT_MNEMONIC_LENGTH, createAssetsRoute, fillMnemonic, setupStep, getNextButton } from '../tests/utils';
 import { StoreProvider } from '@src/stores';
 import { APP_MODE_BROWSER } from '@src/utils/constants';
 import { AppSettingsProvider, DatabaseProvider } from '@providers';
@@ -39,7 +39,9 @@ jest.mock('@providers/AnalyticsProvider', () => ({
 
 const recoveryPhraseStep = async () => {
   await fillMnemonic(0, DEFAULT_MNEMONIC_LENGTH);
-  await screen.findByText('Total wallet balance');
+  const nextButton = getNextButton();
+  fireEvent.click(nextButton);
+  await screen.findByText("Let's set up your new wallet");
 };
 
 describe('Multi Wallet Setup/Restore Wallet', () => {
@@ -50,14 +52,6 @@ describe('Multi Wallet Setup/Restore Wallet', () => {
     };
   };
 
-  const originalWarn = console.error.bind(console.error);
-  beforeAll(() => {
-    console.error = (msg) => !msg.toString().includes('Warning: [antd:') && originalWarn(msg);
-  });
-  afterAll(() => {
-    console.error = originalWarn;
-  });
-
   beforeEach(() => {
     providers = {
       createWallet: jest.fn(),
@@ -74,7 +68,7 @@ describe('Multi Wallet Setup/Restore Wallet', () => {
       <AppSettingsProvider>
         <DatabaseProvider>
           <StoreProvider appMode={APP_MODE_BROWSER}>
-            <MemoryRouter initialEntries={[walletRoutePaths.newWallet.restore.setup]}>
+            <MemoryRouter initialEntries={[walletRoutePaths.newWallet.restore.root]}>
               <RestoreWallet providers={providers as Providers} />
               {createAssetsRoute()}
             </MemoryRouter>
@@ -83,7 +77,7 @@ describe('Multi Wallet Setup/Restore Wallet', () => {
       </AppSettingsProvider>
     );
 
-    await setupStep('restore');
     await recoveryPhraseStep();
+    await setupStep();
   });
 });
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/tests/utils.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/tests/utils.tsx
@@ -5,9 +5,11 @@ import { Route, Switch } from 'react-router-dom';
 
 export const getNextButton = (): HTMLElement => screen.queryByTestId('wallet-setup-step-btn-next');
 
+export const getBackButton = (): HTMLElement => screen.queryByTestId('wallet-setup-step-btn-back');
+
 export const DEFAULT_MNEMONIC_LENGTH = 24;
 
-export const setupStep = async (flow = 'create'): Promise<void> => {
+export const setupStep = async (): Promise<void> => {
   const nextButton = getNextButton();
   expect(nextButton).toBeDisabled();
 
@@ -23,9 +25,7 @@ export const setupStep = async (flow = 'create'): Promise<void> => {
   await waitFor(() => expect(nextButton).toBeEnabled());
   fireEvent.click(nextButton);
 
-  await screen.findByText(
-    flow === 'create' ? 'Start by saving your recovery phrase' : 'Enter your recovery passphrase'
-  );
+  await screen.findByText('Total wallet balance');
 };
 
 export const mnemonicWords =
@@ -36,7 +36,6 @@ export const mnemonicWords =
 export const fillMnemonic = async (from: number, to: number): Promise<void> => {
   const nextButton = getNextButton();
   const inputs = screen.queryAllByTestId('mnemonic-word-input');
-
   const words = mnemonicWords.slice(from, to);
 
   words.forEach((word, index) => {

diff --git a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupStepLayoutRevamp.tsx b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupStepLayoutRevamp.tsx
@@ -117,7 +117,7 @@ export const WalletSetupStepLayoutRevamp = ({
           {onNext && (
             <span ref={nextButtonContainerRef}>
               <Tooltip
-                visible={!isNextEnabled && !!toolTipText}
+                open={!isNextEnabled && !!toolTipText}
                 title={!isNextEnabled && toolTipText}
                 getPopupContainer={() => nextButtonContainerRef.current}
                 autoAdjustOverflow={false}