Merge pull request #929 from madfish-solutions/TW-815-Add-contact-Pos…

…itive

TW-815: [e2e] Add contact positive

.github/workflows/code-quality.yml

@@ -45,37 +45,15 @@ jobs:
           TEMPLE_WALLET_API_URL: ${{ vars.TEMPLE_WALLET_API_URL }}
           TEMPLE_WALLET_STATIC_API_URL: ${{ vars.TEMPLE_WALLET_STATIC_API_URL }}
           TEMPLE_WALLET_DEXES_API_URL: ${{ vars.TEMPLE_WALLET_DEXES_API_URL }}
-          DEFAULT_HD_ACCOUNT_SEED_PHRASE: ${{ secrets.DEFAULT_HD_ACCOUNT_SEED_PHRASE }}
-          DEFAULT_HD_ACCOUNT_FIRST_PRIVATE_KEY: ${{ secrets.DEFAULT_HD_ACCOUNT_FIRST_PRIVATE_KEY }}
-          DEFAULT_HD_ACCOUNT_FIRST_HASH_SHORT_FORM: ${{ secrets.DEFAULT_HD_ACCOUNT_FIRST_HASH_SHORT_FORM }}
-          DEFAULT_HD_ACCOUNT_SECOND_PRIVATE_KEY: ${{ secrets.DEFAULT_HD_ACCOUNT_SECOND_PRIVATE_KEY }}
-          DEFAULT_PASSWORD: ${{ secrets.DEFAULT_PASSWORD }}
-          IMPORTED_HD_ACCOUNT_SEED_PHRASE: ${{ secrets.IMPORTED_HD_ACCOUNT_SEED_PHRASE }}
-          IMPORTED_HD_ACCOUNT_FIRST_PRIVATE_KEY: ${{ secrets.IMPORTED_HD_ACCOUNT_FIRST_PRIVATE_KEY }}
-          IMPORTED_HD_ACCOUNT_FIRST_HASH_SHORT_FORM: ${{ secrets.IMPORTED_HD_ACCOUNT_FIRST_HASH_SHORT_FORM }}
-          TEMPLE_WALLET_ROUTE3_AUTH_TOKEN: ${{ vars.TEMPLE_WALLET_ROUTE3_AUTH_TOKEN }}
           TEMPLE_WALLET_MOONPAY_API_KEY: ${{ secrets.TEMPLE_WALLET_MOONPAY_API_KEY }}
-          WATCH_ONLY_PUBLIC_KEY_HASH: ${{ secrets.WATCH_ONLY_PUBLIC_KEY_HASH }}
-          WATCH_ONLY_PUBLIC_KEY_HASH_SHORT_FORM: ${{ secrets.WATCH_ONLY_PUBLIC_KEY_HASH_SHORT_FORM }}
+          TEMPLE_WALLET_ROUTE3_AUTH_TOKEN: ${{ vars.TEMPLE_WALLET_ROUTE3_AUTH_TOKEN }}
 
       - name: Install dependencies and code quality check
         uses: ./.github/workflows/code-quality-check
 
       - name: Create Chrome build
         run: yarn build:chrome
 
-      - name: Perform end-to-end tests
-        uses: ./.github/workflows/e2e
-
-      - name: Upload E2E video to Slack
-        if: failure()
-        uses: adrey/slack-file-upload-action@master
-        with:
-          token: ${{ secrets.SLACK_E2E_VIDEO_UPLOADER_TOKEN }}
-          path: e2e/video-rep/test-runs.mp4
-          channel: temple-test-runs
-          initial_comment: <https://github.com/madfish-solutions/templewallet-extension/pull/${{ github.event.number }}|${{ github.event.pull_request.title }}>  (Run <https://github.com/madfish-solutions/templewallet-extension/actions/runs/${{ github.run_id }}|№${{ github.run_number }}>)
-
       - name: Upload artifact
         uses: actions/upload-artifact@v2
         with:

.github/workflows/manual-builds.yml

@@ -1,4 +1,5 @@
 name: Manual builds
+run-name: Manual build of ${{ github.ref_name }} (Chrome=${{ github.event.inputs.chrome == 'true' || github.event.inputs.chromePlusE2E == 'true' }}; Firefox=${{ github.event.inputs.firefox == 'true' }}; E2E=${{ github.event.inputs.chromePlusE2E == 'true' }})
 
 on:
   workflow_dispatch:
