refactor: settings legacy test

src/app/components/account/account-list-item-layout.tsx

@@ -1,6 +1,6 @@
 import { Flex, Spinner, Stack, StackProps, color, useMediaQuery } from '@stacks/ui';
 import { truncateMiddle } from '@stacks/ui-utils';
-import { SettingsMenuSelectors } from '@tests/selectors/settings.selectors';
+import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 import { styled } from 'leather-styles/jsx';
 
 import { useConfigBitcoinEnabled } from '@app/query/common/remote-config/remote-config.query';
@@ -49,7 +49,7 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
     <Flex
       width="100%"
       key={`account-${index}`}
-      data-testid={SettingsMenuSelectors.SwitchAccountItemIndex.replace('[index]', `${index}`)}
+      data-testid={SettingsSelectors.SwitchAccountItemIndex.replace('[index]', `${index}`)}
       cursor="pointer"
       position="relative"
       onClick={onSelectAccount}

src/app/components/header.tsx

@@ -4,7 +4,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import { Box, Flex, FlexProps, IconButton, Stack, Text, useMediaQuery } from '@stacks/ui';
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
-import { SettingsMenuSelectors } from '@tests/selectors/settings.selectors';
+import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 import { token } from 'leather-styles/tokens';
 
 import { BRANCH_NAME, COMMIT_SHA } from '@shared/environment';
