test(extension): update tests for HW wallet (#1078)

Author: wklos-iohk

packages/common/src/ui/components/Loader/Loader.tsx

@@ -8,5 +8,5 @@ export interface LoaderProps {
 }
 
 export const Loader = ({ className }: LoaderProps): React.ReactElement => (
-  <img src={LoaderIcon} className={cn(styles.loader, { [className]: className })} />
+  <img src={LoaderIcon} className={cn(styles.loader, { [className]: className })} data-testid="loader-image" />
 );

packages/core/src/ui/components/WalletSetupRevamp/WalletSetupConnectHardwareWalletStepRevamp.tsx

@@ -36,7 +36,12 @@ export const WalletSetupConnectHardwareWalletStepRevamp = ({
       )}
       {state === 'error' && (
         <>
-          <img src={ExclamationCircleIcon} className={styles.errorImage} alt="hardware wallet connection error image" />
+          <img
+            src={ExclamationCircleIcon}
+            className={styles.errorImage}
+            alt="hardware wallet connection error image"
+            data-testid="error-image"
+          />
           <Banner message={translations.errorMessage} />
         </>
       )}

packages/e2e-tests/src/assert/onboarding/ConnectYourDevicePageAssert.ts

@@ -0,0 +1,42 @@
+import ConnectYourDevicePage from '../../elements/onboarding/ConnectYourDevicePage';
+import { t } from '../../utils/translationService';
+import { expect } from 'chai';
+import OnboardingCommonAssert from './onboardingCommonAssert';
+
+class ConnectYourDevicePageAssert extends OnboardingCommonAssert {
+  async assertSeeConnectYourDevicePage() {
+    await this.assertSeeStepTitle(await t('core.walletSetupConnectHardwareWalletStepRevamp.title'));
+    // TODO: replace subtitle assertions when USE_TREZOR_HW=true
+    // await this.assertSeeStepSubtitle(await t('core.walletSetupConnectHardwareWalletStepRevamp.subTitle'));
+    await this.assertSeeStepSubtitle(await t('core.walletSetupConnectHardwareWalletStepRevamp.subTitleLedgerOnly'));
+
+    await ConnectYourDevicePage.loader.waitForDisplayed();
+
+    await this.assertSeeBackButton();
+    await this.assertSeeTryAgainButton(false);
+
+    await this.assertSeeLegalLinks();
+    await this.assertSeeHelpAndSupportButton();
+  }
+
+  async assertSeeError(expectedErrorMessage: string) {
+    await ConnectYourDevicePage.errorImage.waitForDisplayed();
+    await ConnectYourDevicePage.banner.container.waitForDisplayed();
+    expect(await ConnectYourDevicePage.banner.description.getText()).to.equal(expectedErrorMessage);
+  }
+
+  async assertSeeTryAgainButton(shouldBeVisible: boolean) {
+    await ConnectYourDevicePage.tryAgainButton.waitForDisplayed({ reverse: !shouldBeVisible });
+    if (shouldBeVisible) {
+      expect(await ConnectYourDevicePage.tryAgainButton.getText()).to.equal(
+        await t('core.walletSetupConnectHardwareWalletStepRevamp.errorCta')
+      );
+    }
+  }
+
+  async assertSeeTryAgainButtonEnabled(shouldBeEnabled: boolean) {
+    await ConnectYourDevicePage.tryAgainButton.waitForEnabled({ reverse: !shouldBeEnabled });
+  }
+}
+
+export default new ConnectYourDevicePageAssert();

packages/e2e-tests/src/assert/onboarding/onboardingConnectHWPageAssert.ts

@@ -0,0 +1,27 @@
+/* eslint-disable no-undef*/
+import CommonOnboardingElements from './commonOnboardingElements';
+import { ChainablePromiseElement } from 'webdriverio';
+import Banner from '../banner';
+
+export class ConnectYourDevicePage extends CommonOnboardingElements {
+  private LOADER_IMAGE = '[data-testid="loader-image"]';
+  private ERROR_IMAGE = '[data-testid="error-image"]';
+
+  get loader(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.LOADER_IMAGE);
+  }
+
+  get errorImage(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.ERROR_IMAGE);
+  }
+
+  get tryAgainButton(): ChainablePromiseElement<WebdriverIO.Element> {
+    return this.nextButton;
+  }
+
+  get banner(): typeof Banner {
+    return Banner;
+  }
+}
+
+export default new ConnectYourDevicePage();

packages/e2e-tests/src/elements/onboarding/ConnectYourDevicePage.ts

@@ -4,20 +4,12 @@ Feature: Onboarding - Hardware wallet
   @LW-3367
   Scenario: Hardware Wallet - Connect button click
     When I click "Connect" button on wallet setup page
-    And I click "OK" button on "Limited support for DApp" modal
-    Then "Connect Hardware Wallet" page is displayed
-
-  @LW-3368
-  Scenario: Hardware wallet - Legal page - next button disabled
-    When I click "Connect" button on wallet setup page
-    And I click "OK" button on "Limited support for DApp" modal
-    And "Next" button is disabled during onboarding process
+    Then "Connect your device" page is displayed
 
   @LW-3374
-  Scenario: Hardware wallet - Connect Hardware Wallet - back button click
+  Scenario: Hardware wallet - Connect your device - back button click
     Given I click "Connect" button on wallet setup page
-    And I click "OK" button on "Limited support for DApp" modal
-    And "Connect Hardware Wallet" page is displayed
+    And "Connect your device" page is displayed
     When I click "Back" button during wallet setup
     Then "Get started" page is displayed
 
