From 28d58d039c6fd55eee9f48387799fceafd8c0b95 Mon Sep 17 00:00:00 2001 From: Jakub Obstarczyk Date: Tue, 28 Nov 2023 09:54:12 +0100 Subject: [PATCH 1/2] fix: of data-testid for elements --- src/ui/components/Alert/Alert.tsx | 2 ++ src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.tsx | 6 +++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/ui/components/Alert/Alert.tsx b/src/ui/components/Alert/Alert.tsx index 31458d31f..6f085e76f 100644 --- a/src/ui/components/Alert/Alert.tsx +++ b/src/ui/components/Alert/Alert.tsx @@ -19,6 +19,7 @@ const Alert = ({ if (confirmButtonText && actionConfirm) { buttons.push({ + id: "confirm-alert-button", text: confirmButtonText, role: "confirm", handler: () => { @@ -30,6 +31,7 @@ const Alert = ({ if (cancelButtonText) { buttons.push({ + id: "cancel-alert-button", text: cancelButtonText, role: "cancel", handler: () => { diff --git a/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.tsx b/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.tsx index eeaed2fc9..0aa5f058c 100644 --- a/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.tsx +++ b/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.tsx @@ -128,10 +128,10 @@ const GenerateSeedPhrase = () => { /> } > -

+

{i18n.t("generateseedphrase.onboarding.title")}

-

+

{i18n.t("generateseedphrase.onboarding.paragraph.top")}

{ hideSeedPhrase={hideSeedPhrase} setHideSeedPhrase={setHideSeedPhrase} /> -

+

{i18n.t("generateseedphrase.onboarding.paragraph.bottom")}

From d368cc82ecb83de6fa9e5e42f311956686cf2b51 Mon Sep 17 00:00:00 2001 From: Jakub Obstarczyk Date: Tue, 28 Nov 2023 10:04:26 +0100 Subject: [PATCH 2/2] test: new scenarios for generate-seed-phrase.feature --- tests/features/generate-seed-phrase.feature | 26 +++++++++++ tests/helpers/seed-phrase.ts | 18 ++++++++ .../generate-seed-phrase.screen.ts | 45 +++++++------------ tests/screen-objects/onboarding.screen.ts | 4 +- tests/screen-objects/passcode.screen.ts | 28 ++++++------ .../verify-seed-phrase.screen.ts | 11 +++++ .../generate-seed-phrase.steps.ts | 35 ++++++++++++++- tests/steps-definitions/passcode.steps.ts | 5 +++ .../verify-seed-phrase.steps.ts.ts | 6 +++ 9 files changed, 131 insertions(+), 47 deletions(-) create mode 100644 tests/features/generate-seed-phrase.feature create mode 100644 tests/helpers/seed-phrase.ts create mode 100644 tests/screen-objects/verify-seed-phrase.screen.ts create mode 100644 tests/steps-definitions/verify-seed-phrase.steps.ts.ts diff --git a/tests/features/generate-seed-phrase.feature b/tests/features/generate-seed-phrase.feature new file mode 100644 index 000000000..056220cbd --- /dev/null +++ b/tests/features/generate-seed-phrase.feature @@ -0,0 +1,26 @@ +Feature: GenerateSeedPhrase + + Background: + Given user tap Get Started button on Onboarding screen + And user generate passcode on Passcode screen + + Scenario: GenerateSeedPhrase - user can review seed phrase again + Given user choose and save 15 words seed phrase + And tap agree to the Terms and Conditions checkbox on Generate Seed Phrase screen + When user tap Continue button Generate Seed Phrase screen + And tap Cancel button on modal on Generate Seed Phrase screen + Then user can see 15 words seed phrase list on Generate Seed Phrase screen + + Scenario: GenerateSeedPhrase - user can use 15 words seed phrase to see Verify Seed Phrase screen + Given user choose and save 15 words seed phrase + And tap agree to the Terms and Conditions checkbox on Generate Seed Phrase screen + When user tap Continue button Generate Seed Phrase screen + And tap Confirm button on modal on Generate Seed Phrase screen + Then user can see Verify Seed Phrase screen + + Scenario: GenerateSeedPhrase - user can use 24 words seed phrase to see Verify Seed Phrase screen + Given user choose and save 24 words seed phrase + And tap agree to the Terms and Conditions checkbox on Generate Seed Phrase screen + When user tap Continue button Generate Seed Phrase screen + And tap Confirm button on modal on Generate Seed Phrase screen + Then user can see Verify Seed Phrase screen diff --git a/tests/helpers/seed-phrase.ts b/tests/helpers/seed-phrase.ts new file mode 100644 index 000000000..e556524ef --- /dev/null +++ b/tests/helpers/seed-phrase.ts @@ -0,0 +1,18 @@ +import GenerateSeedPhraseScreen from "../screen-objects/generate-seed-phrase.screen.js"; +import {log} from "./logger.js"; + +export function seedPhrase() { + const phrase: string[] = []; + const save = async (phraseLength: number) => { + for (let i = 1; i <= phraseLength; i++) { + const wordValue = await GenerateSeedPhraseScreen.seedPhraseWordText(i).getText(); + log.info(`Word number ${i}: ${wordValue}`); + phrase.push(wordValue); + } + return phrase; + }; + + return { + save + }; +} diff --git a/tests/screen-objects/generate-seed-phrase.screen.ts b/tests/screen-objects/generate-seed-phrase.screen.ts index 1a12aa63b..8b87ea829 100644 --- a/tests/screen-objects/generate-seed-phrase.screen.ts +++ b/tests/screen-objects/generate-seed-phrase.screen.ts @@ -1,39 +1,26 @@ import { expect } from "expect-webdriverio"; export class GenerateSeedPhraseScreen { - get continueButton() { - return $('[data-testid="primary-button"]'); - } - get pageParagraphBottom() { - return $('[data-testid="page-paragraph-bottom"]'); - } - get pageParagraphTop() { - return $('[data-testid="page-paragraph-top"]'); - } - get phrase15WordsButton() { - return $('[data-testid="15-words-segment-button"]'); - } - get phrase24WordsButton() { - return $('[data-testid="24-words-segment-button"]'); - } - get screenTitle() { - return $('[data-testid="screen-title"]'); - } - get termsAndConditionsCheckbox() { - return $('[data-testid="terms-and-conditions-checkbox"]'); - } - get viewSeedPhraseButton() { - return $('[data-testid="reveal-seed-phrase-button"]'); - } - get viewSeedPhraseText() { - return $('[data-testid="seed-phrase-privacy-overlay-text"]'); - } + get cancelAlertButton () { return $("#cancel-alert-button") } + get confirmAlertButton () { return $("#confirm-alert-button") } + get continueButton () { return $("[data-testid=\"primary-button-generate-seed-phrase\"]") } + get pageParagraphBottom () { return $("[data-testid=\"generate-seed-phrase-paragraph-bottom\"]") } + get pageParagraphTop() { return $("[data-testid=\"generate-seed-phrase-paragraph-top\"]") } + //seedPhraseContainerChildrenXpath = + get seedPhraseContainerChildren() { return $$("//div[@data-testid=\"seed-phrase-container\"]/*") } + get screenTitle() { return $("[data-testid=\"generate-seed-phrase-title\"]") } + get termsAndConditionsCheckbox () { return $("[data-testid=\"terms-and-conditions-checkbox\"]") } + get viewSeedPhraseButton () { return $("[data-testid=\"reveal-seed-phrase-button\"]") } + get viewSeedPhraseText () { return $("[data-testid=\"seed-phrase-privacy-overlay-text\"]") } + phraseWordsButton (phraseLength: number) { return $(`[data-testid="${phraseLength.toString()}-words-segment-button"]`) } + seedPhraseWordText (wordNumber: number) { return $(`[data-testid="word-index-${wordNumber.toString()}"]`) } + async screenLoads() { await expect(this.screenTitle).toBeExisting(); await expect(this.pageParagraphTop).toBeDisplayed(); - await expect(this.phrase15WordsButton).toBeDisplayed(); - await expect(this.phrase24WordsButton).toBeDisplayed(); + await expect(this.phraseWordsButton(15)).toBeDisplayed(); + await expect(this.phraseWordsButton(24)).toBeDisplayed(); await expect(this.viewSeedPhraseText).toBeDisplayed(); await expect(this.viewSeedPhraseButton).toBeDisplayed(); await expect(this.pageParagraphBottom).toBeDisplayed(); diff --git a/tests/screen-objects/onboarding.screen.ts b/tests/screen-objects/onboarding.screen.ts index 0a3f0b759..07dac4caf 100644 --- a/tests/screen-objects/onboarding.screen.ts +++ b/tests/screen-objects/onboarding.screen.ts @@ -1,8 +1,8 @@ import { expect } from "expect-webdriverio" export class OnboardingScreen { - get getStartedButton () { return $("[data-testid=\"primary-button\"]") } - get iAlreadyHaveAWalletButton () { return $("[data-testid=\"secondary-button\"]") } + get getStartedButton () { return $("[data-testid=\"primary-button-onboarding\"]") } + get iAlreadyHaveAWalletButton () { return $("[data-testid=\"tertiary-button-onboarding\"]") } async tapOnGetStartedButton() { diff --git a/tests/screen-objects/passcode.screen.ts b/tests/screen-objects/passcode.screen.ts index 190b3ef69..7f95256b0 100644 --- a/tests/screen-objects/passcode.screen.ts +++ b/tests/screen-objects/passcode.screen.ts @@ -4,46 +4,46 @@ import { log } from "../helpers/logger.js"; export class PasscodeScreen { get backArrowIcon() { - return $('[data-testid="back-button"]'); + return $("[data-testid=\"back-button\"]"); } get digit0Button() { - return $('[data-testid="passcode-button-0"]'); + return $("[data-testid=\"passcode-button-0\"]"); } get digit1Button() { - return $('[data-testid="passcode-button-1"]'); + return $("[data-testid=\"passcode-button-1\"]"); } get digit2Button() { - return $('[data-testid="passcode-button-2"]'); + return $("[data-testid=\"passcode-button-2\"]"); } get digit3Button() { - return $('[data-testid="passcode-button-3"]'); + return $("[data-testid=\"passcode-button-3\"]"); } get digit4Button() { - return $('[data-testid="passcode-button-4"]'); + return $("[data-testid=\"passcode-button-4\"]"); } get digit5Button() { - return $('[data-testid="passcode-button-5"]'); + return $("[data-testid=\"passcode-button-5\"]"); } get digit6Button() { - return $('[data-testid="passcode-button-6"]'); + return $("[data-testid=\"passcode-button-6\"]"); } get digit7Button() { - return $('[data-testid="passcode-button-7"]'); + return $("[data-testid=\"passcode-button-7\"]"); } get digit8Button() { - return $('[data-testid="passcode-button-8"]'); + return $("[data-testid=\"passcode-button-8\"]"); } get digit9Button() { - return $('[data-testid="passcode-button-9"]'); + return $("[data-testid=\"passcode-button-9\"]"); } get forgotYourPasscodeButton() { - return $('[data-testid="secondary-button-passcode-login"]'); + return $("[data-testid=\"secondary-button-set-passcode\"]"); } get screenTitle() { - return $('[data-testid="screen-title"]'); + return $("[data-testid=\"set-passcode-title\"]"); } get screenDescriptionText() { - return $('[data-testid="screen-description"]'); + return $("[data-testid=\"set-passcode-description\"]"); } async screenLoads() { diff --git a/tests/screen-objects/verify-seed-phrase.screen.ts b/tests/screen-objects/verify-seed-phrase.screen.ts new file mode 100644 index 000000000..471571dad --- /dev/null +++ b/tests/screen-objects/verify-seed-phrase.screen.ts @@ -0,0 +1,11 @@ +import { expect } from "expect-webdriverio" + +export class VerifySeedPhraseScreen { + get seedPhraseContainer () { return $("[data-testid=\"matching-seed-phrase-container\"]") } + + async screenLoads() { + await expect(this.seedPhraseContainer).toBeDisplayed(); + } +} + +export default new VerifySeedPhraseScreen(); diff --git a/tests/steps-definitions/generate-seed-phrase.steps.ts b/tests/steps-definitions/generate-seed-phrase.steps.ts index e0b465649..73f7368f1 100644 --- a/tests/steps-definitions/generate-seed-phrase.steps.ts +++ b/tests/steps-definitions/generate-seed-phrase.steps.ts @@ -1,6 +1,37 @@ -import { Then } from "@wdio/cucumber-framework"; +import { Given, When, Then } from "@wdio/cucumber-framework"; +import { expect } from "expect-webdriverio" +import { seedPhrase } from "../helpers/seed-phrase.js"; import GenerateSeedPhraseScreen from "../screen-objects/generate-seed-phrase.screen.js"; + +export let seedPhraseWords: string [] = []; + +Given(/^user choose and save (\d+) words seed phrase$/, async function (phraseLength) { + await GenerateSeedPhraseScreen.phraseWordsButton(phraseLength).click(); + await GenerateSeedPhraseScreen.viewSeedPhraseButton.click(); + seedPhraseWords = await seedPhrase().save(phraseLength); +}); + +Given(/^tap agree to the Terms and Conditions checkbox on Generate Seed Phrase screen$/, async function () { + await GenerateSeedPhraseScreen.termsAndConditionsCheckbox.click(); +}); + +When(/^user tap Continue button Generate Seed Phrase screen$/, async function () { + await GenerateSeedPhraseScreen.continueButton.click(); +}); + +When(/^tap Cancel button on modal on Generate Seed Phrase screen$/, async function () { + await GenerateSeedPhraseScreen.cancelAlertButton.click(); +}); + +When(/^tap Confirm button on modal on Generate Seed Phrase screen$/, async function () { + await GenerateSeedPhraseScreen.confirmAlertButton.click(); +}); + Then(/^user can see Generate Seed Phrase screen$/, async function() { - await GenerateSeedPhraseScreen.screenLoads() + await GenerateSeedPhraseScreen.screenLoads(); +}); + +Then(/^user can see (\d+) words seed phrase list on Generate Seed Phrase screen$/, async function (phraseLength: number) { + await expect(await GenerateSeedPhraseScreen.seedPhraseContainerChildren.length).toEqual(phraseLength); }); diff --git a/tests/steps-definitions/passcode.steps.ts b/tests/steps-definitions/passcode.steps.ts index b8cc82aa9..287bf2869 100644 --- a/tests/steps-definitions/passcode.steps.ts +++ b/tests/steps-definitions/passcode.steps.ts @@ -11,6 +11,11 @@ Given(/^user tap Back arrow icon on Passcode screen$/, async function () { await PasscodeScreen.backArrowIcon.click(); }); +Given(/^user generate passcode on Passcode screen$/, async function () { + passcode = await PasscodeScreen.createAndEnterRandomPasscode(); + await PasscodeScreen.enterPasscode(passcode); +}); + When(/^user re-enter passcode on Passcode screen$/, async function() { await PasscodeScreen.enterPasscode(passcode); }); diff --git a/tests/steps-definitions/verify-seed-phrase.steps.ts.ts b/tests/steps-definitions/verify-seed-phrase.steps.ts.ts new file mode 100644 index 000000000..888c3503a --- /dev/null +++ b/tests/steps-definitions/verify-seed-phrase.steps.ts.ts @@ -0,0 +1,6 @@ +import { Then } from "@wdio/cucumber-framework"; +import VerifySeedPhraseScreen from "../screen-objects/verify-seed-phrase.screen.js"; + +Then(/^user can see Verify Seed Phrase screen$/, async function () { + await VerifySeedPhraseScreen.screenLoads(); +});