diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/PinExtension.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/PinExtension.tsx index cbe7f29e24..286eb4b791 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/PinExtension.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/PinExtension.tsx @@ -14,15 +14,16 @@ export const PinExtension = (): React.ReactElement => {
analytics.sendEventToPostHog(postHogOnboardingActions.onboarding.PIN_EXTENSION_CLICK)} + data-testid="pin-extension-component" > - +
-
{t('browserView.pinExtension.title')}
-

+

{t('browserView.pinExtension.title')}
+

+ icon: }} />

diff --git a/packages/e2e-tests/src/assert/PinWalletExtensionNotificationAssert.ts b/packages/e2e-tests/src/assert/PinWalletExtensionNotificationAssert.ts new file mode 100644 index 0000000000..00044e61a9 --- /dev/null +++ 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 { + 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('', '').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 { + 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 new file mode 100644 index 0000000000..bb3e3b0a6b --- /dev/null +++ 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 { + return $(this.COMPONENT); + } + + get logo(): ChainablePromiseElement { + return $(this.LOGO); + } + + get title(): ChainablePromiseElement { + return $(this.TITLE); + } + + get prompt(): ChainablePromiseElement { + return $(this.PROMPT); + } + + get icon(): ChainablePromiseElement { + 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 index 2bb5d4798e..4eb67f0f78 100755 --- 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 index 7fcae4680b..f19f339e50 100755 --- 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 index a6405721ed..dd578e4dac 100644 --- 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); +});