@@ -7,6 +8,10 @@ on:
         type: boolean
         description: Chrome build
         required: false
+      chromePlusE2E:
+        type: boolean
+        description: Chrome build + E2E
+        required: false
       firefox:
         type: boolean
         description: Firefox build
@@ -53,23 +58,49 @@ jobs:
           TEMPLE_WALLET_DEXES_API_URL: ${{ vars.TEMPLE_WALLET_DEXES_API_URL }}
           TEMPLE_WALLET_ROUTE3_AUTH_TOKEN: ${{ vars.TEMPLE_WALLET_ROUTE3_AUTH_TOKEN }}
           TEMPLE_WALLET_MOONPAY_API_KEY: ${{ secrets.TEMPLE_WALLET_MOONPAY_API_KEY }}
+          # [e2e]
+          DEFAULT_HD_ACCOUNT_SEED_PHRASE: ${{ secrets.DEFAULT_HD_ACCOUNT_SEED_PHRASE }}
+          DEFAULT_HD_ACCOUNT_FIRST_PRIVATE_KEY: ${{ secrets.DEFAULT_HD_ACCOUNT_FIRST_PRIVATE_KEY }}
+          DEFAULT_HD_ACCOUNT_FIRST_HASH_SHORT_FORM: ${{ secrets.DEFAULT_HD_ACCOUNT_FIRST_HASH_SHORT_FORM }}
+          DEFAULT_HD_ACCOUNT_SECOND_PRIVATE_KEY: ${{ secrets.DEFAULT_HD_ACCOUNT_SECOND_PRIVATE_KEY }}
+          DEFAULT_PASSWORD: ${{ secrets.DEFAULT_PASSWORD }}
+          IMPORTED_HD_ACCOUNT_SEED_PHRASE: ${{ secrets.IMPORTED_HD_ACCOUNT_SEED_PHRASE }}
+          IMPORTED_HD_ACCOUNT_FIRST_PRIVATE_KEY: ${{ secrets.IMPORTED_HD_ACCOUNT_FIRST_PRIVATE_KEY }}
+          IMPORTED_HD_ACCOUNT_FIRST_HASH_SHORT_FORM: ${{ secrets.IMPORTED_HD_ACCOUNT_FIRST_HASH_SHORT_FORM }}
+          WATCH_ONLY_PUBLIC_KEY_HASH: ${{ secrets.WATCH_ONLY_PUBLIC_KEY_HASH }}
+          WATCH_ONLY_PUBLIC_KEY_HASH_SHORT_FORM: ${{ secrets.WATCH_ONLY_PUBLIC_KEY_HASH_SHORT_FORM }}
+          CONTACT_ADDRESS_PUBLIC_KEY_HASH: ${{ secrets.CONTACT_ADDRESS_PUBLIC_KEY_HASH }}
+          CONTACT_ADDRESS_PUBLIC_KEY_HASH_SHORT_FORM: ${{ secrets.CONTACT_ADDRESS_PUBLIC_KEY_HASH_SHORT_FORM }}
 
       - name: Install dependencies and code quality
         uses: ./.github/workflows/code-quality-check
 
       - name: Create Chrome build
-        if: ${{ github.event.inputs.chrome == 'true' }}
+        if: ${{ github.event.inputs.chrome == 'true' || github.event.inputs.chromePlusE2E == 'true' }}
         run: yarn build:chrome
 
       - name: Upload Chrome artifact
-        if: ${{ github.event.inputs.chrome == 'true' }}
+        if: ${{ github.event.inputs.chrome == 'true' || github.event.inputs.chromePlusE2E == 'true' }}
         uses: actions/upload-artifact@v2
         with:
           name: chrome
           path: dist/chrome.zip
           if-no-files-found: error
           retention-days: 30
 
