test(extension): add tests for Sign Message feature (#1441)

input-output-hk · Sep 24, 2024 · d38eff3 · d38eff3
1 parent a59aaa2
commit d38eff3
Show file tree

Hide file tree

Showing 17 changed files with 472 additions and 13 deletions.
diff --git a/...owser-extension-wallet/src/views/browser-view/features/sign-message/SignMessageDrawer.tsx b/...owser-extension-wallet/src/views/browser-view/features/sign-message/SignMessageDrawer.tsx
@@ -67,23 +67,31 @@ export const SignMessageDrawer: React.FC = () => {
 
   const renderInitialState = () => (
     <>
-      <Text.Body.Large weight="$bold">{t('core.signMessage.instructions')}</Text.Body.Large>
-      <Text.Body.Normal className={styles.subtitle}>{t('core.signMessage.subtitle')}</Text.Body.Normal>
+      <Text.Body.Large weight="$bold" data-testid={'drawer-header-title'}>
+        {t('core.signMessage.instructions')}
+      </Text.Body.Large>
+      <Text.Body.Normal className={styles.subtitle} data-testid={'drawer-header-subtitle'}>
+        {t('core.signMessage.subtitle')}
+      </Text.Body.Normal>
       {isHardwareWallet && hardwareWalletError && (
         <div className={styles.errorMessage}>
           <Text.Body.Normal color="error">{hardwareWalletError}</Text.Body.Normal>
         </div>
       )}
       <div className={styles.inputGroup}>
-        <Text.Body.Normal weight="$medium">{t('core.signMessage.addressLabel')}</Text.Body.Normal>
+        <Text.Body.Normal weight="$medium" data-testid={'address-label'}>
+          {t('core.signMessage.addressLabel')}
+        </Text.Body.Normal>
         <WalletOwnAddressDropdown
           addresses={usedAddresses}
           onSelect={setSelectedAddress}
           placeholder={t('core.signMessage.selectAddress')}
         />
       </div>
       <div className={styles.inputGroup}>
-        <Text.Body.Normal weight="$medium">{t('core.signMessage.messageLabel')}</Text.Body.Normal>
+        <Text.Body.Normal weight="$medium" data-testid={'message-to-sign-label'}>
+          {t('core.signMessage.messageLabel')}
+        </Text.Body.Normal>
         <TextArea
           placeholder={t('core.signMessage.messagePlaceholder')}
           value={message}
@@ -98,12 +106,16 @@ export const SignMessageDrawer: React.FC = () => {
 
   const renderPasswordPrompt = () => (
     <>
-      <Text.Body.Large weight="$bold">{t('core.signMessage.passwordTitle')}</Text.Body.Large>
-      <Text.Body.Normal className={styles.subtitle}>{t('core.signMessage.passwordSubtitle')}</Text.Body.Normal>
+      <Text.Body.Large weight="$bold" data-testid={'drawer-header-title'}>
+        {t('core.signMessage.passwordTitle')}
+      </Text.Body.Large>
+      <Text.Body.Normal className={styles.subtitle} data-testid={'drawer-header-subtitle'}>
+        {t('core.signMessage.passwordSubtitle')}
+      </Text.Body.Normal>
       <PasswordInput
         onChange={setPassword}
         label={t('core.signMessage.passwordLabel')}
-        dataTestId="sign-message-password-input"
+        dataTestId="password-input"
         error={!!error}
         errorMessage={error}
         wrapperClassName={styles.passwordWrapper}

diff --git a/...-extension-wallet/src/views/browser-view/features/sign-message/useDrawerConfiguration.tsx b/...-extension-wallet/src/views/browser-view/features/sign-message/useDrawerConfiguration.tsx
@@ -47,15 +47,19 @@ export const useDrawerConfiguration = ({
     if (signatureObject?.signature && !error) {
       return (
         <CopyToClipboard text={signatureObject.signature}>
-          <Button onClick={handleCopy}>
+          <Button onClick={handleCopy} data-testid={'copy-button'}>
             {t('core.signMessage.copyToClipboard')}
             <CopyToClipboardImg className={styles.newFolderIcon} />
           </Button>
         </CopyToClipboard>
       );
     }
     return (
-      <Button onClick={handleSign} disabled={!selectedAddress || !message || isSigningInProgress}>
+      <Button
+        onClick={handleSign}
+        disabled={!selectedAddress || !message || isSigningInProgress}
+        data-testid={'sign-message-button'}
+      >
         {getActionButtonLabel()}
       </Button>
     );
@@ -84,6 +88,7 @@ export const useDrawerConfiguration = ({
             closeDrawer();
             clearSecrets();
           }}
+          data-testid={'close-button'}
         >
           {t('core.signMessage.closeButton')}
         </Button>

diff --git a/packages/core/src/ui/components/WalletOwnAddressesDropdown/WalletOwnAddressDropdown.tsx b/packages/core/src/ui/components/WalletOwnAddressesDropdown/WalletOwnAddressDropdown.tsx
@@ -49,7 +49,12 @@ export const WalletOwnAddressDropdown = ({
 
   return (
     <Dropdown menu={menuProps} trigger={['click']}>
-      <Button variant="outlined" color="secondary" className={cn(styles.dropdownBtn)}>
+      <Button
+        variant="outlined"
+        color="secondary"
+        className={cn(styles.dropdownBtn)}
+        data-testid="select-address-button"
+      >
         <span className={styles.content}>{selectedAddress}</span>
       </Button>
     </Dropdown>

diff --git a/packages/e2e-tests/src/assert/settings/MessageSigningAllDoneDrawerAssert.ts b/packages/e2e-tests/src/assert/settings/MessageSigningAllDoneDrawerAssert.ts
@@ -0,0 +1,39 @@
+import MessageSigningAllDoneDrawer from '../../elements/settings/MessageSigningAllDoneDrawer';
+import { expect } from 'chai';
+import { t } from '../../utils/translationService';
+import clipboard from 'clipboardy';
+
+class MessageSigningAllDoneDrawerAssert {
+  async assertSeeAllDoneDrawer() {
+    await MessageSigningAllDoneDrawer.drawerHeaderCloseButton.waitForClickable();
+    await MessageSigningAllDoneDrawer.drawerNavigationTitle.waitForDisplayed();
+    expect(await MessageSigningAllDoneDrawer.drawerNavigationTitle.getText()).to.equal(
+      await t('core.signMessage.title')
+    );
+
+    await MessageSigningAllDoneDrawer.image.waitForDisplayed();
+    await MessageSigningAllDoneDrawer.title.waitForDisplayed();
+    expect(await MessageSigningAllDoneDrawer.title.getText()).to.equal(await t('core.signMessage.successTitle'));
+    await MessageSigningAllDoneDrawer.description.waitForDisplayed();
+    expect(await MessageSigningAllDoneDrawer.description.getText()).to.equal(
+      await t('core.signMessage.successDescription')
+    );
+    await MessageSigningAllDoneDrawer.signature.waitForDisplayed();
+    expect(await MessageSigningAllDoneDrawer.signature.getText()).to.not.be.empty;
+
+    await MessageSigningAllDoneDrawer.copyButton.waitForClickable();
+    expect(await MessageSigningAllDoneDrawer.copyButton.getText()).to.equal(
+      await t('core.signMessage.copyToClipboard')
+    );
+    await MessageSigningAllDoneDrawer.closeButton.waitForClickable();
+    expect(await MessageSigningAllDoneDrawer.closeButton.getText()).to.equal(await t('core.signMessage.closeButton'));
+  }
+
+  async assertSignatureInClipboardIsCorrect() {
+    const displayedSignature = await MessageSigningAllDoneDrawer.signature.getText();
+    const signatureFromClipboard = await clipboard.read();
+    expect(signatureFromClipboard).to.equal(displayedSignature);
+  }
+}
+
+export default new MessageSigningAllDoneDrawerAssert();
diff --git a/packages/e2e-tests/src/assert/settings/MessageSigningConfirmationDrawerAssert.ts b/packages/e2e-tests/src/assert/settings/MessageSigningConfirmationDrawerAssert.ts
@@ -0,0 +1,36 @@
+import { expect } from 'chai';
+import { t } from '../../utils/translationService';
+import MessageSigningSignConfirmationDrawer from '../../elements/settings/MessageSigningConfirmationDrawer';
+
+class MessageSigningConfirmationDrawerAssert {
+  async assertSeeSignConfirmationDrawer() {
+    await MessageSigningSignConfirmationDrawer.drawerHeaderCloseButton.waitForClickable();
+    await MessageSigningSignConfirmationDrawer.drawerNavigationTitle.waitForDisplayed();
+    expect(await MessageSigningSignConfirmationDrawer.drawerNavigationTitle.getText()).to.equal(
+      await t('core.signMessage.title')
+    );
+
+    await MessageSigningSignConfirmationDrawer.drawerHeaderTitle.waitForDisplayed();
+    expect(await MessageSigningSignConfirmationDrawer.drawerHeaderTitle.getText()).to.equal(
+      await t('core.signMessage.passwordTitle')
+    );
+    await MessageSigningSignConfirmationDrawer.drawerHeaderSubtitle.waitForDisplayed();
+    expect(await MessageSigningSignConfirmationDrawer.drawerHeaderSubtitle.getText()).to.equal(
+      await t('core.signMessage.passwordSubtitle')
+    );
+
+    await MessageSigningSignConfirmationDrawer.passwordInput.waitForEnabled();
+
+    await MessageSigningSignConfirmationDrawer.signMessageButton.waitForEnabled();
+    expect(await MessageSigningSignConfirmationDrawer.signMessageButton.getText()).to.equal(
+      await t('core.signMessage.signButton')
+    );
+
+    await MessageSigningSignConfirmationDrawer.closeButton.waitForDisplayed();
+    expect(await MessageSigningSignConfirmationDrawer.closeButton.getText()).to.equal(
+      await t('core.signMessage.closeButton')
+    );
+  }
+}
+
+export default new MessageSigningConfirmationDrawerAssert();
diff --git a/packages/e2e-tests/src/assert/settings/MessageSigningInputDrawerAssert.ts b/packages/e2e-tests/src/assert/settings/MessageSigningInputDrawerAssert.ts
@@ -0,0 +1,61 @@
+import MessageSigningInputDrawer from '../../elements/settings/MessageSigningInputDrawer';
+import { expect } from 'chai';
+import { t } from '../../utils/translationService';
+
+class MessageSigningInputDrawerAssert {
+  async assertSeeMessageSigningInputDrawer() {
+    await MessageSigningInputDrawer.drawerHeaderCloseButton.waitForClickable();
+    await MessageSigningInputDrawer.drawerNavigationTitle.waitForDisplayed();
+    expect(await MessageSigningInputDrawer.drawerNavigationTitle.getText()).to.equal(await t('core.signMessage.title'));
+
+    await MessageSigningInputDrawer.drawerHeaderTitle.waitForDisplayed();
+    expect(await MessageSigningInputDrawer.drawerHeaderTitle.getText()).to.equal(
+      await t('core.signMessage.instructions')
+    );
+    await MessageSigningInputDrawer.drawerHeaderSubtitle.waitForDisplayed();
+    expect(await MessageSigningInputDrawer.drawerHeaderSubtitle.getText()).to.equal(
+      await t('core.signMessage.subtitle')
+    );
+
+    await MessageSigningInputDrawer.addressLabel.waitForDisplayed();
+    expect(await MessageSigningInputDrawer.addressLabel.getText()).to.equal(await t('core.signMessage.addressLabel'));
+    await MessageSigningInputDrawer.selectAddressButton.waitForDisplayed();
+    expect(await MessageSigningInputDrawer.selectAddressButton.getText()).to.equal(
+      await t('core.signMessage.selectAddress')
+    );
+
+    await MessageSigningInputDrawer.messageToSignLabel.waitForDisplayed();
+    expect(await MessageSigningInputDrawer.messageToSignLabel.getText()).to.equal(
+      await t('core.signMessage.messageLabel')
+    );
+    await MessageSigningInputDrawer.messageInput.waitForDisplayed();
+    expect(await MessageSigningInputDrawer.messageInput.getAttribute('placeholder')).to.equal(
+      await t('core.signMessage.messagePlaceholder')
+    );
+
+    await MessageSigningInputDrawer.signMessageButton.waitForDisplayed();
+    expect(await MessageSigningInputDrawer.signMessageButton.getText()).to.equal(
+      await t('core.signMessage.signButton')
+    );
+
+    await MessageSigningInputDrawer.closeButton.waitForDisplayed();
+    expect(await MessageSigningInputDrawer.closeButton.getText()).to.equal(await t('core.signMessage.closeButton'));
+  }
+
+  async assertSeeFollowingAddressesOnTheDropdownMenu(expectedAddresses: string[]) {
+    await MessageSigningInputDrawer.addressMenu.waitForClickable();
+    const actualAddresses = await (
+      await MessageSigningInputDrawer.addresses
+    ).map(async (address) => await address.getText());
+
+    expect(actualAddresses).to.deep.equal(expectedAddresses);
+  }
+
+  async assertSeeSelectedAddress(expectedAddress: string) {
+    await MessageSigningInputDrawer.selectAddressButton.waitForDisplayed();
+    const actualAddress = await MessageSigningInputDrawer.selectAddressButton.getText();
+    expect(actualAddress).to.equal(expectedAddress);
+  }
+}
+
+export default new MessageSigningInputDrawerAssert();
diff --git a/packages/e2e-tests/src/elements/menuHeader.ts b/packages/e2e-tests/src/elements/menuHeader.ts
@@ -16,6 +16,7 @@ export class MenuHeader {
   private MENU_ADDRESS_BOOK_BUTTON = '//li[@data-testid="header-menu-address-book"]';
   private MENU_ADD_NEW_WALLET_BUTTON = '[data-testid="header-menu-new-wallet"]';
   private MENU_SETTINGS_BUTTON = '//li[@data-testid="header-menu-settings"]';
+  private MENU_SIGN_MESSAGE_BUTTON = '//li[@data-testid="header-menu-sign-message"]';
   private MENU_LOCK_BUTTON = '//li[@data-testid="header-menu-lock"]';
   private MENU_WALLET_OPTION_ITEM = '//button[@data-testid="wallet-option-item"]';
   private MENU_WALLET_OPTION_NAME = '//span[@data-testid="wallet-option-title"]';
@@ -103,6 +104,10 @@ export class MenuHeader {
     return $(this.MENU_SETTINGS_BUTTON);
   }
 
+  get menuSignMessageButton(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.MENU_SIGN_MESSAGE_BUTTON);
+  }
+
   get menuLockButton(): ChainablePromiseElement<WebdriverIO.Element> {
     return $(this.MENU_LOCK_BUTTON);
   }
@@ -198,6 +203,11 @@ export class MenuHeader {
     await this.menuSettingsButton.click();
   }
 
+  async clickSignMessageButton(): Promise<void> {
+    await this.menuSignMessageButton.waitForClickable();
+    await this.menuSignMessageButton.click();
+  }
+
   async clickAddressBookOption(): Promise<void> {
     await this.menuAddressBookButton.click();
   }

diff --git a/packages/e2e-tests/src/elements/settings/MessageSigningAllDoneDrawer.ts b/packages/e2e-tests/src/elements/settings/MessageSigningAllDoneDrawer.ts
@@ -0,0 +1,48 @@
+/* eslint-disable no-undef */
+import CommonDrawerElements from '../CommonDrawerElements';
+import type { ChainablePromiseElement } from 'webdriverio';
+
+class MessageSigningAllDoneDrawer extends CommonDrawerElements {
+  private IMAGE = '[data-testid="result-message-img"]';
+  private TITLE = '[data-testid="result-message-title"]';
+  private DESCRIPTION = '[data-testid="result-message-description"]';
+  private SIGNATURE = '[data-testid="sign-message-signature"]';
+  private COPY_BUTTON = '[data-testid="copy-button"]';
+  private CLOSE_BUTTON = '[data-testid="close-button"]';
+
+  get image(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.IMAGE);
+  }
+
+  get title(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.TITLE);
+  }
+
+  get description(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.DESCRIPTION);
+  }
+
+  get signature(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.SIGNATURE);
+  }
+
+  get copyButton(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.COPY_BUTTON);
+  }
+
+  get closeButton(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.CLOSE_BUTTON);
+  }
+
+  async clickOnCopySignatureToClipboardButton(): Promise<void> {
+    await this.copyButton.waitForClickable();
+    await this.copyButton.click();
+  }
+
+  async clickOnCloseButton(): Promise<void> {
+    await this.closeButton.waitForClickable();
+    await this.closeButton.click();
+  }
+}
+
+export default new MessageSigningAllDoneDrawer();
diff --git a/packages/e2e-tests/src/elements/settings/MessageSigningConfirmationDrawer.ts b/packages/e2e-tests/src/elements/settings/MessageSigningConfirmationDrawer.ts
@@ -0,0 +1,23 @@
+/* eslint-disable no-undef */
+import CommonDrawerElements from '../CommonDrawerElements';
+import type { ChainablePromiseElement } from 'webdriverio';
+
+class MessageSigningConfirmationDrawer extends CommonDrawerElements {
+  private PASSWORD_INPUT = '[data-testid="password-input"]';
+  private SIGN_MESSAGE_BUTTON = '[data-testid="sign-message-button"]';
+  private CLOSE_BUTTON = '[data-testid="close-button"]';
+
+  get passwordInput(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.PASSWORD_INPUT);
+  }
+
+  get signMessageButton(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.SIGN_MESSAGE_BUTTON);
+  }
+
+  get closeButton(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.CLOSE_BUTTON);
+  }
+}
+
+export default new MessageSigningConfirmationDrawer();