Merge pull request #274 from cardano-foundation/qa/dtis-419-generate-…

…seed-phrase

QA/DTIS-419-generate-seed-phrase

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: () => {

src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.tsx

@@ -128,10 +128,10 @@ const GenerateSeedPhrase = () => {
         />
       }
     >
-      <h2 data-testid="screen-title">
+      <h2 data-testid={`${pageId}-title`}>
         {i18n.t("generateseedphrase.onboarding.title")}
       </h2>
-      <p data-testid="page-paragraph-top">
+      <p data-testid={`${pageId}-paragraph-top`}>
         {i18n.t("generateseedphrase.onboarding.paragraph.top")}
       </p>
       <MnemonicLengthSegment
@@ -144,7 +144,7 @@ const GenerateSeedPhrase = () => {
         hideSeedPhrase={hideSeedPhrase}
         setHideSeedPhrase={setHideSeedPhrase}
       />
-      <p data-testid="page-paragraph-bottom">
+      <p data-testid={`${pageId}-paragraph-bottom`}>
         {i18n.t("generateseedphrase.onboarding.paragraph.bottom")}
       </p>
       <div className="terms-and-conditions">

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

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
+  };
+}

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();

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() {

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() {

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();

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);
 });

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);
 });

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();
+});