New automation tests

.eslintrc

@@ -5,12 +5,19 @@
     "plugin:react-hooks/recommended",
     "plugin:prettier/recommended",
     "plugin:import/recommended",
-    "plugin:import/typescript"
+    "plugin:import/typescript",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "plugin:react/recommended"
   ],
   "plugins": [
     "jsx-a11y",
     "react-hooks",
-    "import"
+    "import",
+    "prettier",
+    "@typescript-eslint",
+    "react"
   ],
   "parser": "@typescript-eslint/parser",
   "settings": {

README.md

@@ -160,7 +160,7 @@ You should install Redux DevTools browser extension and connect it to Redux DevT
 
 Write tests into `e2e-tests` folder.
 
-To run e2e tests, you must use npm script `npm run e2e:chrome:ui:popup` or `e2e:chrome:ui:onboarding`.
+To run e2e tests, you must use npm script `` or `e2e:chrome:ui:onboarding`.npm run e2e:chrome:ui:popup
 Tests are run in UI mode.
 
 All information

e2e-tests/constants.ts

@@ -1,6 +1,8 @@
+import { Page } from '@playwright/test';
 import path from 'path';
 
 export const vaultPassword = '3hQqzYn4C7Y8rEZTVEZb';
+export const newPassword = 'this is new password';
 export const twentyFourWordsSecretPhrase =
   'hold matrix spider subway bottom jazz charge fire lawn valley stay coil moral hospital dream cycle multiply december agree huge major tower devote old';
 export const twelveWordsSecretPhrase =
@@ -20,7 +22,8 @@ export const torusSecretKeyHex =
 export const ACCOUNT_NAMES = {
   defaultFirstAccountName: 'Account 1',
   defaultSecondAccountName: 'Account 2',
-  createdAccountName: 'New account 1',
+  createdAccountName: 'First New Account',
+  createdAccountName2: 'Second New account ',
   importedPemAccountName: 'Imported pem account',
   renamedAccountName: 'Renamed account',
   importedCerAccountName: 'Imported cer account',
@@ -109,7 +112,33 @@ export const NEW_VALIDATOR_FOR_STAKE = {
 export const URLS = {
   rpc: 'https://node.testnet.cspr.cloud/rpc'
 };
-
+export function createLocators(page: Page) {
+  return {
+    accountSwitcher: page.getByTestId('connection-status-modal'),
+    firstAccount: page.locator(
+      "span[type='bodySemiBold'].sc-iOeugr.hnMrar.sc-iJbNxu.bAimRi"
+    ),
+    CSPRtotalBalance: page.locator('span[type="CSPRBold"]'),
+    liquidBalance: page.locator(
+      '#layout-content-container > div > div.sc-gGvHcT.LEYqH > div > div.sc-hLBbgP.sc-kDvujY.bxIaNA.czrHSx > div.sc-hLBbgP.sc-kDvujY.nnmro.czrHSx > div.sc-hLBbgP.sc-kDvujY.sc-fmixVB.eJhjZ.czrHSx.jIbqvc > div:nth-child(1) > div > span.sc-iOeugr.fFyyCL'
+    ),
+    delegatedBalance: page.locator(
+      '//*[@id="layout-content-container"]/div/div[1]/div/div[2]/div[2]/div[2]/div[2]/div/span[1]'
+    ),
+    undelegatingBalance: page.locator(
+      '//*[@id="layout-content-container"]/div/div[1]/div/div[2]/div[2]/div[2]/div[3]/div/span[1]'
+    ),
+    totalBalanceUSD: page.locator(
+      '//span[@type="captionRegular" and @color="contentSecondary"]'
+    ),
+    threeDotsMenu: page.locator(
+      "//*[contains(@class, 'sc-eJDSGI') and contains(@class, 'bMCuLR')]"
+    )
+  };
+}
+export function accountSettingLocator(accountName: string) {
+  return `xpath=//div[contains(@class, 'sc-hLBbgP') and contains(@class, 'fYMUrO')]//span[text()='${accountName}']/ancestor::div[contains(@class, 'sc-hLBbgP')]/following-sibling::div[@data-testid='popover-children-container']`;
+}
 export const RPC_RESPONSE = {
   success: {
     status: 200,

e2e-tests/fixtures.ts

@@ -1,14 +1,15 @@
 import {
-  test as base,
-  chromium,
   type BrowserContext,
-  Page
+  Page,
+  test as base,
+  chromium
 } from '@playwright/test';
 import path from 'path';
 
 import {
   DEFAULT_FIRST_ACCOUNT,
   PLAYGROUND_URL,
+  newPassword,
   vaultPassword
 } from './constants';
 
@@ -212,6 +213,12 @@ export const popup = test.extend<{
   createAccount: (newAccountName: string) => Promise<void>;
   connectAccounts: () => Promise<void>;
   addContact: () => Promise<void>;
+  providePassword: (popupPage?: Page) => Promise<void>;
+  passwordTimeout: (popupPage?: Page) => Promise<void>;
+  changePassword: (popupPage?: Page) => Promise<void>;
+  provideNewPassword: (popupPage?: Page) => Promise<void>;
+  unlockVaultNewPassword: (popupPage?: Page) => Promise<void>;
+  passwordDontMatch: (popupPage?: Page) => Promise<void>;
 }>({
   popupPage: async ({ extensionId, page }, use) => {
     await page.goto(`chrome-extension://${extensionId}/popup.html`);
@@ -225,10 +232,26 @@ export const popup = test.extend<{
         .getByPlaceholder('Password', { exact: true })
         .fill(vaultPassword);
       await currentPage.getByRole('button', { name: 'Unlock wallet' }).click();
+      await page.waitForSelector('text=Total balance', {
+        state: 'visible',
+        timeout: 20000
+      });
     };
 
     await use(unlockVault);
   },
+  unlockVaultNewPassword: async ({ page }, use) => {
+    const unlockVaultNewPassword = async (popupPage?: Page) => {
+      const currentPage = popupPage || page;
+
+      await currentPage
+        .getByPlaceholder('Password', { exact: true })
+        .fill(newPassword);
+      await currentPage.getByRole('button', { name: 'Unlock wallet' }).click();
+    };
+
+    await use(unlockVaultNewPassword);
+  },
   lockVault: async ({ page }, use) => {
     const lockVault = async () => {
       await page.getByTestId('menu-open-icon').click();
@@ -291,7 +314,81 @@ export const popup = test.extend<{
     };
 
     await use(addContact);
+  },
+
+  providePassword: async ({ page }, use) => {
+    const providePassword = async (popupPage?: Page) => {
+      const currentPage = popupPage || page;
+
+      await currentPage
+        .getByPlaceholder('Password', { exact: true })
+        .fill(vaultPassword);
+      await currentPage.getByRole('button', { name: 'Continue' }).click();
+    };
+
+    await use(providePassword);
+  },
+  provideNewPassword: async ({ page }, use) => {
+    const provideNewPassword = async (popupPage?: Page) => {
+      const currentPage = popupPage || page;
+
+      await currentPage
+        .getByPlaceholder('Password', { exact: true })
+        .fill(newPassword);
+      await currentPage.getByRole('button', { name: 'Continue' }).click();
+    };
+
+    await use(provideNewPassword);
+  },
+  changePassword: async ({ page }, use) => {
+    const changePassword = async (popupPage?: Page) => {
+      const currentPage = popupPage || page;
+
+      await currentPage
+        .getByPlaceholder('Password', { exact: true })
+        .fill(newPassword);
+      await currentPage.getByPlaceholder('Confirm password').fill(newPassword);
+
+      await currentPage.getByRole('button', { name: 'Continue' }).click();
+
+      await page.waitForTimeout(2000);
+    };
+
+    await use(changePassword);
+  },
+  passwordDontMatch: async ({ page }, use) => {
+    const changePassword = async (popupPage?: Page) => {
+      const currentPage = popupPage || page;
+
+      await currentPage
+        .getByPlaceholder('Password', { exact: true })
+        .fill(newPassword);
+      await currentPage
+        .getByPlaceholder('Confirm password')
+        .fill(vaultPassword);
+
+      await currentPage.getByRole('button', { name: 'Continue' }).click();
+
+      await page.waitForTimeout(2000);
+    };
+
+    await use(changePassword);
+  },
+
+  passwordTimeout: async ({ page }, use) => {
+    const passwordTimeout = async (popupPage?: Page) => {
+      const currentPage = popupPage || page;
+
+      await currentPage
+        .getByPlaceholder('Password', { exact: true })
+        .fill('wrong password');
+
+      for (let i = 0; i < 5; i++) {
+        await currentPage.getByRole('button', { name: 'Continue' }).click();
+      }
+    };
+
+    await use(passwordTimeout);
   }
 });
-
 export const popupExpect = popup.expect;

e2e-tests/onboarding-flow/confirm-secret-phrase-flow.spec.ts

@@ -1,5 +1,6 @@
-import { onboardingExpect, onboarding } from '../fixtures';
 import { DEFAULT_FIRST_ACCOUNT } from '../constants';
+import { createLocators } from '../constants';
+import { onboarding, onboardingExpect } from '../fixtures';
 
 onboarding.describe('Onboarding UI: confirm secret phrase flow', () => {
   onboarding(
@@ -30,6 +31,24 @@ onboarding.describe('Onboarding UI: confirm secret phrase flow', () => {
       await onboardingExpect(
         page.getByText(DEFAULT_FIRST_ACCOUNT.accountName)
       ).toBeVisible();
+      //Fresh account should have empty balances, no nft or deploy history
+      await onboardingExpect(page.getByText('NFTs')).toBeVisible();
+
+      await page.getByText('NFTs').click();
+
+      await onboardingExpect(
+        await page.getByText('No NFT tokens')
+      ).toBeVisible();
+
+      await page.getByText('Deploys').click();
+
+      await onboardingExpect(await page.getByText('No activity')).toBeVisible();
+
+      const locators = createLocators(page);
+      const accountSwitcher = locators.accountSwitcher;
+
+      // Perform actions and assertions
+      await accountSwitcher.click();
     }
   );
 

e2e-tests/popup/account/hide-account.spec.ts

@@ -0,0 +1,95 @@
+import { ACCOUNT_NAMES, accountSettingLocator } from '../../constants';
+import { popup, popupExpect } from '../../fixtures';
+
+popup.describe('Popup UI: create account', () => {
+  popup.beforeEach(async ({ unlockVault, popupPage }) => {
+    await unlockVault(popupPage);
+  });
+
+  popup(
+    'should hide account from menu',
+    async ({ popupPage, createAccount }) => {
+      await createAccount(ACCOUNT_NAMES.createdAccountName);
+
+      await popupExpect(
+        popupPage.getByText(ACCOUNT_NAMES.createdAccountName)
+      ).toBeVisible();
+
+      await popupPage.getByTestId('menu-open-icon').click();
+      await popupPage.getByText('All accounts').click();
+      await popupExpect(popupPage.locator('canvas').nth(2)).toBeVisible;
+      await popupPage.waitForLoadState('networkidle');
+
+      await popupExpect(
+        popupPage.locator(accountSettingLocator('Account 1'))
+      ).toBeVisible();
+
+      await popupPage.locator(accountSettingLocator('Account 1')).click();
+
+      await popupPage.getByText('Hide from list').waitFor({ state: 'visible' });
+      await popupPage.getByText('Hide from list').click();
+
+      await popupPage.locator(accountSettingLocator('Account 2')).click();
+
+      await popupPage.getByText('Hide from list').click();
+
+      await popupPage
+        .locator(accountSettingLocator('First New Account'))
+        .click();
+
+      await popupPage.getByText('Hide from list').click();
+
+      await popupPage.waitForLoadState('domcontentloaded');
+
+      await popupPage.getByTestId('connection-status-modal').click();
+      await popupPage.getByText('Back').click();
+      await popupExpect(popupPage.getByText('First New Account')).toBeVisible();
+      await popupPage.getByTestId('connection-status-modal').click();
+
+      await popupExpect(
+        popupPage
+          .locator('.sc-laZRCg > div')
+          .first()
+          .getByText('First New Account')
+      ).toBeVisible();
+
+      await popupExpect(popupPage.getByText('Account 2')).toBeHidden({
+        timeout: 5000
+      });
+
+      await popupExpect(popupPage.getByText('Account 1')).toBeHidden({
+        timeout: 5000
+      });
+    }
+  );
+  popup('should hide account from manage page', async ({ popupPage }) => {
+    await popupPage.getByTestId('connection-status-modal').click();
+    await popupPage.getByTestId('popover-children-container').nth(0).click();
+
+    await popupPage.getByText('Manage').click();
+
+    await popupExpect(popupPage.getByText('Public key')).toBeVisible();
+    await popupExpect(
+      popupPage.getByRole('banner').getByText('Account 1')
+    ).toBeVisible();
+
+    await popupPage
+      .locator('div')
+      .filter({ hasText: /^Close$/ })
+      .getByRole('img')
+      .nth(1)
+      .click();
+    await popupExpect(
+      popupPage.getByRole('banner').getByText('Account 1')
+    ).toBeHidden();
+
+    await popupPage.getByText('Close').click();
+    await popupPage
+      .getByTestId('connection-status-modal')
+      .locator('canvas')
+      .click();
+    await popupExpect(
+      popupPage.getByRole('banner').getByText('Account 1')
+    ).toBeHidden();
+  });
+});