@@ -27,10 +19,17 @@ Feature: Onboarding - Hardware wallet
     When "Get started" page is displayed
     Then I see current onboarding page in <mode> mode
     And I click "Connect" button on wallet setup page
-    And I click "OK" button on "Limited support for DApp" modal
-    And "Connect Hardware Wallet" page is displayed
+    And "Connect your device" page is displayed
     Then I see current onboarding page in <mode> mode
     Examples:
       | mode  |
       | dark  |
       | light |
+
+  @LW-10309
+  Scenario: Hardware wallet - Connect your device - "No hardware wallet device was chosen." error
+    When I click "Connect" button on wallet setup page
+    # Step below triggers error by closing HID window
+    And I switch to window with Lace
+    Then "No hardware wallet device was chosen." error is displayed on "Connect your device" page
+    And "Try again" button is enabled on "Connect your device" page

packages/e2e-tests/src/elements/onboarding/connectHardwareWalletPage.ts

@@ -4,11 +4,12 @@ Feature: Trezor Onboarding
   Scenario: Onboarding Trezor wallet
     And I connect, unlock and enter correct pin on Trezor emulator
     Given I click "Connect" button on wallet setup page
-    And I click "OK" button on "Limited support for DApp" modal
-    And I am on "Lace terms of use" page and accept terms
-    And I am on "Help us improve your experience" page
+    # TODO: remove/replace outdated steps
+#    And I click "OK" button on "Limited support for DApp" modal
+#    And I am on "Lace terms of use" page and accept terms
+#    And I am on "Help us improve your experience" page
     When I click "Agree" button on Analytics page
-    And I click Trezor wallet icon
+#    And I click Trezor wallet icon
     And I click "Next" button during wallet setup
     And I select 1 account on Select Account page
     When I click "Next" button during wallet setup
@@ -19,6 +20,6 @@ Feature: Trezor Onboarding
     And I click "Export" on Trezor Connect page
     And I confirm exporting public key on Trezor emulator
     And I switch to window with Lace
-    Then "All done" page is displayed
+#    Then "All done" page is displayed
     When I click "Go to my wallet" button on "All done" page
     Then I see LW homepage

packages/e2e-tests/src/features/OnboardingHardwareWallet.feature

@@ -8,7 +8,6 @@ import Modal from '../elements/modal';
 import ModalAssert from '../assert/modalAssert';
 import OnboardingAnalyticsPage from '../elements/onboarding/analyticsPage';
 import OnboardingCommonAssert from '../assert/onboarding/onboardingCommonAssert';
-import OnboardingConnectHWPageAssert from '../assert/onboarding/onboardingConnectHWPageAssert';
 import OnboardingMainPage from '../elements/onboarding/mainPage';
 import OnboardingMainPageAssert from '../assert/onboarding/onboardingMainPageAssert';
 import OnboardingWalletSetupPage from '../elements/onboarding/walletSetupPage';
@@ -17,7 +16,6 @@ import TokensPageAssert from '../assert/tokensPageAssert';
 import TopNavigationAssert from '../assert/topNavigationAssert';
 import testContext from '../utils/testContext';
 import CommonAssert from '../assert/commonAssert';
-import OnboardingConnectHardwareWalletPage from '../elements/onboarding/connectHardwareWalletPage';
 import SelectAccountPage from '../elements/onboarding/selectAccountPage';
 import { browser } from '@wdio/globals';
 import type { RecoveryPhrase } from '../types/onboarding';
@@ -31,6 +29,7 @@ import { getWalletsFromRepository } from '../fixture/walletRepositoryInitializer
 import OnboardingWalletSetupPageAssert from '../assert/onboarding/onboardingWalletSetupPageAssert';
 import OnboardingAnalyticsBannerAssert from '../assert/onboarding/onboardingAnalyticsBannerAssert';
 import { shuffle } from '../utils/arrayUtils';
+import ConnectYourDevicePageAssert from '../assert/onboarding/ConnectYourDevicePageAssert';
 
 const mnemonicWords: string[] = getTestWallet(TestWalletName.TestAutomationWallet).mnemonic ?? [];
 const invalidMnemonicWords: string[] = getTestWallet(TestWalletName.InvalidMnemonic).mnemonic ?? [];
@@ -160,12 +159,19 @@ Then(/^I select (12|15|24) word passphrase length$/, async (length: RecoveryPhra
   await RecoveryPhrasePage.selectMnemonicLength(length);
 });
 
-Then(/^"Connect Hardware Wallet" page is displayed$/, async () => {
-  await OnboardingConnectHWPageAssert.assertSeeConnectHardwareWalletPage();
+Then(/^"Connect your device" page is displayed$/, async () => {
+  await ConnectYourDevicePageAssert.assertSeeConnectYourDevicePage();
 });
 
-Then(/^I click Trezor wallet icon$/, async () => {
-  await OnboardingConnectHardwareWalletPage.trezorButton.click();
+Then(/^"No hardware wallet device was chosen." error is displayed on "Connect your device" page$/, async () => {
+  await ConnectYourDevicePageAssert.assertSeeError(
+    await t('core.walletSetupConnectHardwareWalletStepRevamp.errorMessage.devicePickerRejected')
+  );
+});
+
+When(/^"Try again" button is enabled on "Connect your device" page$/, async () => {
+  await ConnectYourDevicePageAssert.assertSeeTryAgainButton(true);
+  await ConnectYourDevicePageAssert.assertSeeTryAgainButtonEnabled(true);
 });
 
 Then(/^"Restoring a multi-address wallet\?" modal is displayed$/, async () => {