Update test implementation (#2668)

* fix: add testId to components * fix: import problem * fix: link test * fix: regress tests * fix: fee test fix: remove redundant locator fix: update fee test implementation * fix: import resolution fix: import resolution fix: import resolution fix: remove redundant ids fix: return some buttons * fix: rename testId * fix: move constants out of ui-kit * fix: rename main to common * fix: change name for testid
novasamatech · Nov 19, 2024 · c66c692 · c66c692
1 parent 2f47940
commit c66c692
Show file tree

Hide file tree

Showing 35 changed files with 230 additions and 243 deletions.
diff --git a/src/renderer/entities/transaction/ui/FeeWithLabel/FeeWithLabel.tsx b/src/renderer/entities/transaction/ui/FeeWithLabel/FeeWithLabel.tsx
@@ -1,5 +1,6 @@
 import { type ComponentProps } from 'react';
 
+import { TEST_IDS } from '@/shared/constants';
 import { useI18n } from '@/shared/i18n';
 import { cnTw } from '@/shared/lib/utils';
 import { DetailRow, FootnoteText } from '@/shared/ui';
@@ -17,6 +18,7 @@ export const FeeWithLabel = ({ label, wrapperClassName, ...feeProps }: Props) =>
     <DetailRow
       label={<FootnoteText className="text-text-tertiary">{label || t('operation.networkFee')}</FootnoteText>}
       className={cnTw('text-text-primary', wrapperClassName)}
+      testId={TEST_IDS.OPERATIONS.ESTIMATE_FEE}
     >
       <Fee {...feeProps} />
     </DetailRow>

diff --git a/src/renderer/entities/wallet/ui/AccountsList/AccountsList.tsx b/src/renderer/entities/wallet/ui/AccountsList/AccountsList.tsx
@@ -1,3 +1,4 @@
+import { TEST_IDS } from '@/shared/constants';
 import { type AccountId, type Chain } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
 import { cnTw, toAddress } from '@/shared/lib/utils';
@@ -35,7 +36,7 @@ export const AccountsList = ({ accountId, chains, className }: Props) => {
                 <FootnoteText className="w-[180px] text-text-secondary">
                   <Address address={toAddress(accountId, { prefix: addressPrefix })} variant="truncate" showIcon />
                 </FootnoteText>
-                <AccountExplorers accountId={accountId} chain={chain} />
+                <AccountExplorers accountId={accountId} chain={chain} testId={TEST_IDS.COMMON.INFO_BUTTON} />
               </div>
             </li>
           );

diff --git a/src/renderer/features/assets/AssetsSettings/ui/AssetsSettings.tsx b/src/renderer/features/assets/AssetsSettings/ui/AssetsSettings.tsx
@@ -1,5 +1,6 @@
 import { useUnit } from 'effector-react';
 
+import { TEST_IDS } from '@/shared/constants';
 import { useI18n } from '@/shared/i18n';
 import { FootnoteText, IconButton, MenuPopover, Select, Switch } from '@/shared/ui';
 import { AssetsListView } from '@/entities/asset';
@@ -30,6 +31,7 @@ export const AssetsSettings = () => {
       position="top-full right-0"
       buttonClassName="rounded-full"
       offsetPx={0}
+      testId={TEST_IDS.ASSETS.SETTINGS_WIDGET}
       content={
         <>
           <Switch

diff --git a/src/renderer/features/operations/OperationsConfirm/Transfer/ui/Confirmation.tsx b/src/renderer/features/operations/OperationsConfirm/Transfer/ui/Confirmation.tsx
@@ -1,6 +1,7 @@
 import { useStoreMap, useUnit } from 'effector-react';
 import { type ReactNode } from 'react';
 
+import { TEST_IDS } from '@/shared/constants';
 import { useI18n } from '@/shared/i18n';
 import { Button, DetailRow, FootnoteText, Icon, Tooltip } from '@/shared/ui';
 import { TransactionDetails } from '@/shared/ui-entities';
@@ -123,6 +124,7 @@ export const Confirmation = ({ id = 0, secondaryActionButton, hideSignButton, on
         <DetailRow
           label={<FootnoteText className="text-text-tertiary">{t('operation.networkFee')}</FootnoteText>}
           className="text-text-primary"
+          testId={TEST_IDS.OPERATIONS.CONFIRM_NETWORK_FEE}
         >
           <div className="flex flex-col items-end gap-y-0.5">
             <AssetBalance value={confirmStore.fee} asset={confirmStore.chain.assets[0]} />

diff --git a/src/renderer/features/wallets/WalletSelect/ui/WalletButton.tsx b/src/renderer/features/wallets/WalletSelect/ui/WalletButton.tsx
@@ -1,3 +1,4 @@
+import { TEST_IDS } from '@/shared/constants';
 import { type Wallet } from '@/shared/core';
 import { Icon } from '@/shared/ui';
 import { Box, Popover } from '@/shared/ui-kit';
@@ -13,6 +14,7 @@ export const WalletButton = ({ wallet }: Props) => {
     <Popover.Trigger>
       <button
         type="button"
+        data-testid={TEST_IDS.COMMON.WALLET_BUTTON}
         className="w-full rounded-md border border-container-border bg-left-navigation-menu-background shadow-card-shadow"
       >
         <Box direction="row" verticalAlign="center" horizontalAlign="space-between" padding={3}>

diff --git a/src/renderer/pages/Onboarding/WatchOnly/WatchOnly.tsx b/src/renderer/pages/Onboarding/WatchOnly/WatchOnly.tsx
@@ -2,6 +2,7 @@ import { useUnit } from 'effector-react';
 import { useEffect, useState } from 'react';
 import { Controller, type SubmitHandler, useForm } from 'react-hook-form';
 
+import { TEST_IDS } from '@/shared/constants';
 import { type AccountId, type Chain } from '@/shared/core';
 import { AccountType, ChainType, CryptoType, ErrorType, SigningType, WalletType } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
@@ -125,6 +126,7 @@ const WatchOnly = ({ isOpen, onClose, onComplete }: Props) => {
                   placeholder={t('onboarding.walletNamePlaceholder')}
                   invalid={Boolean(errors.walletName)}
                   value={value}
+                  testId={TEST_IDS.ONBOARDING.WALLET_NAME_INPUT}
                   onChange={onChange}
                 />
                 <InputHint variant="error" active={errors.walletName?.type === ErrorType.MAX_LENGTH}>
@@ -154,6 +156,7 @@ const WatchOnly = ({ isOpen, onClose, onComplete }: Props) => {
                       {isValid ? <Identicon address={value} background={false} /> : <Icon name="emptyIdenticon" />}
                     </div>
                   }
+                  testId={TEST_IDS.ONBOARDING.WALLET_ADDRESS_INPUT}
                   onChange={onChange}
                 />
 
@@ -165,11 +168,11 @@ const WatchOnly = ({ isOpen, onClose, onComplete }: Props) => {
           />
 
           <div className="flex flex-1 items-end justify-between">
-            <Button variant="text" onClick={() => closeWowModal()}>
+            <Button variant="text" testId={TEST_IDS.COMMON.BACK_BUTTON} onClick={() => closeWowModal()}>
               {t('onboarding.backButton')}
             </Button>
 
-            <Button type="submit" disabled={!isValid}>
+            <Button type="submit" testId={TEST_IDS.COMMON.CONTINUE_BUTTON} disabled={!isValid}>
               {t('onboarding.continueButton')}
             </Button>
           </div>

diff --git a/src/renderer/pages/Onboarding/Welcome/Welcome.tsx b/src/renderer/pages/Onboarding/Welcome/Welcome.tsx
@@ -1,6 +1,7 @@
 import throttle from 'lodash/throttle';
 import { useLayoutEffect, useRef, useState } from 'react';
 
+import { TEST_IDS } from '@/shared/constants';
 import { WalletType } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
 import { cnTw } from '@/shared/lib/utils';
@@ -45,34 +46,39 @@ export const Welcome = () => {
             title={t('onboarding.welcome.polkadotVaultTitle')}
             description={t('onboarding.welcome.polkadotVaultDescription')}
             iconName="vaultOnboarding"
+            testId={TEST_IDS.ONBOARDING.VAULT_BUTTON}
             onClick={() => walletPairingModel.events.walletTypeSet(WalletType.POLKADOT_VAULT)}
           />
 
           <WelcomeCard
             title={t('onboarding.welcome.novaWalletTitle')}
             description={t('onboarding.welcome.novaWalletDescription')}
             iconName="novaWalletOnboarding"
+            testId={TEST_IDS.ONBOARDING.NOVA_WALLET_BUTTON}
             onClick={() => walletPairingModel.events.walletTypeSet(WalletType.NOVA_WALLET)}
           />
 
           <WelcomeCard
             title={t('onboarding.welcome.walletConnectTitle')}
             description={t('onboarding.welcome.walletConnectDescription')}
             iconName="walletConnectOnboarding"
+            testId={TEST_IDS.ONBOARDING.WALLET_CONNECT_BUTTON}
             onClick={() => walletPairingModel.events.walletTypeSet(WalletType.WALLET_CONNECT)}
           />
 
           <WelcomeCard
             title={t('onboarding.welcome.watchOnlyTitle')}
             description={t('onboarding.welcome.watchOnlyDescription')}
             iconName="watchOnlyOnboarding"
+            testId={TEST_IDS.ONBOARDING.WATCH_ONLY_BUTTON}
             onClick={() => walletPairingModel.events.walletTypeSet(WalletType.WATCH_ONLY)}
           />
           <WelcomeCard
             title={t('onboarding.welcome.ledgerTitle')}
             description={t('onboarding.welcome.ledgerDescription')}
             iconName="ledgerOnboarding"
             disabled
+            testId={TEST_IDS.ONBOARDING.LEDGER_BUTTON}
           />
         </div>
 

diff --git a/src/renderer/pages/Onboarding/Welcome/WelcomeCard.tsx b/src/renderer/pages/Onboarding/Welcome/WelcomeCard.tsx
@@ -9,13 +9,15 @@ type Props = {
   iconName: IconNames;
   onClick?: () => void;
   disabled?: boolean;
+  testId?: string;
 };
 
-export const WelcomeCard = ({ title, description, iconName, disabled, onClick }: Props) => {
+export const WelcomeCard = ({ title, description, iconName, disabled, onClick, testId: testId }: Props) => {
   const { t } = useI18n();
 
   return (
     <button
+      data-testid={testId}
       disabled={disabled}
       className={cnTw(
         'flex items-center gap-4 rounded-lg border border-filter-border px-4 py-2 shadow-card-shadow',

diff --git a/src/renderer/shared/constants/index.ts b/src/renderer/shared/constants/index.ts
@@ -0,0 +1 @@
+export * from './testIds';
diff --git a/src/renderer/shared/constants/testIds.ts b/src/renderer/shared/constants/testIds.ts
@@ -0,0 +1,24 @@
+export const TEST_IDS = {
+  ONBOARDING: {
+    VAULT_BUTTON: 'onboarding-vault-button',
+    WATCH_ONLY_BUTTON: 'onboarding-watch-only-button',
+    NOVA_WALLET_BUTTON: 'onboarding-nova-wallet-button',
+    WALLET_CONNECT_BUTTON: 'onboarding-wallet-connect-button',
+    LEDGER_BUTTON: 'onboarding-ledger-button',
+    WALLET_NAME_INPUT: 'onboarding-wallet-name-input',
+    WALLET_ADDRESS_INPUT: 'onboarding-wallet-address-input',
+  },
+  ASSETS: {
+    SETTINGS_WIDGET: 'assets-settings-widget',
+  },
+  COMMON: {
+    WALLET_BUTTON: 'common-wallet-button',
+    BACK_BUTTON: 'common-back-button',
+    CONTINUE_BUTTON: 'common-continue-button',
+    INFO_BUTTON: 'common-info-button',
+  },
+  OPERATIONS: {
+    CONFIRM_NETWORK_FEE: 'operations-confirm-network-fee',
+    ESTIMATE_FEE: 'operations-estimate-fee',
+  },
+} as const;
diff --git a/src/renderer/shared/ui-entities/AccountExplorer/AccountExplorers.tsx b/src/renderer/shared/ui-entities/AccountExplorer/AccountExplorers.tsx
@@ -10,17 +10,18 @@ import { Hash } from '../Hash/Hash';
 type Props = PropsWithChildren<{
   accountId: AccountId;
   chain: Chain;
+  testId?: string;
 }>;
 
-export const AccountExplorers = memo(({ accountId, chain, children }: Props) => {
+export const AccountExplorers = memo(({ accountId, chain, children, testId }: Props) => {
   const { t } = useI18n();
   const { explorers } = chain;
   const address = toAddress(accountId, { prefix: chain.addressPrefix });
 
   return (
     <Popover align="end" dialog testId="AccountExplorers">
       <Popover.Trigger>
-        <IconButton name="details" className="text-icon-default" onClick={(e) => e.stopPropagation()} />
+        <IconButton name="details" className="text-icon-default" testId={testId} onClick={(e) => e.stopPropagation()} />
       </Popover.Trigger>
       <Popover.Content>
         <Box gap={2} padding={4} width="230px">

diff --git a/src/renderer/shared/ui/Buttons/IconButton/IconButton.tsx b/src/renderer/shared/ui/Buttons/IconButton/IconButton.tsx
@@ -19,6 +19,7 @@ type HTMLButtonProps = Pick<
 type Props = HTMLButtonProps &
   IconProps & {
     ariaLabel?: string;
+    testId?: string;
   };
 
 export const IconButton = forwardRef<HTMLButtonElement, Props>(
@@ -33,6 +34,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(
       onPointerDown,
       onPointerMove,
       onPointerLeave,
+      testId,
       ...iconProps
     },
     ref,
@@ -43,6 +45,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(
       className={cnTw('spektr-icon-button', IconButtonStyle, className)}
       aria-label={ariaLabel}
       disabled={disabled}
+      data-testid={testId}
       onClick={onClick}
       onMouseDown={onMouseDown}
       onPointerDown={onPointerDown}

diff --git a/src/renderer/shared/ui/DetailRow/DetailRow.tsx b/src/renderer/shared/ui/DetailRow/DetailRow.tsx
@@ -7,10 +7,14 @@ type Props = {
   label: ReactNode;
   className?: string;
   wrapperClassName?: string;
+  testId?: string;
 };
 
-export const DetailRow = ({ label, className, wrapperClassName, children }: PropsWithChildren<Props>) => (
-  <div className={cnTw('flex min-h-6 w-full items-center justify-between gap-2', wrapperClassName)}>
+export const DetailRow = ({ label, className, wrapperClassName, testId, children }: PropsWithChildren<Props>) => (
+  <div
+    className={cnTw('flex min-h-6 w-full items-center justify-between gap-2', wrapperClassName)}
+    data-testid={testId}
+  >
     {typeof label === 'string' ? (
       <FootnoteText as="dt" className="text-text-tertiary">
         {label}

diff --git a/src/renderer/shared/ui/Inputs/Input/Input.tsx b/src/renderer/shared/ui/Inputs/Input/Input.tsx
@@ -15,6 +15,7 @@ type NewType = {
   theme?: Theme;
   onChange?: (value: string) => void;
   onPaste?: (event: ClipboardEvent) => void;
+  testId?: string;
 };
 
 export type Props = Pick<ComponentPropsWithoutRef<'input'>, HTMLInputProps> & NewType;
@@ -35,6 +36,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(
       spellCheck = false,
       theme = 'light',
       autoFocus,
+      testId,
       ...props
     },
     ref,
@@ -68,6 +70,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(
           autoFocus={autoFocus}
           disabled={disabled}
           spellCheck={spellCheck}
+          data-testid={testId}
           onChange={(event) => onChange?.(event.target.value)}
           onPaste={(event) => onPaste?.(event)}
           {...props}

diff --git a/src/renderer/shared/ui/Popovers/MenuPopover/MenuPopover.tsx b/src/renderer/shared/ui/Popovers/MenuPopover/MenuPopover.tsx
@@ -11,6 +11,7 @@ type Props = {
   offsetPx?: number;
   position?: string;
   closeOnClick?: boolean;
+  testId?: string;
 };
 
 export const MenuPopover = ({
@@ -22,6 +23,7 @@ export const MenuPopover = ({
   offsetPx = 7,
   position = 'left-0 top-full',
   closeOnClick = false,
+  testId,
 }: PropsWithChildren<Props>) => {
   const menuRef = useRef<HTMLDivElement>(null);
 
@@ -34,7 +36,11 @@ export const MenuPopover = ({
     <Menu>
       {({ open, close }) => (
         <div className={cnTw('relative', open && 'z-20', containerClassName)}>
-          <Menu.Button className={cnTw('flex items-center', buttonClassName)} onClick={onMenuClick}>
+          <Menu.Button
+            className={cnTw('flex items-center', buttonClassName)}
+            data-testid={testId}
+            onClick={onMenuClick}
+          >
             {children}
           </Menu.Button>
           <Menu.Items

diff --git a/tests/system/data/chains/chainsList.ts b/tests/system/data/chains/chainsList.ts
@@ -1,8 +1,9 @@
 export const substrateChains = [
   { name: 'Polkadot' },
   { name: 'Kusama' },
-  { name: 'Westend' },
   { name: 'Kusama Asset Hub' },
+  { name: 'Polkadot People' },
+  { name: 'Kusama People' },
   { name: 'Karura' },
   { name: 'Shiden' },
   { name: 'Bifrost Kusama' },
@@ -19,11 +20,10 @@ export const substrateChains = [
   { name: 'Robonomics' },
   { name: 'Kintsugi' },
   { name: 'Zeitgeist' },
-  { name: 'Litmus' },
   { name: 'Subsocial' },
   { name: 'Integritee Parachain' },
   { name: 'Centrifuge Parachain' },
-  { name: 'HydraDX' },
+  { name: 'Hydration' },
   { name: 'Interlay' },
   { name: 'Phala' },
   { name: 'Turing' },
@@ -35,11 +35,14 @@ export const substrateChains = [
   { name: 'Tinkernet' },
   { name: 'Amplitude' },
   { name: 'Pendulum' },
+  { name: 'Bittensor' },
   { name: 'Vara' },
   { name: 'Polkadot Bridge Hub' },
   { name: 'Kusama Bridge Hub' },
   { name: 'Polkadot Collectives' },
-  { name: 'Kusama People' },
+  { name: 'Polimec' },
+  { name: 'Avail' },
+  { name: 'Westend' },
 ];
 
 export const ethChains = [{ name: 'Moonbeam' }, { name: 'Moonriver' }];
diff --git a/tests/system/pages/BaseModalWindow.ts b/tests/system/pages/BaseModalWindow.ts
@@ -8,32 +8,20 @@ export abstract class BaseModal<T extends BaseModalElements = BaseModalElements>
     public pageElements: T,
   ) {}
 
-  async click(selector: string) {
-    await this.page.click(selector);
+  async click(testId: string) {
+    await this.page.getByTestId(testId).click();
 
     return this;
   }
 
-  async fill(selector: string, value: string) {
-    await this.page.fill(selector, value);
+  async fill(testId: string, value: string) {
+    await this.page.getByTestId(testId).fill(value);
 
     return this;
   }
 
-  async clickIntoField(placeholder: string) {
-    await this.page.getByPlaceholder(placeholder).click();
-
-    return this;
-  }
-
-  async fillFieldByValue(placeholder: string, value: string) {
-    await this.page.getByPlaceholder(placeholder).fill(value);
-
-    return this;
-  }
-
-  async clickOnButton(name: string) {
-    await this.page.getByRole('button', { name: name }).click();
+  async clickIntoField(testId: string) {
+    await this.page.getByTestId(testId).click();
 
     return this;
   }