feat: add tests for ICS

features/ics/apply-form/apply-form.tsx

@@ -12,7 +12,7 @@ import {
 export const ApplyForm: FC = memo(() => (
   <ApplyDataProvider>
     <ApplyFormProvider>
-      <FormBlock $gap="xxl">
+      <FormBlock $gap="xxl" data-testid="applyForm">
         <FormLoader>
           <Form>
             <MainAddress />

features/ics/apply-form/controls/additional-addresses.tsx

@@ -27,7 +27,7 @@ export const AdditionalAddresses: FC = () => {
   );
 
   return (
-    <Stack direction="column" gap="md">
+    <Stack direction="column" gap="md" data-testid="additionalAddressesSection">
       <Stack direction="column" gap="xxs">
         <FormTitle chip={<Chip>Optional</Chip>}>Additional Addresses</FormTitle>
         <Text size="xs" color="secondary">
@@ -59,6 +59,7 @@ export const AdditionalAddresses: FC = () => {
           size="sm"
           onClick={handleAddAddress}
           fullwidth
+          data-testid="addNewAddressBtn"
         >
           Add new address
         </ButtonIcon>

features/ics/apply-form/controls/address-item.tsx

@@ -108,7 +108,12 @@ export const AddressItem: FC<AddressItemProps> = ({
   );
 
   return (
-    <Stack key={field.id} direction="column" gap="sm">
+    <Stack
+      key={field.id}
+      direction="column"
+      gap="sm"
+      data-testid={`additionalAddressInfo-${index}`}
+    >
       <Stack direction="row" justify="space-between" align="center">
         <Text as="h4" size="xs" weight="bold">
           Additional address #{index + 1}
@@ -118,6 +123,7 @@ export const AddressItem: FC<AddressItemProps> = ({
           variant="text"
           color="error"
           onClick={() => onRemove(index)}
+          data-testid="removeBtn"
         >
           Remove
         </Button>
@@ -137,19 +143,28 @@ export const AddressItem: FC<AddressItemProps> = ({
         </Stack>
       ) : (
         <CategoryItemsWrapper $gap="md" $offset="md">
-          <Stack direction="column" gap="sm">
+          <Stack
+            direction="column"
+            gap="sm"
+            data-testid="additionalAddressStep1"
+          >
             <Text size="xs">Step 1. Insert your Ethereum address</Text>
             <AddressInputHookForm
               fieldName={`additionalAddresses.${index}.address`}
               label={`Additional address #${index + 1}`}
               placeholder="0x..."
             />
           </Stack>
-          <Stack direction="column" gap="sm">
+          <Stack
+            direction="column"
+            gap="sm"
+            data-testid="additionalAddressStep2"
+          >
             <Text size="xs">
               Step 2. Copy the message and sign it on Etherscan (or other tool)
             </Text>
             <Input
+              name={`additionalAddresses.${index}.messageToSign`}
               value={message}
               readOnly
               label="Message to sign"
@@ -164,6 +179,7 @@ export const AddressItem: FC<AddressItemProps> = ({
                     }
                   >
                     <ButtonIcon
+                      data-testid="signBtn"
                       icon={<External />}
                       size="xs"
                       variant="translucent"
@@ -175,7 +191,11 @@ export const AddressItem: FC<AddressItemProps> = ({
               }
             />
           </Stack>
-          <Stack direction="column" gap="sm">
+          <Stack
+            direction="column"
+            gap="sm"
+            data-testid="additionalAddressStep3"
+          >
             <Text size="xs">
               Step 3. Paste the signature in the field below
             </Text>
@@ -189,6 +209,7 @@ export const AddressItem: FC<AddressItemProps> = ({
                   variant="translucent"
                   onClick={() => void onVerify(index)}
                   disabled={isVerifying}
+                  data-testid="verifySignatureBtn"
                 >
                   {isVerifying ? 'Verifying...' : 'Verify'}
                 </Button>

features/ics/apply-form/controls/main-address.tsx

@@ -8,7 +8,7 @@ export const MainAddress: FC = () => {
   const { mainAddress } = useApplyFormData(true);
 
   return (
-    <Stack direction="column" gap="md">
+    <Stack direction="column" gap="md" data-testid="mainAddressSection">
       <Stack direction="column" gap="xxs">
         <FormTitle>Main address</FormTitle>
         <Text size="xs" color="secondary">
@@ -18,6 +18,7 @@ export const MainAddress: FC = () => {
       <InputAddress
         fullwidth
         disabled
+        name="mainAddress"
         label={
           <>
             Main address <VerifiedChip color="primary">Verified</VerifiedChip>

features/ics/apply-form/controls/social-proof.tsx

@@ -17,7 +17,7 @@ export const SocialProof: FC = () => {
   const { twitterMessage, discordMessage } = useSocialMessages();
 
   return (
-    <Stack direction="column" gap="md">
+    <Stack direction="column" gap="md" data-testid="socialProofSection">
       <Stack direction="column" gap="xxs">
         <FormTitle chip={<Chip>Optional</Chip>}>Socials</FormTitle>
         <Text size="xs" color="secondary">
@@ -33,13 +33,13 @@ export const SocialProof: FC = () => {
       </Stack>
 
       {/* Twitter Section */}
-      <Stack direction="column" gap="sm">
+      <Stack direction="column" gap="sm" data-testid="twitterSection">
         <Text as="h4" size="xs" weight={700}>
           X (formerly Twitter)
         </Text>
 
         <CategoryItemsWrapper $gap="md" $offset="md">
-          <Stack direction="column" gap="sm">
+          <Stack direction="column" gap="sm" data-testid="twitterProofStep1">
             <Text size="xs">
               Step 1. Prove the ownership of the X account by posting a tweet
               with the following text
@@ -56,7 +56,7 @@ export const SocialProof: FC = () => {
             />
           </Stack>
 
-          <Stack direction="column" gap="sm">
+          <Stack direction="column" gap="sm" data-testid="twitterProofStep2">
             <Text size="xs">Step 2. Paste the link to this post</Text>
 
             <TextInputHookForm
@@ -69,13 +69,13 @@ export const SocialProof: FC = () => {
       </Stack>
 
       {/* Discord Section */}
-      <Stack direction="column" gap="sm">
+      <Stack direction="column" gap="sm" data-testid="discordSection">
         <Text as="h4" size="xs" weight={700}>
           Discord
         </Text>
 
         <CategoryItemsWrapper $gap="md" $offset="md">
-          <Stack direction="column" gap="sm">
+          <Stack direction="column" gap="sm" data-testid="discordProofStep1">
             <Text size="xs">
               Step 1. Prove the ownership of the Discord account by posting the
               following message to{' '}
@@ -102,7 +102,7 @@ export const SocialProof: FC = () => {
             />
           </Stack>
 
-          <Stack direction="column" gap="sm">
+          <Stack direction="column" gap="sm" data-testid="discordProofStep2">
             <Text size="xs">Step 2. Paste the link to this message</Text>
 
             <TextInputHookForm

features/ics/apply-form/controls/submit-button.tsx

@@ -2,5 +2,7 @@ import { FC } from 'react';
 import { SubmitButtonHookForm } from 'shared/hook-form/controls';
 
 export const SubmitButton: FC = () => (
-  <SubmitButtonHookForm>Submit application</SubmitButtonHookForm>
+  <SubmitButtonHookForm data-testid="submitBtn">
+    Submit application
+  </SubmitButtonHookForm>
 );

features/ics/form-status/components/application.tsx

@@ -17,12 +17,13 @@ export const Application: FC<CommentsSectionProps> = ({
   createdAt,
 }) => (
   <AccordionStyle
+    data-testid="applicationSection"
     summary={
-      <Stack direction="column" gap="xs">
+      <Stack direction="column" gap="xs" data-testid="applicationInfo">
         <Text size="sm" weight="bold">
           Your application
         </Text>
-        <Text color="secondary" size="xxs">
+        <Text color="secondary" size="xxs" data-testid="submittedDate">
           Submitted {formatDate(parseISO(createdAt), 'dd.MM.yyyy')}
         </Text>
       </Stack>
@@ -40,6 +41,7 @@ export const Application: FC<CommentsSectionProps> = ({
             label="Main address"
             value={form.mainAddress}
             error={!!comments.mainAddress}
+            name="mainAddress"
           />
           <Text size="xxs" color="error">
             {comments.mainAddress}

features/ics/form-status/components/score-chip/score-chip.tsx

@@ -18,7 +18,7 @@ export const ScoreChip: FC<PropsWithChildren<Props>> = ({
   children,
   type = 'default',
 }) => (
-  <ChipStyle $variant={type}>
+  <ChipStyle $variant={type} data-testid="scoreChip">
     {ICONS[type]}
     {children}
   </ChipStyle>

features/ics/form-status/form-status.tsx

@@ -31,7 +31,7 @@ export const FormStatus: FC<FormStatusProps> = ({
   const haveScores = Object.values(scores).some((score) => score !== null);
 
   return (
-    <Block>
+    <Block data-testid="applicationFormStatus">
       <Stack direction="column" gap="xxl">
         <StatusHeader
           status={status}

features/ics/siwe-sign-in/siwe-sign-in.tsx

@@ -9,7 +9,7 @@ export const SiweSignIn: FC = () => {
   const { signIn } = useSiweAuth();
 
   return (
-    <Block>
+    <Block data-testid="signInForm">
       <Stack direction="column" gap="lg">
         <Stack direction="column" gap="md">
           <Text as="h3" size="lg" weight="bold">
@@ -29,6 +29,7 @@ export const SiweSignIn: FC = () => {
             label="Main address"
             value={address}
             fullwidth
+            name="mainAddress"
           />
         </Stack>
 

package.json

@@ -76,8 +76,9 @@
     "@nestjs/common": "^10.4.16",
     "@next/bundle-analyzer": "^13.2.4",
     "@next/eslint-plugin-next": "^13.4.13",
-    "@playwright/test": "1.56.1",
+    "@playwright/test": "1.57.0",
     "@svgr/webpack": "8.1.0",
+    "@scure/bip39": "2.0.1",
     "@types/jest": "28.1.6",
     "@types/lodash": "^4.14.186",
     "@types/memory-cache": "0.2.2",
@@ -104,6 +105,7 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-sonarjs": "^0.20.0",
     "eslint-plugin-unicorn": "^48.0.1",
+    "ethers": "5.8.0",
     "husky": "^7.0.1",
     "jest": "^29.5.0",
     "jsonschema": "^1.4.1",

shared/components/copy-button/copy-button.tsx

@@ -12,6 +12,7 @@ export const CopyButton: FC<CopyButtonProps & ButtonProps> = ({
 
   return (
     <ButtonIcon
+      data-testid="copyBtn"
       variant="translucent"
       {...props}
       onClick={copy}

shared/components/form-title/form-title.tsx

@@ -5,7 +5,7 @@ import { Text } from '@lidofinance/lido-ui';
 export const FormTitle: FC<
   PropsWithChildren<{ chip?: ReactNode; extra?: ReactNode }>
 > = ({ children, chip, extra }) => (
-  <Stack spaceBetween center gap="xs">
+  <Stack spaceBetween center gap="xs" data-testid="formTitle">
     <Stack center gap="sm">
       <Text as="h4" size="sm" weight={700}>
         {children}

shared/components/input-address/verified-chip.tsx

@@ -5,7 +5,7 @@ export const VerifiedChip: FC<PropsWithChildren<ChipProps>> = ({
   children,
   color,
 }) => (
-  <StyledChip color={color}>
+  <StyledChip color={color} data-testid="verifiedChip">
     {children}
     <Icon color={color} />
   </StyledChip>

tests/config/configs/base.config.ts

@@ -15,6 +15,11 @@ export type StandConfig = {
   nodeConfig: EthereumNodeServiceOptions & {
     host: string;
   };
+  mockConfig?: {
+    urls: {
+      csmSurveysApi: string;
+    };
+  };
 };
 
 export type IConfig = {

tests/config/configs/testnet.config.ts

@@ -20,6 +20,11 @@ export class TestnetConfig extends BaseConfig {
         host: '127.0.0.1',
         port: 8545,
       },
+      mockConfig: {
+        urls: {
+          csmSurveysApi: 'https://csm-surveys-api-testnet.up.railway.app',
+        },
+      },
     };
   }
 }

tests/pages/base.page.ts

@@ -55,12 +55,32 @@ export class BasePage {
   }
 
   async getStorageData(name: string | string[]) {
-    return await this.page.evaluate((names) => {
-      if (Array.isArray(names)) {
-        return names.map((name) => localStorage.getItem(name));
-      } else {
-        return localStorage.getItem(names);
-      }
+    return test.step(`Get data from Local Storage by key '${name}'`, async () => {
+      return this.page.evaluate((names) => {
+        if (Array.isArray(names)) {
+          return names.map((name) => localStorage.getItem(name));
+        } else {
+          return localStorage.getItem(names);
+        }
+      }, name);
+    });
+  }
+
+  async getSessionStorageData(name: string | string[]) {
+    return test.step(`Get data from Session Storage by key '${name}'`, async () => {
+      return this.page.evaluate((names) => {
+        if (Array.isArray(names)) {
+          return names.map((name) => sessionStorage.getItem(name));
+        } else {
+          return sessionStorage.getItem(names);
+        }
+      }, name);
+    });
+  }
+
+  async removeKeyFromSessionStorage(name: string) {
+    await this.page.evaluate((key) => {
+      sessionStorage.removeItem(key);
     }, name);
   }
 

tests/pages/operatorType.page.ts

@@ -0,0 +1,22 @@
+import { Page } from '@playwright/test';
+import { BasePage } from './base.page';
+import {
+  WalletPage,
+  WalletConnectType,
+} from '@lidofinance/wallets-testing-wallets';
+import { TxModal } from './elements/common/element.txProgressModal';
+import { ApplicationForm } from './tabs/operatorType/applicationForm.page';
+
+export class OperatorTypePage extends BasePage {
+  applicationForm: ApplicationForm;
+  txModal: TxModal;
+
+  constructor(
+    page: Page,
+    public walletPage: WalletPage<WalletConnectType>,
+  ) {
+    super(page);
+    this.applicationForm = new ApplicationForm(page, walletPage);
+    this.txModal = new TxModal(page);
+  }
+}