test(extension): add tests for LW-10208

input-output-hk · Feb 24, 2025 · 31fd5b1 · 31fd5b1
1 parent e778f66
commit 31fd5b1
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 6 deletions.
diff --git a/...extension-wallet/src/views/browser-view/features/wallet-setup/components/PinExtension.tsx b/...extension-wallet/src/views/browser-view/features/wallet-setup/components/PinExtension.tsx
@@ -14,15 +14,16 @@ export const PinExtension = (): React.ReactElement => {
     <div
       className={styles.pinExtension}
       onClick={() => analytics.sendEventToPostHog(postHogOnboardingActions.onboarding.PIN_EXTENSION_CLICK)}
+      data-testid="pin-extension-component"
     >
-      <LaceLogoMark className={styles.logo} />
+      <LaceLogoMark className={styles.logo} data-testid="pin-extension-logo" />
       <div className={styles.content}>
-        <h5>{t('browserView.pinExtension.title')}</h5>
-        <p>
+        <h5 data-testid="pin-extension-title">{t('browserView.pinExtension.title')}</h5>
+        <p data-testid="pin-extension-prompt">
           <Trans
             i18nKey="browserView.pinExtension.prompt"
             components={{
-              icon: <ExtensionIcon />
+              icon: <ExtensionIcon data-testid="pin-extension-icon" />
             }}
           />
         </p>

diff --git a/packages/e2e-tests/src/assert/PinWalletExtensionNotificationAssert.ts b/packages/e2e-tests/src/assert/PinWalletExtensionNotificationAssert.ts
@@ -0,0 +1,24 @@
+import PinWalletExtensionNotification from '../elements/PinWalletExtensionNotification';
+import { expect } from 'chai';
+import { t } from '../utils/translationService';
+
+class PinWalletExtensionNotificationAssert {
+  async assertSeeNotification(): Promise<void> {
+    await PinWalletExtensionNotification.component.waitForDisplayed();
+    await PinWalletExtensionNotification.logo.waitForDisplayed();
+    await PinWalletExtensionNotification.title.waitForDisplayed();
+    expect(await PinWalletExtensionNotification.title.getText()).to.equal(await t('browserView.pinExtension.title'));
+    await PinWalletExtensionNotification.prompt.waitForDisplayed();
+    const expectedPrompt = (await t('browserView.pinExtension.prompt')).replace('<icon/>', '').replace(/\s{2,}/g, ' ');
+    const actualPromptText = (await PinWalletExtensionNotification.prompt.getText()).replace('\n', ' ');
+    expect(actualPromptText).to.equal(expectedPrompt);
+    await PinWalletExtensionNotification.icon.waitForDisplayed();
+  }
+
+  async assertDoNotSeeNotificationAfter(seconds: number): Promise<void> {
+    await browser.pause(seconds * 1000);
+    await PinWalletExtensionNotification.component.waitForDisplayed({ reverse: true });
+  }
+}
+
+export default new PinWalletExtensionNotificationAssert();
diff --git a/packages/e2e-tests/src/elements/PinWalletExtensionNotification.ts b/packages/e2e-tests/src/elements/PinWalletExtensionNotification.ts
@@ -0,0 +1,32 @@
+/* global WebdriverIO */
+import type { ChainablePromiseElement } from 'webdriverio';
+
+class PinWalletExtensionNotification {
+  private COMPONENT = '[data-testid="pin-extension-component"]';
+  private LOGO = '[data-testid="pin-extension-logo"]';
+  private TITLE = '[data-testid="pin-extension-title"]';
+  private PROMPT = '[data-testid="pin-extension-prompt"]';
+  private ICON = '[data-testid="pin-extension-icon"]';
+
+  get component(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.COMPONENT);
+  }
+
+  get logo(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.LOGO);
+  }
+
+  get title(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.TITLE);
+  }
+
+  get prompt(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.PROMPT);
+  }
+
+  get icon(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.ICON);
+  }
+}
+
+export default new PinWalletExtensionNotification();
diff --git a/packages/e2e-tests/src/features/OnboardingCreateWallet.part2.feature b/packages/e2e-tests/src/features/OnboardingCreateWallet.part2.feature
@@ -28,12 +28,14 @@ Feature: Onboarding - Create wallet
     When I add characters "qwe" in word 7
     Then "Next" button is disabled during onboarding process
 
-  @LW-2445 @Smoke
+  @LW-2445 @LW-10208 @Smoke
   Scenario: Create Wallet - All done page - happy path
     Given I click "Create" button on wallet setup page
     And I go to "Wallet setup" page from "Create" wallet flow and fill values
     When I click "Enter wallet" button
     Then I see LW homepage
+    And "Pin the wallet extension" notification is displayed
+    And "Pin the wallet extension" notification disappears after 5 seconds
 
   @LW-3060 @memory-snapshot
   Scenario: Extended view - Settings - Analytics enabled/disabled when creating a wallet

diff --git a/packages/e2e-tests/src/features/OnboardingRestoreWallet.part1.feature b/packages/e2e-tests/src/features/OnboardingRestoreWallet.part1.feature
@@ -52,12 +52,14 @@ Feature: Onboarding - Restore wallet
       | N_8J@bne87  |               | empty                                                                   | 3               | empty                                        |
       | N_8J@bne87A | N_8J@bne87    | empty                                                                   | 4               | core.walletSetupRegisterStep.noMatchPassword |
 
-  @LW-2464 @memory-snapshot
+  @LW-2464 @LW-10208 @memory-snapshot
   Scenario: Restore Wallet - All done page - happy path
     Given I click "Restore" button on wallet setup page
     And I go to "Wallet setup" page from "Restore" wallet flow and fill values
     When I click "Enter wallet" button
     Then I see LW homepage
+    And "Pin the wallet extension" notification is displayed
+    And "Pin the wallet extension" notification disappears after 5 seconds
     And valid password is not in snapshot
 
   @LW-3063

diff --git a/packages/e2e-tests/src/steps/onboardingSteps.ts b/packages/e2e-tests/src/steps/onboardingSteps.ts
@@ -35,6 +35,7 @@ import SecureYourPaperWalletPage from '../elements/onboarding/SecureYourPaperWal
 import SaveYourPaperWalletPageAssert from '../assert/onboarding/SaveYourPaperWalletPageAssert';
 import SaveYourPaperWalletPage from '../elements/onboarding/SaveYourPaperWalletPage';
 import ScanYourPrivateQrCodePageAssert from '../assert/onboarding/ScanYourPrivateQrCodePageAssert';
+import PinWalletExtensionNotificationAssert from '../assert/PinWalletExtensionNotificationAssert';
 
 const mnemonicWords: string[] = getTestWallet(TestWalletName.TestAutomationWallet).mnemonic ?? [];
 const invalidMnemonicWords: string[] = getTestWallet(TestWalletName.InvalidMnemonic).mnemonic ?? [];
@@ -549,3 +550,11 @@ Then(
     await ScanYourPrivateQrCodePageAssert.assertSeeScanYourPrivateQrCodePage(permission);
   }
 );
+
+Then(/^"Pin the wallet extension" notification is displayed$/, async () => {
+  await PinWalletExtensionNotificationAssert.assertSeeNotification();
+});
+
+Then(/^"Pin the wallet extension" notification disappears after 5 seconds$/, async () => {
+  await PinWalletExtensionNotificationAssert.assertDoNotSeeNotificationAfter(5);
+});