test(extension): add assertions for different camera access states

Signed-off-by: wklos-iohk <[email protected]>
input-output-hk · Nov 27, 2024 · d5cb88c · d5cb88c
1 parent 2128b28
commit d5cb88c
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 16 deletions.
diff --git a/...src/views/browser-view/features/multi-wallet/restore-wallet/steps/ScanShieldedMessage.tsx b/...src/views/browser-view/features/multi-wallet/restore-wallet/steps/ScanShieldedMessage.tsx
@@ -216,16 +216,20 @@ export const ScanShieldedMessage: VFC = () => {
     if (scanState === 'blocked') {
       return (
         <Flex flexDirection="column" alignItems="center">
-          <SadEmojiIcon height={40} width={40} />
-          <Text.Label color="secondary">{i18n.t('paperWallet.scanShieldedMessage.cameraAccessBlocked')}</Text.Label>
+          <SadEmojiIcon height={40} width={40} data-testid={'sad-emoji-icon'} />
+          <Text.Label color="secondary" data-testid={'camera-access-blocked-label'}>
+            {i18n.t('paperWallet.scanShieldedMessage.cameraAccessBlocked')}
+          </Text.Label>
         </Flex>
       );
     }
     if (scanState === 'waiting') {
       return (
         <Flex flexDirection="column" alignItems="center">
-          <CameraIcon height={40} width={40} />
-          <Text.Label color="secondary">{i18n.t('paperWallet.scanShieldedMessage.waitingForCameraAccess')}</Text.Label>
+          <CameraIcon height={40} width={40} data-testid={'camera-icon'} />
+          <Text.Label color="secondary" data-testid={'camera-access-prompt-label'}>
+            {i18n.t('paperWallet.scanShieldedMessage.waitingForCameraAccess')}
+          </Text.Label>
         </Flex>
       );
     }

diff --git a/packages/e2e-tests/src/assert/onboarding/ScanYourPrivateQrCodePageAssert.ts b/packages/e2e-tests/src/assert/onboarding/ScanYourPrivateQrCodePageAssert.ts
@@ -5,20 +5,38 @@ import OnboardingCommonAssert from './onboardingCommonAssert';
 import { TimelineSteps } from '../../enums/Onboarding';
 
 class ScanYourPrivateQrCodePageAssert extends OnboardingCommonAssert {
-  async assertSeeScanYourPrivateQrCodePage() {
+  async assertSeeScanYourPrivateQrCodePage(permission: 'granted' | 'denied' | 'prompted') {
     await this.assertSeeStepTitle(await t('paperWallet.scanShieldedMessage.title'));
     const expectedDescription = (await t('paperWallet.scanShieldedMessage.description'))
       .replace('<strong>', '')
       .replace('</strong>', '');
     await this.assertSeeStepSubtitle(expectedDescription);
     await this.assertSeeActiveStepOnProgressTimeline(TimelineSteps.RECOVERY_SETUP);
 
-    await ScanYourPrivateQrCodePage.cameraPreviewBox.waitForDisplayed();
-    await ScanYourPrivateQrCodePage.loaderImage.waitForDisplayed();
-    await ScanYourPrivateQrCodePage.loaderLabel.waitForDisplayed();
-    expect(await ScanYourPrivateQrCodePage.loaderLabel.getText()).to.equal(
-      await t('paperWallet.scanShieldedMessage.lookingForWallet')
-    );
+    if (permission === 'granted') {
+      await ScanYourPrivateQrCodePage.cameraPreviewBox.waitForDisplayed();
+      await ScanYourPrivateQrCodePage.loaderImage.waitForDisplayed();
+      await ScanYourPrivateQrCodePage.loaderLabel.waitForDisplayed();
+      expect(await ScanYourPrivateQrCodePage.loaderLabel.getText()).to.equal(
+        await t('paperWallet.scanShieldedMessage.lookingForWallet')
+      );
+    }
+
+    if (permission === 'denied') {
+      await ScanYourPrivateQrCodePage.sadEmoji.waitForDisplayed();
+      await ScanYourPrivateQrCodePage.cameraAccessBlockedLabel.waitForDisplayed();
+      expect(await ScanYourPrivateQrCodePage.cameraAccessBlockedLabel.getText()).to.equal(
+        await t('paperWallet.scanShieldedMessage.cameraAccessBlocked')
+      );
+    }
+
+    if (permission === 'prompted') {
+      await ScanYourPrivateQrCodePage.cameraIcon.waitForDisplayed();
+      await ScanYourPrivateQrCodePage.cameraAccessPromptLabel.waitForDisplayed();
+      expect(await ScanYourPrivateQrCodePage.cameraAccessPromptLabel.getText()).to.equal(
+        await t('paperWallet.scanShieldedMessage.waitingForCameraAccess')
+      );
+    }
 
     await this.assertSeeBackButton();
   }

diff --git a/packages/e2e-tests/src/elements/onboarding/ScanYourPrivateQrCodePage.ts b/packages/e2e-tests/src/elements/onboarding/ScanYourPrivateQrCodePage.ts
@@ -3,10 +3,30 @@ import { ChainablePromiseElement } from 'webdriverio';
 import CommonOnboardingElements from './commonOnboardingElements';
 
 class ScanYourPrivateQrCodePage extends CommonOnboardingElements {
+  private SAD_EMOJI = '[data-testid="sad-emoji-icon"]';
+  private CAMERA_ACCESS_BLOCKED_LABEL = '[data-testid="camera-access-blocked-label"]';
+  private CAMERA_ICON = '[data-testid="camera-icon"]';
+  private CAMERA_ACCESS_PROMPT_LABEL = '[data-testid="camera-access-prompt-label"]';
   private CAMERA_PREVIEW_BOX = '[data-testid="camera-preview-box"]';
   private LOADER_IMAGE = '[data-testid="loader-image"]';
   private LOADER_LABEL = '[data-testid="loader-label"]';
 
+  get sadEmoji(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.SAD_EMOJI);
+  }
+
+  get cameraAccessBlockedLabel(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.CAMERA_ACCESS_BLOCKED_LABEL);
+  }
+
+  get cameraIcon(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.CAMERA_ICON);
+  }
+
+  get cameraAccessPromptLabel(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.CAMERA_ACCESS_PROMPT_LABEL);
+  }
+
   get cameraPreviewBox(): ChainablePromiseElement<WebdriverIO.Element> {
     return $(this.CAMERA_PREVIEW_BOX);
   }