+      - name: Perform end-to-end tests
+        if: ${{ github.event.inputs.chromePlusE2E == 'true' }}
+        uses: ./.github/workflows/e2e
+
+      - name: Upload E2E video to Slack
+        if: ${{ failure() && github.event.inputs.chromePlusE2E == 'true' }}
+        uses: adrey/slack-file-upload-action@master
+        with:
+          token: ${{ secrets.SLACK_E2E_VIDEO_UPLOADER_TOKEN }}
+          path: e2e/video-rep/test-runs.mp4
+          channel: temple-test-runs
+          initial_comment: <https://github.com/madfish-solutions/templewallet-extension/pull/${{ github.event.number }}|${{ github.event.pull_request.title }}>  (Run <https://github.com/madfish-solutions/templewallet-extension/actions/runs/${{ github.run_id }}|№${{ github.run_number }}>)
+
       - name: Create Firefox build
         if: ${{ github.event.inputs.firefox == 'true' }}
         run: yarn build:firefox

.github/workflows/secrets-setup/action.yml

@@ -47,6 +47,10 @@ inputs:
     required: false
   WATCH_ONLY_PUBLIC_KEY_HASH_SHORT_FORM:
     required: false
+  CONTACT_ADDRESS_PUBLIC_KEY_HASH:
+    required: false
+  CONTACT_ADDRESS_PUBLIC_KEY_HASH_SHORT_FORM:
+    required: false
 
 runs:
   using: 'composite'
@@ -85,4 +89,6 @@ runs:
         IMPORTED_HD_ACCOUNT_FIRST_HASH_SHORT_FORM=${{ inputs.IMPORTED_HD_ACCOUNT_FIRST_HASH_SHORT_FORM }}
         WATCH_ONLY_PUBLIC_KEY_HASH=${{ inputs.WATCH_ONLY_PUBLIC_KEY_HASH }}
         WATCH_ONLY_PUBLIC_KEY_HASH_SHORT_FORM=${{ inputs.WATCH_ONLY_PUBLIC_KEY_HASH_SHORT_FORM }}
+        CONTACT_ADDRESS_PUBLIC_KEY_HASH=${{ inputs.CONTACT_ADDRESS_PUBLIC_KEY_HASH }}
+        CONTACT_ADDRESS_PUBLIC_KEY_HASH_SHORT_FORM=${{ inputs.CONTACT_ADDRESS_PUBLIC_KEY_HASH_SHORT_FORM }}
         EOF

e2e/.env.dist

@@ -11,3 +11,6 @@ IMPORTED_HD_ACCOUNT_FIRST_HASH_SHORT_FORM=
 
 WATCH_ONLY_PUBLIC_KEY_HASH=
 WATCH_ONLY_PUBLIC_KEY_HASH_SHORT_FORM=
+
+CONTACT_ADDRESS_PUBLIC_KEY_HASH=
+CONTACT_ADDRESS_PUBLIC_KEY_HASH_SHORT_FORM=

e2e/package.json

@@ -8,6 +8,7 @@
     "start:dev": "yarn start --tags @dev",
     "start:remove_account": "yarn start --tags @remove_account",
     "start:create_account": "yarn start --tags @create_account",
+    "start:address_book": "yarn start --tags @address_book",
     "test": "yarn start --exit --tags 'not @dev'",
     "ts": "tsc --pretty"
   },

e2e/src/features/address-book.feature

@@ -0,0 +1,18 @@
+Feature: Address book
+@address_book
+  Scenario: As a user, I'd like to add contact
+    Given I have imported an existing account
+
+    And I press Account Icon on the Header page
+    And I am on the AccountsDropdown page
+    And I press Settings Button on the Account Drop-down page
+
+    And I am on the Settings page
+    And I press Address Book Button on the Settings page
+
+    And I am on the AddressBook page
+    And I enter contactPublicKey into Address Input on the Address Book page
+    And I enter shortRandomContent into Name Input on the Address Book page
+    And I press Add Contact Button on the Address Book page
+
+    Then I check if added contact is added and displayed

e2e/src/features/create-new-wallet.feature

@@ -17,6 +17,7 @@ Feature: Create a new wallet
     And I am on the SetWallet page
     And I enter defaultPassword into Password Field on the Register Form page
     And I enter defaultPassword into Repeat Password Field on the Register Form page
+    And I press Analytics Check Box on the Register Form page
     And I press Skip Onboarding Checkbox on the Register Form page
     And I press Accept Terms Checkbox on the Register Form page
     And I press Create Button on the Register Form page

e2e/src/features/delegate.feature

@@ -1,5 +1,5 @@
 Feature: Delegate