@@ -112,7 +112,7 @@ export const Header: React.FC<HeaderProps> = memo(props => {
         <NetworkModeBadge />
         {!hideActions && (
           <LeatherButton
-            data-testid={SettingsMenuSelectors.SettingsMenuBtn}
+            data-testid={SettingsSelectors.SettingsMenuBtn}
             onMouseUp={isShowingSettings ? undefined : () => setIsShowingSettings(true)}
             pointerEvents={isShowingSettings ? 'none' : 'all'}
             variant="ghost"

src/app/features/settings-dropdown/settings-dropdown.tsx

@@ -3,8 +3,7 @@ import { FiExternalLink } from 'react-icons/fi';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { Box, Flex, SlideFade, Stack, color } from '@stacks/ui';
-import { SettingsSelectors } from '@tests-legacy/integration/settings.selectors';
-import { SettingsMenuSelectors } from '@tests/selectors/settings.selectors';
+import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 
 import { RouteUrls } from '@shared/route-urls';
 
@@ -88,7 +87,7 @@ export function SettingsDropdown() {
             full: null,
             popup: (
               <MenuItem
-                data-testid={SettingsMenuSelectors.OpenWalletInNewTab}
+                data-testid={SettingsSelectors.OpenWalletInNewTab}
                 onClick={() => {
                   void analytics.track('click_open_in_new_tab_menu_item');
                   openIndexPageInNewTab(location.pathname);
@@ -102,7 +101,7 @@ export function SettingsDropdown() {
             ),
           })}
           <MenuItem
-            data-testid={SettingsMenuSelectors.GetSupportMenuItem}
+            data-testid={SettingsSelectors.GetSupportMenuItem}
             onClick={wrappedCloseCallback(() => {
               void analytics.track('click_get_support_menu_item');
               openInNewTab('https://leather.gitbook.io/guides/installing/contact-support');

tests-legacy/page-objects/wallet.page.ts

@@ -1,9 +1,8 @@
 import { Page } from '@playwright/test';
-import { SettingsSelectors } from '@tests-legacy/integration/settings.selectors';
 import { HomePageSelectorsLegacy } from '@tests-legacy/page-objects/home.selectors';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
-import { SettingsMenuSelectors } from '@tests/selectors/settings.selectors';
+import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 
 import { RouteUrls } from '@shared/route-urls';
 
@@ -36,7 +35,7 @@ export class WalletPage {
   $fundAccountBtn = createTestSelector(HomePageSelectorsLegacy.BtnFundAccount);
   $confirmBackedUpSecretKey = createTestSelector(OnboardingSelectors.BackUpSecretKeyBtn);
   $password = 'mysecretreallylongpassword';
-  $settingsButton = createTestSelector(SettingsMenuSelectors.SettingsMenuBtn);
+  $settingsButton = createTestSelector(SettingsSelectors.SettingsMenuBtn);
   $contractCallButton = createTestSelector('btn-contract-call');
   $settingsViewSecretKey = createTestSelector(SettingsSelectors.ViewSecretKeyListItem);
   $homePageBalancesList = createTestSelector(HomePageSelectorsLegacy.BalancesList);

tests/page-object-models/home.page.ts

@@ -1,7 +1,6 @@
 import { Locator, Page } from '@playwright/test';
-import { SettingsSelectors } from '@tests-legacy/integration/settings.selectors';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
-import { SettingsMenuSelectors } from '@tests/selectors/settings.selectors';
+import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
 import { createTestSelector } from '@tests/utils';
 
@@ -13,6 +12,13 @@ export class HomePage {
   readonly receiveButton: Locator;
   readonly sendButton: Locator;
   readonly swapButton: Locator;
+  readonly settingsButton: Locator;
+  readonly settingsViewSecretKey: Locator;
+  readonly signOutConfirmHasBackupCheckbox: Locator;
+  readonly signOutConfirmPasswordDisable: Locator;
+  readonly signOutDeleteWalletBtn: Locator;
+  readonly signOutSettingsListItem: Locator;
+  readonly lockSettingsListItem: Locator;
 
   readonly testNetworkSelector: string = createTestSelector(
     WalletDefaultNetworkConfigurationIds.testnet
@@ -24,6 +30,19 @@ export class HomePage {
     this.receiveButton = page.getByTestId(HomePageSelectors.ReceiveCryptoAssetBtn);
     this.sendButton = page.getByTestId(HomePageSelectors.SendCryptoAssetBtn);
     this.swapButton = page.getByTestId(HomePageSelectors.SwapBtn);
+    this.settingsButton = page.getByTestId(SettingsSelectors.SettingsMenuBtn);
+    this.settingsViewSecretKey = page.getByTestId(SettingsSelectors.ViewSecretKeyListItem);
+    this.signOutConfirmHasBackupCheckbox = page.getByTestId(
+      SettingsSelectors.SignOutConfirmHasBackupCheckbox
+    );
+    this.signOutConfirmPasswordDisable = page.getByTestId(
+      SettingsSelectors.SignOutConfirmPasswordDisable
+    );
+    this.signOutDeleteWalletBtn = page.getByTestId(
+      SettingsSelectors.BtnSignOutActuallyDeleteWallet
+    );
+    this.signOutSettingsListItem = page.getByTestId(SettingsSelectors.SignOutListItem);
+    this.lockSettingsListItem = page.getByTestId(SettingsSelectors.LockListItem);
   }
 
   async goToReceiveModal() {
@@ -68,7 +87,7 @@ export class HomePage {
   }
 
   async enableTestMode() {
-    await this.page.getByTestId(SettingsMenuSelectors.SettingsMenuBtn).click();
+    await this.page.getByTestId(SettingsSelectors.SettingsMenuBtn).click();
     await this.page.getByTestId(SettingsSelectors.ChangeNetworkAction).click();
     await (
       await this.page.waitForSelector(this.testNetworkSelector, { timeout: 30000 })
@@ -79,4 +98,26 @@ export class HomePage {
   async clickActivityTab() {
     await this.page.getByTestId(HomePageSelectors.ActivityTabBtn).click();
   }
+
+  async clickSettingsButton() {
+    await this.settingsButton.click();
+  }
+
+  async goToSecretKey() {
+    await this.clickSettingsButton();
+    await this.settingsViewSecretKey.click();
+  }
+
+  async signOut() {
+    await this.clickSettingsButton();
+    await this.signOutSettingsListItem.click();
+    await this.signOutConfirmHasBackupCheckbox.click();
+    await this.signOutConfirmPasswordDisable.click();
+    await this.signOutDeleteWalletBtn.click();
+  }
+
+  async lock() {
+    await this.clickSettingsButton();
+    await this.lockSettingsListItem.click();
+  }
 }

tests/selectors/settings.selectors.ts

@@ -1,4 +1,26 @@
-export enum SettingsMenuSelectors {
+export enum SettingsSelectors {
+  ToggleTheme = 'change-theme',
+  NetworkListItem = 'network-list-item',
+  MainnetNetworkItem = 'mainnet-network-item',
+  TestNetworkItem = 'test-network-item',
+  DevNetworkItem = 'dev-network-item',
+  ChangeNetworkAction = 'settings-change-network',
+  CurrentNetwork = 'current-network',
+  CurrentAccountDisplayName = 'current-account-display-name',
+  ViewSecretKeyListItem = 'settings-view-secret-key',
+  CopyKeyToClipboardBtn = 'copy-key-to-clipboard-btn',
+  SignOutListItem = 'settings-sign-out',
+  SignOutConfirmHasBackupCheckbox = 'sign-out-confirm-has-backup-checkbox',
+  SignOutConfirmPasswordDisable = 'sign-out-confirm-password-disable',
+  BtnSignOutReturnToHomeScreen = 'btn-sign-out-return-to-home-screen',
+  BtnSignOutActuallyDeleteWallet = 'btn-sign-out-actually-delete-wallet',
+  LockListItem = 'settings-lock',
+  EnterPasswordInput = 'password-input',
+  UnlockWalletBtn = 'unlock-wallet-btn',
+  BtnAddNetwork = 'btn-add-network',
+  ShowSecretKeyBtn = 'show-secret-key-btn',
+
+  // settings menu
   GetSupportMenuItem = 'get-support-menu-item',
   SettingsMenuBtn = 'settings-menu-btn',
   SwitchAccountMenuItem = 'switch-account-menu-item',

tests/specs/settings/settings-menu.spec.ts

@@ -1,4 +1,4 @@
-import { SettingsMenuSelectors } from '@tests/selectors/settings.selectors';
+import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 
 import { test } from '../../fixtures/fixtures';
 
@@ -9,11 +9,11 @@ test.describe('Settings menu', () => {
   });
 
   test('that menu item takes user to support page', async ({ page }) => {
-    await page.getByTestId(SettingsMenuSelectors.SettingsMenuBtn).click();
+    await page.getByTestId(SettingsSelectors.SettingsMenuBtn).click();
 
     const [supportPage] = await Promise.all([
       page.waitForEvent('popup'),
-      page.getByTestId(SettingsMenuSelectors.GetSupportMenuItem).click(),
+      page.getByTestId(SettingsSelectors.GetSupportMenuItem).click(),
     ]);
 
     await test

tests/specs/settings/settings.spec.ts

@@ -0,0 +1,55 @@
+import { TEST_PASSWORD } from '@tests/mocks/constants';
+import { SettingsSelectors } from '@tests/selectors/settings.selectors';
+
+import { test } from '../../fixtures/fixtures';
+
+test.describe('Settings integration tests', () => {
+  test.beforeEach(async ({ extensionId, globalPage, onboardingPage }) => {
+    await globalPage.setupAndUseApiCalls(extensionId);
+    await onboardingPage.signInWithTestAccount(extensionId);
+  });
+
+  test('should be able to view and save secret key to clipboard', async ({ page, homePage }) => {
+    await homePage.goToSecretKey();
+    await page.getByTestId(SettingsSelectors.EnterPasswordInput).fill(TEST_PASSWORD);
+    await page.getByTestId(SettingsSelectors.UnlockWalletBtn).click();
+    await page.getByTestId(SettingsSelectors.CopyKeyToClipboardBtn).click();
+
+    const copySuccessMessage = await page
+      .getByTestId(SettingsSelectors.CopyKeyToClipboardBtn)
+      .innerText();
+
+    test.expect(copySuccessMessage).toContain('Copied!');
+  });
+
+  test('should be able to sign out, lock and unlock the extension', async ({
+    homePage,
+    page,
+    onboardingPage,
+  }) => {
+    await homePage.signOut();
+    await onboardingPage.signInExistingUser();
+
+    await homePage.lock();
+
+    await page.getByTestId(SettingsSelectors.EnterPasswordInput).fill(TEST_PASSWORD);
+    await page.getByTestId(SettingsSelectors.UnlockWalletBtn).click();
+
+    const displayName = await page
+      .getByTestId(SettingsSelectors.CurrentAccountDisplayName)
+      .innerText();
+
+    test.expect(displayName).toEqual('Account 1');
+  });
+
+  test('should be able to change network', async ({ homePage, page }) => {
+    await homePage.clickSettingsButton();
+    const currentNetwork = await page.getByTestId(SettingsSelectors.CurrentNetwork).innerText();
+    test.expect(currentNetwork).toContain('mainnet');
+
+    await page.getByTestId(SettingsSelectors.ChangeNetworkAction).click();
+    await page.waitForTimeout(850);
+    const networkListItems = await page.getByTestId(SettingsSelectors.NetworkListItem).all();
+    test.expect(networkListItems).toHaveLength(4);
+  });
+});