test: networks and testnet mode e2e

e2e/helpers.ts

@@ -623,6 +623,17 @@ export async function navigateToSettingsPrivacy(
   await delayTime('medium');
 }
 
+export async function navigateToSettingsNetworks(
+  driver: WebDriver,
+  rootURL: string,
+) {
+  await goToPopup(driver, rootURL, '#/home');
+  await findElementByTestIdAndClick({ id: 'home-page-header-right', driver });
+  await findElementByTestIdAndClick({ id: 'settings-link', driver });
+  await findElementByTestIdAndClick({ id: 'networks-link', driver });
+  await delayTime('medium');
+}
+
 export async function toggleStatus(id: string, driver: WebDriver) {
   const toggleInput = await driver.wait(
     until.elementLocated(By.css(`[data-testid="${id}"] input`)),

e2e/parallel/networksAndTestnetModeFlow.test.ts

@@ -0,0 +1,207 @@
+import 'chromedriver';
+import 'geckodriver';
+import { WebDriver } from 'selenium-webdriver';
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
+
+import { ChainId } from '~/core/types/chains';
+
+import {
+  clickAcceptRequestButton,
+  delayTime,
+  doNotFindElementByTestId,
+  executePerformShortcut,
+  findElementByTestId,
+  findElementByTestIdAndClick,
+  findElementByText,
+  getAllWindowHandles,
+  getExtensionIdByName,
+  getRootUrl,
+  getWindowHandle,
+  goBackTwice,
+  goToPopup,
+  goToTestApp,
+  importWalletFlow,
+  initDriverWithOptions,
+  navigateToSettingsNetworks,
+  querySelector,
+  waitAndClick,
+} from '../helpers';
+import { TEST_VARIABLES } from '../walletVariables';
+
+let rootURL = getRootUrl();
+let driver: WebDriver;
+
+const browser = process.env.BROWSER || 'chrome';
+const os = process.env.OS || 'mac';
+
+describe('Networks & Testnet Mode flows', () => {
+  beforeAll(async () => {
+    driver = await initDriverWithOptions({
+      browser,
+      os,
+    });
+    const extensionId = await getExtensionIdByName(driver, 'Rainbow');
+    if (!extensionId) throw new Error('Extension not found');
+    rootURL += extensionId;
+  });
+  afterAll(async () => await driver.quit());
+
+  it('should be able import a wallet via seed', async () => {
+    await importWalletFlow(driver, rootURL, TEST_VARIABLES.EMPTY_WALLET.SECRET);
+  });
+
+  it('should be able to toggle testnet mode', async () => {
+    await navigateToSettingsNetworks(driver, rootURL);
+    await delayTime('short');
+
+    await findElementByTestIdAndClick({ driver, id: 'testnet-mode-toggle' });
+    await delayTime('medium');
+    const testnetBar = await findElementByTestId({
+      driver,
+      id: 'testnet-bar',
+    });
+    expect(testnetBar).toBeTruthy();
+
+    await findElementByTestIdAndClick({ driver, id: 'testnet-mode-toggle' });
+    await delayTime('medium');
+    const testnetBar2 = await doNotFindElementByTestId({
+      driver,
+      id: 'testnet-bar',
+    });
+    expect(testnetBar2).toBeFalsy();
+  });
+
+  it('should be able to toggle testnet mode shortcut', async () => {
+    await findElementByTestIdAndClick({
+      driver,
+      id: 'testnet-mode-shortcut-toggle',
+    });
+  });
+
+  it('should go back to home', async () => {
+    await goBackTwice(driver);
+  });
+
+  it('should be able to connect to bx test dapp', async () => {
+    await delayTime('long');
+    await goToTestApp(driver);
+    const dappHandler = await getWindowHandle({ driver });
+
+    const button = await findElementByText(driver, 'Connect Wallet');
+    expect(button).toBeTruthy();
+    await waitAndClick(button, driver);
+
+    const modalTitle = await findElementByText(driver, 'Connect a Wallet');
+    expect(modalTitle).toBeTruthy();
+
+    const mmButton = await querySelector(
+      driver,
+      '[data-testid="rk-wallet-option-rainbow"]',
+    );
+    await waitAndClick(mmButton, driver);
+
+    const { popupHandler } = await getAllWindowHandles({
+      driver,
+      dappHandler,
+    });
+
+    await driver.switchTo().window(popupHandler);
+
+    await clickAcceptRequestButton(driver);
+
+    await driver.switchTo().window(dappHandler);
+    const topButton = await querySelector(
+      driver,
+      '[data-testid="rk-account-button"]',
+    );
+
+    expect(topButton).toBeTruthy();
+    await waitAndClick(topButton, driver);
+
+    const ensLabel = await querySelector(driver, '[id="rk_profile_title"]');
+    expect(ensLabel).toBeTruthy();
+    await goToPopup(driver, rootURL, '#/home');
+  });
+
+  it('should enable and disable testnet mode clicking testnet mode in menu', async () => {
+    await findElementByTestIdAndClick({ id: 'home-page-header-right', driver });
+    await findElementByTestIdAndClick({ id: 'testnet-mode', driver });
+    await delayTime('medium');
+    const testnetBar = await findElementByTestId({
+      driver,
+      id: 'testnet-bar',
+    });
+    expect(testnetBar).toBeTruthy();
+    await findElementByTestIdAndClick({ id: 'home-page-header-right', driver });
+    await findElementByTestIdAndClick({ id: 'testnet-mode', driver });
+    await delayTime('medium');
+    const testnetBar2 = await doNotFindElementByTestId({
+      driver,
+      id: 'testnet-bar',
+    });
+    expect(testnetBar2).toBeFalsy();
+  });
+
+  it('should disable testnet mode with shortcut', async () => {
+    await executePerformShortcut({ driver, key: 't' });
+    await delayTime('medium');
+    const testnetBar = await findElementByTestId({
+      driver,
+      id: 'testnet-bar',
+    });
+    expect(testnetBar).toBeTruthy();
+    await executePerformShortcut({ driver, key: 't' });
+    await delayTime('medium');
+    const testnetBar2 = await doNotFindElementByTestId({
+      driver,
+      id: 'testnet-bar',
+    });
+    expect(testnetBar2).toBeFalsy();
+  });
+
+  it('should go to networks setting and disable ethereum networks', async () => {
+    await navigateToSettingsNetworks(driver, rootURL);
+    await findElementByTestIdAndClick({
+      driver,
+      id: `network-row-${ChainId.mainnet}`,
+    });
+  });
+
+  it('should go back to home and check ethereum networks are not available in dapp menu', async () => {
+    await goBackTwice(driver);
+    await findElementByTestIdAndClick({ id: 'home-page-header-left', driver });
+    await findElementByTestIdAndClick({
+      id: 'switch-networks-app-interation-item',
+      driver,
+    });
+    const foundEthereum = await doNotFindElementByTestId({
+      id: `switch-network-item-${ChainId.mainnet}`,
+      driver,
+    });
+    expect(foundEthereum).toBeFalsy();
+    const foundOptimism = await doNotFindElementByTestId({
+      id: `switch-network-item-${ChainId.optimism}`,
+      driver,
+    });
+    expect(foundOptimism).toBeTruthy();
+  });
+
+  it('should enable testnet mode and check testnet available networks', async () => {
+    await executePerformShortcut({ driver, key: 't' });
+    await findElementByTestIdAndClick({ id: 'home-page-header-left', driver });
+    await findElementByTestIdAndClick({
+      id: 'switch-networks-app-interation-item',
+      driver,
+    });
+    const foundEthereum = await doNotFindElementByTestId({
+      id: `switch-network-item-${ChainId.sepolia}`,
+      driver,
+    });
+    expect(foundEthereum).toBeFalsy();
+    const foundOptimism = await doNotFindElementByTestId({
+      id: `switch-network-item-${ChainId['optimism-goerli']}`,
+      driver,
+    });
+    expect(foundOptimism).toBeTruthy();
+  });
+});

src/entries/popup/components/AppConnectionMenu/AppConnectionMenu.tsx

@@ -274,7 +274,10 @@ export const AppConnectionMenu = ({
                     subMenuContent={
                       <Stack space="4px">
                         {!appSession ? (
-                          <Box paddingTop="12px">
+                          <Box
+                            testId="app-connection-menu-networks"
+                            paddingTop="12px"
+                          >
                             <Text
                               weight="bold"
                               color="labelTertiary"

src/entries/popup/components/TestnetBar/TestnetBar.tsx

@@ -23,6 +23,7 @@ export const TestnetBar = ({ testnetMode }: { testnetMode: boolean }) => {
         <Box
           as={motion.div}
           key={'testnet-bar'}
+          testId="testnet-bar"
           initial={{ opacity: 0, height: 0 }}
           animate={{ opacity: 1, height: '35px' }}
           exit={{ opacity: 0, height: 0 }}

src/entries/popup/pages/home/MoreMenu.tsx

@@ -57,7 +57,7 @@ export const MoreMenu = ({ children }: { children: React.ReactNode }) => {
         | 'qr-code'
         | 'support'
         | 'feedback'
-        | 'testnet_mode',
+        | 'testnet-mode',
     ) => {
       switch (value) {
         case 'settings':
@@ -79,7 +79,7 @@ export const MoreMenu = ({ children }: { children: React.ReactNode }) => {
         case 'feedback':
           goToNewTab({ url: RAINBOW_FEEDBACK_URL });
           break;
-        case 'testnet_mode':
+        case 'testnet-mode':
           handleTestnetMode();
           break;
       }
@@ -161,10 +161,10 @@ export const MoreMenu = ({ children }: { children: React.ReactNode }) => {
               {testnetModeShortcutEnabled && (
                 <DropdownMenuRadioItem
                   highlightAccentColor
-                  value="testnet_mode"
+                  value="testnet-mode"
                 >
                   <HomeMenuRow
-                    testId="testnet_mode"
+                    testId="testnet-mode"
                     leftComponent={<MenuItem.TextIcon icon="🕹" />}
                     centerComponent={
                       <Text size="14pt" weight="semibold">

src/entries/popup/pages/settings/networks.tsx

@@ -87,33 +87,33 @@ export function SettingsNetworks() {
             <Box paddingHorizontal="1px" paddingVertical="1px">
               {sortNetworks(userChainsOrder, supportedChains).map(
                 (chain: Chain, index) => (
-                  <DraggableItem
-                    key={`${chain.id}`}
-                    id={`${chain.id}`}
-                    index={index}
-                  >
-                    <MenuItem
-                      first={index === 0}
-                      leftComponent={
-                        <ChainBadge chainId={chain.id} size="18" shadow />
-                      }
-                      rightComponent={
-                        userChains[chain.id] ? <MenuItem.SelectionIcon /> : null
-                      }
-                      key={chain.name}
-                      titleComponent={<MenuItem.Title text={chain.name} />}
-                      labelComponent={
-                        <Text
-                          color={'labelTertiary'}
-                          size="11pt"
-                          weight={'medium'}
-                        >
-                          {chainLabel({ chainId: chain.id })}
-                        </Text>
-                      }
-                      onClick={() => updateChain(chain)}
-                    />
-                  </DraggableItem>
+                  <Box key={`${chain.id}`} testId={`network-row-${chain.id}`}>
+                    <DraggableItem id={`${chain.id}`} index={index}>
+                      <MenuItem
+                        first={index === 0}
+                        leftComponent={
+                          <ChainBadge chainId={chain.id} size="18" shadow />
+                        }
+                        rightComponent={
+                          userChains[chain.id] ? (
+                            <MenuItem.SelectionIcon />
+                          ) : null
+                        }
+                        key={chain.name}
+                        titleComponent={<MenuItem.Title text={chain.name} />}
+                        labelComponent={
+                          <Text
+                            color={'labelTertiary'}
+                            size="11pt"
+                            weight={'medium'}
+                          >
+                            {chainLabel({ chainId: chain.id })}
+                          </Text>
+                        }
+                        onClick={() => updateChain(chain)}
+                      />
+                    </DraggableItem>
+                  </Box>
                 ),
               )}
             </Box>
@@ -162,7 +162,7 @@ export function SettingsNetworks() {
             }
             rightComponent={
               <Toggle
-                testId="testnet-mode-toggle"
+                testId="testnet-mode-shortcut-toggle"
                 checked={testnetModeShortcutEnabled}
                 handleChange={() =>
                   setTestnetModeShortcutEnabled(!testnetModeShortcutEnabled)