-  @dev
+
   Scenario: As a user, i'd like to re-delegate TEZ to a baker
     Given I have imported an existing account
     And I press Selected Network Button on the Network Select page

e2e/src/features/import-existing-wallet.feature

@@ -12,6 +12,7 @@ Feature: Import existing wallet
     And I enter defaultPassword into Password Field on the Register Form page
     And I enter defaultPassword into Repeat Password Field on the Register Form page
     And I press Skip Onboarding Checkbox on the Register Form page
+    And I press Analytics Check Box on the Register Form page
     And I press Accept Terms Checkbox on the Register Form page
     And I press Import Button on the Register Form page
 

e2e/src/features/send.feature

@@ -1,5 +1,5 @@
 Feature: Send
-  @dev
+
   Scenario: As a user, I'd like to send my funds to another account
     Given I have imported an existing account
     And I press Selected Network Button on the Network Select page

e2e/src/page-objects/index.ts

@@ -1,3 +1,4 @@
+import { AddressBookPage } from 'e2e/src/page-objects/pages/address-book.page';
 import { NetworksDropDown } from 'e2e/src/page-objects/pages/drop-down-lists/networks.drop-down';
 import { NewsletterModalPage } from 'e2e/src/page-objects/pages/newsletter-modal.page';
 import { OnRumModalPage } from 'e2e/src/page-objects/pages/on-rum-modal.page';
@@ -53,5 +54,6 @@ export const Pages = {
   OnRumpModal: new OnRumModalPage(),
   NewsletterModal: new NewsletterModalPage(),
   Swap: new SwapPage(),
-  RemoveAccount: new RemoveAccountPage()
+  RemoveAccount: new RemoveAccountPage(),
+  AddressBook: new AddressBookPage()
 };

e2e/src/page-objects/pages/address-book.page.ts

@@ -0,0 +1,31 @@
+import { AddressBookSelectors } from 'src/app/templates/AddressBook/AddressBook.selectors';
+
+import { Page } from 'e2e/src/classes/page.class';
+import { createPageElement, findElement } from 'e2e/src/utils/search.utils';
+import { VERY_SHORT_TIMEOUT } from 'e2e/src/utils/timing.utils';
+
+export class AddressBookPage extends Page {
+  addressInput = createPageElement(AddressBookSelectors.addressInput);
+  nameInput = createPageElement(AddressBookSelectors.nameInput);
+  addContactButton = createPageElement(AddressBookSelectors.addContactButton);
+  contactItem = createPageElement(AddressBookSelectors.contactItem);
+  deleteContactButton = createPageElement(AddressBookSelectors.deleteContactButton);
+  contactOwnLabelText = createPageElement(AddressBookSelectors.contactOwnLabelText);
+
+  async isVisible() {
+    await this.addressInput.waitForDisplayed();
+    await this.nameInput.waitForDisplayed();
+    await this.addContactButton.waitForDisplayed();
+    await this.contactItem.waitForDisplayed();
+    await this.contactOwnLabelText.waitForDisplayed();
+  }
+
+  isContactAdded(hash: string) {
+    return findElement(
+      AddressBookSelectors.contactItem,
+      { hash },
+      VERY_SHORT_TIMEOUT,
+      `The contact with address: '${hash}' not found`
+    );
+  }
+}

e2e/src/page-objects/pages/send.page.ts