diff --git a/packages/e2e-tests/src/features/OnboardingRestorePaperWallet.feature b/packages/e2e-tests/src/features/OnboardingRestorePaperWallet.feature
@@ -3,11 +3,10 @@ Feature: Onboarding - Paper Wallet - Restore wallet
 
   @LW-11168
   Scenario: Onboarding - Restore - Choose a recovery method - Paper Wallet - click "Next" button
-    Given Set camera access permission: granted
     When I click "Restore" button on wallet setup page
     And I select "Paper wallet" as a recovery method
     And I click "Next" button during wallet setup
-    Then "Scan your private QR code" page is displayed
+    Then "Scan your private QR code" page is displayed with camera access permission set as "prompted"
 
   @LW-11169
   Scenario: Onboarding - Restore - Choose a recovery method - Paper Wallet - click "Back" button

diff --git a/packages/e2e-tests/src/steps/commonSteps.ts b/packages/e2e-tests/src/steps/commonSteps.ts
@@ -427,6 +427,7 @@ When(/^I wait for main loader to disappear$/, async () => {
   await MainLoader.waitUntilLoaderDisappears();
 });
 
+// FIXME: does not work while executed on CI
 When(
   /^Set camera access permission: (granted|denied|prompted)$/,
   async (permission: 'granted' | 'denied' | 'prompted') => {

diff --git a/packages/e2e-tests/src/steps/onboardingSteps.ts b/packages/e2e-tests/src/steps/onboardingSteps.ts
@@ -543,6 +543,9 @@ When(
   }
 );
 
-Then(/^"Scan your private QR code" page is displayed$/, async () => {
-  await ScanYourPrivateQrCodePageAssert.assertSeeScanYourPrivateQrCodePage();
-});
+Then(
+  /^"Scan your private QR code" page is displayed with camera access permission set as "(granted|denied|prompted)"$/,
+  async (permission: 'granted' | 'denied' | 'prompted') => {
+    await ScanYourPrivateQrCodePageAssert.assertSeeScanYourPrivateQrCodePage(permission);
+  }
+);