@@ -9,6 +9,8 @@ export class SendPage extends Page {
   amountInput = createPageElement(SendFormSelectors.amountInput);
   recipientInput = createPageElement(SendFormSelectors.recipientInput);
   sendButton = createPageElement(SendFormSelectors.sendButton);
+  contactItemButton = createPageElement(SendFormSelectors.contactItemButton);
+  contactHashValue = createPageElement(SendFormSelectors.contactHashValue);
 
   async isVisible() {
     await this.assetDropDown.waitForDisplayed();

e2e/src/page-objects/pages/setWalletPassword.page.ts

@@ -6,13 +6,15 @@ import { createPageElement } from '../../utils/search.utils';
 export class setWalletPage extends Page {
   passwordField = createPageElement(setWalletPasswordSelectors.passwordField);
   repeatPasswordField = createPageElement(setWalletPasswordSelectors.repeatPasswordField);
+  analyticsCheckbox = createPageElement(setWalletPasswordSelectors.analyticsCheckBox);
   skipOnboarding = createPageElement(setWalletPasswordSelectors.skipOnboardingCheckbox);
   acceptTerms = createPageElement(setWalletPasswordSelectors.acceptTermsCheckbox);
   importButton = createPageElement(setWalletPasswordSelectors.importButton);
 
   async isVisible() {
     await this.passwordField.waitForDisplayed();
     await this.repeatPasswordField.waitForDisplayed();
+    await this.analyticsCheckbox.waitForDisplayed();
     await this.skipOnboarding.waitForDisplayed();
     await this.acceptTerms.waitForDisplayed();
   }

e2e/src/step-definitions/address-book.steps.ts

@@ -0,0 +1,22 @@
+import { Given } from '@cucumber/cucumber';
+import { expect } from 'chai';
+
+import { Pages } from 'e2e/src/page-objects';
+import { envVars } from 'e2e/src/utils/env.utils';
+import { MEDIUM_TIMEOUT } from 'e2e/src/utils/timing.utils';
+
+Given(/I check if added contact is added and displayed/, { timeout: MEDIUM_TIMEOUT }, async () => {
+  // Checking if added contact is displaying 'Current contacts' list
+  await Pages.AddressBook.isContactAdded(envVars.CONTACT_ADDRESS_PUBLIC_KEY_HASH);
+
+  // Checking if added contact is displayed in the 'Recipient' drop-down on the Send Page
+  await Pages.Header.templeLogoButton.click();
+  await Pages.Home.isVisible();
+  await Pages.Home.SendButton.click();
+  await Pages.Send.isVisible();
+  await Pages.Send.recipientInput.click();
+  await Pages.Send.contactItemButton.waitForDisplayed();
+
+  const contactHashValue = await Pages.Send.contactHashValue.getText();
+  expect(contactHashValue).eql(envVars.CONTACT_ADDRESS_PUBLIC_KEY_HASH_SHORT_FORM);
+});

e2e/src/step-definitions/common.steps.ts

@@ -44,6 +44,7 @@ Given(/I have imported an existing account/, { timeout: LONG_TIMEOUT }, async ()
   await Pages.SetWallet.isVisible();
   await Pages.SetWallet.passwordField.type(BrowserContext.password);
   await Pages.SetWallet.repeatPasswordField.type(BrowserContext.password);
+  await Pages.SetWallet.analyticsCheckbox.click();
   await Pages.SetWallet.skipOnboarding.click();
   await Pages.SetWallet.acceptTerms.click();
   await Pages.SetWallet.importButton.click();

e2e/src/utils/env.utils.ts

@@ -14,7 +14,9 @@ export const envVars = {
   IMPORTED_HD_ACCOUNT_FIRST_PRIVATE_KEY: getEnv('IMPORTED_HD_ACCOUNT_FIRST_PRIVATE_KEY'),
   IMPORTED_HD_ACCOUNT_FIRST_HASH_SHORT_FORM: getEnv('IMPORTED_HD_ACCOUNT_FIRST_HASH_SHORT_FORM'),
   WATCH_ONLY_PUBLIC_KEY_HASH: getEnv('WATCH_ONLY_PUBLIC_KEY_HASH'),
-  WATCH_ONLY_PUBLIC_KEY_HASH_SHORT_FORM: getEnv('WATCH_ONLY_PUBLIC_KEY_HASH_SHORT_FORM')
+  WATCH_ONLY_PUBLIC_KEY_HASH_SHORT_FORM: getEnv('WATCH_ONLY_PUBLIC_KEY_HASH_SHORT_FORM'),
+  CONTACT_ADDRESS_PUBLIC_KEY_HASH: getEnv('CONTACT_ADDRESS_PUBLIC_KEY_HASH'),
+  CONTACT_ADDRESS_PUBLIC_KEY_HASH_SHORT_FORM: getEnv('CONTACT_ADDRESS_PUBLIC_KEY_HASH_SHORT_FORM')
 };
 
 Object.entries(envVars).forEach(([key, val]) => {

e2e/src/utils/input-data.utils.ts

@@ -17,6 +17,7 @@ export const iEnterValues = {
   defaultSeedPhrase: envVars.DEFAULT_HD_ACCOUNT_SEED_PHRASE,
   defaultPassword: envVars.DEFAULT_PASSWORD,
   watchOnlyPublicKey: envVars.WATCH_ONLY_PUBLIC_KEY_HASH,
+  contactPublicKey: envVars.CONTACT_ADDRESS_PUBLIC_KEY_HASH,
   bakerAddress: '',
   shortRandomContent: generateRandomContent(),
   longRandomContent: 'long random content for test + ' + generateRandomContent(),

e2e/src/utils/search.utils.ts

@@ -9,14 +9,24 @@ const buildTestIDSelector = (testID: string) => `[data-testid="${testID}"]`;
 
 type OtherSelectors = Record<string, string>;
 
-export const findElement = async (testID: string, otherSelectors?: OtherSelectors, timeout = MEDIUM_TIMEOUT) => {
+export const findElement = async (
+  testID: string,
+  otherSelectors?: OtherSelectors,
+  timeout = MEDIUM_TIMEOUT,
+  errorTitle?: string
+) => {
   const selector = buildSelector(testID, otherSelectors);
 
-  return await findElementBySelectors(selector, timeout);
+  return await findElementBySelectors(selector, timeout, errorTitle);
 };
 
-export const findElementBySelectors = async (selectors: string, timeout = MEDIUM_TIMEOUT) => {
-  const element = await BrowserContext.page.waitForSelector(selectors, { visible: true, timeout });
+export const findElementBySelectors = async (selectors: string, timeout = MEDIUM_TIMEOUT, errorTitle?: string) => {
+  const element = await BrowserContext.page.waitForSelector(selectors, { visible: true, timeout }).catch(error => {
+    if (errorTitle && error instanceof Error) {
+      error.message = `${errorTitle}\n` + error.message;
+    }
+    throw error;
+  });
 
   if (isDefined(element)) {
     return element;
@@ -40,11 +50,11 @@ export const findElements = async (testID: string) => {
 class PageElement {
   constructor(public testID: string, public otherSelectors?: OtherSelectors, public notSelectors?: OtherSelectors) {}
 
-  findElement(timeout?: number) {
+  findElement(timeout?: number, errorTitle?: string) {
     let selectors = buildSelector(this.testID, this.otherSelectors);
     if (this.notSelectors) selectors += buildNotSelector(this.notSelectors);
 
-    return findElementBySelectors(selectors, timeout);
+    return findElementBySelectors(selectors, timeout, errorTitle);
   }
   waitForDisplayed(timeout?: number) {
     return this.findElement(timeout);

e2e/src/utils/timing.utils.ts

@@ -6,6 +6,8 @@ export const MEDIUM_TIMEOUT = 30_000;
 
 export const SHORT_TIMEOUT = 15_000;
 
+export const VERY_SHORT_TIMEOUT = 5_000;
+
 export const RETRY_OPTIONS = {
   minTimeout: 300,
   maxRetryTime: 15_000

src/app/pages/NewWallet/setWalletPassword/SetWalletPassword.selectors.ts

@@ -1,6 +1,7 @@
 export enum setWalletPasswordSelectors {
   passwordField = 'Register Form/Password Field',
   repeatPasswordField = 'Register Form/Repeat Password Field',
+  analyticsCheckBox = 'Register Form/Analytics Check Box',
   skipOnboardingCheckbox = 'Register Form/Skip Onboarding Checkbox',
   acceptTermsCheckbox = 'Register Form/Accept Terms Checkbox',
   importButton = 'Register Form/Import Button',

src/app/pages/NewWallet/setWalletPassword/SetWalletPassword.tsx

@@ -242,6 +242,7 @@ export const SetWalletPassword: FC<SetWalletPasswordProps> = ({
           />
         }
         containerClassName="mb-4"
+        testID={setWalletPasswordSelectors.analyticsCheckBox}
       />
 
       <Controller

src/app/templates/AddressBook/AddressBook.selectors.ts

@@ -1,5 +1,8 @@
 export enum AddressBookSelectors {
   addressInput = 'Address Book/Address Input',
   nameInput = 'Address Book/Name Input',
-  addContactButton = 'Address Book/Add Contact Button'
+  addContactButton = 'Address Book/Add Contact Button',
+  contactItem = 'Address Book/Contact Item',
+  deleteContactButton = 'Address Book/Delete Contact Button',
+  contactOwnLabelText = 'Address Book/Contact Own Label Text'
 }